diff options
Diffstat (limited to 'files/es/mozilla')
215 files changed, 28946 insertions, 0 deletions
diff --git a/files/es/mozilla/add-ons/add-on_manager/index.html b/files/es/mozilla/add-ons/add-on_manager/index.html new file mode 100644 index 0000000000..a36c26e1be --- /dev/null +++ b/files/es/mozilla/add-ons/add-on_manager/index.html @@ -0,0 +1,61 @@ +--- +title: Add-on Manager +slug: Mozilla/Add-ons/Add-on_Manager +translation_of: Mozilla/JavaScript_code_modules/Add-on_Manager +--- +<p>{{ gecko_minversion_header("2.0") }}</p> + +<p>el Add-on Manager es responsable de manejar todos los add-ons instalados en la aplicación. A traves de la informacion de la APIs acerca de todos los add-ons instalados puede ser recuperado y nuevos add-ons pueden ser instalados. Las APIs son diseñadas para ser genericas y soportar diferentes tipos de add-ons.</p> + +<p>Muchas funciones en la interfaz de Add-on Manager operan de manera asincrona retornando resultados a traves de devoluciones de llamadas que se pasan a las funciones . Estas devoluciones pueden ser llamadas inmediatamente, mientras la funcion inicial se esta ejecutando o apenas despues de su ejecución dependiendo de cuando la informacion requerida este disponible.</p> + +<h2 id="Accediendo_add-ons_Instalados">Accediendo add-ons Instalados</h2> + +<p>la informacion acerca de add-ons instalados puede ser recuperada a traves de main <code><a href="/es/Add-ons/Add-on_Manager/AddonManager" title="AddonManager">AddonManager</a></code> API. Todas sus funciones son asincronas, significando que una funcion de devolucion de llamada debe ser pasada para recibir las instancias de <code><a href="/es/Add-ons/Add-on_Manager/Addon" title="Addon">Addon</a></code>. La devolucion de llamada puede solamente ser llamada despues de la funcion de retorno de la API . Por ejemplo:</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/AddonManager.jsm"); + +AddonManager.getAllAddons(function(aAddons) { + // Here aAddons is an array of <code><a href="/es/Add-ons/Add-on_Manager/Addon" title="Addon">Addon</a></code> objects +}); +// This code will execute before the code inside the callback +</pre> + +<p>Notificaciones acerca de cambios de add-ons instalados se envian a cualquier <code><a href="/es/Add-ons/Add-on_Manager/AddonListener" title="AddonListener">AddonListener</a></code> registrado. Deben ser registrados a traves del metodo <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#addAddonListener()" title="AddonManager.addAddonListener()">addAddonListener()</a></code>.</p> + +<h2 id="Instalando_Nuevos_add-ons">Instalando Nuevos add-ons</h2> + +<p>Nuevos add-ons pueden ser instalados usando los metodos <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#getInstallForFile()" title="AddonManager.getInstallForFile()">getInstallForFile()</a></code> o <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#getInstallForURL()" title="AddonManager.getInstallForURL()">getInstallForURL()</a></code> del objeto <code><a href="/es/Add-ons/Add-on_Manager/AddonManager" title="AddonManager">AddonManager</a></code>. Estos pasaran una instancia de <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title="AddonInstall">AddonInstall</a></code> al invocador, el cual puede ser usado para instaladar add-ons:</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/AddonManager.jsm"); + +AddonManager.getInstallForURL("http://www.foo.com/test.xpi", function(aInstall) { + // aInstall is an instance of <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title="AddonInstall">AddonInstall</a></code> + aInstall.install(); +}, "application/x-xpinstall"); +</pre> + +<p>El progreso de <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title='AddonInstall"'>AddonInstall</a></code> puede ser monitoreado usando <code><a href="/es/Add-ons/Add-on_Manager/InstallListener" title="InstallListener">IntallListener</a></code>. Un escucha puede ser registrado por el uso especifico de un metodo <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall#addListener()" title="AddonInstall.addListener()">addListener()</a></code> o por todas las instalaciones usando el metodo <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#addInstallListener()" title="AddonManager.addInstallListener()">addInstallListener()</a></code>.</p> + +<h2 id="Encontrando_updates">Encontrando updates</h2> + +<p>Add-ons pueden ser chekeados por updates usando el metodo <code><a href="/es/Add-ons/Add-on_Manager/Addon#findUpdates()" title="Addon.findUpdates()">findUpdates()</a></code>. Debe pasarse como parametro un <code><a href="/es/Add-ons/Add-on_Manager/UpdateListener" title="UpdateListener">UpdateListener</a></code> para recibir informacion acerca de la compatibilidad asi como tambien la informacion acerca la nueva actualizacion. Cualquier nueva actualizacion es retornada como un <code><a href="/es/Add-ons/Add-on_Manager/AddonInstall" title="AddonInstall">AddonInstall</a></code> el cual esta listo para ser descargado e instalado.</p> + +<p>{{ h1_gecko_minversion("Detectando cambios en los add-ons", "7.0") }}</p> + +<p>Tambien puedes conseguir una lista de add-ons que al iniciar fueron modificados de varias maneras. El metodo <code><a href="/es/Add-ons/Add-on_Manager/AddonManager#getStartupChanges()" title="AddonManager.getStartupChanges()">getStartupChanges()</a></code> permite encontrar que add-ons fueron instalados, eliminados, modificados, habilitados o deshabilitados al iniciar la aplicacion.</p> + +<p>Por ejemplo, para saber los add-ons que fueron deshabilitados al iniciar la aplicacion se utilizaria:</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/AddonManager.jsm"); + +let addonIDs = AddonManager.getStartupChanges(AddonManager.STARTUP_CHANGE_DISABLED); +if (addonIDs.length > 0) { + // addonIDs is now an array of the add-on IDs that have been disabled +alert("Note: " + addonIDs.length + " add-ons have been disabled."); +} +</pre> + +<h2 id="Vease">Vease</h2> + +<p>{{ ListSubpages() }}</p> diff --git a/files/es/mozilla/add-ons/add-on_repository/index.html b/files/es/mozilla/add-ons/add-on_repository/index.html new file mode 100644 index 0000000000..0ef9c73f61 --- /dev/null +++ b/files/es/mozilla/add-ons/add-on_repository/index.html @@ -0,0 +1,159 @@ +--- +title: Add-on Repository +slug: Mozilla/Add-ons/Add-on_Repository +translation_of: Mozilla/JavaScript_code_modules/Add-on_Repository +--- +<p>{{ gecko_minversion_header("2") }}</p> + +<p> </p> + +<p>El repositorio Add-on es responsable de encontrar complementos disponibles, este provee una interface para interactuar con la página <a href="http://addons.mozilla.org" title="http://addons.mozilla.org/">addons.mozilla.org</a> (AMO). Su API provee varias URL que se puede visitar para explorar los complementos del repositorio. El API también ofrece dos formas de buscar y recuperar un vector de <code><a href="/es/docs/Mozilla/Add-ons/Add-on_Manager/Addon">Addon</a></code> instancias: {{ manch("retrieveRecommendedAddons") }}, la cual retorna una lista de complementos recomendados y {{ manch("searchAddons") }}, el cual realiza una búsqueda en el repositorio.</p> + +<p>Estas búsquedas son asíncronas, los resultados se pasan al objeto SearchCallback proporcionado cuando se completa la búsqueda. Los resultados pasados al objeto SearchCallback solo incluyen complementos que son compatibles con la aplicación actual y que aún no están instalados o en proceso de instalación. AddonRepository solo puede procesar una búsqueda a la vez. Una nueva búsqueda fallará inmediatamente si el AddonRepository ya está manejando otra solicitud de búsqueda.</p> + +<p>Para importar el módulo de código del Repositorio Add-on , use:</p> + +<p> </p> + +<pre>Components.utils.import("resource://gre/modules/AddonRepository.jsm"); +</pre> + +<h2 id="Method_overview">Method overview</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>string <a href="#getRecommendedURL()">getRecommendedURL</a>()</code></td> + </tr> + <tr> + <td><code>string <a href="#getSearchURL()">getSearchURL</a>(in string searchTerms)</code></td> + </tr> + <tr> + <td><code>void <a href="#cancelSearch()">cancelSearch</a>()</code></td> + </tr> + <tr> + <td><code>void <a href="#retrieveRecommendedAddons()">retrieveRecommendedAddons</a>(in integer maxResults, in <a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a> callback)</code></td> + </tr> + <tr> + <td><code>void <a href="#searchAddons()">searchAddons</a>(in string searchTerms, in integer maxResults, in <a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a> callback)</code></td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>homepageURL</code></td> + <td><code>string</code></td> + <td>The URL of the repository site's home page.</td> + </tr> + <tr> + <td><code>isSearching</code></td> + <td><code>boolean</code></td> + <td><code>true</code> if a search is currently in progress; otherwise <code>false</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Methods">Methods</h2> + +<h3 id="getRecommendedURL()">getRecommendedURL()</h3> + +<p>Returns the URL that can be visited to see recommended add-ons.</p> + +<pre>string getRecommendedURL();</pre> + +<h6 id="Parameters">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value">Return value</h6> + +<p>An URL indicating the repository's page of recommended add-ons.</p> + +<h3 id="getSearchURL()">getSearchURL()</h3> + +<p>Returns an URL of a web page that can be visited to see search results for the specified search terms.</p> + +<pre>string getSearchURL( + in string searchTerms +);</pre> + +<h6 id="Parameters_2">Parameters</h6> + +<dl> + <dt><code>searchTerms</code></dt> + <dd>Search terms used to search the repository.</dd> +</dl> + +<h6 id="Return_value_2">Return value</h6> + +<p>The URL of the search results page for the specified search terms.</p> + +<h3 id="cancelSearch()">cancelSearch()</h3> + +<p>Cancels the search in progress. Does nothing if there is no search in progress.</p> + +<pre>void cancelSearch();</pre> + +<h6 id="Parameters_3">Parameters</h6> + +<p>None.</p> + +<h3 id="retrieveRecommendedAddons()">retrieveRecommendedAddons()</h3> + +<p>Begins a search for recommended add-ons in the repository. The list of recommended add-ons frequently changes. Results will be passed to the given <code><a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a></code> callback.</p> + +<pre>void retrieveRecommendedAddons( + in integer maxResults, + in SearchCallback callback +);</pre> + +<h6 id="Parameters_4">Parameters</h6> + +<dl> + <dt><code>maxResults</code></dt> + <dd>The maximum number of results to return.</dd> + <dt><code>callback</code></dt> + <dd>The <code><a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a></code> callback to which results will be delivered.</dd> +</dl> + +<h3 id="searchAddons()">searchAddons()</h3> + +<p>Begins a search for add-ons in this repository. Results will be passed to the given callback.</p> + +<pre>string searchAddons( + in string searchTerms, + in integer maxResults, + in SearchCallback callback +);</pre> + +<h6 id="Parameters_5">Parameters</h6> + +<dl> + <dt><code>searchTerms</code></dt> + <dd>The search terms to pass to AMO. The results will match what you would get if you typed this string in the search box on the AMO web site.</dd> + <dt><code>maxResults</code></dt> + <dd>The maximum number of results to return.</dd> + <dt><code>callback</code></dt> + <dd>The <code><a href="/en/Addons/Add-on_Repository/SearchCallback" title="en/Addons/Add-on Repository/SearchCallback">SearchCallback</a></code> callback to pass results to.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/Addons/Interfacing_with_the_Add-on_Repository" title="en/Addons/Interfacing with the Add-on Repository">Interfacing with the Add-on Repository</a></li> +</ul> + +<dl> +</dl> + +<dl> +</dl> diff --git a/files/es/mozilla/add-ons/amo/index.html b/files/es/mozilla/add-ons/amo/index.html new file mode 100644 index 0000000000..0845e54e3d --- /dev/null +++ b/files/es/mozilla/add-ons/amo/index.html @@ -0,0 +1,11 @@ +--- +title: AMO +slug: Mozilla/Add-ons/AMO +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO +--- +<p>{{AddonSidebar}}</p> + +<p>Content to be added.</p> diff --git a/files/es/mozilla/add-ons/amo/policy/contacto/index.html b/files/es/mozilla/add-ons/amo/policy/contacto/index.html new file mode 100644 index 0000000000..be8cdd9998 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/contacto/index.html @@ -0,0 +1,26 @@ +--- +title: Información de contacto de AMO +slug: Mozilla/Add-ons/AMO/Policy/Contacto +translation_of: Mozilla/Add-ons#Contact_us +--- +<p>{{AddonSidebar}}</p> + +<p>Gracias por tu interés en contactar al equipo de Extensiones de Mozilla. Por favor lee esta página cuidadosamente para asegurarte de que tu solicitud se dirija al lugar correcto.</p> + +<h4 id="Soporte_de_Complementos">Soporte de Complementos</h4> + +<p>SI tienes alguna pregunta de soporte con respecto a un complemento en particular, tal como "¿Cómo utilizo este complemento?" o "¿Por qué no funciona de manera apropiada?", por favor contacta al autor del complemento a través de los canales de soporte listados en la página de listado de extensiones.</p> + +<h4 id="Preguntas_sobre_la_Revisión_de_Complementos">Preguntas sobre la Revisión de Complementos</h4> + +<p>Si tienes alguna pregunta acerca de la revisión de un complemento o deseas reportar una violación de políticas, por favor escríbenos a <a href="mailto:amo-editors@mozilla.org">amo-editors@mozilla.org</a>. <strong>Casi todos los reportes de complementos se incluyen bajo esta categoría.</strong> Por favor, asegúrate de incluir un enlace al complemento en cuestión y una descripción detallada de tu pregunta o duda.</p> + +<h4 id="Vulnerabilidades_de_Seguridad_de_un_Complemento">Vulnerabilidades de Seguridad de un Complemento</h4> + +<p>Si has descubierto una vulnerabilidad de seguridad en un complemento, incluso si no está alojado aquí, Mozilla está muy interesada en tu descubrimiento y trabajará con el desarrollador del complemento para corregir el problema lo más pronto posible. Los problemas de seguridad de complementos pueden ser reportados <a href="http://www.mozilla.org/projects/security/security-bugs-policy.html">confidencialmente</a> en <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&component=Add-on%20Security&maketemplate=Add-on%20Security%20Bug&bit-23=1&rep_platform=All&op_sys=All">Bugzilla</a> o por e-mail mediante <a href="mailto:amo-admins@mozilla.org">amo-admins@mozilla.org</a>.</p> + +<h4 id="Funcionalidad_y_Desarrollo_del_Sitio_Web">Funcionalidad y Desarrollo del Sitio Web</h4> + +<p>Si has encontrado un problema con el sitio, nos gustaría solucionarlo. Por favor <a href="https://github.com/mozilla/addons/issues/new">reporta un informe de error</a> en Github, incluyendo la localización del problema y cómo lo encontraste.</p> + +<p><span class="comment seoSummary">How to get in touch with us regarding these policies or your add-on. </span></p> diff --git a/files/es/mozilla/add-ons/amo/policy/index.html b/files/es/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..5fffee1dc8 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,21 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO/Policy +--- +<p>{{AddonSidebar}}</p> + +<p>Mozilla is committed to ensuring a great add-ons experience for our users and developers. Please review the policies below before submitting your add-on.</p> + +<dl> + <dd></dd><dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt> +<dd>Effective January 5, 2016</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Review Process</a></dt> +<dd>Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt> +<dd>How up-and-coming add-ons become featured and what's involved in the process. </dd> <strong><a href="/en-US/Add-ons#Contact_us">Contacting us</a></strong> + + <p> How to get in touch with us regarding these policies or your add-on.</p> + +</dl> diff --git a/files/es/mozilla/add-ons/amo/policy/revisiones/index.html b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html new file mode 100644 index 0000000000..1ae4eed402 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html @@ -0,0 +1,157 @@ +--- +title: Normativas para los complementos +slug: Mozilla/Add-ons/AMO/Policy/Revisiones +translation_of: Mozilla/Add-ons/AMO/Policy/Reviews +--- +<p>{{AddonSidebar}}</p> + +<p>Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</p> + +<p>All add-ons are subject to these policies, regardless of how they are distributed. Add-ons that do not comply with these policies may be subject to rejection or disabling by Mozilla.</p> + +<h2 id="No_Surprises">No Surprises</h2> + +<p>Surprises can be appropriate in many situations, but they are not welcome when user security, privacy and control are at stake. It is extremely important to be as transparent as possible when submitting an add-on. Users should be able to easily discern what the functionality of your add-on is and not be presented with unexpected user experiences after installing it.</p> + +<h3 id="Unexpected_Features">Unexpected Features</h3> + +<p>“Unexpected” features are those that are unrelated to the add-on’s primary function, and are not likely from the add-on name or description to be expected by a user installing that add-on.</p> + +<p>Should an add-on include any unexpected feature that falls into one of the following categories:</p> + +<ul> + <li>Potentially compromises user privacy or security (like sending data to third parties)</li> + <li>Changes default settings like the new tab page, homepage or search engine</li> + <li>Makes unexpected changes to the browser or web content</li> + <li>Includes features or functionality not related to the add-on’s core function(s)</li> +</ul> + +<p>Then the “unexpected” feature(s) must adhere to all of the following requirements:</p> + +<ul> + <li>The add-on description must clearly state what changes the add-on makes.</li> + <li>All changes must be “opt-in”, meaning the user has to take non-default action to enact the change. Changes that prompt users via the permissions system don’t require an additional opt-in.</li> + <li>The opt-in interface must clearly state the name of the add-on requesting the change.</li> +</ul> + +<h2 id="Content">Content</h2> + +<p>Add-ons that make use of Mozilla trademarks must comply with the <a href="https://www.mozilla.org/en-US/foundation/trademarks/policy/">Mozilla Trademark Policy</a>. If the add-on uses “Firefox” in its name, the naming standard the add-on is expected to follow is “<Add-on name> for Firefox”.</p> + +<p>In addition, add-ons listed on addons.mozilla.org (AMO) must adhere to the following policies:</p> + +<ul> + <li>All add-ons submitted for listing on AMO are subject to Mozilla’s <a href="https://www.mozilla.org/en-US/about/legal/acceptable-use/">Conditions of Use</a>.</li> + <li>Add-ons must disclose when payment is required to enable any functionality.</li> + <li>Any add-ons, or add-on content, hosted on Mozilla site(s) must conform to the laws of the United States.</li> + <li>The add-on listing should have an easy-to-read description about everything it does, and any information it collects. Please consult our best practices guide for <a href="https://developer.mozilla.org/en-US/Add-ons/Listing">creating an appealing listing</a>.</li> + <li>Add-ons that are intended for internal or private use, or for distribution testing may not be listed on AMO. Such add-ons may be <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution#Self-distributed_(unlisted)_versions">uploaded for self-distribution</a> instead.</li> + <li>If the add-on is a fork of another add-on, the name must clearly distinguish it from the original and provide a significant difference in functionality and/or code.</li> +</ul> + +<h2 id="Submission_Guidelines">Submission Guidelines</h2> + +<p>Add-ons must function only as described, and should provide an appealing user experience. Based on the description of the add-on, a user must be able to understand and use the add-on’s features without requiring expert knowledge. Tips on how to create a good user experience for your add-on can be found <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_experience_best_practices">here</a>.</p> + +<p>During review, the add-on undergoes basic testing in addition to code review. To facilitate the functional testing, the add-on author must provide testing information and, if applicable, testing credentials required to use the add-on if an account is needed for any part of the add-on’s functionality.</p> + +<p>Issues brought up during review must be addressed using best efforts. If corrections have been requested, the new version should not contain unrelated changes, as this complicates the review process and can lead to further rejections.</p> + +<h3 id="Source_Code_Submission">Source Code Submission</h3> + +<p>Add-ons may contain transpiled, obfuscated, minified or otherwise machine-generated code, but Mozilla needs to review a copy of the human-readable source code. The author must provide this information to Mozilla during submission as well as instructions on how to reproduce the build.</p> + +<p>The provided source code will be reviewed by an administrator and will not be redistributed in any way. The code will only be used for the purpose of reviewing the add-on. Failure to provide this information will result in rejection.</p> + +<p>Please read our <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Source_Code_Submission">Source Code Submission guidelines</a> to avoid unexpected rejections.</p> + +<h2 id="Development_Practices">Development Practices</h2> + +<p>In general, developers are free to maintain their add-ons in the manner they choose. However, in order to maintain appropriate data security and effectively review code, we do have certain technical requirements that all add-ons must meet. In particular, potentially dangerous APIs may only be used in ways that are demonstrably safe, and code within add-ons that cannot be verified as behaving safely and correctly may need to be refactored.</p> + +<p>While any code, method or practice in a submitted add-on is subject to review and rejection, the following requirements are of particular importance:</p> + +<ul> + <li>Add-ons must only request those permissions that are necessary for function</li> + <li>Add-ons must be self-contained and not load remote code for execution</li> + <li>Add-ons must use encrypted channels for sending sensitive user data</li> + <li>Add-ons should avoid including duplicate or unnecessary files</li> + <li>Add-on code must be written in a way that is reviewable and understandable. Reviewers may ask you to refactor parts of the code if it is not reviewable.</li> + <li>Add-ons must not negatively impact the performance or stability of Firefox.</li> + <li>Only release versions of third-party libraries and/or frameworks may be included with an add-on. Modifications to these libraries/frameworks are not permitted.</li> +</ul> + +<h2 id="Data_Disclosure_Collection_and_Management">Data Disclosure, Collection and Management</h2> + +<p>You must disclose how the add-on collects, uses, stores and shares user data in the privacy policy field on AMO. Mozilla expects that the add-on limits data collection whenever possible, in keeping with Mozilla’s <a href="https://www.mozilla.org/en-US/about/policy/lean-data/">Lean Data Practices</a> and Mozilla’s <a href="https://www.mozilla.org/en-US/privacy/principles/">Data Privacy Principles</a>, and uses the data only for the purpose for which it was originally collected.</p> + +<p>User data includes all information the add-on collects, regardless of the manner. It can be personal data actively provided by the user (such as a name or email address), technical data (such as operating system, build ID, version numbers, crash reports, activation, updates), and interaction or activity data (add-on activity data, visited URLs, console logs), including interactions with Firefox.</p> + +<p>The add-on’s privacy policy must be the full policy text; it cannot be a link to an externally hosted privacy policy. In addition, the privacy policy must:</p> + +<ul> + <li>be specific and exclusive to the add-on,</li> + <li>clearly describe the purpose of the data collection,</li> + <li>set forth the exact data to be collected,</li> + <li>address the add-on’s particular privacy properties.</li> +</ul> + +<p>A summary of this information must be included in the add-on’s listing description. Finally, you and your add-on must also comply with all applicable data privacy laws as well as any other laws that may apply to your specific add-on.</p> + +<h3 id="User_Interactions_Technical_Data">User Interactions & Technical Data</h3> + +<ul> + <li>Users must be provided a clear way to control this data collection. The control mechanism must be shown during the installation process of the add-on.</li> + <li>Add-ons must only collect information about add-on performance and/or use.</li> + <li>Collecting ancillary information (e.g. any data not explicitly required for the add-on’s basic functionality) is prohibited.</li> +</ul> + +<h3 id="Cookies">Cookies</h3> + +<ul> + <li>If your add-on installs cookies, this must also be disclosed in the add-on’s privacy policy.</li> + <li>The add-on privacy policy must clearly express the placing and purposes of the cookie(s). It is highly recommended that you disclose the types of cookies being used.</li> + <li>Users must be provided an opportunity to refuse the storage of or access to cookies, and must be informed of the consequences of doing so (e.g., without a functional cookie, the add-on may not work).</li> + <li>Installing cookies that are not explicitly required for the add-on’s functionality is prohibited.</li> +</ul> + +<h3 id="Personal_Data">Personal Data</h3> + +<ul> + <li>If you are collecting any personal information, the users must provide affirmative consent (i.e., explicit opt-in from the user). It must be clear to the user that they give consent to the collection of personal data.</li> + <li>Collecting ancillary personal information (e.g., any data not explicitly required for the add-on’s basic functionality) is prohibited.</li> + <li>Any transmission of this type of data must use secure, encrypted connections.</li> +</ul> + +<h3 id="Additional_Privacy_Protocols">Additional Privacy Protocols</h3> + +<ul> + <li>Leaking local or user-sensitive information to websites or other processes (e.g., using native messaging) is prohibited.</li> + <li>If the add-on uses native messaging, the privacy policy must clearly disclose which information is being exchanged with the native application. Data exchanged with the native application must be in accordance with our No Surprises policy.</li> + <li>HTTPS must be used for security and privacy-sensitive operations such as transmitting passwords or tokens.</li> + <li>Browsing data from private browsing sessions must not be stored.</li> + <li>Identity information must not be leaked to web content in private browsing sessions.</li> +</ul> + +<h2 id="Security_Vulnerabilities">Security Vulnerabilities</h2> + +<p>Because add-ons run in an environment with elevated privileges relative to ordinary web pages, they present a very serious set of security considerations. They have the potential to open security holes not only in the add-ons themselves, but also in the browser, in web pages, and, in particularly distressing cases, the entire system the browser is running on.</p> + +<p>As a result, we take our security policies very seriously and apply them to all add-ons, whether hosted on AMO or not. We expect all add-ons to be secure and well-maintained in handling both their own data and their user’s data. They must also securely manage all of their interactions with the web, the browser and the operating system.</p> + +<h2 id="Monetization">Monetization</h2> + +<ul> + <li>Monetization mechanisms must comply with the policies in the <em>Data Disclosure, Collection and Management</em> section. In particular, an add-on must be accompanied with a clear user control mechanism (and opt-in for personal data) presented during the installation or update process of the add-on. Collecting ancillary information for monetization is prohibited.</li> + <li>An add-on injecting advertising into web page content must clearly identify the injected content as originating from the add-on.</li> + <li>The inclusion of any cryptocurrency miners or similar functionality in an add-on is prohibited.</li> + <li>Modifying web content or facilitating redirects to include affiliate promotion tags is not permitted. Conversely, the use of affiliate promotion in user interface elements clearly identified as belonging to the add-on are acceptable.</li> +</ul> + +<h2 id="Compliance_Blocklisting">Compliance & Blocklisting</h2> + +<p>For add-ons that don’t meet these policies, Mozilla may reject or blocklist affected versions or entire add-ons, depending on the extent of their non-compliance.</p> + +<p>Generally, Mozilla will attempt to contact the add-on’s developer(s) and provide a reasonable time frame for the problems to be corrected before a block is deployed. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.</p> + +<p>Mozilla reserves the right to block or delete the developer’s account on addons.mozilla.org, thereby preventing further use of the service.</p> diff --git a/files/es/mozilla/add-ons/code_snippets/index.html b/files/es/mozilla/add-ons/code_snippets/index.html new file mode 100644 index 0000000000..1d5fd8b90d --- /dev/null +++ b/files/es/mozilla/add-ons/code_snippets/index.html @@ -0,0 +1,138 @@ +--- +title: Code snippets +slug: Mozilla/Add-ons/Code_snippets +tags: + - Add-ons + - Code snippets + - Extensions + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Code_snippets +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">{{LegacyAddonsNotice}}</span></p> + +<p>This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in XULRunner applications, as well as in actual Mozilla code itself.</p> + +<p>These examples demonstrate how to accomplish basic tasks that might not be immediately obvious.</p> + +<h2 id="General" name="General">General</h2> + +<dl> + <dt><a href="/en-US/docs/Code_snippets/From_articles" title="/en-US/docs/Code_snippets/From_articles">Examples and demos from MDN articles</a></dt> + <dd>A collection of examples and demos from articles.</dd> + <dt><a href="/en-US/docs/Code_snippets/Windows" title="/en-US/docs/Code_snippets/Windows">Window code</a></dt> + <dd>Opening and manipulating windows</dd> + <dt><a href="/en-US/docs/Code_snippets/Toolbar" title="/en-US/docs/Code_snippets/Toolbar">Toolbar</a></dt> + <dd>Toolbar related code</dd> + <dt><a href="/en-US/docs/Code_snippets/Sidebar" title="/en-US/docs/Code_snippets/Sidebar">Sidebar</a></dt> + <dd>Sidebar related code</dd> + <dt><a href="/en-US/docs/Code_snippets/Forms">Forms</a></dt> + <dd>Forms related code</dd> + <dt><a href="/en-US/docs/Code_snippets/XML" title="/en-US/docs/Code_snippets/XML">XML</a></dt> + <dd>Code used to parse, write, manipulate, etc. XML</dd> + <dt><a href="/en-US/docs/Code_snippets/File_I_O" title="/en-US/docs/Code_snippets/File_I/O">File I/O</a></dt> + <dd>Code used to read, write and process files</dd> + <dt><a href="/en-US/docs/Code_snippets/Drag_&_Drop" title="/en-US/docs/Code_snippets/Drag_&_Drop">Drag & Drop</a></dt> + <dd>Code used to setup and handle drag and drop events</dd> + <dt><a href="/en-US/docs/Code_snippets/Dialogs_and_Prompts" title="/en-US/docs/Code_snippets/Dialogs_and_Prompts">Dialogs</a></dt> + <dd>Code used to display and process dialog boxes</dd> + <dt><a href="/en-US/docs/Code_snippets/Alerts_and_Notifications" title="/en-US/docs/Code snippets/Alerts and Notifications">Alerts and Notifications </a></dt> + <dd>Modal and non-modal ways to notify users</dd> + <dt><a href="/en-US/docs/Code_snippets/Preferences" title="/en-US/docs/Code_snippets/Preferences">Preferences</a></dt> + <dd>Code used to read, write, and modify preferences</dd> + <dt><a href="/en-US/docs/Code_snippets/JS_XPCOM" title="/en-US/docs/Code_snippets/JS_XPCOM">JS XPCOM</a></dt> + <dd>Code used to define and call XPCOM components in JavaScript</dd> + <dt><a href="/en-US/docs/Code_snippets/Running_applications" title="/en-US/docs/Code_snippets/Running_applications">Running applications</a></dt> + <dd>Code used to run other applications</dd> + <dt><a href="/en-US/docs/Code_snippets/Canvas" title="/en-US/docs/Code_snippets/Canvas"><code><canvas></code> related</a></dt> + <dd><a href="/en-US/docs/HTML/Canvas" title="/en-US/docs/HTML/Canvas">WHAT WG Canvas</a>-related code</dd> + <dt><a href="/en-US/docs/Signing_a_XPI" title="/en-US/docs/Signing_a_XPI">Signing a XPI</a></dt> + <dd>How to sign an XPI with PKI</dd> + <dt><a href="/en-US/docs/Code_snippets/Threads">Delayed Execution</a></dt> + <dd>Performing background operations.</dd> + <dt><a href="/en-US/docs/Code_snippets/Miscellaneous" title="/en-US/docs/Code_snippets/Miscellaneous">Miscellaneous</a></dt> + <dd>Miscellaneous useful code fragments</dd> + <dt><a href="/en-US/docs/Code_snippets/HTML_to_DOM" title="/en-US/docs/Code_snippets/HTML_to_DOM">HTML to DOM</a></dt> + <dd>Using a hidden browser element to parse HTML to a window's DOM</dd> +</dl> + +<h2 id="javascript-libraries" name="javascript-libraries">JavaScript libraries</h2> + +<p>Here are some JavaScript libraries that may come in handy.</p> + +<dl> + <dt><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Code_snippets/StringView">StringView</a></dt> + <dd>A library that implements a <code>StringView</code> view for <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a>. This lets you access data in typed arrays using C-like string functions.</dd> + <dt><a href="/en-US/Add-ons/Code_snippets/Rosetta" title="/en-US/docs/Code_snippets/Rosetta">Rosetta</a></dt> + <dd>By default, the only possible standardized scripting language for HTML is <strong>ECMAScript</strong>. Hence, if you are going to use another scripting language you might expect that most of the browsers will not recognize it. Nevertheless, the increasing computational power of modern browsers together with the introduction of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> in ECMAScript allow us, in theory, to build full <a class="external external-icon" href="http://en.wikipedia.org/wiki/Virtual_machine">virtual machines</a> in pure ECMAScript. Therefore, it is also possible, in theory, to use ECMAScript for a smaller task: parsing exotic programming languages (i.e., creating compilers). This snippets shows a possible way to start from.</dd> +</dl> + +<h2 id="Browser-oriented_code" name="Browser-oriented_code">Browser-oriented code</h2> + +<dl> + <dt><a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser">Tabbed browser code</a> (Firefox/SeaMonkey)</dt> + <dd>Basic operations, such as page loading, with the tabbed browser, which is the heart of Mozilla's browser applications</dd> + <dt><a href="/en-US/docs/Code_snippets/Cookies" title="/en-US/docs/Code_snippets/Cookies">Cookies</a></dt> + <dd>Reading, writing, modifying, and removing cookies</dd> + <dt><a href="/en-US/docs/Code_snippets/Page_Loading" title="/en-US/docs/Code_snippets/Page_Loading">Page Loading</a></dt> + <dd>Code used to load pages, reload pages, and listen for page loads</dd> + <dt><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged code</a></dt> + <dd>How to communicate from extensions to websites and vice-versa.</dd> + <dt><a href="/en-US/docs/Code_snippets/Downloading_Files" title="/en-US/docs/Code_snippets/Downloading_Files">Downloading Files</a></dt> + <dd>Code to download files, images, and to monitor download progress</dd> + <dt><a href="/en-US/docs/Code_snippets/Password_Manager" title="/en-US/docs/Code_snippets/Password_Manager">Password Manager</a></dt> + <dd>Code used to read and write passwords to/from the integrated password manager</dd> + <dt><a href="/en-US/docs/Code_snippets/Bookmarks" title="/en-US/docs/Code_snippets/Bookmarks">Bookmarks</a></dt> + <dd>Code used to read and write bookmarks</dd> + <dt><a href="/en-US/docs/Code_snippets/JavaScript_Debugger_Service" title="/en-US/docs/Code_snippets/JavaScript_Debugger_Service">JavaScript Debugger Service</a></dt> + <dd>Code used to interact with the JavaScript Debugger Service</dd> +</dl> + +<h2 id="SVG" name="SVG">SVG</h2> + +<dl> + <dt><a href="/en-US/docs/Code_snippets/SVG_General" title="/en-US/docs/Code_snippets/SVG_General">General</a></dt> + <dd>General information and utilities</dd> + <dt><a href="/en-US/docs/Code_snippets/SVG_Animation" title="/en-US/docs/Code_snippets/SVG_Animation">SVG Animation</a></dt> + <dd>Animate SVG using JavaScript and SMIL</dd> + <dt><a href="/en-US/docs/Code_snippets/SVG_Interacting_with_script" title="/en-US/docs/Code_snippets/SVG_Interacting_with_script">SVG Interacting with Script</a></dt> + <dd>Using JavaScript and DOM events to create interactive SVG</dd> + <dt><a href="/en-US/docs/Code_snippets/Embedding_SVG" title="/en-US/docs/Code_snippets/Embedding_SVG">Embedding SVG in HTML and XUL</a></dt> + <dd>Using SVG to enhance HTML or XUL based markup</dd> +</dl> + +<h2 id="XUL_Widgets" name="XUL_Widgets">XUL Widgets</h2> + +<dl> + <dt><a href="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips" title="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips">HTML in XUL for Rich Tooltips</a></dt> + <dd>Dynamically embed HTML into a XUL element to attain markup in a tooltip</dd> + <dt><a href="/en-US/docs/Code_snippets/Label_and_description" title="/en-US/docs/Code_snippets/Label_and_description">Label and description</a></dt> + <dd>Special uses and line breaking examples</dd> + <dt><a href="/en-US/docs/Code_snippets/Tree" title="/en-US/docs/Code_snippets/Tree">Tree</a></dt> + <dd>Setup and manipulation of trees using XUL and JS</dd> + <dt><a href="/en-US/docs/Code_snippets/Scrollbar" title="/en-US/docs/Code_snippets/Scrollbar">Scrollbar</a></dt> + <dd>Changing style of scrollbars. Applies to scrollbars in browser and iframe as well.</dd> + <dt><a href="/en-US/docs/Code_snippets/Autocomplete" title="/en-US/docs/Code_snippets/Autocomplete">Autocomplete</a></dt> + <dd>Code used to enable form autocomplete in a browser</dd> + <dt><a href="/en-US/docs/Code_snippets/Boxes" title="/en-US/docs/Code_snippets/Boxes">Boxes</a></dt> + <dd>Tips and tricks when using boxes as containers</dd> + <dt><a class="internal" href="/en-US/docs/Code_snippets/Tabbox" title="/en-US/docs/Code snippets/Tabbox">Tabbox</a></dt> + <dd>Removing and manipulating tabs in a tabbox</dd> +</dl> + +<h2 id="Windows-specific" name="Windows-specific">Windows-specific</h2> + +<dl> + <dt><a href="/en-US/docs/Code_snippets/Finding_Window_Handles" title="/en-US/docs/Code_snippets/Finding_Window_Handles">Finding Window Handles (HWND)</a> (Firefox)</dt> + <dd>How to use Windows API calls to find various kinds of Mozilla window handles. Window handles can be used for IPC and Accessibility purposes.</dd> + <dt><a href="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM" title="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM">Using the Windows Registry with XPCOM</a></dt> + <dd>How to read, write, modify, delete, enumerate, and watch registry keys and values.</dd> +</dl> + +<h2 id="External_links" name="External_links">External links</h2> + +<p>The content at <a class="external" href="http://kb.mozillazine.org/Category:Example_code">MozillaZine Example Code</a> is slowly being moved here, but you can still find useful examples there for now.</p> diff --git a/files/es/mozilla/add-ons/code_snippets/queryselector/index.html b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html new file mode 100644 index 0000000000..ff3b7d1258 --- /dev/null +++ b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html @@ -0,0 +1,99 @@ +--- +title: QuerySelector +slug: Mozilla/Add-ons/Code_snippets/QuerySelector +translation_of: Archive/Add-ons/Code_snippets/QuerySelector +--- +<p> {{ fx_minversion_header(3.5) }}</p> + +<p>Siguiendo con lineas de otros frameworks como "jQuery" o "Prototype", acortar el nombre de "querySelector" podria ser conveniente:</p> + +<pre class="brush: js">function $ (selector, el) { + if (!el) {el = document;} + return el.querySelector(selector); +} +function $$ (selector, el) { + if (!el) {el = document;} + return el.querySelectorAll(selector); + // Note: the returned object is a NodeList. + // If you'd like to convert it to a Array for convenience, use this instead: + // return Array.prototype.slice.call(el.querySelectorAll(selector)); +} +alert($('#myID').id); +</pre> + +<p>(Note that while using the Firefox <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Helper_commands">Web Console</a>, the above functions are available automatically.)</p> + +<p>Both XUL and even XML can be easily made supportable (an alternative approach to the following would be to add ChromeWindow.prototype or Window.prototype, accessing this.document.querySelector, or following the jQuery style of chaining by returning 'this' within each prototype method of $()):</p> + +<pre class="brush: js">HTMLDocument.prototype.$ = function (selector) { // Only for HTML + return this.querySelector(selector); +}; + +Example: + +<h1>Test!</h1> +<script> +HTMLDocument.prototype.$ = function (selector) { + return this.querySelector(selector); +}; +alert(document.$('h1')); // [object HTMLHeadingElement] +</script> +</pre> + +<pre class="brush: js">XULDocument.prototype.$ = function (selector) { // Only for XUL + return this.querySelector(selector); +}; + +Example: + +<label value="Test!"/> +<script type="text/javascript"><![CDATA[ +XULDocument.prototype.$ = function (selector) { // Only for XUL + return this.querySelector(selector); +}; + +alert(document.$('label')); // [object XULElement] +]]></script> +</pre> + +<pre class="brush: js">Document.prototype.$ = function (selector) { // Only for plain XML + return this.querySelector(selector); +}; +var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document <foo xmlns="someNS"/> +var bar = foo.createElementNS('someNS', 'bar'); // add <bar xmlns="someNS"/> +foo.documentElement.appendChild(bar); +alert(foo.$('bar').nodeName); // gives 'bar' +</pre> + +<pre class="brush: js">Element.prototype.$ = function (selector) { // Works for HTML, XUL, and plain XML + return this.querySelector(selector); +}; + +HTML example: +<h1><a>Test!<a/></h1> +<script> +Element.prototype.$ = function (selector) { + return this.querySelector(selector); +}; +alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A' + +XUL example: +<hbox><vbox/></hbox> +<script type="text/javascript"><![CDATA[ +Element.prototype.$ = function (selector) { + return this.querySelector(selector); +}; +var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; +alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox +]]></script> + +XML example: +<foo xmlns="someNS"><bar/></foo> in document earlier +var foo = document.getElementsByTagNameNS('someNS', 'foo')[0]; +alert(foo.$('bar')); + +</pre> + +<p>Note that for plain XML, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type ID in XML, though it is in HTML and XUL), nor will it work with <a href="/en/xml/xml:id" title="en/xml/id">xml:id</a>.</p> + +<p>However, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: <a class="external" href="http://www.w3.org/TR/selectors-api/#resolving" rel="freelink">http://www.w3.org/TR/selectors-api/#resolving</a>) (even though CSS3 does support namespaced attribute selectors: <a class="external" href="http://www.w3.org/TR/css3-selectors/#attrnmsp" rel="freelink">http://www.w3.org/TR/css3-selectors/#attrnmsp</a> and potentially xml:id as #: <a class="external" href="http://www.w3.org/TR/css3-selectors/#id-selectors" rel="freelink">http://www.w3.org/TR/css3-selectors/#id-selectors</a> ).</p> diff --git a/files/es/mozilla/add-ons/index.html b/files/es/mozilla/add-ons/index.html new file mode 100644 index 0000000000..5a24f7e862 --- /dev/null +++ b/files/es/mozilla/add-ons/index.html @@ -0,0 +1,104 @@ +--- +title: Complementos +slug: Mozilla/Add-ons +tags: + - Complementos + - Destino + - Mozilla + - extensiones +translation_of: Mozilla/Add-ons +--- +<div>{{AddonSidebar}}</div> + +<div> </div> + +<p><span class="seoSummary">Los complementos permiten a los desarrolladores extender y modificar las funcionalidades de Firefox.</span> Están escritos utilizando las tecnologías estándar Web - JavaScript, HTML y CSS - más algunas APIs dedicadas JavaScript. Entre otras cosas, un complemento puede:</p> + +<ul> + <li>Cambiar la apariencia o el contenido de determinados sitios Web</li> + <li>Modificar la interfaz del usuario de Firefox</li> + <li>Agregar nuevas características a Firefox</li> +</ul> + +<p>Existen varios tipos de complementos, pero el tipo más común son las extensiones.</p> + +<h2 id="Desarrollo_de_las_extensiones">Desarrollo de las extensiones</h2> + +<p>En el pasado, habían varias juegos de herramientas para el desarrollo de las extensiones de Firefox, pero al finalizar el mes de noviembre de 2017, <span id="result_box" lang="es"><span>las extensiones deben crearse utilizando las <a href="/es/Add-ons/WebExtensions">API de WebExtensions</a></span></span>. Los otros juegos de herramientas, incluidos los complementos de overlay, los complementos de bootstrap y el complemento SDK, se espera que queden obsoletos durante el mismo período de tiempo.</p> + +<p>Si usted está escribiendo un nuevo complemento, le recomendamos que utilice la <a href="es/Add-ons/WebExtensions">API de WebExtensions</a>.</p> + +<p>Las WebExtensions están diseñadas para que sean compatibles cross-browser. En la mayoría de los casos podran ser ejecutadas por Chrome, Edge, y Opera con pocos o ningún cambio. También serán completamente compatibles con el multiproceso Firefox.<br> + <br> + <a href="/es/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Vea las APIs soportada actualmente por Firefox y otros navegadores</a>. Seguimos diseñando e implementando nuevas API en respuesta a las necesidades de los desarrolladores.<br> + <br> + La mayoría de las APIs de WebExtensions estarán también disponibles para Firefox para Android.</p> + +<h3 id="Migrar_un_complemento_ya_existente">Migrar un complemento ya existente</h3> + +<p>Si tu mantienes extensiones que están por ser remplazados, tales como XUL overlay, bootstrapped, o extensiones basadas en SDK, le recomendamos que investige como portarlos a WebExtensions. Existen algunos <a href="/en-US/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">recursos de portación en MDN</a>.</p> + +<p>Hemos recolectado <a href="https://wiki.mozilla.org/Add-ons/developer/communication">recursos</a> en una página wiki para proporcionar soporte a los desarrolladores mediante la transición. Para empezar, utilice la herramienta de compatibilidad <a href="https://compatibility-lookup.services.mozilla.com/">Lookup Tool</a> para ver si su herramienta será afectada.</p> + +<h2 id="Publicar_los_complementos">Publicar los complementos</h2> + +<p><a href="https://addons.mozilla.org/es/firefox/">Addons.mozilla.org</a>, comúnmente conocidos como "AMO," es un sitio oficial de Mozilla para que los desarrolladores registren los complementos, y para que los usuarios los descubran. Al subir tu complemento a AMO, puedes participar en nuestra comunidad de usuarios y creadores y encontrar una audiencia para tu complemento.</p> + +<p>No es requerido que tu registres tu complemento en AMO, pero tu complemento será firmado por Mozilla o los usuarios no podrán instalarlos.</p> + +<p>Para obtener una visión general del proceso de publicación de su complemento, consulte <a href="https://developer.mozilla.org/es/Add-ons/Distribution">Firme y distribuya su complemento</a>.</p> + +<h2 id="Otros_tipos_de_complementos">Otros tipos de complementos</h2> + +<p>Además de las extensiones, hay algunos otros tipos de complemento que permiten a los usuarios personalizar Firefox. Estos complementos incluyen:</p> + +<ul> + <li><a href="https://developer.mozilla.org/Add-ons/Themes/Background">Temas ligeros</a> Son una forma sencilla de proporcionar una personalización limitada para Firefox.</li> + <li><a href="/es/Add-ons/Firefox_for_Android">Complementos para móviles</a> son complementos de Firefox para Android. Observe que, aunque, tenemos la intención de reemplazar parte de la tecnología subyacente a estas API. En el futuro, WebExtensions será totalmente compatible con Firefox para Android.</li> + <li><a href="/es/docs/Creating_OpenSearch_plugins_for_Firefox">Plugins de motores de búsqueda</a> agrega nuevos motores de búsqueda a la barra de búsqueda del navegador.</li> + <li><a href="/es/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">Diccionarios del usuario</a> son complementos que le permiten revisar la ortografía en diferentes idiomas.</li> + <li><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Paquetes de idiomas</a> son complementos que le permiten tener más idiomas disponibles para la interfaz de usuario de Firefox.</li> +</ul> + +<hr> +<h2 id="Contáctenos">Contáctenos</h2> + +<p>Puede utilizar los vínculos siguientes para obtener ayuda, mantenerse al día con las noticias sobre los complementos y darnos su opinión.</p> + +<h3 id="Foro_de_complementos">Foro de complementos</h3> + +<p>Use el <a href="https://discourse.mozilla-community.org/c/add-ons">foro de discusión sobre complementos</a> para discutir todos los aspectos del desarrollo de los complementos y para obtener ayuda.</p> + +<h3 id="Listas_de_correo">Listas de correo</h3> + +<p>Utilice la lista <strong>dev-addons</strong> para discutir el desarrollo del ecosistema de complementos, incluyendo el desarrollo del sistema WebExtensions y de AMO:</p> + +<ul> + <li><a href="https://mail.mozilla.org/listinfo/dev-addons">info de la lista dev-addons</a></li> + <li><a href="https://mail.mozilla.org/pipermail/dev-addons/">archivos de dev-addons</a></li> +</ul> + +<p>Utilice la lista <strong>webextensions-support </strong>para obtener ayuda para portar o realizar la transición a WebExtensions:</p> + +<p><a href="https://mail.mozilla.org/listinfo/webextensions-support">webextensions-support lista de información</a><br> + <a href="https://mail.mozilla.org/private/webextensions-support/">webextensions-support archivos</a></p> + +<h3 id="IRC">IRC</h3> + +<p>Si eres un fan de IRC, puedes ponerte en contacto:</p> + +<ul> + <li><a href="irc://irc.mozilla.org/addons">#addons</a> (discusiones sobre el ecosistema de complementos)</li> + <li><a href="irc://irc.mozilla.org/extdev">#extdev</a> (discusión general sobre el desarrollo de los complementos)</li> + <li><a href="irc://irc.mozilla.org/webextensions">#webextensions</a> (discusión alrededor de la API de WebExtensions en particular)</li> +</ul> + +<h3 id="Informar_de_problemas">Informar de problemas</h3> + +<h4 id="Vulnerabilidades_de_seguridad">Vulnerabilidades de seguridad</h4> + +<p>Si descubre una vulnerabilidad de segurida en un complemento, incluso si no está hospedado en un sitio de Mozilla, permítanos saberlo y trabajaremos con el desarrollador para corregir el problema. Por favor, infórmelos <a href="http://www.mozilla.org/projects/security/security-bugs-policy.html">confidencialmente </a>en <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&component=Add-on%20Security&maketemplate=Add-on%20Security%20Bug&bit-23=1&rep_platform=All&op_sys=All">Bugzilla </a>o enviando un correo a <a href="mailto:amo-admins@mozilla.org">amo-admins@mozilla.org</a>.</p> + +<h4 id="Errores_en_addons.mozilla.org_(AMO)">Errores en addons.mozilla.org (AMO)</h4> + +<p>Si encuentra un problema en el sitio, nos encantaría arreglarlo. Por favor, <a href="https://github.com/mozilla/addons/issues/new">presente un informe de error</a> e incluya tantos detalles como sean posibles.</p> diff --git a/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html new file mode 100644 index 0000000000..3c490d101e --- /dev/null +++ b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html @@ -0,0 +1,113 @@ +--- +title: Líneamientos Generales para complementos +slug: Mozilla/Add-ons/Lineamientos_de_complementos +tags: + - Complementos +translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' +--- +<p>Estos lineamientos para complementos se crearon para fomentar una comunidad de desarrolladores de complementos abierta y diversa mientras que al mismo tiempo se garantiza una excelente experiencia de usuario. Se aplican a todos los complementos y actualizaciones complementos independientemente del lugar donde se alojan y también se aplican a las personalizaciones realizadas por instaladores que configuran Firefox sin necesidad de utilizar un complemento. Los complementos alojados en <a class="external text" href="https://addons.mozilla.org/" rel="nofollow">AMO</a> están sujetos a <a href="https://addons.mozilla.org/developers/docs/policies" title="https://addons.mozilla.org/developers/docs/policies">políticas adicionales</a>.</p> +<h2 id="Se_transparente">Se transparente</h2> +<ul> + <li>Los complementos deben instalarse utilizando el sistema complementos web de instalación o ser aprobadas por el usuario mediante el <a class="external text" href="https://blog.mozilla.org/addons/2011/08/11/strengthening-user-control-of-add-ons/" rel="nofollow">diálogo de instalación opt-in</a>. + <ul> + <li>Queremos que nuestros usuarios sepan lo que están instalando para que no tengan una sorpresa desagradable por cambios que no esperaban. También queremos que sepan qué deben remover si deciden no mantenerlo.</li> + <li>Los complementos instalados a través de instaladores de aplicaciones deben <a class="external text" href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" rel="nofollow">usar el Registro de Windows</a> o métodos globales de instalación equivalentes, para que Firefox pueda mostrar la pantalla de opt-in. La pantalla opt-in no debe ser modificada de ninguna manera, incluyendo la sobre posición de información adicional o imágenes sobre esta.</li> + </ul> + </li> + <li>Los complementos deben siempre poder des-instalarse o desactivarse desde el Administrador de complementos. + <ul> + <li>Los complementos instalados globalmente usando el registro de Windows o los directorios de extensiones globales no se pueden desinstalar (<a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=640775" rel="nofollow">bug 640775</a>), pero si pueden desactivarse para producir el mismo efecto.</li> + </ul> + </li> + <li>Los complementos deben utilizar <a class="external text" href="/en-US/docs/Install_manifests#id" rel="nofollow">un único ID</a> durante toda su vida. + <ul> + <li>Usar el mismo ID para múltiples productos o múltiples ID para un mismo producto, puede ocasionar problemas con las actualizaciones automáticas así como conflictos con las lista de bloqueos. Los complementos pueden cambiar sus ID debido a cambios en la propiedad ya que estos comúnmente utilizan un formato de dirección de correo electrónico ( + <i> + Eje.,</i> + personasplus@mozilla.com).</li> + </ul> + </li> + <li>Los complementos no deben usar nombres de marcas registradas, o cualquier otro término de manera que engañe a los usuarios. El uso de las marcas de Mozilla deben seguir <a class="external text" href="http://www.mozilla.org/foundation/trademarks/policy.html" rel="nofollow">nuestras políticas de la marca</a>.</li> + <li>Los complementos deben comunicar claramente su propósito y sus características activas, incluyendo las características introducidas mediante las actualizaciones. + <ul> + <li>Entendemos y apoyamos a los desarrolladores de complementos que deciden monetizar sus productos, pero esto no debería ir en decrimento de la experiencia en la navegación del usuario. Si un complemento inserta anuncios, códigos de afiliados, resultados de búsqueda patrocinados, o cualquier otra funcionalidad parecida en las páginas web, el usuario debe estar en conocimiento de estas funcionalidades cuando el complemento sea instalado. En este mismo sentido, si algunas características requieren de pago para poder ser usadas, o requieren de pago para mantenerse activas luego de un período de prueba, los usuarios deben estar al tanto de esto.</li> + </ul> + </li> +</ul> +<h2 id="Se_Respetuoso_con_los_Usuarios">Se Respetuoso con los Usuarios</h2> +<ul> + <li>Los complementos deben remover todo el código introducido, ejecutables y cambios en las configuraciones cuando estos sean desinstalados. + <ul> + <li>Desinstalar un complemento usando el proceso de desinstalación regular debe ser suficiente. Estos lineamientos aplican principalmente a los cambios realizados a las preferencias tales cómo la página principal, buscador principal, configuraciones de red, entre otras. Estas preferencias deben ser restauradas a sus valores anteriores cuando los complementos sean desinstalados. La mayoría de los complementos pueden fácilmente realizar esto efectuando los cambios mediante un <a class="external text" href="/en-US/docs/Building_an_Extension#Defaults_Files" rel="nofollow">archivo de preferencias por defecto</a>.</li> + </ul> + </li> + <li>Los complementos deben respetar las elecciones de los usuarios y no realizar cambios inesperados o limitar la habilidad de los usuarios de revertir los cambios realizados por estos. + <ul> + <li>Por ejemplo, los usuarios no esperan que un complemento cambie la página principal de Firefox. Preguntar a los usuarios si desean hacer estos cambios extras es siempre recomendado.</li> + <li>Hacer que los cambios en las configuraciones sean difíciles o imposibles de revertir esta prohibido. No esta permitido impedir a los usuarios, otros complementos o instaladores realizar cambios en las configuraciones.</li> + </ul> + </li> + <li>Los complementos deben dejar claro como los datos privados son utilizados. + <ul> + <li>Los complementos que envían data de los usuarios a través de la Internet deben generalmente proveer una Política de Privacidad, idealmente esta debe ser concisa y fácil de leer.</li> + </ul> + </li> + <li>Los desarrolladores de complementos deben proveer algún medio de contacto. + <ul> + <li>Aun cuando los desarrolladores de complementos no están obligados a proveer canales de soporte a los usuarios, esto es recomendable. Todos los desarrolladores de complementos deben tener un canal de contacto o una dirección de correo pública de manera tal que puedan ser contactados en casos de emergencias, como violaciones a los lineamientos que pudieran concluir en un bloqueo definitivo.</li> + </ul> + </li> +</ul> +<h2 id="Se_Seguro">Se Seguro</h2> +<ul> + <li>Los complementos no deben causar daño a los datos, sistemas o identidades en línea de los usuarios.</li> + <li>Los complementos no deben transmitir los datos privados de los usuarios de manera insegura o exponerlos a terceros de manera innecesaria. + <ul> + <li>Los datos privados deberán siempre ser enviados utilizando una conexión segura. Esto incluye los datos de navegación tales como URLs visitadas y marcadores.</li> + <li>Hacer que el navegador sea fácilmente identificable agregando textos a la cadena de datos del User-Agent o agregar encabezados personalizados es también un tema de privacidad que debe ser evitado.</li> + </ul> + </li> + <li>Los complementos no deben crear o exponer vulnerabilidades del sistema o de la aplicación. + <ul> + <li>Los Errores/Bugs de seguridad ocurren, pero una vez descubiertos estos deben ser atendidos inmediatamente. Un complemento popular con alguna vulnerabilidad de seguridad es un vector de ataque interesante para los hackers y en estos casos nos moveremos rápidamente a bloquear el complemento si no hay respuesta inmediata del desarrollador.</li> + </ul> + </li> + <li>Los complementos no deben interferir con la aplicación o bloquear las actualizaciones del sistema.</li> + <li>Los complementos no deben almacenar ningún dato de navegación mientras se encuentren en el Modo Privado de Navegación. + <ul> + <li>Es necesario resaltar que el Modo Privado de Navegación es sobre evitar el almacenamiento <em>local</em> de datos mientras se navega, no sobre enviar datos a otros lados. Para conocer más acerca del MPN recomendamos leer <a class="external text" href="http://ehsanakhgari.org/tag/privatebrowsing" rel="nofollow">las publicaciones del blog de Ehsan's</a> sobre ello.</li> + </ul> + </li> +</ul> +<h2 id="Se_Estable">Se Estable</h2> +<ul> + <li>Los complementos no deben colgarse u ocasionar cierres inesperados.</li> + <li>Los complementos no deben romper o deshabilitar funciones principales de la aplicación. + <ul> + <li>Esto incluye funciones como la navegación mediante pestañas, Modo de Navegación Privado y la barra de ubicaciones. Los complementos que están específicamente creados para hacer esto están excluidos.</li> + </ul> + </li> + <li>Los complementos no deben causar pérdidas en la memoria o consumir innecesariamente grandes cantidades de memoria.</li> + <li>Los complementos no deben reducir el rendimiento de la aplicación o el sistema significativamente.</li> + <li>Los complementos no deben consumir recurso de red de manera tal que afecten el uso regular de la aplicación. + <ul> + <li>Descargar grandes cantidades de datos sin que el usuario no este consiente de ello puede afectar la navegación regular y puede resultar en gastos inesperados para los usuarios que tienen restricciones en el uso de la red (principalmente en móviles)</li> + </ul> + </li> +</ul> +<h2 id="Excepciones">Excepciones</h2> +<ul> + <li>Los complementos pueden romper algunos de estos lineamientos siempre y cuando estos sean los propósitos principales y no exista alguna intención maliciosa ( + <i> + Eje.,</i> + una prueba de concepto para demostrar una debilidad de seguridad).</li> + <li>Los complementos desplegados por administradores dentro de los ambientes de trabajo, escuelas, kioscos, entre otros, están exentos de la mayoría de estos lineamientos.</li> + <li>Los complementos solo pueden correr en código limpio si son desinstalados mientras Firefox esta corriendo y ellos están habilitados, no requerimos que ellos intenten una limpieza posterior cuando sean desinstalados bajo otras circunstancias. Instaladores de aplicaciones que configuran Firefox sin complementos deben revertir cualquier cambio cuando sean desinstalados.</li> + <li>Los complementos pueden dejar atrás los cambios en las preferencias que no afecten a Firefox mientras el complemento este no este activo, de manera tal que cualquier configuración anterior del complemento no se pierda cuando el usuario decida re-instalar el complemento en el futuro.</li> +</ul> +<p>Otras Excepciones pueden aplicar.</p> +<h2 id="Cumplimiento">Cumplimiento</h2> +<p>Los complementos que no sigan estos lineamientos pueden calificar para ser bloqueados, dependiendo en la extensión de las violaciones. Los lineamientos calificados con la palabra <em>debe</em> son especialmente importantes y las violaciones de estos seguramente en una nominación a ser bloqueados.</p> +<p>El equipo de complementos hará lo mejor posible para tratar de contactar al desarrollador de complementos y proveerá un lapso de tiempo razonable para resolver los problemas antes de que el bloqueo se haga efectivo. Si el complemento es considerado malicioso o su desarrollador es imposible de localizar o posee repetitivas violaciones el bloqueo se llevará acabo de inmediato.</p> +<p>Las violaciones de los lineamientos deben ser <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tech%20Evangelism&component=Add-ons" rel="nofollow">reportadas vía Bugzilla</a>, bajo evangelización tecnológica > Complementos. Las preguntas deben ser publicadas en el<a class="external text" href="irc://irc.mozilla.org/addons" rel="nofollow">Canal de IRC #addons</a>.</p> +<p>Estos lineamientos pueden cambiar en futuro. Todas las actualizaciones serán anunciadas en el <a class="external text" href="https://blog.mozilla.org/addons/" rel="nofollow">Blog de complementos</a>.</p> diff --git a/files/es/mozilla/add-ons/overlay_extensions/index.html b/files/es/mozilla/add-ons/overlay_extensions/index.html new file mode 100644 index 0000000000..1522f3ba35 --- /dev/null +++ b/files/es/mozilla/add-ons/overlay_extensions/index.html @@ -0,0 +1,57 @@ +--- +title: Extensiones de Superposición +slug: Mozilla/Add-ons/Overlay_Extensions +tags: + - Extensions + - Overlay + - extensiones +translation_of: Archive/Add-ons/Overlay_Extensions +--- +<p>Esta página contiene enlaces a la documentaciónpara aproximarse al desarrollo de extensiones basadas en aplicaciones Gecko que usa:</p> + +<ul> + <li>Superposiciones XUL para especificar la interfaz</li> + <li>APIs disponibles para código privilegiado como <a href="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> y <a href="/en-US/docs/Mozilla/JavaScript_code_modules">módulos JavaScript</a> para interactuar con la aplicación y el contenido.</li> +</ul> + +<p>Antes de que Gecko 2.0 fuera lanzado esta era la única manera de desarrollar extensiones. Ahora hay dos técnicas alternativas: <a href="/en-US/docs/Extensions/Bootstrapped_extensions">extensionen sin reinicio</a> y <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">extensiones complementarias basadas SDK</a>. Las privilegiadas APIs de JavaScript descriptas aquí, aún pueden ser utilizadas por las técnicas más nuevas.</p> + +<h2 id="Escuela_XUL">Escuela XUL</h2> + +<p><a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">La escuela XUL</a> es una exhaustivo tutorial para el desarrollo de complementos que se enfoca en el desarrollo de extensiones Firefox pero mayoritariamente aplicable a otras aplicaciones basadas en Gecko.</p> + +<h2 id="Más_recursos">Más recursos</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Configurando tu entorno</a></dt> + <dd>Configurar la aplicación para el desarollo de la extensión.</dd> + <dt><a href="/en-US/docs/XUL">XUL</a></dt> + <dd>Tutoriales and referencia para el lenguaje de interfaz de usuario utilizadopor las extensiones XUL.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/Code_snippets">Trozos de códigos</a></dt> + <dd>Código de muestra para muchas de las cosas que querrás hacer.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/Installing_extensions">Instalando extensiones</a></dt> + <dd>Cómo instalar una extensión copiando los archivos de extensión en un directorio de instalación de la aplicación.</dd> + <dt><a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide</a></dt> + <dd>Una guía para desarrollar extensiones de superposición.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules">Módulos de código JavaScript</a></dt> + <dd>Módulos JavaScript disponibles para desarrolladores de extensiones.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/Inline_Options">Preferencias de una extension</a></dt> + <dd>Cómo especificar las preferencias para tu extensión que aparecerá en el administrador de complementos.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/Extension_Frequently_Asked_Questions">Preguntas frecuentes</a></dt> + <dd>Cuestiones comunes en el desarrollo de una extensión.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Empaquetado de la extensión</a></dt> + <dd>Cómo se empaquetan e instalan las extensiones.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Extensiones binarias de Firefox </a></dt> + <dd>Crear extensiones binarias para Firefox.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/es/mozilla/add-ons/sdk/builder/index.html b/files/es/mozilla/add-ons/sdk/builder/index.html new file mode 100644 index 0000000000..be566483c0 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/builder/index.html @@ -0,0 +1,13 @@ +--- +title: Builder +slug: Mozilla/Add-ons/SDK/Builder +translation_of: Archive/Add-ons/Add-on_SDK/Builder +--- +<p>El Builder Add-on fue basado en un ambiente de desarrollo web que permitió a desarrolladores la creación de add-ons usando las APIs de SDK, pero sin tener que usar las herramientas de linea de comando cfx. El cual fue retirado el primero de Abril 2014 y ahora el dominio direccionara a esta pagina "builder.addons.mozilla.org".<br> + <br> + Sí tu solo has usado el SDK a trabes del Builder, probablemente ya sabes lo que necesitas para el desarrollo con en el SDK. En el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs">alto nive</a>l y el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs">bajo nivel</a> de las APIs usadas por Builder add-ons son exactamente la misma para el Builder y SDK. Para cambiar al SDK se necesita:</p> +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">Instalación local del SDK. </a></li> + <li>Conocer las herramientas de línea de comandos cfx, como la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started"> introducción a walkthrough</a> y las <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx">referencias detalladas de cfx</a>.</li> + <li>Conocer los archivos<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json"> packege.json</a> que se usan para configurar atributos de tus add-on.</li> +</ul> diff --git a/files/es/mozilla/add-ons/sdk/index.html b/files/es/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..6681924d2e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/index.html @@ -0,0 +1,84 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +tags: + - Add-on SDK + - Jetpack +translation_of: Archive/Add-ons/Add-on_SDK +--- +<p><span id="result_box" lang="es"><span class="hps">Usando el</span> <span class="hps">Add-on</span> <span class="hps">SDK</span> <span class="hps">puedes crear</span> <span class="hps">complementos de Firefox</span> <span class="hps">utilizando</span> <span class="hps">tecnologías Web estándar</span><span>: JavaScript</span><span>, HTML y</span> <span class="hps">CSS.</span> <span class="hps">El</span> <span class="hps">SDK</span> <span class="hps">incluye una API</span> <span class="hps">de JavaScript</span> <span class="hps">que se puede utilizar</span> <span class="hps">para crear</span> <span class="hps">complementos</span> <span class="hps">y herramientas</span> <span class="hps">para creación,</span> <span class="hps">funcionamiento</span><span>, pruebas y</span> empaquetado de <span class="hps">complementos</span><span>.</span></span></p> + +<hr> +<h3 id="Tutoriales">Tutoriales</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#getting-started">Comencemos</a></dt> + <dd>Como <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalar el SDK</a> y <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">usar el cfx tool</a> para desarrollar, testear y empaquetar complementos.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">Interactuar con el browser</a></dt> + <dd><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Abrir paginas web</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">"escuchar" la carga de paginas</a>, y <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">listar las paginas abiertas</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">Técnicas de desarrollo</a></dt> + <dd>Aprender sobre las técnicas comunes de desarrollo, como las <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">pruebas unitarias</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logueos</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">creacion de modulos reutilizables</a>, <a href="/en-US/Add-ons/SDK/Tutorials/l10n">localizacion</a>, y <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">desarrollo para mobile</a>.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">Creando compenentes para la intefaz de usuario</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Crear</span> <span class="hps">componentes de interfaz de</span> <span class="hps">usuario, tales</span> <span class="hps">como </span></span><a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">botones de barras de herramientas</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">menús </a><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">contextuales</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">elementos de menu</a> y <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">cuadros de dialogo</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">Modificación de páginas web</a></dt> + <dd>Modificar las páginas que <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">coincidan con un patron de URL</a> o dinámicamente <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">modificar una ficha particular</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Juntando todo</a></dt> + <dd>Tutorial del ejemplo de add-on Annotator.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Guias">Guias</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Guide de cómo </a><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">contribuir </a></dt> + <dd>Aprender <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">como empezar a contribuir</a> en la SDK, <span id="result_box" lang="es"><span class="hps">y</span> <span class="hps">sobre</span> <span class="hps">los idiomas</span> <span class="hps">más</span> <span class="hps">importantes que se utilizan</span> <span class="hps">en el código</span> <span class="hps">SDK</span></span>, como los <a href="/en-US/Add-ons/SDK/Guides/Modules">modulos</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">classes y herancias</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">propiedad privada</a>, y <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">procesos de contenido</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDK infrastructura</a></dt> + <dd>Aspectos de la tecnología subyacente de la SDK: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">modulos</a>, la <a href="/en-US/Add-ons/SDK/Guides/Program_ID">identificacion del Programa</a>, <span id="result_box" lang="es"><span>y las reglas</span> <span class="hps">que definen</span> <span class="hps">la </span></span> <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">compatibilidad de </a><a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefox </a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Contentido scripts</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">guía detallada para</span> <span class="hps">trabajar con</span> </span>scripts.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">Idiomas </a><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDK </a></dt> + <dd>Los <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">eventos del framework</a> del SDK y las <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">diferenciación entre add-on scripts y scripts de contenido</a>.</dd> + <dt><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL migración</a></dt> + <dd>Una guía para<a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide"> incluir add-ons </a><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL </a><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">al SDK</a>. Esta guia incluye una comparación <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">de dos conjuntos de herramientas</a> y un <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">ejemplo para trabajar</a> incluyendo un XUL add-on.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Referencias">Referencias</h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/High-Level_APIs">APIs de alto nivel</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">las API</span> <span class="hps">del SDK</span> <span class="hps">de alto nivel.</span></span></dd> + <dt><a href="/en-US/Add-ons/SDK/Tools">Referencias de h</a><a href="/en-US/Add-ons/SDK/Tools">erramientas</a></dt> + <dt><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">la herramienta</span> </span><a href="/en-US/Add-ons/SDK/Tools/cfx">cfx</a> usada para el desarrollo, pruebas, y empaquetado add-ons, la <a href="/en-US/Add-ons/SDK/Tools/console">consola</a> global usada para el registro, el paquete <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a>.</dt> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">APIs de bajo nivel</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Documentación de referencia para</span> <span class="hps">las API</span> <span class="hps">del SDK</span> <span class="hps">de bajo nivel.</span></span></dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html new file mode 100644 index 0000000000..f493c0ab0e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html @@ -0,0 +1,119 @@ +--- +title: Agregar una opción al Menú Contextual +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item +tags: + - Add-on SDK + - Firefox + - Guide +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Context_Menu_Item +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> +</div> + +<p>Para agregar opciones y submenús al menú contextual de Firefox, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p> + +<p>Aquí se presenta un add-on que agrega una nueva opción al menú contextual. La opción es mostrada en cualquier parte donde sea seleccionado algo en la página. Cuando se hace clic, la selección es enviada al código principal del add-on, el cual simplemente lo registra:</p> + +<pre class="brush: js">var contextMenu = require("sdk/context-menu"); + var menuItem = contextMenu.Item({ + label: "Log Selection", + context: contextMenu.SelectionContext(), + contentScript: 'self.on("click", function () {' + + ' var text = window.getSelection().toString();' + + ' self.postMessage(text);' + + '});', + onMessage: function (selectionText) { + console.log(selectionText); + } +});</pre> + +<p>Pruebe lo siguiente: ejecute el add-on, cargue una página web, seleccione algún texto y haga clic derecho sobre el. Debe aparecer una nueva opción:</p> + +<p><img src="https://mdn.mozillademos.org/files/6513/context-menu-selection.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Haga clic en ella, y la selección es <a href="/en-US/Add-ons/SDK/Tutorials/Logging">registrada en la terminal</a>:</p> + +<pre>info: elephantine lizard +</pre> + +<h2 id="Detalles">Detalles</h2> + +<p>Todo lo que hace este add-on es construir una opción en el menú contextual. No se necesita agregarla: una vez construida la opción, esta es agregada automáticamente en el contexto correcto. En este caso el constructor toma cuatro opciones: <code>label</code>, <code>context</code>, <code>contentScript</code>, y <code>onMessage</code>.</p> + +<h3 id="label">label</h3> + +<p>El <code>label</code> es simplemente la cadena de caracteres que es mostrada.</p> + +<h3 id="context">context</h3> + +<p>El <code>context</code> describe las circunstancias en las cuales la opción debe ser mostrada. El módulo <code>context-menu</code> provee varios contextos simples integrados, incluyendo el <code>SelectionContext()</code>, el cual refiere: muestra la opción cuando algo es seleccionado en la página.</p> + +<p>Si estos contextos simples no son suficientes, puede definir contextos más sofisticados usando scripts.</p> + +<h3 id="contentScript">contentScript</h3> + +<p>Este adjunta un script a la opción. En este caso el script escucha hasta que se hace clic en la opción, luego envía un mensaje al add-on que contiene el texto seleccionado.</p> + +<h3 id="onMessage">onMessage</h3> + +<p>La propiedad <code>onMessage</code> proporciona una vía para que el código del add-on responda a los mensajes del script integrado a la opción del menú contextual. En este caso solo registra el texto seleccionado.</p> + +<p>Por lo tanto:</p> + +<ol> + <li>El usuario o la usuaria hace clic en la opción</li> + <li>se activa el evento <code>click</code> del script de contenido, retorna el texto seleccionado y envía un mensaje al add-on</li> + <li>se activa el evento <code>message</code> del add-on, la función responsable en el código del add-on pasa el texto seleccionado, el cual registra</li> +</ol> + +<h2 id="Más_opciones">Más opciones</h2> + +<h3 id="Agregar_una_imágen">Agregar una imágen</h3> + +<p>Se puede agregar una imagen a la opción del menú contextual con la opción <code>image</code>. Esta es una URL que apunta a un icono de tamaño 16x16 que es mostrado a la izquierda de la opción en el menú contextual. Generalmente se guarda la imagen en el directorio "data" del add-on, y se construye la URL usando <code>self.data.url()</code>:</p> + +<pre class="brush: js">var self = require("sdk/self"); + +var contextMenu = require("sdk/context-menu"); +var menuItem = contextMenu.Item({ + label: "Log Selection", + context: contextMenu.SelectionContext(), + contentScript: 'self.on("click", function () {' + + ' var text = window.getSelection().toString();' + + ' self.postMessage(text);' + + '});', + image: self.data.url("icon-16.png"), + onMessage: function (selectionText) { + console.log(selectionText); + } +});</pre> + +<h3 id="Agregar_tecla_de_acceso_directo">Agregar tecla de acceso directo</h3> + +<div class="geckoVersionNote"> +<p>Nuevo en Firefox 35.</p> +</div> + +<p>Desde Firefox 35 es posible especificar una tecla de acceso directo usando la opción <code>accessKey</code>. Esta debe ser una cadena de un solo carácter. Al presionar la tecla se selecciona la opción cuando el menú contextual esta abierto:</p> + +<pre class="brush: js">var contextMenu = require("sdk/context-menu"); +var menuItem = contextMenu.Item({ + label: "Log Selection", + context: contextMenu.SelectionContext(), + contentScript: 'self.on("click", function () {' + + ' var text = window.getSelection().toString();' + + ' self.postMessage(text);' + + '});', + accessKey: "l", + onMessage: function (selectionText) { + console.log(selectionText); + } +}); +</pre> + +<p> </p> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre el módulo <code>context-menu</code>, puede ver la <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu">referencia de la API</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html new file mode 100644 index 0000000000..f30a388a88 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html @@ -0,0 +1,114 @@ +--- +title: Agregar una opción de Menú en Firefox +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Menu_Item_to_Firefox +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> +</div> + +<div class="note"> +<p>Si esta usando <a href="/en-US/Add-ons/SDK/Tools/jpm">jpm</a> en vez de cfx, el método para usar módulos externos es diferente, y debe leer la <a href="/en-US/Add-ons/SDK/Tutorials/Using_third-party_modules_%28jpm%29">versión jmp</a> en vez de esta guía.</p> +</div> + +<p>El SDK aún no posee una API para agregar nuevas opciones de menú a Firefox. Pero su diseño permite que sus funcionalidades sean ampliadas, por lo tanto cualquiera puede desarrollar y publicar módulos para que sean usados por los desarrolladores de add-on. Afortunadamente, Erik Vold escribió el módulo <a href="https://github.com/mykmelez/menuitems-jplib"><code>menuitems</code></a> que permite agregar opciones al menú.</p> + +<p>Este manual cumple con una doble funcionalidad. Describe el método general para usar un módulo externo, de terceras partes en el add-on, y describe como agregar una opción al menú usando el módulo <code>menuitems</code> en particular.</p> + +<p>Primero, cree una nuevo add-on. Cree un directorio llamado "clickme" donde desee, ingrese en el directorio recien creado y ejecute <code>cfx init</code>.</p> + +<pre>mkdir clickme +cd clickme +cfx init +</pre> + +<p>La estructura del directorio sera creada:</p> + +<ul> + <li>clickme + <ul> + <li>data</li> + <li>lib + <ul> + <li>main.js</li> + </ul> + </li> + <li>package.json</li> + <li>tests + <ul> + <li>test-main.js</li> + </ul> + </li> + </ul> + </li> +</ul> + +<div> </div> + +<h2 id="Instalar_menuitems">Instalar <code>menuitems</code></h2> + +<p>Cree un directorio llamado "packages"<span class="rangySelectionBoundary" id="selectionBoundary_1427561968445_34724913431211335" style="display: none; line-height: 0;"></span> dentro del directorio "clickme". Luego descargue el paquete <code>menuitems</code> package desde <a href="https://github.com/mykmelez/menuitems-jplib/zipball/4d6ae5b410d79cc16c9c76920fbaa8a367e44ca7">https://github.com/mykmelez/menuitems-jplib</a> y extraiga el archivo dentro del directorio "packages" que acaba de crear:</p> + +<pre>mkdir packages +cd packages +tar -xf ../erikvold-menuitems-jplib-d80630c.zip +</pre> + +<h2 id="Dependencias_del_Módulo">Dependencias del Módulo</h2> + +<p>Si los módulos de terceras partes solo dependen de los módulos de SDK, puede usarlos inmediatamente, pero si dependen de otros módulos de terceras partes, debe instalar también esas dependencias.</p> + +<p>En el directorio principal del paquete encontrará un archivo llamado "package.json". Abralo y busque una entrada llamada "dependencies". La entrada para el paquete <code>menuitems</code> es:</p> + +<pre>"dependencies": ["vold-utils"] +</pre> + +<p>Esto significa que se debe instalar el paquete <code>vold-utils</code>, lo cual puede hacerse descargándolo desde <a href="https://github.com/mykmelez/vold-utils-jplib/zipball/a321447dc5d613df33023165854957c181dc3174">https://github.com/mykmelez/vold-utils-jplib</a> y agregándolo dentro del directorio <code>packages</code> junto a <code>menuitems</code>.</p> + +<h2 id="Usar_menuitems">Usar <code>menuitems</code></h2> + +<p>La <a href="https://github.com/mykmelez/menuitems-jplib/blob/master/docs/menuitems.md">documentación para el módulo <code>menuitems</code></a> nos dice que creemos una opción del menú usando <code>MenuItem()</code>. De las opciones aceptadas por <code>MenuItem()</code>, usaremos este resumido conjunto:</p> + +<ul> + <li><code>id</code>: identificador para esta opción de menú</li> + <li><code>label</code>: texto que mostrará la opción de menú</li> + <li><code>command</code>: función que se ejecutará cuando se seleccione la opción de menú</li> + <li><code>menuid</code>: identificador del elemento padre de la opción de menú</li> + <li><code>insertbefore</code>: identificador de la opción del menú delante de la cual queremos que aparezca nuestra opción de menú.</li> +</ul> + +<div> +<div> +<pre class="brush: js">var menuitem = require("menuitems").Menuitem({ + id: "clickme", + menuid: "menu_ToolsPopup", + label: "Click Me!", + onCommand: function() { + console.log("clicked"); + }, + insertbefore: "menu_pageInfo" +});</pre> + +<div> </div> +</div> +</div> + +<p>Luego, se debe declarar la dependencia en el paquete <code>menuitems</code>. En el archivo <code>package.json</code> del add-on se agrega:</p> + +<pre>"dependencies": "menuitems" +</pre> + +<p>Note que debido al <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=663480">bug 663480</a>, si agrega una línea <code>dependencies</code> en <code>package.json</code>, y usa cualquier módulo del SDK, tendrá que declarar la dependencia a ese paquete integrado, como sigue:</p> + +<pre>"dependencies": ["menuitems", "addon-sdk"] +</pre> + +<p>Ahora esta todo listo. Ejecute el add-on y verá la nueva opción de menú en el menú <code>Herramientas</code>: seleccionela y verá aparecer en la terminal <code>info: clicked</code>.</p> + +<h2 id="Advertencia">Advertencia</h2> + +<p>Los módulos de terceras partes son una manera genial de usar funcionalidades que no son proporcionadas directamente por SDK, pero debido a que los módulos de terceras partes usan APIs de bajo nivel pueden no funcionar correctamente en las nuevas versiones de Firefox.</p> + +<p> </p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..91bde8e45c --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html @@ -0,0 +1,85 @@ +--- +title: Agregar un Botón a la Barra de Herramienta +slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> + +<p>Este manual usa la API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, que esta disponible solo para Firefox 29 en adelante.</p> +</div> + +<p>Para agregar un botón a la barra de herramientas, use los módulos <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> o <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p> + +<p>Cree un nuevo directorio, accese al directorio recien creado, y ejecute <code>cfx init</code>.</p> + +<p>Luego guarde estos tres iconos en el directrio "data":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> + +<p>Luego abra el archivo llamado "main.js" en el directorio "lib" y agregue el siguiente código:</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://www.mozilla.org/"); +}</pre> + +<p>Ahora ejecute el add-on con <code>cfx run</code>. El botón es agregado a la barra de herramientas en la parte superior de la ventana del navegador:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7641/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Puede fijar la localización inicial del botón, pero el usuario puede moverlo usando la función para personalizar del navegador. El atributo <code>id</code> es obligatorio, y es usado para recordar la posición del botón, por lo tanto no debería cambiarse en las versiones siguientes del add-on.</p> + +<p>Hacer clic en el botón cargará la página <a href="https://www.mozilla.org/en-US/">https://www.mozilla.org/</a> en una nueva pestaña.</p> + +<h2 id="Especificar_el_icono">Especificar el icono</h2> + +<p>La propiedad del icono puede especificar un solo icono o una colección de iconos de diferentes tamaños, como en el ejemplo anterior. Si se especifica una colección de iconos de diferentes tamaños el navegador automáticamente seleccionará el que mejor se ajuste a la resolución de pantalla y el lugar en la IU del navegador que alberga el botón. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#ActionButton(options)">Lea mas sobre especificar múltiples iconos.</a></p> + +<p>El archivo del icono debe ser empacado con el add-on: no debe referenciar a una archivo remoto.</p> + +<p>Puede cambiar el icono en cualquier momento estableciendo la propiedad del <code>icono</code> del botón. Puede cambiar el icono, y otros atributos de estado, incluso globalmente, para una ventana o pestaña específica. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Updating_state">Lea mas sobre la actualización de estado.</a></p> + +<h2 id="Fijando_un_panel">Fijando un panel</h2> + +<p>Si necesita fijar un panel a un botón, use la API<a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle"> toggle button</a>. Esta es similar a la API action button pero agrega la propiedad booleana <code>checked</code> cuyo estado cambia cuando el botón es seleccionado. Para fijar el panel, pase el botón al método <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#show(options)"><code>show()</code></a> del panel. Para más detalles sobre esto, vea la <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">documentación de toggle button</a>.</p> + +<h2 id="Mostrar_contenido_mas_sofisticado">Mostrar contenido mas sofisticado</h2> + +<p>Para crear interfaces de usuario más complejas de las que son posibles con solo un botón, use la AIP <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">toolbar</a>. Con la API toolbar obtiene una franja horizontal completa de la interfaz de usuario. Puede agregar botones a la barra de herramientas y también <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame">marcos</a>, que pueden contener HTML, CSS, y JavaScript.</p> + +<h2 id="Aprender_más">Aprender más</h2> + +<ul> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">manual de referencia de action button</a></li> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">manual de referencia de toggle button</a></li> + <li><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar">manual referencia de toolbar</a></li> +</ul> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html new file mode 100644 index 0000000000..8a65788a64 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html @@ -0,0 +1,164 @@ +--- +title: Mostrar una ventana emergente +slug: Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Display_a_Popup +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> + +<p>Esta guía usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta solo disponible para Firefox 29 en adelante.</p> +</div> + +<p>Para mostrar un dialogo emergente, se usa el modulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>. El contenido de un panel se define usando HTML. Puede ejecutar scripts de contenido en el panel: aunque el script que se ejecuta en el panel no pueda acceder directamente al código principal del add-on, puede intercambiar mensajes entre el script del panel y el código del add-on.</p> + +<p>En esta guía se crea un add-on que agrega un botón de acción en la barra de herramientas, que al ser presionado muestra un panel. El panel solo contiene un elemento <code><textarea></code> : cuando se presiona la tecla <code>return</code>, el contenido del <code><textarea></code> es enviado al código principal del add-on. El código principal del add-on <a href="/en-US/Add-ons/SDK/Tutorials/Logging">registra el mensaje en la terminal</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7647/panel.png" style="display: block; margin-left: auto; margin-right: auto;">El add-on consta de seis archivos:</p> + +<ul> + <li><code>main.js</code>: el código principal del add-on, que crea el botón y el panel</li> + <li><code>get-text.js</code>: el script de contenido que interactua con el panel de contenido</li> + <li><code>text-entry.html</code>: el propio panel de contenido, especificado en código HTML</li> + <li><code>icon-16.png</code>, <code>icon-32.png</code>, y <code>icon-64.png</code>: iconos para el botón en tres tamaños diferentes</li> +</ul> + +<p>El archivo "main.js" contiene lo siguiente:</p> + +<pre class="brush: js">var data = require("sdk/self").data; +// Construct a panel, loading its content from the "text-entry.html" +// file in the "data" directory, and loading the "get-text.js" script +// into it. +var text_entry = require("sdk/panel").Panel({ + contentURL: data.url("text-entry.html"), + contentScriptFile: data.url("get-text.js") +}); + +// Create a button +require("sdk/ui/button/action").ActionButton({ + id: "show-panel", + label: "Show Panel", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +// Show the panel when the user clicks the button. +function handleClick(state) { + text_entry.show(); +} + +// When the panel is displayed it generated an event called +// "show": we will listen for that event and when it happens, +// send our own "show" event to the panel's script, so the +// script can prepare the panel for display. +text_entry.on("show", function() { + text_entry.port.emit("show"); +}); + +// Listen for messages called "text-entered" coming from +// the content script. The message payload is the text the user +// entered. +// In this implementation we'll just log the text to the console. +text_entry.port.on("text-entered", function (text) { + console.log(text); + text_entry.hide(); +});</pre> + +<p>El script de contenido "get-text.js" muestra:</p> + +<div> +<pre class="brush: js">// When the user hits return, send the "text-entered" +// message to main.js. +// The message payload is the contents of the edit box. +var textArea = document.getElementById("edit-box"); +textArea.addEventListener('keyup', function onkeyup(event) { + if (event.keyCode == 13) { + // Remove the newline. + text = textArea.value.replace(/(\r\n|\n|\r)/gm,""); + self.port.emit("text-entered", text); + textArea.value = ''; + } +}, false); +// Listen for the "show" event being sent from the +// main add-on code. It means that the panel's about +// to be shown. +// +// Set the focus to the text area so the user can +// just start typing. +self.port.on("show", function onShow() { + textArea.focus(); +});</pre> + +<div> </div> +</div> + +<p>Finalmente, el archivo "text-entry.html" define el elemento <code><textarea></code> :</p> + +<div> +<div> +<pre class="brush: html"><html> +<head> + <style type="text/css" media="all"> + textarea { + margin: 10px; + } + body { + background-color: gray; + } + </style> + </head> +<body> + <textarea rows="13" cols="33" id="edit-box"></textarea> + </body> +</html></pre> + +<div> </div> +</div> +</div> + +<p>Por último, se guardan estos tres iconos en el directorio "data":</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> + +<p>Pruebe lo siguiente: el archivo "main.js" se encuentra en el directorio <code>lib</code> del add-on, y los otros cinco archivos el el directorio <code>data</code> :</p> + +<pre>my-addon/ + data/ + get-text.js + icon-16.png + icon-32.png + icon-64.png + text-entry.html + lib/ + main.js +</pre> + +<p>Ejecute el add-on, presione el botón, y debería poder ver el panel. Escriba algo en el cuadro de texto y presione "return" y verá la salida en la terminal.</p> + +<p>Desde Firefox 30 en adelante, si usa <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">botón del selección simple</a>, puede <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle#Attaching_panels_to_buttons">acoplar el panel al botón</a>.</p> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre el módulo <code>panel</code>, puede ver la <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel">referencia de la API</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a>.</p> + +<p>Para conocer más sobre los botones, puede ver la referencia de la API <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> y <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">toggle button</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html new file mode 100644 index 0000000000..04c901f4f9 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html @@ -0,0 +1,214 @@ +--- +title: Primeros pasos +slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started +translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 +--- +<p>Este tutorial recorre los pasos para la creación de un add-on simple usando el SDK.</p> + +<h2 id="Requisitos_previos">Requisitos previos</h2> + +<p>Para crear add-ons para Firefox usando el SDK, primero es necesario seguir las instrucciones para <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">instalar y activar el SDK</a>. Una vez hecho esto, se debe ir directamente a la terminal.</p> + +<h2 id="Inicializar_un_add-on_vacío">Inicializar un add-on vacío</h2> + +<p>En la terminal, cree un directorio nuevo. El directorio no tiene que estar bajo la raíz del SDK: puede crearlo donde quiera. Dirijase al directorio recién creado, escriba <code>cfx init</code>, y presione la tecla enter o intro:</p> + +<pre>mkdir my-addon +cd my-addon +cfx init +</pre> + +<p>Visualizará una salida como esta:</p> + +<pre>* lib directory created +* data directory created +* test directory created +* doc directory created +* README.md written +* package.json written +* test/test-main.js written +* lib/main.js written +* doc/main.md written +Your sample add-on is now ready for testing: +try "cfx test" and then "cfx run". Have fun!" +</pre> + +<h2 id="Implementar_el_add-on">Implementar el add-on</h2> + +<p>Ahora puede escribir el código del add-on, el cual se ubica en el archivo "main.js" en el directorio "lib". Este archivo fue creado en el paso anterior. Abra este archivo y agrege el siguiente código:</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://www.mozilla.org/"); +} +</pre> + +<p>Guarde los cambios.</p> + +<p>Luego, guarde estos tres iconos en el directorio "data" :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> + <td>icon-16.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> + <td>icon-32.png</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> + <td>icon-64.png</td> + </tr> + </tbody> +</table> + +<p>Vuelva a la terminal y escriba:</p> + +<pre>cfx run +</pre> + +<p>Esta es la orden del SDK para ejecutar una nueva instancia de Firefox con el add-on instalado. Cuando el Firefox es presentado, en la esquina superior derecha se puede ver un ícono con el logo de Firefox. Al hacer clic en el ícono, se abrirá una pestaña nueva donde se cargará la página <a href="https://www.mozilla.org/" rel="noreferrer">https://www.mozilla.org/</a>.</p> + +<div class="note"> +<p>Es posible que vea un error como este al ejecutar cfx run:</p> + +<pre class="bz_comment_text" id="comment_text_0">A given cfx option has an inappropriate value: + ZIP does not support timestamps before 1980</pre> + +<p>De ser así, se ha encontrado con el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1005412">bug 1005412</a>, lo que significa que los archivos de los iconos que ha descargado están arrojando una marca de tiempo de 1970. Hasta que este error sea resuelto, la solución es usar la orden <a href="http://www.linfo.org/touch.html"><code>touch</code></a> para actualizar la marca de tiempo:</p> + +<pre>touch icon-16.png</pre> +</div> + +<p>Esto es todo lo que este add-on hace. Usa dos módulos del SDK: el módulo <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, el cual permite agregar botones al navegador, y el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>, el cual permite llevar a cabo operaciones básicas con las pestañas. En este caso, se ha creado un botón cuyo icono es el logo de Firefox, y se le agregó un controlador que carga la página principal de Mozilla en una nueva pestaña al hacer clic en el icono.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 382px;">Intente editar este archivo. Por ejemplo, puede cambiar la página que es cargada:</p> + +<pre class="brush: js">var buttons = require('sdk/ui/button/action'); +var tabs = require("sdk/tabs"); + +var button = buttons.ActionButton({ + id: "mozilla-link", + label: "Visit Mozilla", + icon: { + "16": "./icon-16.png", + "32": "./icon-32.png", + "64": "./icon-64.png" + }, + onClick: handleClick +}); + +function handleClick(state) { + tabs.open("https://developer.mozilla.org/"); +}</pre> + +<p>En la terminal, ejecute de nuevo <code>cfx run</code>. Ahora al hacer clic en el ícono se cargará la página <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p> + +<h2 id="Empaquetar_el_add-on">Empaquetar el add-on</h2> + +<p>Cuando el add-on este terminado y listo para distribuirse, será necesario empaquetarlo como un archivo XPI. Este es el formato de archivo de instalación para los add-ons de Firefox. Puede distribuir los archivos XPI por cuenta propia o publicarlos en <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> para que otros usuarios puedan descargarlos e instalarlos.</p> + +<p>Para construir un XPI, solo se debe ejecutar la orden <code>cfx xpi</code> desde el directorio del add-on:</p> + +<pre>cfx xpi +</pre> + +<p>Visualizará una salida como esta:</p> + +<pre>Exporting extension to my-addon.xpi. +</pre> + +<p>Para comprobar que funcione, intente instalar el archivo XPI en el Firefox instalado en su sistema. Lo puede hacer presionando la combinación de teclas Ctrl+O (Cmd+O en Mac) desde el Firefox, o seleccionando la opción "Abrir" desde el menú "Archivo" de Firefox. Esto abrirá un diálogo de selección; navegue hasta el archivo "my-addon.xpi", abra el archivo y siga las instrucciones para instalar el add-on.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>En este tutorial se ha construido y empaquetado un add-on usando tres órdenes:</p> + +<ul> + <li><code>cfx init</code> para inicializar una plantilla vacía para el add-on</li> + <li><code>cfx run</code> para ejecutar una instancia nueva de Firefox con el add-in instalado, para poder realizar pruebas</li> + <li><code>cfx xpi</code> para empaquetar el add-on en un archivo XPI para su distribución</li> +</ul> + +<p>Estas son las tres órdenes principales, usadas cuando se desarrollan add-ons con SDK. Existe una completa <a href="/en-US/Add-ons/SDK/Tools/cfx" rel="noreferrer">documentación de referencia</a> que cubre todas las órdenes que pueden ser usadas y todas sus opciones disponibles.</p> + +<p>El código del add-on usa dos módulos del SDK, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> y <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. Existe una documentación de referencia para todas las APIs de <a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">alto-nivel</a> y <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">bajo-nivel</a> en el SDK.</p> + +<h2 id="Qué_sigue">Qué sigue?</h2> + +<p>Para tener una idea de lo que se puede hacer con las APIs del SDK, puede revisar alguno de estos <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutoriales</a>.</p> + +<h2 id="Técnicas_avanzadas">Técnicas avanzadas</h2> + +<h3 id="Sobrescribiendo_los_módulos_integrados">Sobrescribiendo los módulos integrados</h3> + +<p>Los módulos del SDK que son usados para implementar un add-on están integrados en Firefox. Cuando se ejecuta o empaqueta un add-on usando <code>cfx run</code> o <code>cfx xpi</code>, el add-on usará las versiones de los módulos de la versión de Firefox que los aloja.</p> + +<p>Como desarrollador de add-on, esto es usualmente lo deseable. Pero si esta desarrollando los módulos del SDK, por supuesto, que no lo es. En este caso se asume que se accedió al SDK desde el repositorio de <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub</a> y se ejecutó la secuencia de comandos <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">bin/activate</a> desde la raíz de checkout.</p> + +<p>Luego al aplicar <code>cfx run</code> or <code>cfx xpi</code>, se agrega la opción "-o":</p> + +<pre>cfx run -o +</pre> + +<p>Esto le indica a cfx a usar las copias locales de los módulos del SDK, y no aquellas en Firefox.</p> + +<h3 id="Desarrollar_sin_cfx_run">Desarrollar sin cfx run</h3> + +<p>Debido a que <code>cfx run</code> reinicia el navegador cada vez que es invocado, en ocasiones puede resultar un poco incómodo si se realizan cambios frecuentes al add-on. Un modelo alternativo de desarrollo es usar el add-on <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a>: el cual esta atento a la existencia de nuevos archivos XPI en un puerto determinado y los instala automáticamente. De esta manera se pueden probar los cambios realizados sin necesidad de reiniciar el navegador:</p> + +<ul> + <li>haga un cambio en el add-on</li> + <li>ejecute cfx xpi</li> + <li>coloque el add-on a<span class="rangySelectionBoundary" id="selectionBoundary_1424221520004_6724972203681473" style="display: none; line-height: 0;"></span>l puerto especificado</li> +</ul> + +<p>Incluso, se puede automatizar este proceso con una simple secuencia de comandos.<span class="rangySelectionBoundary" id="selectionBoundary_1424221645966_1440660097593104" style="display: none; line-height: 0;"></span> Por ejemplo:</p> + +<pre>while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done +</pre> + +<p>Nótese que el nivel de acceso definido para la terminal cuando se usa este método es diferente, comparado con el nivel de acceso usado cuando un add-on es ejecutado usando <code>cfx run</code>. Esto significa que si se desea ver la salida desde los mensajes de <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a>, se debe modificar la configuración. Vea la documentación en <span class="rangySelectionBoundary" id="selectionBoundary_1424222319862_9715120149565866" style="display: none; line-height: 0;"></span><a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">niveles de acceso</a> para más detalles.</p> + +<p>Otra alternativa es con el uso de <a href="http://gruntjs.com/">grunt</a> y <a href="https://www.npmjs.com/package/grunt-shell">grunt-shell</a>:</p> + +<pre class="brush: js">module.exports = function(grunt) { + 'use strict'; + require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks); + grunt.initConfig({ + shell: { + xpi: { + command: [ + 'cd pluginpath', + 'cfx xpi', + 'wget --post-file=pluginname.xpi http://localhost:8888/ || echo>/dev/null' + ].join('&&') + } + }, + watch: { + xpi: { + files: ['pluginpath/**'], + tasks: ['shell:xpi'] + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-shell'); + grunt.registerTask('default', ['watch']); +};</pre> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/index.html b/files/es/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..478d88d56a --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,146 @@ +--- +title: Tutoriales +slug: Mozilla/Add-ons/SDK/Tutorials +tags: + - Add-on SDK + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +<p>Esta página lista prácticos artículos funcionales sobre como lograr realizar tareas específicas usando SDK.</p> + +<hr> +<h3 id="Primeros_pasos"><a name="getting-started">Primeros pasos</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Installation">Instalación </a></dt> + <dd>Descargar, instalar, e inicializar el SDK en Windows, OS X y Linux.</dd> +</dl> + +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Troubleshooting">Resolución de problemas </a></dt> + <dd>Algunos consejos para solucionar problemas comunes y obtener más ayuda.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_started">Primeros pasos </a></dt> + <dd>Guía paso a paso para la creación de un add-on simple con SDK.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Crear_interfaces_de_usuario"><a name="create-user-interfaces">Crear interfaces de usuario</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Agregar un botón a la barra de herramientas</a></dt> + <dd>Fijar un botón a la barra de herramientas de Add-on de Firefox.</dd> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Agregar una opción de menú en Firefox </a></dt> + <dd>Agregar opciones a los menú principales de Firefox.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup">Mostrar una ventana emergente </a></dt> + <dd>Mostrar una ventana de dialogo emergente implementando HTML y JavaScript.</dd> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Agregar una opción al menú contextual</a></dt> + <dd>Agregar opciones al menú contextual de Firefox</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Interactuar_con_el_navegador"><a name="interact-with-the-browser">Interactuar con el navegador</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page">Abrir una página web </a></dt> + <dd>Abrir una página web en una nueva pestaña o ventana del navegador usando el modulo de pestañas, y accediendo a su contenido.</dd> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Atender las cargas de página</a></dt> + <dd>Usar el módulo de pestañas para recibir notificaciones cuando una página web nueva sea cargada, y acceder a su contenido.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs">Obtener la lista de las pestañas abiertas</a></dt> + <dd>Usar el módulo de pestañas para recorrer las pestañas abiertas actualmente, y acceder a su contenido.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Modificar_páginas_web"><a name="modify-web-pages">Modificar páginas web</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Modificar páginas web basándose en el URL</a></dt> + <dd>Crear filtro para páginas web basándose en el URL: siempre que una página web cuyo URL coincida con el filtro cargado, ejecuta una secuencia de comandos específica en él.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modificar la página web activa</a></dt> + <dd>Cargar de forma dinámica una secuencia de comandos dentro de la página web activa.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Técnicas_de_desarrollo"><a name="development-techniques">Técnicas de desarrollo</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Logging">Registro de actividad</a></dt> + <dd>Registrar los mensajes a la terminal con propósitos de diagnósticos.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">Crear módulos reusables</a></dt> + <dd>Estructurar el add-on en módulos separados para hacer más fácil el desarrollo, depuración, y mantenimiento. <span class="rangySelectionBoundary" id="selectionBoundary_1422581870550_1450407927374966" style="display: none; line-height: 0;"></span>Crear paquetes reusables que contengan los módulos, de esta manera otros desarrolladores puedan usarlos también.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Pruebas unitarias </a></dt> + <dd>Escribir y ejecutar pruebas unitarias usando el marco de trabajo para pruebas de SDK.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Autoridad Chrome </a></dt> + <dd>Ganar acceso al objeto Components, permitiendo al add-on cargar y usar el objeto XPCOM.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">Creando destinos del evento</a></dt> + <dd>Permite a los objetos definidos emitir sus propios eventos.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Encargarse de las cargas y descargas</a></dt> + <dd>Obtener las notificaciones cuando el add-on sea cargado y descargado por Firefox, y pasar argumentos en el add-on desde la terminal.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Usar módulos externos (jpm)</a></dt> + <dd>Instalar y usar módulos adicionales que no son entregados con el SDK.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/l10n">Localización </a></dt> + <dd>Escribir código que pueda ser adaptado a otro idioma.</dd> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Desarrollo Móbil</a></dt> + <dd>Desarrollar add-ons para Firefox Móbil en Android.</dd> + <dt><a href="/en-US/Add-ons/Add-on_Debugger">Depurador de Add-on</a></dt> + <dd>Depurar el código JavaScript del add-on.</dd> +</dl> +</div> +</div> + +<hr> +<h3 id="Juntando_todo"><a name="putting-it-together">Juntando todo</a></h3> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Add-on Anotador</a></dt> + <dd>Un manual de un add-on relativamente complejo.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html new file mode 100644 index 0000000000..655c6e098f --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html @@ -0,0 +1,145 @@ +--- +title: Instalación +slug: Mozilla/Add-ons/SDK/Tutorials/Installation +tags: + - Guía + - Principiante +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +<h2 id="Requerimientos_previos">Requerimientos previos</h2> + +<p>Para desarrollar add-ons usando el SDK Add-o, necesitaras:</p> + +<ul> + <li><a href="http://www.python.org/">Python</a> 2.5, 2.6 o 2.7. Hay que tener encuenta que las versiones 3.x de Python no son soportadas en ninguna plataforma. Asegurte que Python se encuentre en la ruta del sistema.</li> + <li>Firefox.</li> + <li>El propio SDK: puedes decargar la última versión estable del SDK como un <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz">tarball</a> o como un <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip">archivo zip</a>.</li> +</ul> + +<h2 id="Instalación">Instalación</h2> + +<h3 id="Instalación_en_OS_X_FreeBSD_Linux">Instalación en OS X, FreeBSD, Linux</h3> + +<p>Extrae el contenido del archivo en el lugar de tu preferencia, y navega hasta el directorio principal del SDK con una shell/command prompt. Por ejemplo:</p> + +<pre>tar -xf addon-sdk.tar.gz +cd addon-sdk +</pre> + +<p>Luego, si eres un usuario Bash, ejecuta:</p> + +<pre>source bin/activate +</pre> + +<p>Si no eres un usuario Bash, debes ejecutar:</p> + +<pre>bash bin/activate +</pre> + +<p>En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre del directorio raíz del SDK:</p> + +<pre>(addon-sdk)~/mozilla/addon-sdk > +</pre> + +<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>. Si deseas una activación permanente, dirigete a <a href="/es/docs/Mozilla/Add-ons/SDK/Tutorials/Installation#Establecer_activate_permanentemente">Establecer activate permanentemente</a> mas abajo.</p> + +<h3 id="Instalación_en_OS_X_usando_Homebrew">Instalación en OS X usando Homebrew</h3> + +<p>Si usas Mac, puedes usar <a href="http://brew.sh/">Homebrew</a> para instalar el SDK, usando la siguiente orden:</p> + +<pre>brew install mozilla-addon-sdk</pre> + +<p>Una vez que el proceso se haya completado satisfactoriamente, puedes usar el programa <code>cfx</code> en tu línea de órdenes en cualquier momento: no necesitas ejecutar bin/activate.</p> + +<h3 id="Instalación_en_Windows">Instalación en Windows</h3> + +<p>Extrae el contenido del archivo en el lugar de tu peferencia, y navega hasta el directorio principal de SDK con la terminal. Por ejemplo:</p> + +<pre>7z.exe x addon-sdk.zip +cd addon-sdk +</pre> + +<p>Luego ejecuta:</p> + +<pre>bin\activate +</pre> + +<p>En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre completo del directorio raíz del SDK:</p> + +<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk> +</pre> + +<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>. Si deseas una activación permanente, dirigete a <a href="/es-ES/Add-ons/SDK/Tutorials/Installation#Establecer_activate_permanentemente">Estableciendo activate permanentemente</a> mas abajo.</p> + +<h2 id="Verificar_congruencia">Verificar congruencia</h2> + +<p>Ejecuta esto en tu terminal:</p> + +<pre class="language-html"><code class="language-html">cfx</code></pre> + +<p>Esto debería arrojar una salida cuyas primeras lineas deberían verse algo parecido a esto, seguidas de muchas línas de información útil:</p> + +<pre class="language-html">Usage: cfx [options] [command]</pre> + +<p>Este es el <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx">programa de la línea de órdnes<code> cfx</code></a>. Es tu principal interfaz con el Add-on SDK. Lo usas para ejecutar Firefox y probar tu add-on, empaquetar tu add-on para distribuirlo, ver documentación, y ejecutar pruebas unitarias.</p> + +<p>Si no puedes ver esto, dirigete a la página <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Resolución de problemas</a>.</p> + +<h2 id="Próximos_Pasos">Próximos Pasos</h2> + +<p>Ahora, dale un vistazo al tutorial <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Comenzando con cfx</a>, en el cual se explica como crear add-ons usando la herramienta<code> cfx</code>.</p> + +<h2 id="Tópicos_avanzados">Tópicos avanzados</h2> + +<h3 id="Usar_el_SDK_desde_Git">Usar el SDK desde Git</h3> + +<p>El SDK es desarrollado en GitHub. En vez de usar versiones en archivos comprimidos, puedes echar un vistazo al <a href="https://github.com/mozilla/addon-sdk">repositorio GitHub</a>: con esto puedes usar la última versión de desarrollo en vez de usar el lanzamiento oficial.</p> + +<p>Si usas la última versión de desarrollo, debes usarla con la versión Nightly de Firefox, y no podrás enviar a <a href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) ningún add-ons que desarrolles, porque AMO solicita que uses el lanzamiento oficial.</p> + +<h4 id="Desarrollar_add-ons_para_AMO_desde_Git">Desarrollar add-ons para AMO desde Git</h4> + +<p>Si deseas desarrollar add-ons que puedan ser admitidos en AMO usando Git, entonces deberás:</p> + +<ul> + <li>usar el último lanzamiento etiquetado en git de las fuentes de addon-sdk</li> + <li>ejecutar la orden <code>git archive</code> para ampliar algunos atributos de marcado de posición de git dentro de un directorio activo clonado de git.</li> +</ul> + +<pre>git checkout 1.17 + +git archive 1.17 python-lib/cuddlefish/_version.py | tar -xvf -</pre> + +<h3 id="Establecer_activate_permanentemente">Establecer <code>activate</code> permanentemente</h3> + +<p>La orden <code>activate</code> establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente <code>activate</code>.</p> + +<p>Esto significa que puedes tener multiples copias del SDK en diferentes partes del disco y cambiar entre ellas, o incluso tenerlas activas al mismo tiempo en diferentes terminales.</p> + +<p>Estableciendo estas variables de forma permanente en tu entorno para que cada nueva terminal pueda leerlas, podrás hacer que la activación sea permanente. Por lo tanto no tendrás que ejecutar <code>activate</code> cada vez que habrás una nueva terminal.</p> + +<p>Debido a que el conjunto exacto de variables pueden cambiar en nuevas versiones del SDK, lo mejor es consultar la secuencia de órdenes de activación para determinar cuales variables deben ser establecidas. La activación usa diferentes secuencias de órdenes de activación para entornos bash (Linux and OS X) y ambientes Windows .</p> + +<h4 id="Windows">Windows</h4> + +<p>En Windows, <code>bin\activate</code> usa <code>activate.bat</code>, y puedes hacer la activación permanente usando la herramienta <code>setx</code> d<span class="rangySelectionBoundary" id="selectionBoundary_1422498066697_8666912371422392" style="line-height: 0; display: none;"></span>e la terminal o el Panel de Control.</p> + +<p><strong>Pasos para el establecimiento permanente:</strong></p> + +<p style="margin-left: 40px;">Paso 0. Abre el Panel de Control > Sistema > Avanzado > Variables de Entorno.<br> + Paso 1. Agrega el directorio Python y el directorio SDK\bin a la Variable de la Ruta del Sistema.<br> + Path=...;C:\PYTHON26\;C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\bin<br> + Paso 2. Agrega una Variable de usuario llamada CUDDLEFISH_ROOT y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"<br> + <span class="rangySelectionBoundary" id="selectionBoundary_1422498317458_12282345591345756" style="line-height: 0; display: none;"></span>Paso 3. Agrega una Variable de usuario llamada PYTHONPATH y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\python-lib"<br> + Paso 4. Agrega una Variable de usuario llamada VIRTUAL_ENV y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"</p> + +<h4 id="Linux_OS_X">Linux / OS X</h4> + +<p>En Linux y OS X, <code>source bin/activate</code> usan la secuencia de órdenes bash <code>activate</code>, y puedes hacer la activación permanente usando tu <span class="rangySelectionBoundary" id="selectionBoundary_1422498499239_3642049718896089" style="line-height: 0; display: none;">tu </span> <code>~/.bashrc</code> (en Linux) o <code>~/.bashprofile</code> (en OS X).</p> + +<p>Como alternativa a esto, puedes crear un enlace simbólico al programa <code>cfx</code> en tu directorio <code>~/bin</code>:</p> + +<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx +</pre> + +<p>Si usaste Homebrew para instalar SDK, las variables de entorno ya estan establecidas permanentemente.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html new file mode 100644 index 0000000000..e817b40495 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html @@ -0,0 +1,66 @@ +--- +title: Obtener la lista de las pestañas abiertas +slug: Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/List_Open_Tabs +--- +<div class="note"> +<p>Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</p> + +<p>Este ejemplo usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta solo disponible para Firefox 29 en adelante.</p> +</div> + +<p>Para listar las pestañas abiertas, se puede iterar sobre el mismo objeto<code> </code><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>.</p> + +<p>El siguiente add-on agrega un <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> que registra las URLs de las pestañas abiertas cuando el/la usuario/a hacen click en el:</p> + +<pre class="brush: js">require("sdk/ui/button/action").ActionButton({ + id: "list-tabs", + label: "List Tabs", + icon: "./icon-16.png", + onClick: listTabs +}); + +function listTabs() { + var tabs = require("sdk/tabs"); + for (let tab of tabs) + console.log(tab.url); +} +</pre> + +<p>Observe que para hacer que esto funcione debe guardar un icono para el botón al directorio "data" del add-on con el nombre de "icon-16.png": puede descargarlo de aqui: <img alt="" src="https://mdn.mozillademos.org/files/7649/icon-16.png" style="height: 16px; width: 16px;">.</p> + +<p>Ejecute el add-on, cargue algunas pestañas y hace click en el botón. Verá en la <a href="/en-US/Add-ons/SDK/Tutorials/Logging">terminal</a> una salida similar a esta:</p> + +<pre>info: http://www.mozilla.org/en-US/about/ +info: http://www.bbc.co.uk/ +</pre> + +<p>No tiene acceso directo a ningún contenido de la pestaña. Para acceder al contenido de la pestaña necesita adjuntar un script usando <code>tab.attach()</code>. Este add-on adjunta un script a todas las pestañas abiertas. El script agrega un borde rojo al documento de la pestaña:</p> + +<pre class="brush: js">require("sdk/ui/button/action").ActionButton({ + id: "list-tabs", + label: "List Tabs", + icon: "./icon-16.png", + onClick: listTabs +}); + +function listTabs() { + var tabs = require("sdk/tabs"); + for (let tab of tabs) + runScript(tab); +} + +function runScript(tab) { + tab.attach({ + contentScript: "document.body.style.border = '5px solid red';" + }); +} +</pre> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>.</p> + +<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"> </a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)">usando <code>tab.attach()</code></a><a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"> en el tutorial</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html new file mode 100644 index 0000000000..99642fade4 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html @@ -0,0 +1,38 @@ +--- +title: Atender las cargas de página +slug: Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Listen_for_Page_Load +--- +<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</div> + +<p>Se pueden obtener notificaciones sobre la carga de nuevas paǵinas a través del módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>. El siguiente add-on escucha el evento integrado de la pestaña <code>ready</code> y simplemente registra el URL de cada pestaña en la medida que el/la usuario/a realiza la carga:</p> + +<pre class="brush: js">require("sdk/tabs").on("ready", logURL); + +function logURL(tab) { + console.log(tab.url); +} +</pre> + +<p>No se obtiene acceso directo a ningún contenido de la pestaña.</p> + +<p>Para acceder al contenido de la pestaña se necesita adjuntar un script a la pestaña usando <code>tab.attach()</code>. Este add-on adjunto un script para abrir todas las pestañas. El script agrega un borde rojo al documento de la pestaña:</p> + +<pre class="brush: js">require("sdk/tabs").on("ready", runScript); + +function runScript(tab) { + tab.attach({ + contentScript: "if (document.body) document.body.style.border = '5px solid red';" + }); +} +</pre> + +<p>(Este ejemplo es solo para mostrar la idea: para implementar algo como esto, se debería usar <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, y especificar un "*" como el patron de coincidencia.)</p> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>. Puede escuchar varios eventos relacionados con las pestañas incluyendo <code>open</code>, <code>close</code>, y <code>activate</code>.</p> + +<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29">usando <code>tab.attach()</code></a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> en el tutorial</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html new file mode 100644 index 0000000000..08a0a80224 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html @@ -0,0 +1,135 @@ +--- +title: Modificar la página web activa +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +--- +<div class="note"> +<p>Para seguir esta guía. necesita <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalar el add-on SDK</a> y saber lo <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">basico sobre <code>jpm</code></a> (para Firefox 38 en adelante) o lo <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basicp sobre <code>cfx</code></a> .</p> + +<p>Esta guía usa la API <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a>, la cual esta disponible para Firefox 29 en adelante.</p> +</div> + +<p>Para modificar la página web activa, se carga uno o mas <em>scripts de contenido</em> dentro de ella usando el método <code>attach()</code> del objeto <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs">tab</a>. El trabajo de estos scripts es interactuar con el contenido de la web.</p> + +<p>Aquí se muestra un ejemplo simple:</p> + +<pre class="brush: js">var button = require("sdk/ui/button/action").ActionButton({ + id: "style-tab", + label: "Style Tab", + icon: "./icon-16.png", + onClick: function() { + require("sdk/tabs").activeTab.attach({ + contentScript: 'document.body.style.border = "5px solid red";' + }); + } +});</pre> + +<p>Para ejecutar este ejemplo, se guarda el icono llamado "icon-16.png" en el directorio "data" del add-on. Puede descargar este icono: <img alt="" src="https://mdn.mozillademos.org/files/7661/icon-16.png" style="height: 16px; width: 16px;">.</p> + +<p>Este add-on crea un botón con el icono de Mozilla. Este tienen un controlador de eventos del ratón el cual busca la pestaña activa y carga un script dentro de la página activa. El script es especificado usando la opción <code>contentScript</code>, y simplemente dibuja un borde rojo alrededor de la página.</p> + +<p>Abra cualquier página web en el navegador, y haga clic en el botón. Deberá poder ver un borde rojo que aparecerá alrededor de la página, como este:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6531/tabattach-bbc.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Mantener_los_Scripts_de_Contenido_en_un_archivo_diferente">Mantener los Scripts de Contenido en un archivo diferente</h2> + +<p>En el ejemplo anterior, hemos pasado el contenido del script como una cadena.</p> + +<p>A menos que el script sea extremadamente simple, manten el script como un archivo separado en el directorio <code>data</code> del add-on. Esto hace que el código sea más fácil de mantener, depurar, y revisar. Para hacer esto, utiliza la opción <code>contentScriptFile</code> y no <code>contentScript</code>, cuyos valores es una URL que apunta a uno o varios archivos con el contenido de los scripts.</p> + +<p>Por ejemplo, si guardamos el script anterior bajo el directorio <code>data</code> del add-on en un archivo llamado <code>my-script.js</code>:</p> + +<pre class="brush: js">var self = require("sdk/self"); + +var button = require("sdk/ui/button/action").ActionButton({ + id: "style-tab", + label: "Style Tab", + icon: "./icon-16.png", + onClick: function() { + require("sdk/tabs").activeTab.attach({ + contentScriptFile: self.data.url("my-script.js") + }); + } +}); +</pre> + +<p>Puedes cargar mas de un script, y los scripts pueden interactuar directamente entre ellos. Por lo tanto puede cargar <a href="http://jquery.com/">jQuery</a>, y luego tu script de contenido puede usarlo.</p> + +<h2 id="Cargar_varios_archivo_de_script_de_contenido">Cargar varios archivo de script de contenido</h2> + +<p>Los datos asignados a <code>contentScriptFile</code> pueden ser un vector. Los scripts serán cargados en el mismo orden del vector.</p> + +<p>En el siguiente ejemplo, estamos cargando dos scripts, <code>first.js</code> & <code>second.js</code>. Ambos scripts serán ejecutados en el mismo contexto, por lo tanto todo lo definido como publico en <code>first.js</code> será accedible desde <code>second.js</code>.</p> + +<pre class="brush: js">// lib/main.js + +var self = require("sdk/self"); +var tabs = require("sdk/tabs"); + +require("sdk/ui/button/action").ActionButton({ + id: "load-several", + label: "load several scripts", + icon: "./icon-16.png", + onClick: function () { + tabs.activeTab.attach({ + contentScriptFile: [self.data.url('first.js'), + self.data.url('second.js')] + }); + } +}); +</pre> + +<h2 id="Comunicación_con_los_Scripts_de_Contenido">Comunicación con los Scripts de Contenido</h2> + +<p>Tu script del add-on tus scripts de contenido no pueden acceder directamente a las variables del otro o llamar a las funciones del otro, pero pueden enviarse mensajes entre ellos.</p> + +<p>Para enciar un mensaje de un lado a otro, el remitente llama a <code>port.emit()</code> y el receptor escucha usando <code>port.on()</code>.</p> + +<ul> + <li>En el script de contenido, <code>port</code> es una propiedad del objeto global <code>self</code>.</li> + <li>En el script del add-on, <code>tab.attach()</code> revuelve un objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">worker</a> que contiene la propiedad <code>port</code> que usaste para enviar los mensajes al script de contenido.</li> +</ul> + +<p>Re escribamos el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido.</p> + +<p>El script de contenido debe verse así_</p> + +<pre class="brush: js">// "self" is a global object in content scripts +// Listen for a "drawBorder" +self.port.on("drawBorder", function(color) { + document.body.style.border = "5px solid " + color; +}); +</pre> + +<p>En el script del add-on, enviaremos un mensaje "drawBorder" al script de contenido usando el objeto devuelto desde <code>attach()</code>:</p> + +<pre class="brush: js">var self = require("sdk/self"); +var tabs = require("sdk/tabs"); + +var button = require("sdk/ui/button/action").ActionButton({ + id: "style-tab", + label: "Style Tab", + icon: "./icon-16.png", + onClick: function() { + var worker = tabs.activeTab.attach({ + contentScriptFile: self.data.url("my-script.js") + }); + worker.port.emit("drawBorder", "red"); + } +}); +</pre> + +<p>El mensaje <code>drawBorder</code> no es un mensaje construido, es un mensaje que el add-on define en la llamada <code>port.emit()</code>.</p> + +<h2 id="Inyectando_CSS">Inyectando CSS</h2> + +<p>Al contrario de la API <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>, <code>tab.attach()</code> no te permite inyectar CSS directamente dentro de la página.</p> + +<p>Para modificar el estilo de la página, tienes que usar Javascript, como en el ejemplo anteriot.</p> + +<h2 id="Aprender_más">Aprender más</h2> + +<p>Para aprender más sobre el trabajo con pestañas en el SDK, puede ver la guía <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Open a Web Page</a>, la guía <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">List Open Tabs</a>, y la <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> API reference</a>.</p> + +<p>Para aprender mpas sobre los scripts de contenido, puede ver <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts guide</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html new file mode 100644 index 0000000000..e20146d84d --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html @@ -0,0 +1,227 @@ +--- +title: Modificar páginas web basándose en el URL +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +--- +<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">básicos de <code>jpm</code></a> (Firefox 38 en adelante) o <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx"><code>cfx</code></a>.</div> + +<p>Para modificar cualquier página que coincida con un patrón en particular (por ejemplo, "http://example.org/") mientras es cargada, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a>.</p> + +<p>Para crear un page-mod, es necesario especificar dos cosas:</p> + +<ul> + <li>Uno o más <em>scripts de contenido</em> para ser ejecutados cuyo trabajo es interactuar con el contenido web.</li> + <li>Uno o más <em>patrones</em> para hacer coincidir con las URLs de las páginas que se desea modificar.</li> +</ul> + +<p>El siguiente es un fragmento de código donde el script de contenido es provisto como una opción de <code>contentScript</code> y el patrón de URL es dado como una opción de <code>include</code>:</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScript: 'document.body.innerHTML = ' + + ' "<h1>Page matches ruleset</h1>";' +}); +</pre> + +<p>Haga lo siguiente:</p> + +<ul> + <li>Cree un nuevo directorio e ingrese en el.</li> + <li>Ejecute <code>jpm init </code>o <code>cfx init</code></li> + <li>Abra el archivo<code> index.js</code> y agregue el código anterior (si usa <code>cfx, lib/main.js</code>)</li> + <li>Ejecute <code>jpm run </code>o<code> cfx run</code>.</li> + <li>Abra en el navegador la página <a href="http://www.ietf.org">ietf.org.</a></li> +</ul> + +<p>Abajo se muestra lo que debe poder ver.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6537/pagemod-ietf.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Especificar_el_Patrón_de_Coincidencia">Especificar el Patrón de Coincidencia</h2> + +<p>El patrón de coincidencia usa la sintaxis <a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern"><code>match-pattern</code></a>. Se puede definir un patrón de coincidencia como una única cadena o una matriz.</p> + +<h2 id="Mantener_el_Script_de_Contenido_en_un_Archivo_Separado">Mantener el Script de Contenido en un Archivo Separado</h2> + +<p>En el ejemplo anterior, se definió el script de contenido como una cadena de caracteres.</p> + +<p>A menos que el script sea muy simple, se debe mantener el script en un archivo separado. Esto hace al código más fácil de mantener, depurar, y revisar. Para hacer esto es necesario:</p> + +<ul> + <li>Guardar el script en el directorio <code>data</code> del add-on.</li> + <li>Usar la opción <code>contentScriptFile</code> en vez de <code>contentScript</code> y pasar ls URL del script la cual puede ser obtenida usando <code>self.data.url("my-script.js")</code>. Para Firefox 34 en adelante, se puede usar <code>"./my-script.js"</code>.</li> +</ul> + +<p>Por ejemplo, si se guarda el script anterior en un archivo llamado <code>my-script.js </code>bajo el directorio <code>data</code> del add-on:</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: self.data.url("my-script.js") +});</pre> + +<p>O para Firefox 34 en adelante:</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: "./my-script.js" +});</pre> + +<h2 id="Cargar_Múltiples_Scripts_de_Contenido">Cargar Múltiples Scripts de Contenido</h2> + +<p>Es posible cargar mas de un script, y los scripts pueden interactuar directamente.</p> + +<p>Por ejemplo, se puede reescribir <code>my-script.js</code> para usar jQuery.</p> + +<pre class="brush: js">$("body").html("<h1>Page matches ruleset</h1>"); +</pre> + +<p>Luego se descarga jQuery al directorio <code>data</code> del add-on, y se carga conjuntamente el script y el jQuery (asegurándose de cargar primero el jQuery).</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")] +}); +</pre> + +<p>Se puede usar <code>contentScript</code> y <code>contentScriptFile</code> juntos en el mismo page-mod. Si se hace esto, los script cargados usando <code>contentScriptFile</code> son cargados primero.</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: self.data.url("jquery-1.7.min.js"), + contentScript: '$("body").html("<h1>Page matches ruleset</h1>");' +}); +</pre> + +<p>Note, sin embargo, que no es posible cargar un script desde un sitio web. El script debe ser cargado desde el directorio d<code>ata</code>.</p> + +<h2 id="Comunicarse_con_el_Script_de_Contenido">Comunicarse con el Script de Contenido</h2> + +<p>El script del add-on y los scripts de contenido no pueden acceder directamente a las variables o llamar a las funciones de los demás, pero pueden enviar mensajes.</p> + +<p>Para enviar un mensaje de un lado a otro, el emisor llama a <code>port.emit()</code> y el receptor escucha usando <code>port.on()</code>.</p> + +<ul> + <li>En el script de contenido, <code>port</code> es una propiedad del objeto global <code>self</code>.</li> + <li>En el script del add-on, es necesario escuchar al evento <code>onAttach</code> para conseguir pasar un objeto <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">de trabajo</a> que contenga a <code>port</code>.</li> +</ul> + +<p>Se reescribe el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido. El mensaje contendrá el nuevo contenido para ser insertado en el documento.</p> + +<p>El script de contenido ahora necesita lucir de esta manera:</p> + +<pre class="brush: js">// "self" is a global object in content scripts +// Listen for a message, and replace the document's +// contents with the message payload. +self.port.on("replacePage", function(message) { + document.body.innerHTML = "<h1>" + message + "</h1>"; +}); +</pre> + +<p>En el script del add-on, se enviará al script de contenido un mensaje desde <code>onAttach</code>.</p> + +<pre class="brush: js">// Import the page-mod API +var pageMod = require("sdk/page-mod"); +// Import the self API +var self = require("sdk/self"); + +// Create a page-mod +// It will run a script whenever a ".org" URL is loaded +// The script replaces the page contents with a message +pageMod.PageMod({ + include: "*.org", + contentScriptFile: self.data.url("my-script.js"), + // Send the content script a message inside onAttach + onAttach: function(worker) { + worker.port.emit("replacePage", "Page matches ruleset"); + } +}); +</pre> + +<p>El mensaje <code>replacePage</code> no es un mensaje ya definido: es un mensaje definido por el add-on en la llamada <code>port.emit()</code>.</p> + +<div> +<h2 id="Inyectar_CSS">Inyectar CSS</h2> + +<p><strong>Note que la característica descrita en esta sección es experimental por los momentos. Se continuará dando soporte a esta característica, pero los detalles dela API pueden cambiar.</strong></p> + +<p>En vez de inyectar JavaScript en una página, es posible inyectar CSS configurando la opción <code>contentStyle</code> del page-mod.</p> + +<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({ + include: "*", + contentStyle: "body {" + + " border: 5px solid green;" + + "}" +}); +</pre> + +<p>Como con el <code>contentScript</code>, hay una opción correspondiente a<code> contentStyleFile</code> que toma una URL de un archivo CSS en el directorio "data" ; es una buena practica usar esta opción en vez de <code>contentStyle</code> si el CSS un poco complejo.</p> + +<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({ + include: "*", + contentStyleFile: require("sdk/self").data.url("my-style.css") +}); +</pre> + +<p>O, para Firefox 34, se puede usar una versión más simple:</p> + +<pre class="brush: js">var pageMod = require("sdk/page-mod").PageMod({ + include: "*", + contentStyleFile: "./my-style.css" +});</pre> +</div> + +<h2 id="Conociendo_más">Conociendo más</h2> + +<p>Para conocer más sobre <code>page-mod</code>, puede dirigirse a la <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod">página de referencia de la API</a>. En particular, el constructor de <code>PageMod</code> toma algunas opciones adicionales para tomar el control de este comportamiento:</p> + +<ul> + <li> + <p>De forma predeterminada, los scripts de contenido no están fijados a ninguna pestaña que este ya abierta cuando el page-mod es creado, y son fijados a iframes como a documentos de alto nivel. Para controlar este comportamiento se usa la opción <code>attachTo</code>.</p> + </li> + <li> + <p>Define valores de solo lectura accesibles a los scripts de contenido usando la opción <code>contentScriptOptions</code>.</p> + </li> + <li> + <p>De forma predeterminada, los scripts de contenido son adjuntados después que todo el contenido (DOM, JS, CSS, imagenes) de la página ha sido cargado, al mismo tiempo se activa el <a href="/en-US/docs/Web/API/GlobalEventHandlers.onload">evento window.onload</a>. Para controlar este comportamiento, se usa la opción <code>contentScriptWhen</code>.</p> + </li> +</ul> + +<p>Para conocer más sobre los scripts de contenido en general, puede dirigirse a la <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">guía de scripts de contenido.</a></p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html new file mode 100644 index 0000000000..1140029e16 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html @@ -0,0 +1,48 @@ +--- +title: Abrir una página web +slug: Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Open_a_Web_Page +--- +<div class="note">Para realizar los pasos que se describen a continuación es necesario tener <a href="/en-US/Add-ons/SDK/Tutorials/Installation">instalado el SDK </a>y conocimientos <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">básico de <code>cfx</code></a>.</div> + +<p>Para abrir una nueva página web, se usa el módulo <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code></a>:</p> + +<pre class="brush: js">var tabs = require("sdk/tabs"); +tabs.open("http://www.example.com"); +</pre> + +<p>Esta función es asíncrona, por lo tanto no se tendrá inmediatamanete un <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab">objeto</a> <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab"><code>tab</code> </a> el cual se pueda examinar. Para hacer esto, se pasa una función de retrollamada en <code>open()</code>. La retrollamada es asignada a pa propiedad <code>onReady</code>, y pasará la pestaña como argumento:</p> + +<pre class="brush: js">var tabs = require("sdk/tabs"); +tabs.open({ + url: "http://www.example.com", + onReady: function onReady(tab) { + console.log(tab.title); + } +}); +</pre> + +<p>Incluso ahora, no se tiene acceso directo a ningún contenido dentro de la pestaña.</p> + +<p>Para acceder al contenido de la pstaña se necesita adjuntar un script a la pestaña usando <code>tab.attach()</code>. Este add-on carga una página, luego adjunta un script a la página el cual le agrega un borde rojo:</p> + +<pre class="brush: js">var tabs = require("sdk/tabs"); +tabs.open({ + url: "http://www.example.com", + onReady: runScript +}); + +function runScript(tab) { + tab.attach({ + contentScript: "document.body.style.border = '5px solid red';" + }); +} +</pre> + +<h2 id="Conozca_más">Conozca más</h2> + +<p>Para conocer más sobre las pestañas en el SDK, puede dirigirse a la <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">referencia de </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tabs</code> en la API</a>.</p> + +<p>Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> </a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29">usando <code>tab.attach()</code></a><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#attach%28options%29"> en el tutorial</a>.</p> diff --git a/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html new file mode 100644 index 0000000000..cb2c3d7b18 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html @@ -0,0 +1,143 @@ +--- +title: Resolución de problemas +slug: Mozilla/Add-ons/SDK/Tutorials/Troubleshooting +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Troubleshooting +--- +<p>Si tiene problemas para lograr que el Add-on SDK funcione correctamente, ¡no entre en pánico! Esta página lista algunos puntos de inicio que pueden ayudarte a solucionar el problema.</p> + +<h2 id="Problema_de_Cuarentena_en_Mac_OS_X">Problema de Cuarentena en Mac OS X</h2> + +<p>En Mac OS X, puede aparecer el siguiente error cuando intenta ejecutar <code>cfx</code>:</p> + +<pre>/path/to/sdk/bin/cfx: /usr/bin/env: bad interpreter: Operation not permitted +</pre> + +<p>Esto puede ser causado debido a que el archivo ejecutable de <code>cfx</code> fue puesto en cuarentena durante la descarga desde Internet.</p> + +<p>Pra sacar el archivo de la cuarentena, use <code>xattr -d</code>, especificando <code>com.apple.quarantine</code> como el nombre del atributo a ser eliminado, y <code>cfx</code> como el archivo desde el cual borrar ese atributo:</p> + +<pre>xattr -d com.apple.quarantine /path/to/sdk/bin/cfx +</pre> + +<h2 id="Verificar_Python">Verificar Python</h2> + +<p>La herramienta <code>cfx</code> del SDK se ejecuta sobre Python. Si tiene problemas para ejecutar <code>cfx</code> de cualquier manera, asegúrese de tener Python correctamente instalado.</p> + +<p>Intente ejecutar la siguiente línea desde una terminal:</p> + +<pre> python --version +</pre> + +<p><span class="rangySelectionBoundary" id="selectionBoundary_1424733772250_620847453524463" style="display: none; line-height: 0;"></span><span class="rangySelectionBoundary" id="selectionBoundary_1424733772250_1443661623400101" style="display: none; line-height: 0;"></span><code>cfx</code> espera contar con Python 2.5, 2.6 o 2.7. Versiones anteriores o superiores pueden o no funcionar correctamente. Los espacios en blanco en la ruta de instalación no estan soportados.</p> + +<h2 id="Verificar_Firefox_o_XULRunner">Verificar Firefox o XULRunner</h2> + +<p><code>cfx</code> busca lugares conocidos en el sistema para encontrar a Firefox o XULRunner. <code>cfx</code> puede no haber encontrado una instalación, o si tiene múltiples instalaciones, <code>cfx</code> puede haber encontrado la instalación menos apropiada. En esos casos debe usar <code>la opción </code><code>--binary</code> de <code>cfx</code>. Vea la guia <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx Tool</a> para más información.</p> + +<p>Cuando ejecuta <code>cfx</code> para probar el add-on o realiza pruebas unitarias, se muestra en pantalla la ubicación de los binarios de Firefox o XULRunner encontrados, por lo que puede asegurarse de la ubicación revisando estas salidas.</p> + +<h2 id="Verificar_la_Terminal_de_Texto">Verificar la Terminal de Texto</h2> + +<p>Cuando se generan errores en la API del SDK y el código, estos son registrados en la terminal de texto. Esta debería ser la misma terminal desde la cual ejecuta <code>cfx</code>.</p> + +<h2 id="No_deje_sueltos_los_Archivos_No-SDK">No deje sueltos los Archivos No-SDK</h2> + +<p>Actualmente el SDK no maneja de manera adecuada los archivos y directorios que no espera encontrar. Si hay directorios vacíos, directorios o archivos que no estan relacionados con el SDK dentro del directorio <code>addon-sdk</code> o sus subdirectorios, intente eliminarlos.</p> + +<h2 id="Buscar_Problemas_Conocidos">Buscar Problemas Conocidos</h2> + +<p>Alguien mas debe haber experimentado su mismo problema. Frecuentemente otras personas publican sus problemas a la <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">lista de correo del proyecto</a>. Usted también puede explorar la lista de <a href="https://bugzilla.mozilla.org/buglist.cgi?order=Bug%20Number&resolution=---&resolution=DUPLICATE&query_format=advanced&product=Add-on%20SDK">problemas conocidos</a> ó <a href="https://bugzilla.mozilla.org/query.cgi?format=advanced&product=Add-on%20SDK">buscar</a> palabras claves específicas.</p> + +<h2 id="Contactar_al_Equipo_del_Proyecto_y_al_Grupo_de_Usuarios">Contactar al Equipo del Proyecto y al Grupo de Usuarios</h2> + +<p>Las personas usuarias del SDK y las personas miembro del equipo del proyecto discuten problemas y propuestas en la <a href="http://groups.google.com/group/mozilla-labs-jetpack/topics">lista de correo del proyecto</a>. Alguien más puede haber tenido un problema igual al suyo, por lo tanto puede intentar buscar en la lista. Igualmente puede publicar una pregunta si así lo desea.</p> + +<p>También puede hablar en tiempo real con otras personas usuarias de SDK en el canal <a href="http://mibbit.com/?channel=%23jetpack&server=irc.mozilla.org">#jetpack</a> en la<a href="http://irc.mozilla.org/"> red IRC de Mozilla</a>.</p> + +<p>Y si desea <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Add-on%20SDK&component=General">reportar un error en el SDK</a>, es siempre bienvenido! Para esto deberá crear una cuenta con Bugzilla, el rastreador de errores de Mozilla.</p> + +<h2 id="Ejecutar_Pruebas_Unitarias_en_SDK">Ejecutar Pruebas Unitarias en SDK</h2> + +<p>El SDK trae consigo un conjunto de pruebas las cuales aseguran el correcto funcionamiento de las APIs. Puede ejecutaras de la siguiente manera:</p> + +<pre> cfx testall +</pre> + +<p>Algunas de las pruebas abren la ventana de Firefox para verificar las APIs relacionadas a la interfaz de usuario, no se preocupe. Por favor deje que el proceso culmine antes de reanudar su trabajo.</p> + +<p>Cuando el proceso culmine, la terminal debe mostrar la salida que puede verse de la siguiente manera:</p> + +<pre> Testing cfx... + ............................................................. + ---------------------------------------------------------------------- + Ran 61 tests in 4.388s + +OK + Testing reading-data... + Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'. + Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmpu26K_5.mozrunner'. + .info: My ID is 6724fc1b-3ec4-40e2-8583-8061088b3185 + .. + 3 of 3 tests passed. + OK + Total time: 4.036381 seconds + Program terminated successfully. + Testing all available packages: nsjetpack, test-harness, api-utils, development-mode. + Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'. + Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmp-dzeaA.mozrunner'. + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ......................................................................... + ............................................... + +3405 of 3405 tests passed. + OK + Total time: 43.105498 seconds + Program terminated successfully. + All tests were successful. Ship it! +</pre> + +<p>Si la salida revela muchos errores, puede ser una señal que el SDK no se esta ejecutando correctamente en su sistema. En ese caso, por favor reporte el error o envíe un mensaje a la lista de correo. Vea la sección anterior para más información sobre como hacer esto.</p> diff --git a/files/es/mozilla/add-ons/themes/obsolete/index.html b/files/es/mozilla/add-ons/themes/obsolete/index.html new file mode 100644 index 0000000000..d420b6ebf0 --- /dev/null +++ b/files/es/mozilla/add-ons/themes/obsolete/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/Themes/Obsolete +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +<p>This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.</p> +<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p> diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html new file mode 100644 index 0000000000..216b120445 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html @@ -0,0 +1,33 @@ +--- +title: Añadir botón a la barra de herramientas +slug: >- + Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button +--- +<p>{{AddonSidebar}}</p> + +<p>Fichero XUL de ejemplo:</p> + +<pre class="brush: js"><?xml version="1.0"?> +<?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> + +<overlay id="messengerWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <script type="application/x-javascript" src="overlay.js" /> + <toolbarpalette id="MailToolbarPalette"> + <toolbarbutton id="demo-button" + class="demo-button toolbarbutton-1" + label="Demo" + type="button" + oncommand="Demo.load();" + /> + </toolbarpalette> +</overlay> +</pre> + +<p>Añada el siguiente código al fichero CSS referenciado en el fichero XUL:</p> + +<pre class="brush: css">#demo-button, [place="palette"] > #demo-button { + list-style-image: url("chrome://demo/skin/icon.png") !important; +} +</pre> diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html new file mode 100644 index 0000000000..8711130729 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html @@ -0,0 +1,13 @@ +--- +title: Common Thunderbird Extension Techniques +slug: Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques +tags: + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques +--- +<p>{{AddonSidebar}}</p> + +<p>{{ tree() }}</p> diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/index.html new file mode 100644 index 0000000000..6d5cb0424a --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/index.html @@ -0,0 +1,128 @@ +--- +title: Thunderbird HowTos +slug: Mozilla/Add-ons/Thunderbird/HowTos +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions/HowTos +--- +<p>{{AddonSidebar}}</p> + +<div class="warning"> +<p style="text-align: center;">This page is badly broken (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=868872" title="https://bugzilla.mozilla.org/show_bug.cgi?id=868872">https://bugzilla.mozilla.org/show_bug.cgi?id=868872</a>), use <a href="http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html" title="http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html">http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html</a> in the meanwhile.</p> +</div> + +<p>Please add questions or answers to this page so that other people can benefit from your work. Also, you will see that there are many topics for which there is a question, but no answer. <strong>Please help</strong> by adding an answer! (Adding another question helps too!)</p> + +<p>To get started creating the most basic extension framework, please see <a href="/en-US/docs/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="Building a Thunderbird extension">Building a Thunderbird Extension</a>.</p> + +<p>This page is organized into two parts: common extension techniques and Thunderbird-specific APIs. The former discusses general methods to <em>hook into</em> Thunderbird, while the latter is more focused on how to do interesting things once Thunderbird has started running your code.</p> + +<p>See also "<a href="/en-US/docs/Extensions/Thunderbird/An_overview_of_the_Thunderbird_interface" title="Extensions/Thunderbird/An overview of the Thunderbird interface">An overview of Thunderbird components</a>". Many of the components described on that page have links to related examples.</p> + +<h2 id="Common_Extension_Techniques">Common Extension Techniques</h2> + +<div class="wiki-tree"> +<ul> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button">Adding a Toolbar Button</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Option_to_Context_Menu" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Option_to_Context_Menu">Adding an Option to the Context Menu</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_New_Tab" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Opening_a_New_Tab">Opening a New Tab</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_StringBundle_from_Overlay" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_StringBundle_from_Overlay">Accessing StringBundle from an Overlay</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Thunderbird_Window_Areas" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Thunderbird_Window_Areas">Access Thunderbird Window Areas</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Window" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Access_Window">Access Window</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Access_Message_in_Compose_Window_Editor">Access Message in Compose Window Editor</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Create_Custom_Column" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Create_Custom_Column">Create Custom Column</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Detect_Opening_Folder" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Detect_Opening_Folder">Detect Opening Folder</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Filter_Incoming_Mail" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Filter_Incoming_Mail">Filter Incoming Mail</a> <strong>NEW!</strong></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Get_Thunderbird_version" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Get_Thunderbird_version">Get Thunderbird version</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Use_SQLite" rel="internal" title="Extensions/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Use_SQLite">Use SQLite</a></li> +</ul> +</div> + +<h2 id="Thunderbird-specific_APIs_for_Extensions">Thunderbird-specific APIs for Extensions</h2> + +<p>Each of the pages listed in this section contains a number of related topics. For example, the "Compose New Message" page contains sections that describe how to open a new message window, modify a message body, etc.</p> + +<h3 id="Folders_and_message_lists"><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists">Folders and message lists</a></h3> + +<ul> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Getting_the_Current_nsIMsgFolder">Getting the Current nsIMsgFolder</a></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Getting_the_Currently-Selected_Message">Getting the Currently-Selected Message</a></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Changing_the_Current_Message_Selection">Changing the Current Message Selection</a></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Listing_Messages_in_a_Folder">Listing Messages in a Folder</a></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Listing_Subfolders">Listing Subfolders</a> <strong>TODO</strong></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Perform_Operation_on_Folder">Perform Operation on Folder</a> <strong>TODO</strong></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Check_for_New_Mail">Check for New Mail</a> <strong>TODO</strong></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Watch_for_New_Mail">Watch for New Mail</a> <strong>TODO</strong></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Check_if_a_message_is_a_Feed_Item">Check if a Message is a Feed Item</a> <strong>TODO</strong></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Move_Selected_Messages">Move Selected Message</a> <strong>TODO</strong></li> + <li><a href="/en-US/Add-ons/Thunderbird/HowTos/Folders_and_message_lists#Copy_Selected_Messages">Copy Selected Message</a> <strong>TODO</strong></li> +</ul> + +<h3 id="View_message"><a href="/en-US/docs/Thunderbird/Message_View_Examples" rel="internal">View message</a></h3> + +<ul> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Get_Message_Header_from_a_URI.2FURL" rel="internal">Get Message Header by URI/URL</a></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#List_Attachments" rel="internal">List Attachments</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Read_Attachment" rel="internal">Read Attachment</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Save_Attachment" rel="internal">Save Attachment</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Access_Message" rel="internal">Access Message</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Get_Message_Body_by_Header" rel="internal">Get Message Body by Header</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#section_8" rel="internal">Get MIME Headers for any message</a></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#Search_Messages" rel='internal"'>Search Messages</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Thunderbird/Message_View_Examples#section_8" rel="internal">Display a message yourself using <iframe>s</a> <strong>TODO</strong></li> +</ul> + +<h3 id="Compose_new_messages"><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message" title="Extensions/Thunderbird/HowTos/Common Thunderbird Use Cases/Compose New Message">Compose new messages</a></h3> + +<ul> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Open_New_Message_Window" rel="internal">Open New Message Window</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Modify_Recipient_List" rel="internal">Modify Recipient List</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Modify_Header" rel="internal">Modify Header</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Add_Header" rel="internal">Add Header</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Modify_Message_Body" rel="internal">Modify Message Body</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Intercept_Outgoing_Message" rel="internal">Intercept Outgoing Message</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Compose_New_Message#Get_Access_to_the_Compose_Window_before_the_Editing_is_Started" rel="internal">Get Access to the Compose Window before the Editing is Started</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Automatic_message_sending">Automatic message sending</a></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Creating_a_message_for_sending_later">Creating a message for sending later (store it in the Outbox folder)</a></li> +</ul> + +<h3 id="Reply_to_message"><strong><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message" title="Extensions/Thunderbird/HowTos/Common Thunderbird Use Cases/Reply to Message">Reply to message</a></strong></h3> + +<ul> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message#Modify_Quoted_Message_%28before_normal_composition%29" rel="internal" title="Extensions/Thunderbird/HowTos/Common Thunderbird Use Cases/Reply to Message#Modify Quoted Message (before normal composition)">Modify Quoted Message (before normal composition)</a> <strong>TODO</strong></li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message#section_1" title="https://developer.mozilla.org/en/Extensions/Thunderbird/HowTos/Common_Thunderbird_Use_Cases/Reply_to_Message#section_1">Reply to a given message, reply to all, forward it, reply to list, and all variants</a></li> +</ul> + +<h3 id="Access_address_book"><a href="/en-US/docs/Thunderbird/Address_Book_Examples" title="https://developer.mozilla.org/En/Address_Book_Examples">Access address book</a></h3> + +<ul> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_get_all_address_books.3f" title="Address Book Examples#How do I get all address books.3f">Get all address books</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_get_one_address_book.3f" title="Address Book Examples#How do I get one address book.3f">Get one address book</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_search_for_a_particular_contact_property_%28name.2c_email%29.3f" title="Address Book Examples#How do I search for a particular contact property (name.2c email).3f">Search for a particular contact property (name, email)</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_search_for_multiple_contacts.3f" title="Address Book Examples#How do I search for multiple contacts.3f">Search for multiple contacts</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_add.2fedit.2fdelete_contacts.3f" title="Address Book Examples#How do I add.2fedit.2fdelete contacts.3f">Add / edit / Delete contacts</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_add_and_use_my_own_properties.3f" title="Address Book Examples#How do I add and use my own properties.3f">Add and use custom properties</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_add.2fedit.2fdelete_mailing_lists.3f" title="Address Book Examples#How do I add.2fedit.2fdelete mailing lists.3f">Add / edit / delete mailing lists</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_display_properties_dialogs_to_the_user.3f" title="Address Book Examples#How do I display properties dialogs to the user.3f">Display properties dialogs to the user</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I_set_up_my_own_address_book.3f" title="Address Book Examples#How do I set up my own address book.3f">Set up custom address book</a></li> + <li><a href="/en-US/docs/Thunderbird/Address_Book_Examples#How_do_I.c2.a0set_up_autocomplete_to_use_the_address_book.3f" title="Address Book Examples#How do I.c2.a0set up autocomplete to use the address book.3f">Set up auto-complete to use the address book</a></li> +</ul> + +<div class="wiki-tree"> +<ul> +</ul> + +<h3 id="Activity_Manager">Activity Manager</h3> +</div> + +<ul> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Showing_a_user-defined_activity_in_the_Activity_Manager_window" rel="internal"><u>Show a user-defined activity in the Activity Manager window</u></a> <strong>NEW</strong>!</li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Showing_a_user-defined_activity_with_cancel_capability_%28JavaScript%29" rel="internal">Show a user-defined activity with cancel capability (JavaScript)</a> in the Activity Manager window <strong>NEW</strong>!</li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Showing_a_user-defined_activity_with_undo_capability_%28C.2b.2b%29" rel="internal">Show a user-defined activity with undo capability (C++)</a> in the Activity Manager window <strong>NEW</strong>!</li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Adding_an_activity_with_a_custom_context_type" rel="internal"><u>Add an activity with a custom context type</u></a> in the Activity Manager window <strong>NEW</strong>!</li> + <li><a href="/en-US/docs/Extensions/Thunderbird/HowTos/Activity_Manager#Adding_a_fully_customized_activity" rel="internal">Add a fully customized activity</a> in the Activity Manager window <strong>NEW</strong>!</li> +</ul> diff --git a/files/es/mozilla/add-ons/thunderbird/index.html b/files/es/mozilla/add-ons/thunderbird/index.html new file mode 100644 index 0000000000..4e66877136 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/index.html @@ -0,0 +1,137 @@ +--- +title: Thunderbird extensions +slug: Mozilla/Add-ons/Thunderbird +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions +--- +<div class="callout-box"><strong><a href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="en/Building_a_Thunderbird_extension">Building a Thunderbird extension</a></strong><br> +Step-by-step explanation on how to build an extension for Thunderbird.</div> + +<div> +<p>{{AddonSidebar}}</p> +The following documentation provides help for creating extensions for Mozilla's <a class="internal" href="/en/Thunderbird" title="En/Thunderbird">Thunderbird</a> email client. Although there are many similarities with <a href="/en/Extensions" title="en/Extensions">Firefox extensions</a> there are also some differences that may confound the starting developer.</div> + +<div><br> +<strong>Please help!</strong> You can <a class="internal" href="/en/Extensions/Thunderbird/HowTos" title="en/Extensions/Thunderbird/HowTos">add a how-to</a> (a question or an answer or a code snippet), <a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">summarize and link to a relevant newsgroup discussion</a>, or create a tutorial. Need help? Contact <a class="internal" href="/User:jenzed" title="User:jenzed">jenzed</a>.</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=Extensions&language=en" title="Special:Tags?tag=Extensions&language=en">Documentation</a></h2> + + <h3 id="Getting_started_with_Thunderbird">Getting started with Thunderbird</h3> + + <p>A brave, young developer wants to develop an add-on for Thunderbird. Here's a few links to help them through this journey.</p> + + <ul> + <li>Start by reading the tutorial and learn how to<a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="En/Building a Thunderbird extension"> build a Thunderbird extension</a> (Outdated, still talks about overlays and the add-on builder is no longer available but the tutorial has not been updated.)</li> + <li>Read about the <a href="/en/Thunderbird/Main_Windows" title="Main Windows">main windows</a> so that you know what one means when they say « thread pane », « preview pane », and « folder pane ».</li> + + <li>Want to do some real stuff? See <a class="external" href="http://blog.xulforum.org/index.php?post/2011/03/14/Basic-MimeMessage-demo" title="http://blog.xulforum.org/index.php?post/2011/03/14/Basic-MimeMessage-demo">how to inspect a message</a> (demo add-on included!)</li> + <li>Play with our other <a href="/en/Extensions/Thunderbird/Demo_Addon" title="Demo Addon">demo add-on</a> that exercises some more advanced Thunderbird-specific features</li> + <li>Want to do even more stuff? Don't reinvent the wheel: steal functions from the <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">thunderbird-stdlib</a> project (doc <a class="external" href="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html" title="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html">here</a>). Functions for dealing with messages (delete them, archive them, change their tags, etc.) are included.</li> + <li>Haven't found what you're looking for? Read the <a class="internal" href="/en/Extensions/Thunderbird/HowTos" rel="internal" title="en/Extensions/Thunderbird/HowTos">Thunderbird how-tos</a>; they contain a lot of recipes for things extensions want to do.</li> + <li>Still haven't managed to do what you wanted? See the list of all <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">Thunderbird communication channels </a>so that you know where to ask when you get stuck :-).</li> + <li>Feeling really brave? Read the source using a <a class="external" href="http://doxygen.db48x.net/comm-central/html/" title="http://doxygen.db48x.net/comm-central/html/">fancy interface</a>; you can often find tests that demonstrate how to do what you're trying to achieve.</li> + </ul> + + <h3 id="The_Gloda_database">The Gloda database</h3> + + <p>Thunderbird has a subsystem called Gloda. Gloda stands for « Global Database », and creates Thunderbird-wide relations between objects. Gloda provides concepts such as Conversations, Messages, Identities, Contacts. All these concepts are related together: a Conversation contains Messages which are linked to Identities (<strong>from</strong> field, <strong>to</strong> field) which are themselves part of a Contact: indeed, a contact has multiple identities.</p> + + <p>Typical use cases for Gloda: find all messages whose subject matches [search term], find all messages from [person], find all messages in the same thread as [a given message], find all messages involving [person], etc. etc.</p> + + <p>Gloda is extremely powerful and is used heavily by add-ons such as <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/" title="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/">Thunderbird Conversations</a>. Learn more about Gloda:</p> + + <ul> + <li>an overview of <a href="/en/Thunderbird/gloda" title="Gloda">Gloda</a></li> + <li>learn how to create <a href="/en/Thunderbird/Creating_a_Gloda_message_query" title="Creating a gloda message query">your first message query</a> and read the <a href="/en/Thunderbird/Gloda_examples" title="Gloda examples">gloda examples</a></li> + <li>learn about the Gloda internals: <a href="/en/Thunderbird/Gloda_debugging" title="Gloda debugging">Gloda debugging</a>, <a href="/en/Thunderbird/Gloda_indexing" title="Gloda indexing">Gloda indexing</a></li> + </ul> + + <h3 id="More_Thunderbird-specific_links">More Thunderbird-specific links</h3> + + <p>Some of these links may be wildly out of date, but they still provide valuable information on the codebase.</p> + + <ul> + <li><a class="internal" href="/en/Extensions/Thunderbird/An_overview_of_the_Thunderbird_interface" title="En/Extensions/Thunderbird/An overview of the Thunderbird interface">An overview of Thunderbird components</a></li> + <li><a class="internal" href="/en/Extensions/Thunderbird/Thunderbird_developer_reference_docs" title="en/Extensions/Thunderbird/Thunderbird developer reference docs">Developer reference docs</a>: + <ul> + <li><a class="internal" href="/en/Folders" title="En/Folders">Folder classes</a></li> + <li><a class="internal" href="/en/DB_Views_(message_lists)" title="En/DB Views (message lists)">DB views (message list)</a></li> + <li><a class="internal" href="/en/Message_Summary_Database" title="En/Message Summary Database">Message summary database</a></li> + <li><a class="internal" href="/en/MailNews_Protocols" title="En/MailNews Protocols">MailNews protocols</a></li> + <li><a class="internal" href="/En/MailNews_Filters" rel="internal" title="En/MailNews Filters">MailNews filters</a></li> + <li><a class="internal" href="/en/Extensions/Thunderbird/Error_reporting_tools" title="en/Extension Library/Extensions/Thunderbird/Error reporting tools">Error reporting tools</a></li> + <li><a href="/en/Toolkit_API/STEEL" title="en/Toolkit API/STEEL">STEEL library</a> (not actively developed anymore, use <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">https://github.com/protz/thunderbird-stdlib</a>)</li> + <li><a class="external" href="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html" title="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html">Developing new account types</a> <strong>NEW!</strong></li> + </ul> + </li> + <li><a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">Useful newsgroup discussions</a> (watch out, anything that's too old should be regarded suspiciously; there's been significant API rewrite over the past years, and most of these techniques are considerably easier now) </li> + <li><a href="/en/Thunderbird/Thunderbird_API_documentation" title="en/Thunderbird/Thunderbird API documentation">Thunderbird API docs</a> (mostly a collection of out-of-date pages, relevance is rather dubious) </li> + <li><a href="/En/Thunderbird_3_for_developers" title="En/Thunderbird 3 for developers">Thunderbird 3 for developers</a> and <a href="/en/Thunderbird_3.1_for_developers" title="en/Thunderbird 3.1 for developers">Thunderbird 3.1 for developers</a> - changes in the recent Thunderbird updates affecting add-on developers. <a href="/Thunderbird_5_for_developers" title="Thunderbird 5 for developers">Thunderbird 5 for developers</a> has important information on MsgHdrToMimeMessage which is a central piece of code.</li> + </ul> + + <h3 id="General_links">General links</h3> + + <ul> + <li><a class="internal" href="/en/Extensions" title="en/Extensions">General information on developing extensions for Mozilla applications</a></li> + <li><a href="/en/Extensions/Thunderbird/Finding_the_code_for_a_feature" title="en/Extensions/Thunderbird/Finding the code for a feature">Finding the code for a feature</a></li> + <li><a class="external" href="http://kb.mozillazine.org/Category:Thunderbird" title="http://kb.mozillazine.org/Category:Thunderbird">Mozillazine articles on Thunderbird</a></li> + <li><a href="/Special:Tags?tag=Thunderbird" title="https://developer.mozilla.org/Special:Tags?tag=Thunderbird">All pages tagged with Thunderbird</a></li> + <li><a href="/Special:Tags?tag=MailNews" title="https://developer.mozilla.org/Special:Tags?tag=MailNews">All pages tagged with MailNews</a></li> + </ul> + </td> + <td> + <h2 id="Community" name="Community">Community</h2> + + <ul> + <li>See the list of all <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">Thunderbird communication channels </a>first</li> + <li>Among these are:</li> + </ul> + + <p>{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}</p> + + <ul> + <li><a class="link-irc" href="irc://moznet/#extdev">#extdev IRC channel</a> / <a class="link-irc" href="irc://moznet/#maildev">#maildev IRC channel</a></li> + <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=19">MozillaZine forum</a></li> + <li><a class="external" href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners</a></li> + <li><a href="/en/Extensions/Community" title="en/Extensions/Community">Other community links...</a></li> + </ul> + + <h2 id="Tools" name="Tools">Tools</h2> + + <ul> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> edit the live DOM (Firefox and Thunderbird)</li> + <li><a class="link-https" href="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/" title="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/">Workspace for Thunderbird</a>, allows running code snippets in Thunderbird and inspecting variable structure and content</li> + <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" rel="external nofollow" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, a JavaScript debugger (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird</a>)</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> a suite of development tools</li> + <li><a class="external" href="http://www.gijsk.com/" rel="external nofollow" title="http://www.gijsk.com/">Chrome List</a> view files in chrome:// (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird</a>)</li> + <li><a class="external" href="http://addons.mozilla.org/en-US/developers/tools/builder" rel="external nofollow" title="http://addons.mozilla.org/en-US/developers/tools/builder">Add-on Builder</a> a web-based extension skeleton generator (Firefox and Thunderbird)</li> + <li><a href="/en/Mozmill" title="en/Mozmill">Mozmill</a> test tool and framework</li> + <li><a class="external" href="http://xpcomviewer.mozdev.org/" rel="external nofollow" title="http://xpcomviewer.mozdev.org">XPCOMViewer</a> an XPCOM inspector (Firefox and Thunderbird)</li> + </ul> + + <p>... <a class="internal" href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions">more tools</a> ...</p> + + <p><span class="alllinks"><a href="/Special:Tags?tag=Extensions:Tools&language=en" title="Special:Tags?tag=Extensions:Tools&language=en">View All...</a></span></p> + + <h2 id="Related_Topics" name="Related_Topics">Related Topics</h2> + + <dl> + <dd><a href="/en/XUL" title="en/XUL">XUL</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/en/Themes" title="en/Themes">Themes</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p><span class="comment">Categories</span></p> + +<p>{{ languages( { "ja": "ja/Extensions/Thunderbird" } ) }}</p> diff --git a/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..1bccc9d703 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html @@ -0,0 +1,220 @@ +--- +title: Agregar botón a la barra de herramientas +slug: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +--- +<div>{{AddonSidebar}}</div> + +<p>La barra de herramientas es una de las principales componentes UI disponibles para las extensiones. Toolbar buttons live in the main browser toolbar y contienen un icono. Cuando el usuario da click en el icono, dos cosas pueden suceder:</p> + +<ul> + <li>Si tu tienes especificado un popup para el icono, se va a mostrar. Popups son transitorios cuadros de diálogos creados usando HTML, CSS, y JavaScript.</li> + <li>Si no tu tienes especificado un popup, un evento del click es generado,el cual puede ser detectado en tu codigo para realizar alguna acción y responderla.</li> +</ul> + +<p>Con las APIs de WebExtension, este tipo de botón es se llaman "browser actions", y son configurados de la siguiente manera:</p> + +<ul> + <li>La clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> en manifest.json es usada para definir el botón.</li> + <li>La API de JavaScript <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> es usada para escuchar los clicks y cambiar el botón o realizar alguna acción en el codigo.</li> +</ul> + +<h2 id="Un_simple_botón">Un simple botón</h2> + +<p>En esta sección vamos a crear una extension que agrega un botón a la barra de herramientas. Cuando el usuario de click en el botón, vamos abrir <a href="https://developer.mozilla.org">https://developer.mozilla.org </a>en una nueva pestaña.</p> + +<p>Primero, crear una nueva carpeta "botón", y crea un archivo con el nombre de "manifest.json" con el siguiente contenido:</p> + +<pre class="brush: json">{ + + "description": "Demostrando botones de la barra de herramientas", + "manifest_version": 2, + "name": "botón-demo", + "version": "1.0", + + "background": { + "scripts": ["background.js"] + }, + + "browser_action": { + "default_icon": { + "16": "icons/page-16.png", + "32": "icons/page-32.png" + } + } + +}</pre> + +<p>Esto especifica que tenemos un <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background script</a> llamado "background.js", y un <strong>browser action</strong> (butón) cuyo icono va a estar en la carpeta "icons".</p> + +<div class="pull-aside"> +<div class="moreinfo">Estos iconos son de <a href="https://www.iconfinder.com/iconsets/bitsies">bitsies!</a> conjunto de iconos creados por Recep Kütük.</div> +</div> + +<p>Despues, dentro del folder "botón" crea la carpeta "icons" y dentro de el guarda estos dos iconos:</p> + +<ul> + <li>"page-16.png" (<img alt="" src="https://mdn.mozillademos.org/files/13476/page-16.png" style="height: 16px; width: 16px;">)</li> + <li>"page-32.png" (<img alt="" src="https://mdn.mozillademos.org/files/13478/page-32.png" style="height: 32px; width: 32px;">).</li> +</ul> + +<div style=""> </div> + +<p>Tenemos dos iconos entonces podemos usar el mas grande para las <span id="result_box" lang="es"><span>pantallas de alta densidad</span></span>. El navegador se va encargar de seleccionar el correcto para cada pantalla.</p> + +<p>Despues, crea "background.js" en la raiz del folder de la extension, y agrega el siguiente contenido:</p> + +<pre class="brush: js">function openPage() { + browser.tabs.create({ + url: "https://developer.mozilla.org" + }); +} + +browser.browserAction.onClicked.addListener(openPage);</pre> + +<p>Esto esta a la espera de de el navegador se de click; cuando el evento se dispara, la funcion <code>openPage()</code> comienza a ejecutarse, el cual abre la página especificada usando la API de <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></code>.</p> + +<p>En este momento la extension debe de mirarse asi:</p> + +<pre class="line-numbers language-html"><code class="language-html">button/ + icons/ + page-16.png + page-32.png + background.js + manifest.json</code></pre> + +<p>Ahora <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">instala la extensión</a> y da click en el botón:</p> + +<p>{{EmbedYouTube("kwwTowgT-Ys")}}</p> + +<h2 id="Agregando_un_popup">Agregando un popup</h2> + +<p>Vamos a intentar agregar un popup al botón. Remplaza el manifest.json con este contenido:</p> + +<pre class="brush: json">{ + + "description": "Demostrando botones de la barra de herramientas", + "manifest_version": 2, + "name": "botón-demo", + "version": "1.0", + + "browser_action": { + "browser_style": true, + "default_popup": "popup/choose_page.html", + "default_icon": { + "16": "icons/page-16.png", + "32": "icons/page-32.png" + } + } + +}</pre> + +<p>Realizamos tres cambios:</p> + +<ul> + <li>Ya no hacemos referencia a "background.js", porque ahora nosotros vamos a controlar la lógica de la extensión en el script del popup (También es posible background.js como un popup, es solo qu no lo necesitamos en este caso).</li> + <li>Agregamos <code>"browser_style": true</code>, cual nos ayuda a dar estiloa nuestro popup y luzca mas integrado al navegador.</li> + <li>Finalmente, agregamos <code>"default_popup": "popup/choose_page.html"</code>, cual le dice al navegador que esta acción ahora va a mostar un popup cuando se haga click , usando el documento que se encuentra en "popup/choose_page.html".</li> +</ul> + +<p>Entonces ahora necesitamos crear el popup. Crea un folder llamado "popup" y crea adentro el archivo "choose_page.html" . agregale el siguiente contenido:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="choose_page.css"/> + </head> + +<body> + <div class="page-choice">developer.mozilla.org</div> + <div class="page-choice">support.mozilla.org</div> + <div class="page-choice">addons.mozilla.org</div> + <script src="choose_page.js"></script> +</body> + +</html></pre> + +<p>Puedes notar que es un nomal archivo HTML que contiene tres elementos {{htmlelement("div")}}, con direcciones de Mozilla. También incluye archivos de CSS y JavaScript, en los cuales vamos agregar lo siguiente.</p> + +<p>Crea el archivo "choose_page.css" adentro de la carpeta "popup" , con el siguiente contenido:</p> + +<pre class="brush: css">html, body { + width: 300px; +} + +.page-choice { + width: 100%; + padding: 4px; + font-size: 1.5em; + text-align: center; + cursor: pointer; +} + +.page-choice:hover { + background-color: #CFF2F2; +}</pre> + +<p>Es solo un poco de estilo a nuestro popup.</p> + +<p>Ahora, crea un archivo "choose_page.js" dentro del folder "popup" con el siguiente contenido:</p> + +<pre class="brush: js">document.addEventListener("click", function(e) { + if (!e.target.classList.contains("page-choice")) { + return; + } + + var chosenPage = "https://" + e.target.textContent; + browser.tabs.create({ + url: chosenPage + }); + +});</pre> + +<p>En nuestro JavaScript, esta a la espera de clicks en las opciones de nuestro popup. Primero revisa si el click fue en una de nuestras elecciones, si no, no realizamos nada mas. Se seleccion una carga una página elegida, en una nueva pestaña con la correspondiente página. Nota que podemos usar las APIs WebExtension en el script del popup, como también scripts de fondo.</p> + +<p>La estructura de la extensión final debe ser como esta:</p> + +<pre>button/ + icons/ + page-16.png + page-32.png + popup/ + choose_page.css + choose_page.html + choose_page.js + manifest.json</pre> + +<p>Ahora vamos a recargar la extensión, click en el botón otra vez e intenta dar click en las opciones del popup:</p> + +<p>{{EmbedYouTube("QPEh1L1xq0Y")}}</p> + +<h2 id="Acciones_de_página">Acciones de página</h2> + +<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">Acciones de página</a> son como las acciones del navegador, excepto que son acciones relevantes solo para algunas página en particular.</p> + +<p>Mientras de las acciones del navegaro siembre son mostradas, las acciones de página son solo mostradas en pestañas donde son relevantes. Los botones de las acciones de página son mostradas en la barra URL , en vez de la barra de herramientas del navegador.</p> + +<h2 id="Aprende_más">Aprende más</h2> + +<ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> manifest key</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> API</li> + <li>Ejemplos de acciones del navegador: + <ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/bookmark-it">Bookmark it!</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/inpage-toolbar-ui">inpage-toolbar-ui</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button">open-my-page-button</a></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> manifest key</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API</li> + <li>Ejemplos de Acciones de página: + <ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a></li> + </ul> + </li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html new file mode 100644 index 0000000000..685e282bf9 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html @@ -0,0 +1,120 @@ +--- +title: Anatomía de una extension +slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<p>Una extensión se compone de una colección de archivos, empaquetados para su distribución e instalación. En este artículo vamos a repasar rápidamente los archivos que deben estar presentes en una extensión.</p> + +<p>Toda extensión debe contener un archivo llamado <a href="/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#manifest.json">"manifest.json"</a>. Este puede tener enlaces a otros tipos de archivos:</p> + +<ul> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_en_segundo_plano">Páginas en segundo plano</a>: implementan la lógica de larga ejecución.</li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_de_contenido">Scripts de contenido</a>: interactúan con las páginas web (note que esto no es lo mismo que JavaScript en un elemento {{HTMLElement("script")}} dentro de una página).</li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Acciones_del_navegador_2">Archivos de acción del navegador</a>: implementan los botones de la barra de herramientas.</li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Acciones_de_las_páginas">Archivos de acción de la página: </a>Implementan botones en la barra de direcciones.</li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Opciones_de_las_páginas">Páginas de opciones</a>: Definen una IU para que los usuarios vean y cambien las configuraciones de la extensión.</li> + <li> + <div id="gt-res-content"> + <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="es"><span><a href="/es/Add-ons/WebExtensions/user_interface/Sidebars">archivos de la barra lateral</a>: agregue una barra lateral al navegador.</span></span></div> + </div> + </li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Recursos_web_accesibles">Recursos Web accesibles</a>: Hace posible que el contenido empaquetado acceda a páginas web y scripts.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<h2 id="manifest.json">manifest.json</h2> + +<p>Este es el único archivo que debe estar presente en toda WebExtension. Este contiene los metadatos básicos acerca de la extensión, como su nombre, versión, y los permisos que esta requiere. También provee los enlaces a otros archivos de la extensión.</p> + +<p>Mira la página de referencia <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> para ver todos los detalles.</p> + +<h2 id="Scripts_en_segundo_plano">Scripts en segundo plano</h2> + +<p>Las extensiones a menudo necesitan mantener estados de larga duración, o ejecutar operaciones a largo plazo, independientemente del tiempo de vida de una página web en particular o las ventanas del navegador. Para eso son los scripts en segundo plano.</p> + +<p>Los scripts en segundo plano son cargados cuando la extensión es cargada y se mantienen cargados hasta que la extensión es deshabilitada o desinstalada. Tu puedes usar cualquier <a href="/es/Add-ons/WebExtensions/API">API de WebExtensions</a> en el script, siempre y cuando hayas solicitado el <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permiso</a> necesario.</p> + +<h3 id="Especificando_los_scripts_en_segundo_plano">Especificando los scripts en segundo plano</h3> + +<p>Puedes incluir un script en segundo plano usando la propiedad <code>background</code> en "manifest.json":</p> + +<pre class="brush: json">// manifest.json + +"background": { + "scripts": ["background-script.js"] +}</pre> + +<p>Puedes especificar múltiples scripts en segundo plano: si lo haces, ellos se ejecutarán en el mismo contexto, justo como son cargados múltiples scripts en una página web.</p> + +<h3 id="Entorno_del_script_en_segundo_plano">Entorno del script en segundo plano</h3> + +<h4 id="APIs_del_DOM">APIs del DOM</h4> + +<p>Los scripts en segundo plano se ejecuta en el contexto de páginas especiales llamadas páginas en segundo plano. Esto le da un variable global <code><a href="/es/docs/Web/API/Window">window</a></code>, junto con todas las APIs estándar del DOM que proporciona.</p> + +<p>No necesitas proveer tu propia página en segundo plano. Si incluyes un script en segundo plano, una página en segundo plano vacía se creará para ti.</p> + +<p>Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:</p> + +<pre class="brush: json">// manifest.json + +"background": { + "page": "background-page.html" +}</pre> + +<h4 id="APIs_de_WebExtension">APIs de WebExtension</h4> + +<p>Los scripts en segundo plano pueden usar cualquier <a href="/es/Add-ons/WebExtensions/API">API de WebExtension</a> en el script, siempre que tu extensión tenga los <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos</a> necesarios.</p> + +<h4 id="Acceso_de_origen_cruzado">Acceso de origen cruzado</h4> + +<p>Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen <a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos del host</a>.</p> + +<h4 id="Acciones_del_navegador">Acciones del navegador</h4> + +<p>Si tu extensión define una acción del navegador, y esa acción del navegador no tiene ventanas emergentes, entonces puedes escuchar los eventos "clic" del botón en el navegador empleando el objeto <code><a href="/es/Add-ons/WebExtensions/API/browserAction#onClicked">onClicked</a></code> de las acciones del navegador:</p> + +<pre class="brush: js">browser.browserAction.onClicked.addListener(handleClick);</pre> + +<h4 id="Contenido_web">Contenido web</h4> + +<p>Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a> en páginas web, y <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">comunicarse con esos scripts empleando la API de paso de mensajes</a>.</p> + +<h4 id="Políticas_de_segurdiad_para_el_contendio">Políticas de segurdiad para el contendio</h4> + +<p>Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, a través de la Política de Seguridad del Contenido. Vea la <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Política de Segurdiad del Contenido </a>para más detalles sobre esto.</p> + +<h2 id="Scripts_de_contenido">Scripts de contenido</h2> + +<p>Usa los scripts de contenido para acceder y manipular páginas web. Los scripts de contenido son cargados dentro de las páginas web y ejecutados en el contexto particular de esa página.</p> + +<p>Los scripts de contenido son scripts provistos por la extensión los cuales se ejecutan en el contexto de la página web; estos difieren de los scripts que son cargados por la página misma, incluye aquellos que son proporcionados en los elementos {{HTMLElement("script")}} dentro de la página.</p> + +<p>Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.</p> + +<p>A diferencia de los scripts normales, ellos pueden:</p> + +<ul> + <li>Realizar peticiones XHR de dominio cruzado</li> + <li>Usar un pequeño subconjunto de las <a href="/es/docs/Mozilla/Add-ons/WebExtensions/API">APIs de WebExtension</a></li> + <li>Intercambiar mensajes con sus scripts en segundo plano, y por esta vía, tener acceso indirecto a todas las APIs de WebExtension.</li> +</ul> + +<p>Los scripts de contenido no pueden acceder directamente a los scripts normales de una página web, pero pueden intercambiar mensajes con ellos usando la API estándar <code><a href="/es/docs/Web/API/Window/postMessage">window.postMessage()</a></code>.</p> + +<p>Generalmente, cuando hablamos acerca de scripts de contenido, nos referimos a JavaScript, pero tu puedes inyectar CSS dentro de las páginas web empleando el mismo mecanismo.</p> + +<p>Mira el artículo <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a> para aprender más.</p> + +<h2 id="Recursos_web_accesibles">Recursos web accesibles</h2> + +<p>Los recursos web accesibles son recursos como imágenes, HTML, CSS y JavaScript que tu puedes incluir en la extensión y los quieres hacer accesible a los scripts en segundo plano y los scripts de las páginas. Los recursos que son hechos accesibles desde la web pueden ser referenciados desde scripts de páginas web y scripts de contenido mediante un esquema especial de URI.</p> + +<p>Por ejemplo, si un script de contenido quiere insertar algunas imágenes dentro de páginas web, tu puedes incluirlos en la extensión y hacerlos accesibles desde la web. El script de contenido creará y añadirá las etiquetas <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">img</a></code> que referencia a las imágenes mediante el atributo <code>src</code>.</p> + +<p>Para aprender más, vea la documentación para la el parámetro <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resource</a> del manifest.json.</p> diff --git a/files/es/mozilla/add-ons/webextensions/api/i18n/index.html b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html new file mode 100644 index 0000000000..15f990ac92 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html @@ -0,0 +1,94 @@ +--- +title: i18n +slug: Mozilla/Add-ons/WebExtensions/API/i18n +tags: + - API + - Complementos + - Interfaz + - No estandar + - Reference + - WebExtensions + - extensiones + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n +--- +<div>{{AddonSidebar}}</div> + +<p>Funciones para internacionalizar su extensión. Es posible utilizar estas API para obtener cadenas de texto traducidas a partir de archivos de configuración regional incluidos en la extensión, conocer el idioma actual del navegador y recuperar el valor de su <a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header">cabecera Accept-Language</a>.</p> + +<p id="See_also">Para obtener más información sobre el uso de i18n en su extensión, consulte:</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internacionalización</a>: una guía para utilizar el sistema de l18n de WebExtensions.</li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference">Referencia de mensajes específicos de la configuración regional</a>: las extensiones proporcionan cadenas específicas de la configuración regional en archivos denominados <code>messages.json</code>. Esta página describe el formato de <code>messages.json</code>.</li> +</ul> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("i18n.LanguageCode")}}</dt> + <dd>Una <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.10">etiqueta de idioma</a> como «<code>en-US</code>» o «<code>fr</code>».</dd> +</dl> + +<h2 id="Funciones">Funciones</h2> + +<dl> + <dt>{{WebExtAPIRef("i18n.getAcceptLanguages()")}}</dt> + <dd>Recupera los valores de <a href="/en-US/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header">accept-language</a> del navegador. Esto es distinto de la configuración regional utilizada por el navegador. Para obtener la configuración regional, utilice {{WebExtAPIRef('i18n.getUILanguage')}}.</dd> + <dt>{{WebExtAPIRef("i18n.getMessage()")}}</dt> + <dd>Obtiene la cadena de texto traducida correspondiente al mensaje especificado.</dd> + <dt>{{WebExtAPIRef("i18n.getUILanguage()")}}</dt> + <dd>Obtiene el idioma de la IU del navegador. Esto es distinto de {{WebExtAPIRef('i18n.getAcceptLanguages')}}, que devuelve los idiomas preferidos del usuario.</dd> + <dt>{{WebExtAPIRef("i18n.detectLanguage()")}}</dt> + <dd>Detecta el idioma del texto proporcionado a través de <a href="https://github.com/CLD2Owners/cld2">Compact Language Detector</a>.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{Compat("webextensions.api.i18n")}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<dl> +</dl> + +<div class="note"><strong>Reconocimientos</strong> + +<p>Esta API se basa en la API <a href="https://developer.chrome.com/extensions/i18n"><code>chrome.i18n</code></a> de Chromium. Esta documentación deriva del archivo <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json"><code>i18n.json</code></a> en el código fuente de Chromium.</p> + +<p>Los datos de compatibilidad de Microsoft Edge son suministrados por Microsoft Corporation y se incluyen aquí según los términos de la licencia Creative Commons Atribución 3.0, versión estadounidense.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/api/index.html b/files/es/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..9a1a727d52 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,59 @@ +--- +title: API +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - Extenciones Web +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +<p>Las API de JavaScript para las Extensiones Web se pueden usar dentro de los <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">scripts en segundo plano</a> de la extensión y en cualquier otro documento contenido en la extensión, incluyendo las ventanas emergentes de <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">acción de página</a> o <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">acción del navegador</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">barras laterales</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">páginas de opciones</a> o <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">páginas de pestañas nuevas</a>. A algunas de estas API también se puede acceder mediante los <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">scripts de contenido</a> de una extensión ( consulte la <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">lista en la guía de script de contenido</a>).</p> + +<p>Para usar API más poderosas debes <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">solicitar permiso</a> en manifest.json en tu extensión.</p> + +<p>Puedes acceder a las API utilizando el namespace <code>browser</code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div> +<p>Muchas de las APIs son asíncronas, devolviendo un <code>Promise</code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> + <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span> +setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Tenga en cuenta que esto es diferente del sistema de extensiones de Google Chrome, que utiliza el nombre <code>chrome</code> en lugar de <code>browser</code>, y que utiliza <code>callbacks</code> en lugar de <code>promise</code> para funciones asíncronas. Como ayuda para portar, la implementación de Firefox de la API WebExtensions admite <code>chrome</code> y <code>callbacks</code>, así como <code>browser</code> y <code>promise</code>. Mozilla también ha escrito un <em>polyfill</em> que habilita el código que usa <code>browser</code> y <code>promise</code> para trabajar sin cambios en Chrome.: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> + +<p>Firefox también implementa estas APIs bajo el nombre <code>chrome</code> usando <code>callbacks</code>. Esto permite que el código escrito para Chrome se ejecute sin cambios en Firefox para las APIs documentadas aquí.</p> + +<p>Microsoft Edge usa el namespace <code>browser</code>, pero aún no admite APIs asíncronas basadas en <code>promise</code>. En Edge, por el momento, las APIs asíncronas deben utilizar <code>callbacks</code>.</p> + +<p>No todos los navegadores son compatibles con todas las APIs: para obtener más información, consulte <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Soporte del navegador para las API de JavaScript</a>.</p> + +<h2 id="Listado_de_API_de_JavaScript">Listado de API de JavaScript</h2> + +<p>Vea a continuación una lista completa de las API de JavaScript:</p> + +<p>Esta página lista todas las APIs JavaScript de WebExtension que actualmente son soportadas.</p> +</div> + +<div>{{SubpagesWithSummaries}}</div> + +<h2 id="Incompatibilidades_con_Chrome">Incompatibilidades con Chrome</h2> + +<p>Nosotros no soportamos ninguna API que no es listada arriba.</p> + +<p>Incluso, para las APIs que están listadas arriba, no siempre soportamos todas las propiedades que Chrome soporta. Por favor, chequea la página de la API para cualquier incompatibilidad con Chrome.</p> diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/index.html new file mode 100644 index 0000000000..a98fb1e17f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/index.html @@ -0,0 +1,115 @@ +--- +title: storage +slug: Mozilla/Add-ons/WebExtensions/API/storage +tags: + - API + - Add-ons + - Complentos + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - Storage + - TopicStub + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/API/storage +--- +<div>{{AddonSidebar}}</div> + +<p>Permite que las extensiones almacenen y recuperen datos, y escuchen los cambios realizados en los elementos almacenados.</p> + +<p>El sistema de almacenamiento se basa en <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>, con algunas diferencias. Entre otras diferencias, éstas incluyen:</p> + +<ul> + <li>Es asíncrono.</li> + <li>Los valores se aplican a la extensión, no a un dominio específico (es decir, el mismo conjunto de pares clave / valor está disponible para todos los scripts de tipo background y los scripts de contenido o content).</li> + <li>Los valores almacenados pueden ser cualquier valor JSON, no solo <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Entre otras cosas, esto incluye: <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> y <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, pero solo cuando sus contenidos se pueden representar como JSON, que no incluye nodos DOM. No es necesario convertir sus valores en cadenas JSON antes de almacenarlos, pero se representan como JSON internamente, por lo tanto, el requisito de que sean responsables de JSON.</li> + <li>Se pueden establecer o recuperar múltiples pares de clave / valor en la misma llamada a la API.</li> +</ul> + +<p>Para usar esta API, debe incluir el <a href="/es/docs/">permiso</a> de "storage" en su archivo <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>.</p> + +<p>Cada extensión tiene su propia área de almacenamiento, que se puede dividir en diferentes tipos de almacenamiento.</p> + +<p>Aunque esta API es similar a {{domxref ("Window.localStorage")}}, se recomienda que no use Window.localStorage en el código de extensión para almacenar datos relacionados con la extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a></code> se conservarán correctamente en estos escenarios.</p> + +<div class="note">El área de almacenamiento no está encriptada y no debe utilizarse para almacenar información confidencial del usuario, como claves.</div> + +<h2 id="Tipos">Tipos</h2> + +<dl> + <dt>{{WebExtAPIRef("storage.StorageArea")}}</dt> + <dd>Un objeto que representa un área de almacenamiento.</dd> + <dt>{{WebExtAPIRef("storage.StorageChange")}}</dt> + <dd>Un objeto que representa un cambio en un área de almacenamiento.</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<p>El almacenamiento tiene tres propiedades, que representan los diferentes tipos de área de almacenamiento disponible.</p> + +<dl> + <dt>{{WebExtAPIRef("storage.sync")}}</dt> + <dd>Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario ha iniciado sesión, en diferentes dispositivos.</dd> + <dt>{{WebExtAPIRef("storage.local")}}</dt> + <dd>Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.</dd> + <dt>{{WebExtAPIRef("storage.managed")}}</dt> + <dd>Representa el área de almacenamiento gestionado. Los elementos en el almacenamiento gestionado los establece el administrador del dominio y son de sólo lectura para la extensión. Intentar modificar este espacio de nombres da como resultado un error.</dd> +</dl> + +<h2 id="Eventos">Eventos</h2> + +<dl> + <dt>{{WebExtAPIRef("storage.onChanged")}}</dt> + <dd>Se dispara cuando uno o más elementos cambian en un área de almacenamiento.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.api.storage")}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Agradecimientos</strong> + +<p> </p> + +<p>Esta API se basa en la API <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> de Chromium. Esta documentación se deriva de <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> en el código de Chromium.</p> + +<p>Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.</p> + +<p> </p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html new file mode 100644 index 0000000000..8c2a288aaf --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html @@ -0,0 +1,95 @@ +--- +title: storage.local +slug: Mozilla/Add-ons/WebExtensions/API/storage/local +tags: + - API + - Complentos + - Storage + - WebExtension + - extensiones + - local +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local +--- +<div>{{AddonSidebar()}}</div> + +<div> +<p>Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.</p> + +<p>El navegador puede restringir la cantidad de datos que una extensión puede almacenar en el área de almacenamiento local:</p> + +<p> Chrome limita la extensión a 5MB de datos usando esta API a menos que tenga el permiso <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Unlimited_storage">"unlimitedStorage" </a>.<br> + Firefox le permite solicitar el permiso "Almacenamiento ilimitado" de la versión 56 en adelante. Aún no restringe la cantidad de datos que su extensión puede almacenar, pero comenzará a hacerlo en una versión futura: por lo tanto, es una buena idea solicitar el permiso de "Almacenamiento ilimitado" ahora, si tiene la intención de almacenar una gran cantidad de datos.</p> + +<p>Cuando se desinstala la extensión, se borra su almacenamiento local asociado.</p> + +<p>También en Firefox, puede evitar que el navegador borre el almacenamiento local al desinstalar "about: config" y configurar las siguientes dos preferencias de navegador como verdaderas: "keepUuidOnUninstall" y "keepStorageOnUninstall". Esta característica se proporciona para ayudar a los desarrolladores a probar sus extensiones. Las extensiones en sí mismas no pueden cambiar estas preferencias.</p> + +<p>Aunque esta API es similar a Window.localStorage, se recomienda que no use Window.localStorage en el código de extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API storage.local se conservarán correctamente en estos escenarios.</p> +</div> + +<h2 id="Metodos">Metodos</h2> + +<p>El objeto local implementa los métodos definidos en el{{WebExtAPIRef("storage.StorageArea")}} tipo:</p> + +<dl> + <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt> + <dd>Recupera uno o más elementos del área de almacenamiento.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt> + <dd>Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt> + <dd>Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado. Cuando establezca un valor, se activará el evento {{WebExtAPIRef ("storage.onChanged")}}.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt> + <dd>Elimina uno o más elementos del área de almacenamiento.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt> + <dd>Elimina todos los elementos del área de almacenamiento.</dd> +</dl> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.storage.local")}}</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Agradecimientos</strong> + +<p> </p> + +<p>Esta API se basa en la API <a href="https://developer.chrome.com/extensions/storage#property-local"><code>chrome.storage</code></a> de Chromium. Esta documentación se deriva de <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> en el código de Chromium.</p> + +<p>Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.</p> + +<p> </p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html new file mode 100644 index 0000000000..74fc334dbc --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html @@ -0,0 +1,79 @@ +--- +title: storage.sync +slug: Mozilla/Add-ons/WebExtensions/API/storage/sync +tags: + - Complementos Extensiones +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync +--- +<div>{{AddonSidebar()}}</div> + +<p>Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario está conectado (por ejemplo, a través de Firefox Sync o una cuenta de Google), en diferentes dispositivos.</p> + +<p>Para Firefox, un usuario debe tener complementos seleccionados en las opciones de "about:preferences".</p> + +<p>Tenga en cuenta que la implementación de storage.sync en Firefox se basa en la ID del complemento. Si usa storage.sync, debe establecer una ID para su extensión usando la clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> manifest.json.</p> + +<p>El principal caso de uso de esta API es almacenar las preferencias sobre su extensión y permitir que el usuario las sincronice con diferentes perfiles. Puede almacenar hasta 100 KB de datos utilizando esta API. Si intenta almacenar más que esto, la llamada fallará con un mensaje de error. La API se proporciona sin ninguna garantía sobre el tiempo de actividad o el rendimiento.</p> + +<p>Metodos</p> + +<p>El objeto de sincronización implementa los métodos definidos en el {{WebExtAPIRef("storage.StorageArea")}} ponga:</p> + +<dl> + <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt> + <dd>Recupera uno o más elementos del área de almacenamiento.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt> + <dd>Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt> + <dd>Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt> + <dd>Elimina uno o más elementos del área de almacenamiento.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt> + <dd>Elimina todos los elementos del área de almacenamiento.</dd> +</dl> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.storage.sync")}}</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Agradecimientos</strong> + +<p>Esta API está basada en la API de Chromium's <a href="https://developer.chrome.com/extensions/storage#property-sync"><code>chrome.storage</code></a> API. Esta documentación se deriva de <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> en el código de Chromium.</p> + +<p>Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html new file mode 100644 index 0000000000..d561c6d796 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html @@ -0,0 +1,144 @@ +--- +title: webNavigation +slug: Mozilla/Add-ons/WebExtensions/API/webNavigation +translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation +--- +<div>{{AddonSidebar}}</div> + +<p>Add event listeners for the various stages of a navigation. A navigation consists of a frame in the browser transitioning from one URL to another, usually (but not always) in response to a user action like clicking a link or entering a URL in the location bar.</p> + +<p>Compared with the {{WebExtAPIRef("webRequest")}} API: navigations usually result in the browser making web requests, but the webRequest API is concerned with the lower-level view from the HTTP layer, while the webNavigation API is more concerned with the view from the browser UI itself.</p> + +<p>Each event corresponds to a particular stage in the navigation. The sequence of events is like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13374/we-flow.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 745px;"></p> + +<ul> + <li>The primary flow is: + <ul> + <li><code>{{WebExtAPIRef("webNavigation.onBeforeNavigate", "onBeforeNavigate")}}</code></li> + <li><code>{{WebExtAPIRef("webNavigation.onCommitted", "onCommitted")}}</code></li> + <li><code>{{WebExtAPIRef("webNavigation.onDOMContentLoaded", "onDOMContentLoaded")}}</code></li> + <li><code>{{WebExtAPIRef("webNavigation.onCompleted", "onCompleted")}}</code>.</li> + </ul> + </li> + <li>Additionally: + <ul> + <li><code>{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget", "onCreatedNavigationTarget")}}</code> is fired before <code>onBeforeNavigate</code> if the browser needed to create a new tab or window for the navigation (for example, because the user opened a link in a new tab).</li> + <li>{{WebExtAPIRef("webNavigation.onHistoryStateUpdated", "onHistoryStateUpdated")}} is fired if a page uses the <a href="http://diveintohtml5.info/history.html">history API</a> to update the URL displayed in the browser's location bar.</li> + <li>{{WebExtAPIRef("webNavigation.onReferenceFragmentUpdated", "onReferenceFragmentUpdated")}} is fired if the <a href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> for a page is changed.</li> + <li>{{WebExtAPIRef("webNavigation.onErrorOccurred", "onErrorOccurred")}} can be fired at any point.</li> + </ul> + </li> +</ul> + +<p>Each navigation is a URL transition in a particular browser frame. The browser frame is identified by a tab ID and a frame ID. The frame may be the top-level browsing context in the tab, or may be a nested browsing context implemented as an <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>.</p> + +<p>Each event's <code>addListener()</code> call accepts an optional filter parameter. The filter will specify one or more URL patterns, and the event will then only be fired for navigations in which the target URL matches one of the patterns.</p> + +<p>The <code>onCommitted</code> event listener is passed two additional properties: a {{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} indicating the cause of the navigation (for example, because the user clicked a link, or because the user selected a bookmark), and a {{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} providing further information about the navigation.</p> + +<p>To use this API you need to have the "webNavigation" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("webNavigation.TransitionType")}}</dt> + <dd>Cause of the navigation: for example, the user clicked a link, or typed an address, or clicked a bookmark.</dd> + <dt>{{WebExtAPIRef("webNavigation.TransitionQualifier")}}</dt> + <dd> + <div>Extra information about a transition.</div> + </dd> +</dl> + +<h2 id="Functions">Functions</h2> + +<dl> + <dt>{{WebExtAPIRef("webNavigation.getFrame()")}}</dt> + <dd>Retrieves information about a particular frame. A frame may be the top-level frame in a tab or a nested <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">iframe</a>, and is uniquely identified by a tab ID and a frame ID.</dd> + <dt>{{WebExtAPIRef("webNavigation.getAllFrames()")}}</dt> + <dd> + <p>Given a tab ID, retrieves information about all the frames it contains.</p> + </dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{WebExtAPIRef("webNavigation.onBeforeNavigate")}}</dt> + <dd> + <p>Fired when the browser is about to start a navigation event.</p> + </dd> + <dt>{{WebExtAPIRef("webNavigation.onCommitted")}}</dt> + <dd>Fired when a navigation is committed. At least part of the new document has been received from the server and the browser has decided to switch to the new document.</dd> + <dt>{{WebExtAPIRef("webNavigation.onDOMContentLoaded")}}</dt> + <dd>Fired when the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> event is fired in the page.</dd> + <dt>{{WebExtAPIRef("webNavigation.onCompleted")}}</dt> + <dd>Fired when a document, including the resources it refers to, is completely loaded and initialized. This is equivalent to the DOM <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/load">load</a></code> event.</dd> + <dt>{{WebExtAPIRef("webNavigation.onErrorOccurred")}}</dt> + <dd>Fired when an error occurs and the navigation is aborted. This can happen if either a network error occurred, or the user aborted the navigation.</dd> + <dt>{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget")}}</dt> + <dd>Fired when a new window, or a new tab in an existing window, is created to host a navigation: for example, if the user opens a link in a new tab.</dd> + <dt>{{WebExtAPIRef("webNavigation.onReferenceFragmentUpdated")}}</dt> + <dd>Fired if the <a class="external-icon external" href="https://en.wikipedia.org/wiki/Fragment_identifier">fragment identifier</a> for a page is changed.</dd> + <dt>{{WebExtAPIRef("webNavigation.onTabReplaced")}}</dt> + <dd> + <p>Fired when the contents of the tab is replaced by a different (usually previously pre-rendered) tab.</p> + </dd> + <dt>{{WebExtAPIRef("webNavigation.onHistoryStateUpdated")}}</dt> + <dd>Fired when the page used the <a class="external external-icon" href="http://diveintohtml5.info/history.html">history API</a> to update the URL displayed in the browser's location bar.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.api.webNavigation")}}</p> + +<div class="hidden note"> +<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> + +<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> +</div> + +<h3 id="Edge_incompatibilities">Edge incompatibilities</h3> + +<p>Promises are not supported in Edge. Use callbacks instead.</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/webNavigation"><code>chrome.webNavigation</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/web_navigation.json"><code>web_navigation.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..1dffe19399 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,15 @@ +--- +title: Browser support for JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +<div>{{AddonSidebar}}</div> + +<div>{{WebExtAllCompatTables}}</div> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html new file mode 100644 index 0000000000..34668d6ba1 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -0,0 +1,291 @@ +--- +title: Incompatibilidades con Chrome +slug: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +--- +<p><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">WebExtensions está diseñado para ser compatible con las extensiones de Chrome y Opera: en la medida de lo posible, las extensiones escritas para esos navegadores deberían ejecutarse en Firefox con cambios mínimos.</span></p> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(51, 51, 51); font-family: arial, x-locale-body, sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;"><font><font>Sin embargo, Firefox cuenta actualmente con soporte para sólo un conjunto limitado de funciones y API compatibles con Chrome y Opera.<span> </span></font><font>Estamos trabajando en agregar más soporte, pero muchas características aún no son compatibles, y es posible que nunca admitamos algunas.</font></font></p> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(51, 51, 51); font-family: arial, x-locale-body, sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;"><font><font>En este artículo se enumeran todas las características y API que se admiten total o parcialmente en Firefox.<span> </span></font><font>Cuando una característica está parcialmente soportada, hemos indicado cuáles son las lagunas.</font></font></p> + +<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(51, 51, 51); font-family: arial, x-locale-body, sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;"><font><font>Es seguro asumir que las funciones y las API que no se enumeran aquí en absoluto aún no son compatibles.</font></font></p> + +<h2 id="Funciones_de_manifest.json">Funciones de manifest.json</h2> + +<h3 id="Claves_completamente_compatibles">Claves completamente compatibles</h3> + +<ul> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code></li> +</ul> + +<h3 id="Claves_parcialmente_admitidas">Claves parcialmente admitidas</h3> + +<h4 id="Datos_de_fondo">Datos de fondo</h4> + +<p>Firefox no admite la propiedad <code>"persistent"</code>. Los scripts de fondo permanecen cargados todo el tiempo.</p> + +<h4 id="Scripts_de_contenido">Scripts de contenido</h4> + +<p>Firefox no admite actualmente:</p> + +<ul> + <li><code>include_globs</code></li> + <li><code>exclude_globs</code></li> + <li><code>match_about_blank</code></li> +</ul> + +<h4 id="Permisos">Permisos</h4> + +<p><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Firefox aún no admite los siguientes permisos</span>:</p> + +<ul> + <li><code>activeTab</code></li> + <li><code>background</code></li> + <li><code>clipboardRead</code></li> + <li><code>clipboardWrite</code></li> + <li><code>geolocation</code></li> + <li><code>nativeMessaging</code></li> + <li><code>unlimitedStorage</code></li> +</ul> + +<p><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Obviamente, también no admite permisos para las</span> <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API#Chrome_incompatibilities">APIs que no son compatibles</a>.</p> + +<h2 id="APIs_JavaScript">APIs JavaScript</h2> + +<h3 id="APIs_completamente_soportadas">APIs completamente soportadas</h3> + +<ul> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/alarms">alarmas</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus">Menú contextual</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a> + <ul> + <li><font><font>Las URL relativas pasadas a<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: normal; font-weight: normal; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: medium; letter-spacing: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>setPopup()</code><font><font>se resuelven en relación con el documento de la persona que llama, en lugar de con la raíz de la extensión</font></font> .</li> + </ul> + </li> +</ul> + +<h3 id="APIs_parcialmente_soportadas">APIs parcialmente soportadas</h3> + +<h4 id="marcadores">marcadores</h4> + +<ul> + <li>Firefox no admite: + <ul> + <li><code>getRecent()</code></li> + <li><code>search()</code></li> + <li><code>removeTree()</code> (<code>remove</code> también elimina carpetas no vacías)</li> + <li><code>onCreated</code></li> + <li><code>onRemoved</code></li> + <li><code>onChanged</code></li> + <li><code>onMoved</code></li> + <li><code>onChildrenReordered</code></li> + <li><code>onImportBegan</code></li> + <li><code>onImportEnded</code></li> + <li>BookmarkTreeNodeUnmodifiable</li> + </ul> + </li> + <li>Firefox tiene marcadores especiales como "Marcado recientemente" o "Visitado recientemente"</li> +</ul> + +<h4 id="browserAction">browserAction</h4> + +<ul> + <li>Firefox no admite: + <ul> + <li><code>enable()</code> o <code>disable()</code>.</li> + </ul> + </li> + <li><font><font>Las URL relativas pasadas a<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: normal; font-weight: normal; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word; font-size: medium; letter-spacing: normal; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>setPopup()</code><font><font>se resuelven en relación con el documento de la persona que llama, en lugar de con la raíz de la extensión</font></font> .</li> +</ul> + +<h4 id="cookies">cookies</h4> + +<ul> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>eventos onChanged pueden ser subtely diferentes</font></font></li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Creación de cookies de sesión<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>set</code><font><font>podría fallar</font></font></li> + <li><code class="prettyprint">getAllCookieStores</code> siempre<font><font> devuelve un almacén predeterminado y sin pestañas</font></font></li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>el acceso a las cookies desde pestañas privadas es imposible</font></font></li> +</ul> + +<h4 id="extension">extension</h4> + +<ul> + <li>Firefox sólo soporta : + <ul> + <li><code>getBackgroundPage()</code></li> + <li><code>getURL()</code></li> + <li><code>inIncognitoContext</code> en los scripts de contenido</li> + </ul> + </li> +</ul> + +<h4 id="i18n">i18n</h4> + +<ul> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">En la API JavaScript API, Firefox solo soporta</span> <code>getMessage()</code>.</li> + <li>Firefox solo soporta los mensajes predefinidos <code>@@extension_id</code> y <code>@@ui_locale</code>.</li> + <li>Firefox no localiza archivos CSS.</li> + <li>Las cadenas para ser localizadas deben consistir enteramente de <code>__MSG_foo__</code> con el fin de realizar una sustitución al crearlas.</li> +</ul> + +<h4 id="notifications">notifications</h4> + +<ul> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Las únicas opciones de notificación admitidas son</span> : + + <ul> + <li><code>iconUrl</code></li> + <li><code>title</code></li> + <li><code>message</code>.</li> + </ul> + </li> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: arial,x-locale-body,sans-serif; font-size: medium; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Los únicos métodos soportados son</span> : + <ul> + <li><code>create()</code></li> + <li><code>clear()</code></li> + <li><code>getAll()</code>.</li> + </ul> + </li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>El único evento soportado es<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>onClosed</code><font><font>.</font></font></li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Firefox no proporciona<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>byUser</code><font><font>datos.</font></font></li> +</ul> + +<h4 id="Tiempo_de_ejecución">Tiempo de ejecución</h4> + +<ul> + <li>Firefox sólo admite: + <ul> + <li><code>onStartup()</code></li> + <li><code>getManifest()</code></li> + <li><code>getURL()</code></li> + <li><code>id</code></li> + <li><code>sendMessage()</code></li> + <li><code>onMessage</code></li> + <li><code>onConnect</code></li> + </ul> + </li> +</ul> + +<h4 id="Almacenamiento">Almacenamiento</h4> + +<ul> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>El único área de almacenamiento que soporta Firefox es<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>local</code><font><font>.</font></font></li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Firefox no soporta<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>getBytesInUse()</code><font><font>o<span> </span></font></font><code style='background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); margin: 0px; padding: 2px 5px; border: 0px; font-style: inherit; font-weight: inherit; border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; word-wrap: break-word;'>clear))</code><font><font>.</font></font></li> +</ul> + +<h4 id="tabs">tabs</h4> + +<ul> + <li>Firefox does not support: + <ul> + <li><code>getCurrent()</code></li> + <li><code>sendRequest()</code></li> + <li><code>getSelected()</code></li> + <li><code>duplicate()</code></li> + <li><code>highlight()</code></li> + <li><code>move()</code></li> + <li><code>detectLanguage()</code></li> + <li><code>captureVisibleTab()</code></li> + <li><code>getZoom()</code></li> + <li><code>setZoom()</code></li> + <li><code>getZoomSettings()</code></li> + <li><code>setZoomSettings()</code></li> + </ul> + </li> +</ul> + +<p>Firefox treats <code>highlighted</code> and <code>active</code> as the same since Firefox cannot select multiple tabs.</p> + +<p>Firefox doesn't yet support the <code>callback</code> argument to <code>executeScript()</code>.</p> + +<h4 id="webNavigation">webNavigation</h4> + +<ul> + <li>Firefox does not support: + <ul> + <li><code>getFrame()</code></li> + <li><code>getAllFrames()</code></li> + <li><code>onCreatedNavigationTarget</code></li> + <li><code>onHistoryStateUpdated</code></li> + <li>transition types and qualifiers</li> + <li>Filtering</li> + </ul> + </li> +</ul> + +<p><code>onReferenceFragmentUpdated</code> also triggers for <code>pushState</code>.</p> + +<h4 id="webRequest">webRequest</h4> + +<ul> + <li>Firefox does not support: + <ul> + <li><code>handlerBehaviorChanged()</code></li> + <li><code>onAuthRequired</code></li> + <li><code>onBeforeRedirect</code></li> + <li><code>onErrorOccurred</code></li> + </ul> + </li> + <li>Requests can be: + <ul> + <li>canceled only in <code>onBeforeRequest</code></li> + <li>modified/redirected only in <code>onBeforeSendHeaders</code></li> + </ul> + </li> + <li>Responses can be modified only in <code>onHeadersReceived</code>.</li> + <li>Filtering by <code>windowId</code> and <code>tabId</code> is not supported.</li> + <li>The <code>"requestBody"</code> instruction in <code>opt_extraInfoSpec</code> is not supported.</li> + <li>Redirection is not allowed in <code>onBeforeRequest</code> or <code>onHeadersReceived</code>, but is allowed in <code>onBeforeSendHeaders</code>.</li> + <li><code>requestId</code> is not included in the argument passed to the listener.</li> +</ul> + +<h4 id="windows">windows</h4> + +<ul> + <li><code>onFocusChanged</code> will trigger multiple times for a given focus change.</li> + <li><code>create()</code> does not support the <code>focused</code>, <code>type</code>, or <code>state</code> options.</li> + <li><code>update()</code> only supports the <code>focused</code> option.</li> +</ul> + +<h3 id="Planned_APIs">Planned APIs</h3> + +<p>We don't yet support the following APIs, but plan to, soon:</p> + +<ul> + <li><a class="external text" href="https://developer.chrome.com/extensions/commands" rel="nofollow">commands</a></li> + <li><a class="external text" href="https://developer.chrome.com/extensions/devtools" rel="nofollow">Devtools (mostly panels)</a></li> + <li><a class="external text" href="https://developer.chrome.com/extensions/downloads" rel="nofollow">downloads</a></li> + <li><a class="external text" href="https://developer.chrome.com/extensions/history" rel="nofollow">history</a></li> + <li><a class="external text" href="https://developer.chrome.com/extensions/idle" rel="nofollow">idle</a></li> + <li><a class="external text" href="https://developer.chrome.com/extensions/omnibox" rel="nofollow">omnibox</a></li> + <li><a class="external text" href="https://developer.chrome.com/extensions/permissions" rel="nofollow">permissions</a></li> + <li><a class="external text" href="https://developer.chrome.com/extensions/runtime#method-connectNative" rel="nofollow">Native messaging (runtime.connectNative)</a></li> +</ul> + +<h3 id="CSS">CSS</h3> + +<h4 id="Localized_String_Interpolation">Localized String Interpolation</h4> + +<p>We currently do not support interpolation of localized strings <code>__MSG_</code> tokens in extension CSS files: {{bug(1209184)}}.</p> + +<h4 id="Relative_URLs">Relative URLs</h4> + +<p>We resolve URLs in injected CSS files relative to the CSS file itself, rather than to the page it's injected into.</p> + +<h3 id="Miscellaneous_incompatibilities">Miscellaneous incompatibilities</h3> + +<ul> + <li>Chrome allows any optional arguments to be omitted, even if followed by other arguments. Firefox currently supports this only under specific circumetances. We recommend only omitting optional arguments at the end of the arguments list, and using <code>null</code> for all other cases.</li> + <li>Firefox currently <a href="https://bugzil.la/932513">does not allow</a> the <code>{{jsxref("Statements/let", "let")}}</code> or <code>{{jsxref("Statements/const", "const")}}</code> statement in ordinary web pages or Web Extensions. While it is possible to enable support for Firefox's variant of the statement using a special <code><script></code> tag, this is not recommended. Instead, if your extension code uses <code>let</code> or <code>const</code> statements, we recommend that you <a href="/en-US/Add-ons/WebExtensions/Tips#Using_advanced_JavaScript_features_from_ECMAScript_6_and_7">transpile them using Babel</a> until support is turned on globally.</li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/depuración/index.html b/files/es/mozilla/add-ons/webextensions/depuración/index.html new file mode 100644 index 0000000000..c24f9d07f5 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/depuración/index.html @@ -0,0 +1,189 @@ +--- +title: Depuración +slug: Mozilla/Add-ons/WebExtensions/Depuración +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Debugging +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>Las técnicas descritas aquí funcionan en Firefox 50 y versiones sucesivas. Si necesitas usar una versión anterior de Firefox, por favor ve al artículo <a href="/en-US/Add-ons/WebExtensions/Debugging_(before_Firefox_50)">debugging extensions using WebExtension APIs before Firefox 50</a>.</p> +</div> + +<p>Este artículo explica cómo se pueden usar las herramientas de desarrollo de Firefox para depurar extensiones creadas con las WebExtension APIs.</p> + +<p>Una WebExtension puede consistir en varias partes distintas — scripts en segundo plano, popups, options pages, content scripts — y se tendrá que usar un proceso ligeramente distinto para depurar cada parte. Así, cada parte tendrá una sección principal en este artículo, y el objetivo es que esas secciones se puedan leer de forma independiente. Empezaremos presentando el Depurador de Add-on, que será usado para depurar la mayoría de las partes de un complemento.</p> + +<ul> +</ul> + +<h2 class="western" id="El_Depurador_de_Add-on">El Depurador de Add-on</h2> + +<p>Para la mayor parte de este artículo utilizaremos el Depurador de Add-on. Para abrir el Depurador de Add-on:</p> + +<ul> + <li> + <p style="margin-bottom: 0cm;">abrir Firefox</p> + </li> + <li> + <p style="margin-bottom: 0cm;">escribir "about:debugging" en la barra de direcciones</p> + </li> + <li> + <p style="margin-bottom: 0cm;">marcar la casilla en la que pone "Activar depuración de complementos"</p> + </li> + <li> + <p style="margin-bottom: 0cm;">hacer click en el botón "Depurar" al lado del complemento</p> + </li> + <li> + <p>hacer click en "Aceptar" en el cuadro de alerta</p> + </li> +</ul> + +<p>Se abrirá entonces una nueva ventana. La ventana principal de Firefox se pondrá en primer plano, así que se tendrá que hacer click en la nueva ventana para que aparezca en primer plano.</p> + +<p>{{EmbedYouTube("HMozipAjrYA")}}</p> + +<p>Esta nueva ventana se llama "Herramientas de desarrollo" y contiene las herramientas de depuración que se usarán. La interfaz tiene varias pestañas en la parte de arriba que permiten moverse por las herramientas disponibles:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13861/toolbox-tabs.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p> + +<p>En este artículo usaremos tres herramientas de depuración:</p> + +<ul> + <li> + <p style="margin-bottom: 0cm;"><a href="https://developer.mozilla.org/es/docs/Tools/Web_Console">La Consola</a>: muestra mensajes registrados por la extensión así como mensajes de error registrados por el navegador mientras ejecuta la extensión. También proporciona una línea de comandos, habilitando la ejecución de JavaScript en el contexto de la extensión.</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><a href="https://developer.mozilla.org/es/docs/Tools/Debugger">El Depurador</a>: habilita el uso de breakpoints y watchpoints en el código JavaScript de la extensión, y examina y modifica su estado interno.</p> + </li> + <li> + <p><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector">El Inspector</a>: habilita la revisión y modificación del HTML y CSS usado para construir las páginas de la extensión.</p> + </li> +</ul> + +<h2 class="western" id="Depurando_scripts_en_segundo_plano">Depurando scripts en segundo plano</h2> + +<div class="note"> +<p>Los ejemplos de esta sección usan la extensión de ejemplo "notify-link-clicks-l10n". Para explorar las opciones, se puede encontrar este ejemplo en el repositorio <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a>.</p> +</div> + +<p>Los <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_en_segundo_plano">scripts en segundo plano</a> permanecen cargados durante el tiempo de vida de la extensión. Se cargan dentro de una “página en segundo plano” invisible: por defecto, es un documento HTML vacío, pero se puede especificar contenido HTML propio usando la palabra clave <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/background">"background"</a> en “manifest.json”.</p> + +<p>Se pueden depurar scripts en segundo plano usando el <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Depurador de Add-ons</a>.</p> + +<p>En la Consola del Depurador de Add-ons se puede ver un registro de las salidas, incluidas las llamadas a <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> desde los propios scripts en segundo plano y cualquier error que el navegador encuentre al ejecutarlos. Es importante mencionar que la consola muestra todos los errores detectados por el navegador, no sólo los errores relacionados con el código de la extensión.</p> + +<p>Por ejemplo, la extensión de ejemplo <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> registra un mensaje de su script en segundo plano cuando recibe un mensaje de uno de sus otros scripts:</p> + +<p>{{EmbedYouTube("WDQsBU-rpN0")}}</p> + +<p>Usando la línea de comandos de la Consola, se pueden acceder y modificar los objetos creados por los scripts en segundo plano.</p> + +<p>Por ejemplo, aquí se hace un allamada a la función <code>notify()</code> definida en el script en segundo plano de la extensión:</p> + +<p>{{EmbedYouTube("g-Qgf8Mc2wg")}}</p> + +<p>Si se mira la ventana del Depurador, se pueden ver todos los scripts en segundo plano de la extensión. Se pueden definir breakpoints, ver el código paso a paso y hacer <a href="https://developer.mozilla.org/es/docs/Tools/Debugger">todo lo que es posible hacer en un depurador</a>.</p> + +<p>{{EmbedYouTube("MNeaz2jdmzY")}}</p> + +<p>Si se pulsa la tecla de Escape mientras se está en el Depurador, la ventana de Herramientas de desarrollo se dividirá en dos, con la parte de abajo ocupada ahora por la Consola. Ahora, mientras se esté en un breakpoint, se puede modificar el estado del programa usando la consola. Ver <a href="/en-US/docs/Tools/Web_Console/Split_console">Dividir la Consola</a> para más información.</p> + +<h2 class="western" id="Depurando_páginas_de_opciones">Depurando páginas de opciones</h2> + +<p>Las <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#P%C3%A1gina_de_opciones">páginas de opciones</a></u></span></font> son páginas HTML que pueden ser proporcionadas por la persona que desarrolle la extensión y contienen opciones para la misma. Se muestran normalmente en un iframe en el Add-ons Manager (para ver el Add-ons Manager, visita la página "about:addons").</p> + +<p>Para depurar páginas de opciones:</p> + +<ul> + <li> + <p style="margin-bottom: 0cm;">abrir el <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#The_Add-on_Debugger">Depurador de Add-on</a></u></span></font> para la add-on en cuestión</p> + </li> + <li> + <p>abrir la página de opciones de la add-on.</p> + </li> +</ul> + +<p>Cualquier archivo fuente en JavaScript que incluya será listado en el Depurador:</p> + +<p>{{EmbedYouTube("BUMG-M8tFF4")}}</p> + +<div class="note"> +<p>Este vídeo usa el ejemplo de WebExtension <font color="#000080"><span lang="zxx"><u><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colourbeastify">favourite-colour</a></u></span></font>.</p> +</div> + +<p>También se verá cualquier mensaje registrado por el código en la Consola del Depurador de Add-on.</p> + +<p>También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la página. Pero primero se necesita dirigir las herramientas al iframe que alberga la página de opciones. Para hacer esto: abre la página de opciones, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de opciones del menú desplegable:</p> + +<p class="western" style="margin-bottom: 0cm; line-height: 100%;"><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;">Ahora al cambiar a la pestaña Inspector se podrá examinar y editar el HTML y CSS para la página:</p> + +<p class="western" style="margin-bottom: 0cm; line-height: 100%;"> </p> + +<p>{{EmbedYouTube("-2m3ubFAU94")}}</p> + +<h2 class="western" id="Depurando_ventanas_emergentes">Depurando ventanas emergentes</h2> + +<p><font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Popups">Las ventanas emergentes</a></u></span></font> son cuadros de diálogo unidos a acciones del navegador o de la página. Se especifican usando un documento HTML que puede incluir fuentes CSS y JavaScript para determinar el estilo y el funcionamiento. Cuando la ventana emergente es visible, se puede usar el <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Depurador de Add-on</a> para depurar su código.</p> + +<p>Un problema con las ventanas emergentes es que si una ventana emergente está abierta y se hace clic fuera de ella, esta se cierra y su código se descarga. Obviamente, esto hace que sea imposible depurarlas. Para eliminar este comportamiento, se debe hacer clic en el botón del Depurador de Add-on destacado en la captura de pantalla mostrada a continuación:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13877/toolbox-popup.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p> + +<p class="western" style="margin-bottom: 0cm; line-height: 100%;">Ahora, al abrir una ventana emergente esta continuará abierta hasta que se pulse Escape.</p> + +<p class="western" style="margin-bottom: 0cm; line-height: 100%;"> </p> + +<div class="note"> +<p>Es importante señalar que esta opción está disponible para ventanas emergentes desarrolladas para el navegador, como el menú de hamburguesa (<img style="height: 20px; width: 22px;"> ), así como a ventanas emergentes propias de la add-on.</p> + +<p>También es importante notar que el cambio es persistente, incluso aunque el navegador se reinicie. Estamos trabajando en solucionar esto en el <font color="#000080"><span lang="zxx"><u><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1251658">bug 1251658</a></u></span></font>, pero hasta entonces puede ser mejor permitir de nuevo la ocultación automática<strong> </strong>volviendo a hacer clic en el botón antes de cerrar la Caja de Herramientas del Navegador.</p> + +<p>Internamente, este botón simplemente cambia la preferencia <code class="western">ui.popup.disable_autohide</code>, lo que se puede hacer manualmente usando about:config.</p> +</div> + +<p>Cuando la ventana emergente está abierta, sus fuentes de JavaScript se listarán en el Depurador. Se pueden colocar breakpoints y modificar el estado interno del programa:</p> + +<p>{{EmbedYouTube("hzwnR8qoz2I")}}</p> + +<div class="note"> +<p>Este vídeo usa la extensión de ejemplo <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a>.</p> +</div> + +<p>También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la ventana emergente. Pero primero se necesita dirigir las herramientas al documento de la ventana emergente. Para hacer esto: abre la ventana emergente, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de la ventana emergente del menú desplegable:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p> + +<p>Ahora al cambiar a Inspector se podrán examinar y editar el HTML y el CSS de la ventana emergente:</p> + +<p>{{EmbedYouTube("6lvdm7jaq7Y")}}</p> + +<h2 class="western" id="Depurando_scripts_de_contenido">Depurando scripts de contenido</h2> + +<p>Se puede usar el Depurador de Add-on para depurar páginas en segundo plano, páginas de opciones y ventanas emergentes. Sin embargo, no se puede usar para depurar scripts de contenido. Esto es debido a que, en <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/es/Firefox/Multiprocess_Firefox">Firefox multiproceso</a></u></span></font>, los scripts de contenido se ejecutan en un proceso distinto del de otras partes de la add-on.</p> + +<p>Para depurar scripts de contenido adjuntos a una página web, se deben usar las herramientas de desarrollo web normales para esa página:</p> + +<ul> + <li> + <p style="margin-bottom: 0cm;">selecciona “Alternar herramientas” del submenú Desarrollador Web en el menú Firefox (o el menú de herramientas si se muestra la barra de menú o se está utilizando Mac OS X)</p> + </li> + <li> + <p>o presiona el método abreviado del teclado <kbd>CtrlShiftI</kbd> (<kbd>CommandOptionI</kbd> en OS X).</p> + </li> +</ul> + +<p>{{EmbedYouTube("f46hMLELyaI")}}</p> + +<p>Por defecto, las herramientas se muestran al pie de la pestaña de desarrollo, para reflejar que están relacionadas con esa pestaña. Cualquier salida de las instrucciones <code class="western"><a>console.log()</a></code> de los scripts de contenido será mostrada allí. También se verán los scripts de contenido listados en el Depurador, donde se podrán colocar breakpoints, avanzar en el código, etc.</p> + +<p>{{EmbedYouTube("Hx3GU_fEPeo")}}</p> + +<div class="note"> +<p>Este video usa el ejemplo <font color="#000080"><span lang="zxx"><u><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></u></span></font> de WebExtension.</p> +</div> + +<div class="note"> +<p style="line-height: 120%;">Si la pestaña de Herramientas de Desarrollo no estaba abierta cuando el scripts de contenido se introdujo, puede ocurrir que el scripts de contenido no aparezca en el panel de depuración. Si esto ocurre, recargar la página que contiene la pestaña de Herramientas de Desarrollo debería solucionar el problema.</p> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/examples/index.html b/files/es/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..40900fa368 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,24 @@ +--- +title: Ejemplos de extensiones +slug: Mozilla/Add-ons/WebExtensions/Examples +tags: + - WebExgtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +<div>{{AddonSidebar}}</div> + +<p>Para ayudar en la ilustración de cómo desarrollar las extension, se mantiene un repositorio de ejemplos simples de extensions en <a href="https://github.com/mdn/webextensions-examples">https://github.com/mdn/webextensions-examples</a>. Este artículo describe las extensiones en ese repositorio.</p> + +<p>Estos ejemplo funcionan en Firefox Nightly: la mayoría funcionan en versiones más recientes de Firefox, pero revise la clave <a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">strict_min_version</a> en el manifest.json del complemento para estar seguro.</p> + +<p>Si quiere probar estos ejemplo, tiene tres opciones principales:</p> + +<ol> + <li>Clone el repositorio, entonces, carge el complemento directo desde su directorio, utilizando la función <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">"Cargar complemento temporalmente"</a>. El complemento estará cargado hasta que se reinicie Firefox.</li> + <li>Clone el repositorio, luego utilice la herrmienta <a href="/es/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> en la línea de comando para ejecutar Firefox con el complemento instalado.</li> + <li>Clone el repositorio, luego diríjase al directorio <a href="https://github.com/mdn/webextensions-examples/tree/master/build">build</a>. Este contiene todos los ejemplos firmados y compilados, así que usted puede abrilos en Firefox (utilizando Archivo/Abrir archivo) e instalarlos permanentemente, justamente como cuando se instala un complemento desde <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>.</li> +</ol> + +<p>Si quiere contribuir al repositorio, <a href="https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md">¡envíe una petición de pull!</a></p> + +<p>{{WebExtAllExamples}}</p> diff --git a/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..426aeae50f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,159 @@ +--- +title: Extending the developer tools +slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +--- +<div>{{AddonSidebar}}</div> + +<div class="note"> +<p>This page describes devtools APIs as they exist in Firefox 55. Although the APIs are based on the <a href="https://developer.chrome.com/extensions/devtools">Chrome devtools APIs</a>, there are still many features that are not yet implemented in Firefox, and therefore are not documented here. To see which features are currently missing please see <a href="/en-US/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</a>.</p> +</div> + +<p><span class="seoSummary">You can use WebExtensions APIs to extend the browser's built-in developer tools.</span> To create a devtools extension, include the "<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a>" key in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>:</p> + +<pre class="brush: json notranslate">"devtools_page": "devtools/devtools-page.html"</pre> + +<p>The value of this key is a URL pointing to an HTML file that's been bundled with your extension. The URL should be relative to the manifest.json file itself.</p> + +<p>The HTML file defines a special page in the extension, called the devtools page.</p> + +<h2 id="The_devtools_page">The devtools page</h2> + +<p>The devtools page is loaded when the browser devtools are opened, and unloaded when it is closed. Note that because the devtools window is associated with a single tab, it's quite possible for more than one devtools window - hence more than one devtools page - to exist at the same time.</p> + +<p>The devtools page doesn't have any visible DOM, but can include JavaScript sources using <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> tags. The sources must be bundled with the extension itself. The sources get access to:</p> + +<ul> + <li>The normal DOM APIs accessible through the global <code><a href="/en-US/docs/Web/API/Window">window</a></code> object</li> + <li>The same <a href="/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">WebExtension APIs as in Content Scripts</a></li> + <li>The devtools APIs: + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network">devtools.network</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code></li> + </ul> + </li> +</ul> + +<p>Note that the devtools page does not get access to any other WebExtension APIs, and the background page doesn't get access to the devtools APIs. Instead, the devtools page and the background page must communicate using the <code>runtime</code> messaging APIs. Here's an example:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + </head> + <body> + <script src="devtools.js"></script> + </body> +</html></pre> + +<p>The devtools.js file will hold the actual code creating your dev tools extensions.</p> + +<h2 id="Creating_panels">Creating panels</h2> + +<p>The devtools window hosts a number of separate tools - the JavaScript Debugger, Network Monitor, and so on. A row of tabs across the top lets the user switch between the different tools. The window hosting each tool's user interface is called a "panel".</p> + +<p>Using the <code>devtools.panels.create()</code> API, you can create your own panel in the devtools window:</p> + +<pre class="brush: js notranslate">browser.devtools.panels.create( + "My Panel", // title + "icons/star.png", // icon + "devtools/panel/panel.html" // content +).then((newPanel) => { + newPanel.onShown.addListener(initialisePanel); + newPanel.onHidden.addListener(unInitialisePanel); +});</pre> + +<p>This takes three mandatory arguments: the panel's title, icon, and content. It returns a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> which resolves to a <code>devtools.panels.ExtensionPanel</code> object representing the new panel.</p> + +<h2 id="Interacting_with_the_target_window">Interacting with the target window</h2> + +<p>The developer tools are always attached to a particular browser tab. This is referred to as the "target" for the developer tools, or the "inspected window". You can interact with the inspected window using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code> API.</p> + +<h3 id="Running_code_in_the_target_window">Running code in the target window</h3> + +<p>The <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code> provides one way to run code in the inspected window.</p> + +<p>This is somewhat like using {{WebExtAPIRef("tabs.executeScript()")}} to inject a content script, but with one important difference:</p> + +<ul> + <li>unlike content scripts, scripts loaded using <code>devtools.inspectedWindow.eval()</code><strong> do not</strong> get <a href="/en-US/Add-ons/WebExtensions/Content_scripts#DOM_access">a "clean view of the DOM"</a>: that is, they can see changes to the page made by page scripts.</li> +</ul> + +<div class="note"> +<p>Note that a clean view of the DOM is a security feature, intended to help prevent hostile pages from tricking extensions by redefining the behavior of native DOM functions. This means you need to be very careful using eval(), and should use a normal content script if you can.</p> +</div> + +<p>Scripts loaded using <code>devtools.inspectedWindow.eval()</code> also don't see any JavaScript variables defined by content scripts.</p> + +<h3 id="Working_with_content_scripts">Working with content scripts</h3> + +<p>A devtools document doesn't have direct access to {{WebExtAPIRef("tabs.executeScript()")}}, so if you need to inject a content script, the devtools document must send a message to the background script asking it to inject the script. The <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId">devtools.inspectedWindow.tabId</a></code> provides the ID of the target tab: the devtools document can pass this to the background script, and the background script can in turn pass it into {{WebExtAPIRef("tabs.executeScript()")}}:</p> + +<pre class="brush: js notranslate">// devtools-panel.js + +const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';"; + +window.addEventListener("click", () => { + browser.runtime.sendMessage({ + tabId: browser.devtools.inspectedWindow.tabId, + script: scriptToAttach + }); +});</pre> + +<pre class="brush: js notranslate">// background.js + +function handleMessage(request, sender, sendResponse) { + browser.tabs.executeScript(request.tabId, { + code: request.script + }); +} + +browser.runtime.onMessage.addListener(handleMessage);</pre> + +<p>If you need to exchange messages between the content scripts running in the target window and a devtools document, it's a good idea to use the {{WebExtAPIRef("runtime.connect()")}} and {{WebExtAPIRef("runtime.onConnect")}} to set up a connection between the background page and the devtools document. The background page can then maintain a mapping between tab IDs and {{WebExtAPIRef("runtime.Port")}} objects, and use this to route messages between the two scopes.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<h2 id="Limitations_of_the_devtools_APIs">Limitations of the devtools APIs</h2> + +<p>These APIs are based on the Chrome devtools APIs, but many features are still missing, compared with Chrome. This section lists the features that are still not implemented, as of Firefox 54. Note that the devtools APIs are under active development and we expect to add support for most of them in future releases.</p> + +<h3 id="devtools.inspectedWindow">devtools.inspectedWindow</h3> + +<p>The following are not supported:</p> + +<ul> + <li><code>inspectedWindow.getResources()</code></li> + <li><code>inspectedWindow.onResourceAdded</code></li> + <li><code>inspectedWindow.onResourceContentCommitted</code></li> +</ul> + +<p>None of the options to <code>inspectedWindow.eval()</code> are supported.</p> + +<p>Scripts injected using <code>inspectedWindow.eval()</code> can't use all the Console's command-line helper functions, but <code>$0</code> and <code>inspect(...)</code> are both supported (starting from Firefox 55).</p> + +<h3 id="devtools.panels">devtools.panels</h3> + +<p>The following are not supported:</p> + +<ul> + <li><code>panels.elements</code></li> + <li><code>panels.sources</code></li> + <li><code>panels.setOpenResourceHandler()</code></li> + <li><code>panels.openResource()</code></li> + <li><code>panels.ExtensionPanel.createStatusBarButton()</code></li> + <li><code>panels.Button</code></li> + <li><code>panels.ElementsPanel</code></li> + <li><code>panels.SourcesPanel</code></li> +</ul> + +<h2 id="Examples">Examples</h2> + +<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repo on GitHub, contains several examples of extensions that use devtools panels:</p> + +<ul> + <li> + <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> use devtools panels:</p> + </li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..1d48eec011 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,199 @@ +--- +title: Implementar una página de configuración +slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +tags: + - JavaScript +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +--- +<div>{{AddonSidebar}}</div> + +<p>Una página de configuración ofrece a los usuarios una manera de ver y cambiar los ajustes (algunas veces también llamados "preferencias" u "opciones") para el complemento.</p> + +<p>Con WebExtensions, los ajustes generalmente se almacenan utilizando la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code> . La implementación de una página de configuración se realiza en un proceso de tres pasos:</p> + +<ul> + <li>Escribir un archivo HTML que muestre los ajustes y permita al usuario cambiarlos.</li> + <li>Escribir un script, incluido desde el archivo HTML , que establece la página de configuración desde su almacenamiento y actualiza los ajustes seleccionados cuando el usuario los modifica.</li> + <li>Establecer la ruta al archivo HTML como la clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui </a></code> en manifest.json. Haciendo esto, el documento HTML se mostrará en el administrador de complementos del navegador, junto al nombre del complemento y su descripción.</li> +</ul> + +<div class="note"> +<p>También puedes abrir esta página mediante programación utilizando la función <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage()</a></code> .</p> +</div> + +<h2 id="Una_sencilla_ExtensionWeb">Una sencilla ExtensionWeb</h2> + +<p>En primer lugar, vamos a escribir una extensión que añada un borde azul a todas las páginas que el usuario visita.</p> + +<p>Crea un nuevo directorio llamado "configuración", a continuación crea un archivo llamado"manifest.json" en su interior ,con el siguiente contenido:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Settings example", + "version": "1.0", + + "content_scripts": [ + { + "matches": ["<all_urls>"], + "js": ["borderify.js"] + } + ], + + "applications": { + "gecko": { + "id": "settings-example@mozilla.org" + } + } + +}</pre> + +<p>Este complemento da instrucciones al navegador para cargar un script de contenido llamado "borderify.js" en todas las páginas web que el usuario visita.</p> + +<p>Ten en cuenta que también hemos incluido la clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> . Necesitaremos esto (solamente en Firefox ) porque si hay un error, debemos establecer explícitamente (la identidad del complemento) <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">add-on ID</a> , y también incluimos la clave de manifiesto <code>options_ui</code>. Aunque no utilicemos la clave <code>options_ui</code> en ese momento, lo haremos en la siguiente sección. Ver el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269454">bug 1269545</a>.</p> + +<p>A continuación, crea un archivo llamado "borderify.js" en el directorio "configuración" , y añade el siguiente contenido :</p> + +<pre class="brush: js">document.body.style.border = "10px solid blue";</pre> + +<p>Esto solo añade un borde azul a la página.</p> + +<p>Ahora <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">instala WebExtension</a> y comprueba — abre cualquier página web que te guste:</p> + +<p>{{EmbedYouTube("E-WUhihF8fw")}}</p> + +<h2 id="Añadir_ajustes">Añadir ajustes</h2> + +<p>Ahora vamos a crear una página de configuración que permita al usuario establecer el color del borde.</p> + +<p>En primer lugar, actualiza "manifest.json" para que tenga este contenido:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Settings example", + "version": "1.0", + + "content_scripts": [ + { + "matches": ["<all_urls>"], + "js": ["borderify.js"] + } + ], + + "applications": { + "gecko": { + "id": "settings-example@mozilla.org" + } + }, + + "options_ui": { + "page": "options.html" + }, + + "permissions": ["storage"] + +} +</pre> + +<p>Hemos añadido dos nuevas claves de manifiesto:</p> + +<ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code>: Esta establece un documento HTML que es la página de configuración (tambien llamada página de opciones) para este complemento.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: utilizaremos la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code> para almacenar los ajustes, y necesitaremos pedir permiso para utilizar esta API.</li> +</ul> + +<p>A continuacion, como hemos prometido crear "options.html", vamos a realizarlo. Crea un archivo con ese nombre en el directorio "configuración" , y añade el siguiente contenido:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + </head> + + <body> + + <form> + <label>Border color<input type="text" id="color" ></label> + <button type="submit">Save</button> + </form> + + <script src="options.js"></script> + + </body> + +</html> +</pre> + +<p>Esto define un elemento HTML {{htmlelement("form")}} con un texto etiquetado {{htmlelement("input")}} y un botón de envio {{htmlelement("button")}}. también incluye un script llamado "options.js".</p> + +<p>Crea "options.js", de nuevo en el directorio "configuración" , y añade el siguiente contenido:</p> + +<pre class="brush: js">function saveOptions(e) { + chrome.storage.local.set({ + color: document.querySelector("#color").value + }); +} + +function restoreOptions() { + chrome.storage.local.get("color", (res) => { + document.querySelector("#color").value = res.color || "blue"; + }); +} + +document.addEventListener("DOMContentLoaded", restoreOptions); +document.querySelector("form").addEventListener("submit", saveOptions);</pre> + +<p>Esto hace dos cosas:</p> + +<ul> + <li>Cuando el documento ha sido cargado, se obtiene el valor "color" desde el almacenamiento utilizando <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get">storage.local.get()</a></code>. Si el valor no se ha establecido, utiliza por defecto "azul".</li> + <li>Cuando el usuario envía el formulario haciendo click en "guardar", se almacena el valor del cuadro de texto utilizando <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set">storage.local.set()</a></code>.</li> +</ul> + +<p>Finalmente, actualiza "borderify.js" para leer el color del borde del almacenamiento:</p> + +<pre class="brush: js">chrome.storage.local.get(null, (res) => { + var color = "blue"; + if (res.color) { + color = res.color; + } + document.body.style.border = "10px solid " + color; +});</pre> + +<p>En este punto, el complemento completo debe tener este aspecto:</p> + +<pre>settings/ + borderify.js + manifest.json + options.html + options.js</pre> + +<p>Ahora:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">recarga WebExtension.</a></li> + <li>carga una página web.</li> + <li>abre la página de configuración y cambia el color del borde.</li> + <li>recarga la página web para ver la diferencia.</li> +</ul> + +<p>En Firefox se puede accededer a la página de configuración visitando : complementos y haciendo click en el botón "Preferencias" junto a la entrada del complemento.</p> + +<p>{{EmbedYouTube("ECt9cbWh1qs")}}</p> + +<h2 id="Aprende_más">Aprende más</h2> + +<ul> + <li>Documentación de referencia de la clave de manifiesto.<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui.</a></li> + <li>Documentación de referencia de la API <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage.</a></li> + <li>Abrir la página de configuración directamente desde el complemento utilizando la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage().</a></code></li> + <li>Página de ejemplo de configuraciones: + <ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">color-favorito.</a></li> + </ul> + </li> +</ul> + +<p> </p> diff --git a/files/es/mozilla/add-ons/webextensions/index.html b/files/es/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..ec02f9c6df --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,155 @@ +--- +title: Extensiones del navegador +slug: Mozilla/Add-ons/WebExtensions +tags: + - Complementos + - Dónde empezar + - Manifiesto + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la <a class="external-icon external" href="https://developer.chrome.com/extensions">API de extensión</a> soportada por Google Chrome, Opera y el <a href="https://browserext.github.io/browserext/">borrador del grupo de la comunidad del W3C</a>.</p> + +<p>Las extensiones escritas para estos navegadores se ejecutarán en la mayoría de los casos en Firefox o <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> con sólo <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Porting_from_Google_Chrome">unos pocos cambios</a>. La API también es totalmente compatible con <a href="https://developer.mozilla.org/es/Firefox/Multiprocess_Firefox">multiprocesos de Firefox</a>.</p> + +<p>Si tiene alguna idea, pregunta, o necesita ayuda en el proceso de migración de un complemento heredado al uso de las APIs de WebExtension, puede ponerse en contacto con nosotros a través de la <a href="https://mail.mozilla.org/listinfo/dev-addons">lista de correo dev-addons</a> o en el canal <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> de <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Primeros_pasos">Primeros pasos</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Que_son_las_WebExtensions">¿Qué son las extensiones?</a></li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Tu_primera_WebExtension">Tu primera extensión</a></li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Tutorial">Tu segunda extensión</a></li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension">Anatomía de una extensión</a></li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples">Ejemplos de extensiones</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_">¿Qué sigue?</a></li> +</ul> + +<p> </p> + +<h2 id="Conceptos">Conceptos</h2> + +<ul> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API">Descripción general de la API JavaScript</a></li> + <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Scripts de contenido</a></li> + <li><a href="/es/Add-ons/WebExtensions/Match_patterns">Patrones de coincidencia</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Trabajando con archivos</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internacionalización</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">Las mejores prácticas de seguridad</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Política de seguridad de contenido</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Mensajería nativa</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Extending_the_developer_tools">Utilización de las APIs de devtools</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_experience_best_practices">Buenas prácticas para la experiencia de usuario</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_manifests">Manifestaciones nativas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions">Acciones de los usuarios</a></li> +</ul> + +<p> </p> + +<h2 id="Interfaz_de_usuario">Interfaz de usuario</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/user_interface">Introducción</a></li> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/user_interface/Accion_navegador">Botón en la barra de herramientas del navegador</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Popups">Botón en barra de herramientas del navegador con una ventana emergente</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Page_actions">Botón en la barra de direcciones</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Popups">Botón en barra de direcciones con una ventana emergente</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Context_menu_items">Elementos en el menú contextual</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Sidebars">Barras laterales</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Options_pages">Página de opciones</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Extension_pages">Páginas de extensiones</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Notifications">Notificaciones</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Omnibox">Sugerencias en la barra de direcciones</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/devtools_panels">Paneles de herramientas para desarrolladores</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">Estilos del navegador</a></li> +</ul> + +<h2 id="Cómo">Cómo</h2> + +<ul> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Interceptar solicitudes HTTP</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modificar una página web</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Agregar un botón a la barra de herramientas</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implementar una página de configuración</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">Interactuar con el portapapapeles</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Working_with_the_Tabs_API">Trabajar con el API de las pestañas</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">Trabajar con el API de los marcadores</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Work_with_the_Cookies_API">Trabajar con el API de las cookies</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Work_with_contextual_identities">Trabjar con identidades contextuales</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">Insertar contenido externo</a></li> +</ul> + +<h2 id="Portado">Portado</h2> + +<ul> + <li><a href="/es/Add-ons/WebExtensions/Porting_from_Google_Chrome">Portar una extensión de Google Chrome</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Portar un complemento heredado de Firefox</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">Desarrollo para Firefox para Android</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">WebExtensions integradas</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparación con el complemento SDK</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparación con las extensiones XUL/XPCOM</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Incompatibilidades con Chrome</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Differences_between_desktop_and_Android">Diferencias entre el escritorio y Android</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations">Diferencias entre implementaciones de API</a></li> +</ul> + +<h2 id="Flujo_de_trabajo_de_Firefox">Flujo de trabajo de Firefox</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/User_experience_best_practices">Experiencia de usuario</a></li> + <li><a href="/es/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Instalación</a></li> + <li><a href="/es/Add-ons/WebExtensions/Debugging">Depuración</a></li> + <li> + <div id="gt-res-content"> + <div class="trans-verified-button-large" dir="ltr" id="gt-res-dir-ctr"> + <div id="tts_button"><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Testing_persistent_and_restart_features">Prueba de funciones persistentes y de reinicio</a></div> + </div> + </div> + </li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Primeros pasos con web-ext</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">Referencia del comando web-ext</a></li> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Extensiones y el ID del complemento</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Alternative_distribution_options">Opciones alternativas de distribución</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Solicite los permisos correctos</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Compartir objetos con guiones de página</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/Distribution/Retiring_your_extension">Retirando su extensión</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Tips">Consejos y trucos</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Development_Tools">Herramientas de desarrollo para las extensiones del navegador</a></li> +</ul> +</div> + +<div class="section"> +<h2 id="Reference">Reference</h2> + +<h3 id="JavaScript_APIs">JavaScript APIs</h3> + +<ul> + <li><a href="/es/docs/Mozilla/Add-ons/WebExtensions/API">Descripción general de la API JavaScript</a></li> + <li><a href="/es/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Tablas de compatibilidad del navegador para las API de JavaScript</a></li> +</ul> + +<h4 id="APIs_de_JavaScript">APIs de JavaScript</h4> + +<div class="twocolumns">{{ListSubpages("/en-US/Add-ons/WebExtensions/API")}}</div> + +<h3 id="Manifest_keys">Manifest keys</h3> + +<ul> + <li><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/manifest.json">Resumen del manifest.json</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">Compatibilidad del navegador para el manifest.json</a></li> +</ul> + +<div class="twocolumns">{{ListSubpages("/en-US/Add-ons/WebExtensions/manifest.json")}}</div> +</div> +</div> + +<div class="SnapLinksContainer" style="margin-left: 0px; margin-top: 0px; display: none;"> +<div class="SL_SelectionRect"> +<div class="SL_SelectionLabel"> </div> +</div> +</div> diff --git a/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html new file mode 100644 index 0000000000..a87d079ecd --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -0,0 +1,156 @@ +--- +title: Interceptar peticiones HTTP +slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +tags: + - Complementos + - Cómos + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +--- +<div>{{AddonSidebar}}</div> + +<p>Para interceptar peticiones HTTP, utilice la API {{WebExtAPIRef("webRequest")}}. Esta API le permite agregar escuchadores de evento para varias etapas en la realización de las solicitudes HTTP. En los escuchadores, tu puedes:</p> + +<ul> + <li>Obtener acceso a la solicitud y respuesta de las cabeceras y cuerpos</li> + <li>Cancelar y redireccionar las solicitudes</li> + <li>Modificar las solicitudes y respuestas de las cabeceras</li> +</ul> + +<p>En este artículo se verán los tres diferentes usos del módulo <code>webRequest</code>:</p> + +<ul> + <li>Registro de solicitudes de URLs a medida que se realizan.</li> + <li>Redireccionar las solicitudes.</li> + <li>Modificar las cabeceras de las solicitud.</li> +</ul> + +<h2 id="Registrar_solicitudes_de_URLs">Registrar solicitudes de URLs</h2> + +<p>Crea un nuevo directorio llamado "requests". En ese directorio, crea un archivo llamado "manifest.json" el cual debe poseer el siguiente contenido:</p> + +<pre class="brush: json">{ + "description": "Demostrar webRequests", + "manifest_version": 2, + "name": "webRequest-demo", + "version": "1.0", + + "permissions": [ + "webRequest" + ], + + "background": { + "scripts": ["background.js"] + } +}</pre> + +<p>Luego, crea un archivo llamado "background.js" con el siguiente contenido:</p> + +<pre class="brush: js">function logURL(requestDetails) { + console.log("Cargando: " + requestDetails.url); +} + +browser.webRequest.onBeforeRequest.addListener( + logURL, + {urls: ["<all_urls>"]} +); + +</pre> + +<p>En este punto se utiliza {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para llamar la función <code>logURL()</code> junstamente después de realizar la solicitud. La función <code>logURL()</code> se apropia de la solicitud URL del objeto de eventos y lo registra en la consola del navegador. <code>El </code><a href="/es/Add-ons/WebExtensions/Match_patterns">patrón</a><code> {urls: ["<all_urls>"]}</code> signinifica que se pueden interceptar todas las solicitudes HTTP de todas las URLs.</p> + +<p>Para probarlo, <a href="/esAdd-ons/WebExtensions/Temporary_Installation_in_Firefox">instala la WebExtension</a>, <a href="/es/docs/Tools/Browser_Console">abre la consola del navegador</a>, y abre algunas páginas Web. En la consola del navegador, deberías ver las URLs de cualquier recurso que el navegador solicita:</p> + +<p>{{EmbedYouTube("X3rMgkRkB1Q")}}</p> + +<h2 id="Redireccionar_solicitudes">Redireccionar solicitudes</h2> + +<p>Ahora utilice <code>webRequest</code> para redireccionar todas las solicitudes HTTP. Primero, reemplace manifest.json con lo siguiente:</p> + +<pre class="brush: json">{ + + "description": "Demostrar webRequests", + "manifest_version": 2, + "name": "webRequest-demo", + "version": "1.0", + + "permissions": [ + "webRequest", "webRequestBlocking" + ], + + "background": { + "scripts": ["background.js"] + } + +}</pre> + +<p>El único cambio fue la adición de los <code><a href="/es/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permisos</a></code> <code>"webRequestBlocking"</code>. Se necesita preguntar por este extra-permiso todas las veces que se está activamente modificando una solicitud.</p> + +<p>Luego, reemplace "background.js" con esto:</p> + +<pre class="brush: js">var pattern = "https://mdn.mozillademos.org/*"; + +function redirect(requestDetails) { + console.log("Redireccionando: " + requestDetails.url); + return { + redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif" + }; +} + +browser.webRequest.onBeforeRequest.addListener( + redirect, + {urls:[pattern], types:["image"]}, + ["blocking"] +);</pre> + +<p>De nuevo, se utiliza el escuchador de evento {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para ejecutar una función justamente antes de que cada solicitud sea realizada. Esta función reemplazará el objetivo URL con <code>redirectUrl</code> que está definido en la función.</p> + +<p>Esta vez no se está interceptando cada solicitud: la opción <code>{urls:[pattern], types:["image"]}</code> especifica que solo se debería interceptar solicitudes (1) de URLs que residen bajo "https://mdn.mozillademos.org/" (2) para recursos de imágenes. Vea {{WebExtAPIRef("webRequest.RequestFilter")}} para más información sobre esto.</p> + +<p>Dése cuenta también, que se esta pasando la opción llamada <code>"blocking"</code>: se necesita pasar cada vez que se requiera modificar la solicitud. Esto hace que la función del escuchador bloquee la solicitud de la red, así que el navegador espera que el escuchador retorne antes de continuar. Vea la documentación {{WebExtAPIRef("webRequest.onBeforeRequest")}} para conocer más sobre <code>"blocking"</code>.</p> + +<p>Para probarlo, abra una página de MDN que contenga bastantes imágenes (por ejemplo <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor</a>), <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">recargue la WebExtension</a>, y luego recargue la página de MDN:</p> + +<p>{{EmbedYouTube("ix5RrXGr0wA")}}</p> + +<h2 id="Modificar_las_cabeceras_de_la_solicitud">Modificar las cabeceras de la solicitud</h2> + +<p>Finalmente se utilizará <code>webRequest</code> para modificar las cabeceras de las solicitudes. En este ejempo se modificará la cabecera "User-Agent" así que el navegador se identificará por sí mismo como Opera 12.16, pero solamente cuando se visitan páginas de "http://useragentstring.com/".</p> + +<p>El "manifest.json" puede permanecer igual que el ejemplo anterior.</p> + +<p>Reemplace "background.js" con el siguiente código:</p> + +<pre class="brush: js">var targetPage = "http://useragentstring.com/*"; + +var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16"; + +function rewriteUserAgentHeader(e) { + for (var header of e.requestHeaders) { + if (header.name == "User-Agent") { + header.value = ua; + } + } + return {requestHeaders: e.requestHeaders}; +} + +browser.webRequest.onBeforeSendHeaders.addListener( + rewriteUserAgentHeader, + {urls: [targetPage]}, + ["blocking", "requestHeaders"] +);</pre> + +<p>Aquí se utiliza el escuchador de eventos {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} para ejecutar una función juntamente antes de que la solicitud de las cabeceras sean enviadas.</p> + +<p>La función escuchadora será llamada solamente por solicitudes de URLs que coincidan con el <a href="/es/Add-ons/WebExtensions/Match_patterns">patrón </a><code>targetPage</code>. Dése cuenta de nuevo que <code>"blocking"</code> se ha pasado como una opción. También se pasó <code>"requestHeaders"</code>, lo cual significa que al escuchador pasará un array conteniendo las cabeceras de la solicitud que se espera enviar. Vea {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} para más información en estas opciones.</p> + +<p>La función escuchadora busca la cabecera "User-Agent" en el array de la solicitud de cabeceras, reemplaza el valor con el valor de la variable <code>ua</code>, y regresa el array modificado. Este array modificado será el enviado al servidor.</p> + +<p>Para comprobarlo, abra <a href="http://useragentstring.com/">useragentstring.com</a> y verifique que identifica al navegador como Firefox. Luego recargue el complemento, recargue <a href="http://useragentstring.com/">useragentstring.com</a>, y compruebe que Firefox es identificado ahora como Opera:</p> + +<p>{{EmbedYouTube("SrSNS1-FIx0")}}</p> + +<h2 id="Aprenda_más">Aprenda más</h2> + +<p>Para aprender más sobre todas las cosas que puede hacer con la API <code>webRequest</code>, vea su propia <a href="/en-US/Add-ons/WebExtensions/API/WebRequest">documentación de referencia</a>.</p> diff --git a/files/es/mozilla/add-ons/webextensions/internationalization/index.html b/files/es/mozilla/add-ons/webextensions/internationalization/index.html new file mode 100644 index 0000000000..89c542a2e7 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/internationalization/index.html @@ -0,0 +1,405 @@ +--- +title: Internationalization +slug: Mozilla/Add-ons/WebExtensions/Internationalization +translation_of: Mozilla/Add-ons/WebExtensions/Internationalization +--- +<pre class="brush: html notranslate"><span class="seoSummary"><kbd>H</kbd></span></pre> + +<p>The <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> API has a rather handy module available for internationalizing extensions — <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a>. In this article we'll explore its features and provide a practical example of how it works. The i18n system for extensions built using WebExtension APIs is similar to common JavaScript libraries for i18n such as <a href="http://i18njs.com/">i18n.js</a>.</p> + +<div class="note"> +<p>The example extension featured in this article — <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> — is available on GitHub. Follow along with the source code as you go through the sections below.</p> +</div> + +<h2 id="Anatomy_of_an_internationalized_extension">Anatomy of an internationalized extension</h2> + +<p>An internationalized extension can contain the same features as any other extension — <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a>, etc. — but it also has some extra parts to allow it to switch between different locales. These are summarized in the following directory tree:</p> + +<ul class="directory-tree"> + <li>extension-root-directory/ + <ul> + <li>_locales + <ul> + <li>en + <ul> + <li>messages.json + <ul> + <li>English messages (strings)</li> + </ul> + </li> + </ul> + </li> + <li>de + <ul> + <li>messages.json + <ul> + <li>German messages (strings)</li> + </ul> + </li> + </ul> + </li> + <li>etc.</li> + </ul> + </li> + <li>manifest.json + <ul> + <li>locale-dependent metadata</li> + </ul> + </li> + <li>myJavascript.js + <ul> + <li>JavaScript for retrieving browser locale, locale-specific messages, etc.</li> + </ul> + </li> + <li>myStyles.css + <ul> + <li>locale-dependent CSS</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>Let's explore each of the new features in turn — each of the below sections represents a step to follow when internationalizing your extension.</p> + +<h2 id="Providing_localized_strings_in__locales">Providing localized strings in _locales</h2> + +<div class="pull-aside"> +<div class="moreinfo">You can look up language subtags using the <em>Find</em> tool on the <a href="https://r12a.github.io/app-subtags/">Language subtag lookup page</a>. Note that you need to search for the English name of the language.</div> +</div> + +<p>Every i18n system requires the provision of strings translated into all the different locales you want to support. In extensions, these are contained within a directory called <code>_locales</code>, placed inside the extension root. Each individual locale has its strings (referred to as messages) contained within a file called <code>messages.json</code>, which is placed inside a subdirectory of <code>_locales</code>, named using the language subtag for that locale's language.</p> + +<p>Note that if the subtag includes a basic language plus a regional variant, then the language and variant are conventionally separated using a hyphen: for example, "en-US". However, in the directories under <code>_locales</code>, <strong>the separator must be an underscore</strong>: "en_US".</p> + +<p>So <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n/_locales">for example, in our sample app</a> we have directories for "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese). Each one of these has a <code>messages.json</code> file inside it.</p> + +<p>Let's now look at the structure of one of these files (<a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/_locales/en/messages.json">_locales/en/messages.json</a>):</p> + +<pre class="brush: json notranslate">{ + "extensionName": { + "message": "Notify link clicks i18n", + "description": "Name of the extension." + }, + + "extensionDescription": { + "message": "Shows a notification when the user clicks on links.", + "description": "Description of the extension." + }, + + "notificationTitle": { + "message": "Click notification", + "description": "Title of the click notification." + }, + + "notificationContent": { + "message": "You clicked $URL$.", + "description": "Tells the user which link they clicked.", + "placeholders": { + "url" : { + "content" : "$1", + "example" : "https://developer.mozilla.org" + } + } + } +}</pre> + +<p>This file is standard JSON — each one of its members is an object with a name, which contains a <code>message</code> and a <code>description</code>. All of these items are strings; <code>$URL$</code> is a placeholder, which is replaced with a substring at the time the <code>notificationContent</code> member is called by the extension. You'll learn how to do this in the {{anch("Retrieving message strings from JavaScript")}} section.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find much more information about the contents of <code>messages.json</code> files in our <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference">Locale-Specific Message reference</a>.</p> +</div> + +<h2 id="Internationalizing_manifest.json">Internationalizing manifest.json</h2> + +<p>There are a couple of different tasks to carry out to internationalize your manifest.json.</p> + +<h3 id="Retrieving_localized_strings_in_manifests">Retrieving localized strings in manifests</h3> + +<p>Your <a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/manifest.json">manifest.json</a> includes strings that are displayed to the user, such as the extension's name and description. If you internationalize these strings and put the appropriate translations of them in messages.json, then the correct translation of the string will be displayed to the user, based on the current locale, like so.</p> + +<p>To internationalize strings, specify them like this:</p> + +<pre class="brush: json notranslate">"name": "__MSG_extensionName__", +"description": "__MSG_extensionDescription__",</pre> + +<p>Here, we are retrieving message strings dependant on the browser's locale, rather than just including static strings.</p> + +<p>To call a message string like this, you need to specify it like this:</p> + +<ol> + <li>Two underscores, followed by</li> + <li>The string "MSG", followed by</li> + <li>One underscore, followed by</li> + <li>The name of the message you want to call as defined in <code>messages.json</code>, followed by</li> + <li>Two underscores</li> +</ol> + +<pre class="notranslate"><strong>__MSG_</strong> + <em>messageName</em> + <strong>__</strong></pre> + +<h3 id="Specifying_a_default_locale">Specifying a default locale</h3> + +<p>Another field you should specify in your manifest.json is <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a>:</p> + +<pre class="brush: json notranslate">"default_locale": "en"</pre> + +<p>This specifies a default locale to use if the extension doesn't include a localized string for the browser's current locale. Any message strings that are not available in the browser locale are taken from the default locale instead. There are some more details to be aware of in terms of how the browser selects strings — see {{anch("Localized string selection")}}.</p> + +<h2 id="Locale-dependent_CSS">Locale-dependent CSS</h2> + +<p>Note that you can also retrieve localized strings from CSS files in the extension. For example, you might want to construct a locale-dependent CSS rule, like this:</p> + +<pre class="brush: css notranslate">header { + background-image: url(../images/__MSG_extensionName__/header.png); +}</pre> + +<p>This is useful, although you might be better off handling such a situation using {{anch("Predefined messages")}}.</p> + +<h2 id="Retrieving_message_strings_from_JavaScript">Retrieving message strings from JavaScript</h2> + +<p>So, you've got your message strings set up, and your manifest. Now you just need to start calling your message strings from JavaScript so your extension can talk the right language as much as possible. The actual <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n API</a> is pretty simple, containing just four main methods:</p> + +<ul> + <li>You'll probably use {{WebExtAPIRef("i18n.getMessage()")}} most often — this is the method you use to retrieve a specific language string, as mentioned above. We'll see specific usage examples of this below.</li> + <li>The {{WebExtAPIRef("i18n.getAcceptLanguages()")}} and {{WebExtAPIRef("i18n.getUILanguage()")}} methods could be used if you needed to customize the UI depending on the locale — perhaps you might want to show preferences specific to the users' preferred languages higher up in a prefs list, or display cultural information relevant only to a certain language, or format displayed dates appropriately according to the browser locale.</li> + <li>The {{WebExtAPIRef("i18n.detectLanguage()")}} method could be used to detect the language of user-submitted content, and format it appropriately.</li> +</ul> + +<p>In our <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example, the<a href="https://github.com/mdn/webextensions-examples/blob/master/notify-link-clicks-i18n/background-script.js"> background script</a> contains the following lines:</p> + +<pre class="brush: js notranslate">var title = browser.i18n.getMessage("notificationTitle"); +var content = browser.i18n.getMessage("notificationContent", message.url);</pre> + +<p>The first one just retrieves the <code>notificationTitle message</code> field from the available <code>messages.json</code> file most appropriate for the browser's current locale. The second one is similar, but it is being passed a URL as a second parameter. What gives? This is how you specify the content to replace the <code>$URL$</code> placeholder we see in the <code>notificationContent message</code> field:</p> + +<pre class="brush: json notranslate">"notificationContent": { + "message": "You clicked $URL$.", + "description": "Tells the user which link they clicked.", + "placeholders": { + "url" : { + "content" : "$1", + "example" : "https://developer.mozilla.org" + } + } +} +</pre> + +<p>The <code>"placeholders"</code> member defines all the placeholders, and where they are retrieved from. The <code>"url"</code> placeholder specifies that its content is taken from $1, which is the first value given inside the second parameter of <code>getMessage()</code>. Since the placeholder is called <code>"url"</code>, we use <code>$URL$</code> to call it inside the actual message string (so for <code>"name"</code> you'd use <code>$NAME$</code>, etc.) If you have multiple placeholders, you can provide them inside an array that is given to {{WebExtAPIRef("i18n.getMessage()")}} as the second parameter — <code>[a, b, c]</code> will be available as <code>$1</code>, <code>$2</code>, and <code>$3</code>, and so on, inside <code>messages.json</code>.</p> + +<p>Let's run through an example: the original <code>notificationContent</code> message string in the <code>en/messages.json</code> file is</p> + +<pre class="notranslate">You clicked $URL$.</pre> + +<p>Let's say the link clicked on points to <code>https://developer.mozilla.org</code>. After the {{WebExtAPIRef("i18n.getMessage()")}} call, the contents of the second parameter are made available in messages.json as <code>$1</code>, which replaces the <code>$URL$</code> placeholder as defined in the <code>"url"</code> placeholder. So the final message string is</p> + +<pre class="notranslate">You clicked https://developer.mozilla.org.</pre> + +<h3 id="Direct_placeholder_usage">Direct placeholder usage</h3> + +<p>It is possible to insert your variables (<code>$1</code>, <code>$2</code>, <code>$3</code>, etc.) directly into the message strings, for example we could rewrite the above <code>"notificationContent"</code> member like this:</p> + +<pre class="brush: json notranslate">"notificationContent": { + "message": "You clicked $1.", + "description": "Tells the user which link they clicked." +}</pre> + +<p>This may seem quicker and less complex, but the other way (using <code>"placeholders"</code>) is seen as best practice. This is because having the placeholder name (e.g. <code>"url"</code>) and example helps you to remember what the placeholder is for — a week after you write your code, you'll probably forget what <code>$1</code>–<code>$8</code> refer to, but you'll be more likely to know what your placeholder names refer to.</p> + +<h3 id="Hardcoded_substitution">Hardcoded substitution</h3> + +<p>It is also possible to include hardcoded strings in placeholders, so that the same value is used every time, instead of getting the value from a variable in your code. For example:</p> + +<pre class="brush: json notranslate">"mdn_banner": { + "message": "For more information on web technologies, go to $MDN$.", + "description": "Tell the user about MDN", + "placeholders": { + "mdn": { + "content": "https://developer.mozilla.org/" + } + } +}</pre> + +<p>In this case we are just hardcoding the placeholder content, rather than getting it from a variable value like <code>$1</code>. This can sometimes be useful when your message file is very complex, and you want to split up different values to make the strings more readable in the file, plus then these values could be accessed programmatically.</p> + +<p>In addition, you can use such substitutions to specify parts of the string that you don't want to be translated, such as person or business names.</p> + +<h2 id="Localized_string_selection">Localized string selection</h2> + +<p>Locales can be specified using only a language code, like <code>fr</code> or <code>en</code>, or they may be further qualified with a region code, like <code>en_US</code> or <code>en_GB</code>, which describes a regional variant of the same basic language. When you ask the i18n system for a string, it will select a string using the following algorithm:</p> + +<ol> + <li>if there is a <code>messages.json</code> file for the exact current locale, and it contains the string, return it.</li> + <li>Otherwise, if the current locale is qualified with a region (e.g. <code>en_US</code>) and there is a <code>messages.json</code> file for the regionless version of that locale (e.g. <code>en</code>), and that file contains the string, return it.</li> + <li>Otherwise, if there is a <code>messages.json</code> file for the <code>default_locale</code> defined in the <code>manifest.json</code>, and it contains the string, return it.</li> + <li>Otherwise return an empty string.</li> +</ol> + +<p>Take the following example:</p> + +<ul class="directory-tree"> + <li>extension-root-directory/ + <ul> + <li>_locales + <ul> + <li>en_GB + <ul> + <li>messages.json + <ul> + <li><code>{ "colorLocalised": { "message": "colour", "description": "Color." }, ... }</code></li> + </ul> + </li> + </ul> + en + + <ul> + <li>messages.json + <ul> + <li><code>{ "colorLocalised": { "message": "color", "description": "Color." }, ... }</code></li> + </ul> + </li> + </ul> + </li> + <li>fr + <ul> + <li>messages.json + <ul> + <li><code>{ "colorLocalised": { "message": "<span lang="fr">couleur</span>", "description": "Color." }, ...}</code></li> + </ul> + </li> + </ul> + </li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>Suppose the <code>default_locale</code> is set to <code>fr</code>, and the browser's current locale is <code>en_GB</code>:</p> + +<ul> + <li>If the extension calls <code>getMessage("colorLocalised")</code>, it will return "colour".</li> + <li>If "colorLocalised" were not present in <code>en_GB</code>, then <code>getMessage("colorLocalised")</code>, would return "color", not "couleur".</li> +</ul> + +<h2 id="Predefined_messages">Predefined messages</h2> + +<p>The i18n module provides us with some predefined messages, which we can call in the same way as we saw earlier in {{anch("Calling message strings from manifests and extension CSS")}}. For example:</p> + +<pre class="notranslate">__MSG_extensionName__</pre> + +<p>Predefined messages use exactly the same syntax, except with <code>@@</code> before the message name, for example</p> + +<pre class="notranslate">__MSG_@@ui_locale__</pre> + +<p>The following table shows the different available predefined messages:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Message name</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>@@extension_id</code></td> + <td> + <p>The extension's internally-generated UUID. You might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.</p> + + <p>You can't use this message in a manifest file.</p> + + <p>Also note that this ID is <em>not</em> the add-on ID returned by {{WebExtAPIRef("runtime.id")}}, and that can be set using the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a> key in manifest.json. It's the generated UUID that appears in the add-on's URL. This means that you can't use this value as the <code>extensionId</code> parameter to {{WebExtAPIRef("runtime.sendMessage()")}}, and can't use it to check against the <code>id</code> property of a {{WebExtAPIRef("runtime.MessageSender")}} object.</p> + </td> + </tr> + <tr> + <td><code>@@ui_locale</code></td> + <td>The current locale; you might use this string to construct locale-specific URLs.</td> + </tr> + <tr> + <td><code>@@bidi_dir</code></td> + <td>The text direction for the current locale, either "ltr" for left-to-right languages such as English or "rtl" for right-to-left languages such as Arabic.</td> + </tr> + <tr> + <td><code>@@bidi_reversed_dir</code></td> + <td>If the <code>@@bidi_dir</code> is "ltr", then this is "rtl"; otherwise, it's "ltr".</td> + </tr> + <tr> + <td><code>@@bidi_start_edge</code></td> + <td>If the <code>@@bidi_dir</code> is "ltr", then this is "left"; otherwise, it's "right".</td> + </tr> + <tr> + <td><code>@@bidi_end_edge</code></td> + <td>If the <code>@@bidi_dir</code> is "ltr", then this is "right"; otherwise, it's "left".</td> + </tr> + </tbody> +</table> + +<p>Going back to our earlier example, it would make more sense to write it like this:</p> + +<pre class="brush: css notranslate">header { + background-image: url(../images/__MSG_@@ui_locale__/header.png); +}</pre> + +<p>Now we can just store our local specific images in directories that match the different locales we are supporting — en, de, etc. — which makes a lot more sense.</p> + +<p>Let's look at an example of using <code>@@bidi_*</code> messages in a CSS file:</p> + +<pre class="brush: css notranslate">body { + direction: __MSG_@@bidi_dir__; +} + +div#header { + margin-bottom: 1.05em; + overflow: hidden; + padding-bottom: 1.5em; + padding-__MSG_@@bidi_start_edge__: 0; + padding-__MSG_@@bidi_end_edge__: 1.5em; + position: relative; +}</pre> + +<p>For left-to-right languages such as English, the CSS declarations involving the predefined messages above would translate to the following final code lines:</p> + +<pre class="brush: css notranslate">direction: ltr; +padding-left: 0; +padding-right: 1.5em; +</pre> + +<p>For a right-to-left language like Arabic, you'd get:</p> + +<pre class="brush: css notranslate">direction: rtl; +padding-right: 0; +padding-left: 1.5em;</pre> + +<h2 id="Testing_out_your_extension">Testing out your extension</h2> + +<p>Starting in Firefox 45, you can install extensions temporarily from disk — see <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Packaging_and_installation#Loading_from_disk">Loading from disk</a>. Do this, and then try testing out our <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> extension. Go to one of your favourite websites and click a link to see if a notification appears reporting the URL of the clicked link.</p> + +<p>Next, change Firefox's locale to one supported in the extension that you want to test.</p> + +<ol> + <li>Open "about:config" in Firefox, and search for the <code>intl.locale.requested</code> preference (bear in mind that before Firefox 59, this pref is called <code>general.useragent.locale</code>).</li> + <li>If the preference exists, double-click it (or press Return/Enter) to select it, enter the language code for the locale you want to test, then click "OK" (or press Return/Enter). For example in our example extension, "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese) are supported. You can also set the value to an empty string (<code>""</code>), which will cause the browser to use the OS default locale.</li> + <li>If the <code>intl.locale.requested</code> preference does not exist, right-click the list of preferences (or activate the context menu using the keyboard), and choose "New" followed by "String". Enter <code>intl.locale.requested</code> for the preference name and, "de", or "nl", etc. for the preference value, as described in step 2 above.</li> + <li>Search for <code>intl.locale.matchOS</code> and, if the preference exists and has the value <code>true</code>, double-click it so that it is set to <code>false</code>.</li> + <li>Restart your browser to complete the change.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: This works to change the browser's locale, even if you haven't got the <a href="https://addons.mozilla.org/en-US/firefox/language-tools/">language pack</a> installed for that language. You'll just get the browser UI in your default language if this is the case.</p> +</div> + +<ol> +</ol> + +<div class="note"> +<p><strong>Note:</strong> To change the result of <code>getUILanguage</code> the language pack is required, since it reflects the browser UI language and not the language used for extension messages.</p> +</div> + +<p>Load the extension temporarily from disk again, then test your new locale:</p> + +<ul> + <li>Visit "about:addons" again — you should now see the extension listed, with its icon, plus name and description in the chosen language.</li> + <li>Test your extension again. In our example, you'd go to another website and click a link, to see if the notification now appears in the chosen language.</li> +</ul> + +<p>{{EmbedYouTube("R7--fp5pPGg")}}</p> diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html new file mode 100644 index 0000000000..0f8550f027 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html @@ -0,0 +1,74 @@ +--- +title: icons +slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons +--- +<div>{{AddonSidebar}}</div> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th scope="row" style="width: 30%;">Tipo</th> + <td><code>Object</code></td> + </tr> + <tr> + <th scope="row">Obligatorio</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Ejemplo</th> + <td> + <pre class="brush: json no-line-numbers"> +"icons": { + "48": "icon.png", + "96": "icon@2x.png" +}</pre> + </td> + </tr> + </tbody> +</table> + +<p>La propiedad <code>icons</code> especifica los iconos de tu extensión. Esos iconos se usarán para representar la extensión en componentes como el Administrador de complementos.</p> + +<p>Consiste en pares clave-valor del tamaño de la imagen en px y la ruta de la imagen relativa al directorio raíz de la extensión.</p> + +<p>Si <code>icons</code> no esta definido, se utilizará un icono de extensión estándar por defecto.</p> + +<p>Debería suministrar al menos un icono de extensión principal, idealmente de 48x48 px de tamaño. Este es el icono por defecto que se utilizará en el Administrador de complementos. Sin embargo, puedes suministrar iconos de cualquier tamaño y Firefox intentará encontrar el mejor icono para mostrar en los diferentes componentes.</p> + +<p>Firefox tendrá en cuenta la resolución de la pantalla al elegir un icono. Para ofrecer la mejor experiencia visual a los usuarios con pantallas de alta resolución, como las pantallas Retina, proporciona versiones de doble tamaño de todos sus iconos.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Las propiedades del objeto <code>icons</code> especifican el tamaño del icono en px, los valores especifican la ruta relativa del icono. Este ejemplo contiene un icono de extensión de 48px y una versión más grande para pantallas de alta resolución.</p> + +<pre class="brush: json no-line-numbers">"icons": { + "48": "icon.png", + "96": "icon@2x.png" +}</pre> + +<h2 id="SVG">SVG</h2> + +<p>Puede usar SVG y el navegador escalará su icono adecuadamente. Sin embargo, hay dos advertencias:</p> + +<ol> + <li>Necesitas especificar un viewBox en la imagen. E.g.: + <pre class="brush: html"><svg viewBox="0 0 48 48" width="48" height="48" ...</pre> + </li> + <li>Aunque puedes usar un archivo, todavía necesitas especificar varios tamaños del icono en tu manifiesto. E.g.: + <pre class="brush: json">"icons": { + "48": "icon.svg", + "96": "icon.svg" +}</pre> + </li> +</ol> + +<div class="note"> +<p>Si está usando un programa como Inkscape para crear SVG, puede que quiera guardarlo como un "SVG simple". Firefox podría confundirse con varios espacios de nombres especiales y no mostrar su icono.</p> +</div> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.manifest.icons")}}</p> diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..f85e30b4cf --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,51 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +<p>{{AddonSidebar}}</p> + +<div class="blockIndicator note"> +<p>Este artículo describe manifest.json para extensiones web. Si estás buscando información acerca de manifest.json en PWAs, revisa el artículo sobre <a href="/en-US/docs/Web/Manifest">Web App Manifest</a>.</p> +</div> + +<p>El archivo <code>manifest.json</code> es el único archivo que toda extensión usando la API WebExtension debe contener necesariamente.</p> + +<p>Usando <code>manifest.json</code>, puedes especificar los metadatos básicos de tu extensión como nombre y versión, así como aspectos funcionales de tu extensión (tales como scripts en segundo plano, scripts de contenido y acciones del navegador).</p> + +<p>Es un archivo con formato <a href="/en-US/docs/Glossary/JSON">JSON</a>, con una excepción: permite comentarios con "<code>//</code>".</p> + + +<h2 id="Lista_de_claves_de_manifest.json">Lista de claves de <code>manifest.json</code></h2> + +<p>Las claves de manifest.json son:</p> + +<div class="index">{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json")}}</div> + + +<h3 class="index" id="Notas_acerca_de_las_claves_de_manifest.json">Notas acerca de las claves de manifest.json</h3> + +<ul> + <li><code>"manifest_version"</code>, <code>"version"</code>, and <code>"name"</code> son las únicas llaves obligatorias.</li> + <li><code>"default_locale"</code> Debe estar presente <strong>solo</strong> si la carpeta "<code>_locales</code>" existe.</li> + <li><code>"browser_specific_settings"</code> no tiene soporte en Google Chrome.</li> +</ul> + +<h3 id="Acceder_a_las_claves_de_manifest.json_en_tiempo_de_ejecución">Acceder a las claves de manifest.json en tiempo de ejecución</h3> + +<p>Puedes acceder a el manifest desde el código JavaScript de tu extensión utilizando la función {{WebExtAPIRef("runtime.getManifest()")}}:</p> + +<pre class="brush: js; no-line-numbers notranslate">browser.runtime.getManifest().version;</pre> + + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>Para un resumen extendido de las llaves y sub-llaves ver la <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json"> tabla completa de compatibilidad de <code>manifest.json</code> en navegadores</a>.</p> + +<div class="hidden">La tabla de compatibilidad está generada desde datos estructurados. Si quieres colaborar visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y solicita un <em>pull request</em>.</div> + +<p>{{Compat("webextensions.manifest")}}</p> + +<h2 id="Ver_También">Ver También</h2> + +<p>API JavaScript de {{WebExtAPIRef("permissions")}}</p> diff --git a/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html new file mode 100644 index 0000000000..eb7493b62b --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -0,0 +1,253 @@ +--- +title: Modify a web page +slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +--- +<div>{{AddonSidebar}}</div> + +<div>Uno de los usos más comunes para las extensiones es modificar páginas web. Por ejemplo, una extension puede querer cambiar el estilo de la página, esconder determinados nodos DOM o incluir otros nuevos.</div> + +<div> </div> + +<div>Existen dos maneras de hacer esto con extensiones Web y APIs:</div> + +<div> </div> + +<ul> + <li><strong>Declarativamente</strong>: Define un patrón que encaja con un conjunto de URLs y carga un conjunto de scripts a las páginas cuyos URL encajen con ese patrón.</li> + <li><strong>Programaticamente</strong>: Usando una Javascript API, carga una script en la página alojada en una lengüeta específica.</li> +</ul> + +<p>De ambas formas, estos scripts se llaman scripts de contenido y son distintos del resto de scripts que constituyen una extensión. </p> + +<ul> + <li>Solamente tienen acceso a un grupo pequeño de extensiones web y APIs.</li> + <li>Obtienen acceso directo a la página web en la que han sido cargadas.</li> + <li>Se comunican con el resto de la extensión usando una API de mensajería.</li> +</ul> + +<p>En este artículo hablaremos de los dos métodos para cargar una script..</p> + +<h2 id="Modificando_páginas_que_encajen_con_un_patrón_URL">Modificando páginas que encajen con un patrón URL</h2> + +<p>Para empezar, crea un nuevo directorio llamado "modify-page". En este directorio, crea un archivo llamado "manifest.json", con el siguiente contenido:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "modify-page", + "version": "1.0", + + "content_scripts": [ + { + "matches": ["https://developer.mozilla.org/*"], + "js": ["page-eater.js"] + } + ] + +}</pre> + +<p>La llave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> es el método de carga de scripts a páginas cuya URL encaje con los patrones. En este caso, <code>content_scripts</code> le dice al navegador que cargue una script llamada "page-eater.js" en todas las páginas con <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p> + +<div class="note"> +<p>Debido a que el atributo <code>"js"</code> de <code>content_scripts</code> es una array, puedes usarla para inyectar más de una script a las páginas que encajen con el patrón. Si haces esto las páginas compartiran el mismo campo de aplicación, igual que múltiples scripts cargadas por una página, y son cargadas en el mismo orden en las que están dispuestas en la array.</p> +</div> + +<div class="note"> +<p>La llave <code>content_scripts</code> tambien tiene un atributo de <code>"css"</code> que puedes usar para inyectar código CSS. </p> +</div> + +<p>Después, crea un archivo llamado "page-eater.js" dentro del directorio "modify-page" e introduce el contenido de a continuación:</p> + +<pre class="brush: js">document.body.textContent = ""; + +var header = document.createElement('h1'); +header.textContent = "This page has been eaten"; +document.body.appendChild(header);</pre> + +<p> Ahora, <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">instala la extensión</a> y visita <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>:</p> + +<p>{{EmbedYouTube("lxf2Tkg6U1M")}}</p> + +<div class="note"> +<p>Ten en cuenta que aunque este video muestra el contenido de la script operando en <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, las scripts de contenido están bloqueadas en esta página por el momento.</p> +</div> + +<h2 id="Modificando_las_páginas_programaticamente">Modificando las páginas programaticamente</h2> + +<p>Y si quieres comer páginas, pero solo cuando el usuario te lo pida? Actualicemos este ejemplo para que podamos enyectar el contenido de la script cuando el usuario haga click en un item del menu de contexto.</p> + +<p>Primero actualiza "manifest.json" para que incluya el contenido a continuación:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "modify-page", + "version": "1.0", + + "permissions": [ + "activeTab", + "contextMenus" + ], + + "background": { + "scripts": ["background.js"] + } + +}</pre> + +<p>Aquí, hemos eliminado la llave <code>content_scripts</code> y hemos añadido dos nuevas llaves:</p> + +<ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: Para inyectar scripts a las páginas necesitamos los permisos para la página que estamos modificando. El permiso <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> </a>es una manera de obtener el permiso temporalmente para la lengüeta que esté actualmente abierta. También necesitamos el permiso <code>contextMenus</code> para poder añadir items al menu de contexto.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background">background</a></code>: Usamos esto para cargar un <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">"background script"</a> persistente llamado "background.js", en el cual montamos el menu de contexto e inyectamos el script de contenido.</li> +</ul> + +<p>Ahora generaremos este archivo. Crea un archivo llamado "background.js" en el directorio "modify-page" e introduce el siguiente contenido: </p> + +<pre class="brush: js">browser.contextMenus.create({ + id: "eat-page", + title: "Eat this page" +}); + +browser.contextMenus.onClicked.addListener(function(info, tab) { + if (info.menuItemId == "eat-page") { + browser.tabs.executeScript({ + file: "page-eater.js" + }); + } +}); +</pre> + +<p>En esta script estamos creando un <a href="/en-US/Add-ons/WebExtensions/API/ContextMenus/create">item del menu de contexto</a> y dándole una ID y un título específico (el texto que se estará expuesto en el menu de contexto). Después configuramos un evento de escucha para que cuando el usuario haga click en uno de los items del menu podamos comprobar si se trata de nuestro item <code>eat-page</code> . En caso afirmativo, inyectaremos "page-eater.js" a la lengüeta actual usando la API <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code>. Alternativamente, esta API puede tomar como argumento una ID. En este caso la hemos omitido lo cual quiere decir que la script es inyectada en la lengüeta que está actualmente abierta.</p> + +<p>Ahora mismo la extensión debería ser algo como esto:</p> + +<pre class="line-numbers language-html"><code class="language-html">modify-page/ + background.js + manifest.json + page-eater.js</code></pre> + +<p>Ahora <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">recarga la extensión</a>, abre la página (cualquier página en esta ocasión), activa el menu de contexto y selecciona "Eat this page" (Comer esta página):</p> + +<p>{{EmbedYouTube("zX4Bcv8VctA")}}</p> + +<div class="note"> +<p>Ten en cuenta que aunque este video muestra el contenido de la script operando en <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>, las scripts de contenido están bloqueadas en esta página por el momento.</p> +</div> + +<h2 id="Mensajería">Mensajería</h2> + +<p>Scripts de contenido y scripts de fondo no pueden acceder directamente al estado del otro. Sin embargo, pueden comunicarse mediante el uso de mensajes. Una terminal configura un escuchador de mensajes y la otra terminal puede mandarle un mensaje. La siguente tabla resume las APIs involucradas en cada parte:</p> + +<table class=" fullwidth-table standard-table"> + <thead> + <tr> + <th scope="row"> </th> + <th scope="col">En el script de contenido</th> + <th scope="col">En el script de fondo</th> + </tr> + <tr> + <th scope="row">Mandar un mensaje</th> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">browser.runtime.sendMessage()</a></code></td> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td> + </tr> + <tr> + <th scope="row">Recibir un mensaje</th> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">browser.runtime.onMessage</a></code></td> + </tr> + </thead> +</table> + +<p>Actualicemos nuestro ejemplo para ilustrar como mandar un mensaje desde una script de fondo.</p> + +<p>Primero, hemos de editar "background.js" para que tenga el siguiente contenido:</p> + +<pre class="brush: js">browser.contextMenus.create({ + id: "eat-page", + title: "Eat this page" +}); + +function messageTab(tabs) { + browser.tabs.sendMessage(tabs[0].id, { + replacement: "Message from the extension!" + }); +} + +function onExecuted(result) { + var querying = browser.tabs.query({ + active: true, + currentWindow: true + }); + querying.then(messageTab); +} + +browser.contextMenus.onClicked.addListener(function(info, tab) { + if (info.menuItemId == "eat-page") { + let executing = browser.tabs.executeScript({ + file: "page-eater.js" + }); + executing.then(onExecuted); + } +}); +</pre> + +<p>Ahora, después de inyectar "page-eater.js", hemos de usar <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code> para obtener la lengüeta actualmente activa y entonces usar <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code> para mandar un mensaje a las scripts de contenido cargadas en la lengüeta. El mensaje tiene el contenido <code>{replacement: "Message from the extension!"}</code>.</p> + +<p>Después, actualiza "page-eater.js" de esta forma:</p> + +<pre class="brush: js">function eatPageReceiver(request, sender, sendResponse) { + document.body.textContent = ""; + var header = document.createElement('h1'); + header.textContent = request.replacement; + document.body.appendChild(header); +} +browser.runtime.onMessage.addListener(eatPageReceiver); +</pre> + +<p>Ahora, en vez de simplemente comer la página, el contenido espera a un mensaje usando <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>. Cuando el mensaje llega, el script de contenido ejecuta el mismo código de antes, exceptuando que el texto de reemplazo se obtenido de <code>request.replacement</code>.</p> + +<p>Debido a que <code><a href="/en-US/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code> es una función asincrónica y para asegurarnos de que mandamos el mensaje solo cuando el escuchador ha sido añadido en "page-eater.js", usamos <code>onExecuted</code> que sera llamado después de que "page-eater.js" se ejecute.</p> + +<div class="note"> +<p>Pulsa Ctrl+Shift+J (o Cmd+Shift+J en el Mac) o <code>web-ext run --bc</code> para abrir la consola de navegación para ver <code>console.log</code> en la script de fondo. Alternativamente puedes usar el <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>, el cual te permite poner un breakpoint. De momento no hay forma de iniciar un <a href="https://github.com/mozilla/web-ext/issues/759">Add-on Debugger directamente de una extensión web</a>.</p> +</div> + +<p>Si queremos enviar mensajes directamente desde el contenido script de vuelta a la página de fondo, podríamos usar<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> en vez de <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code>. Por ejemplo:</p> + +<pre class="brush: js">browser.runtime.sendMessage({ + title: "from page-eater.js" +});</pre> + +<div class="note"> +<p>Todos estos ejemplos inyectan Javascript; también puedes inyectar CSS programaticamente usando la función<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code>.</p> +</div> + +<h2 id="Aprende_más">Aprende más</h2> + +<ul> + <li>La guía de <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">scripts de contenido</a></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> llave de manifiesto</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> llave de manifiesto</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">tabs.executeScript()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS">tabs.insertCSS()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">tabs.sendMessage()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code></li> + <li>Ejemplos con<code>content_scripts</code>: + <ul> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging">page-to-extension-messaging</a></li> + </ul> + </li> + <li>Ejemplos con<code>tabs.executeScript()</code>: + <ul> + <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></li> + <li><a class="external external-icon" href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo">context-menu-demo</a></li> + </ul> + </li> +</ul> + +<p> </p> diff --git a/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html b/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html new file mode 100644 index 0000000000..e032fc354b --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html @@ -0,0 +1,90 @@ +--- +title: Empaquetado e Instalación +slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +--- +<h2 id="Empaquetando_tu_extensión">Empaquetando tu extensión</h2> + +<div class="note"> +<p>Mozilla actualmente esta considerando implementar una aplicación con interfaz visual para empaquetar y cargar extensiones. Mira el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185460">Bug 1185460</a> para más información. Hasta entonces, sigue los pasos que aparecen a continuación.</p> +</div> + +<p>Las extensiones para Firefox son empaquetadas como archivos XPI, los cuales son solamente archivos ZIP, con extensión "xpi".</p> + +<p>Un truco es que el archivo ZIP debe ser un archivo que contenga los archivos de la extensión y no la carpeta que los contiene.</p> + +<h3 id="Windows">Windows</h3> + +<ol> + <li>Abre la carpeta que contiene los archivos de tu extensión.</li> + <li>Selecciona todos los archivos.</li> + <li>Con clic derecho elige Enviar a → Carpeta comprimida (zip).</li> + <li>Cambia el nombre del archivo resultante de <code>something.zip</code> a <code>something.xpi</code>.</li> +</ol> + +<p><img alt="Screenshot of the Windows Explorer context menu showing Send to compressed (zipped) folder" src="https://mdn.mozillademos.org/files/11717/pUF1vnr.png" style="height: 641px; width: 904px;"></p> + +<h3 id="Mac_OS_X">Mac OS X</h3> + +<ol> + <li>Abre la carpeta que contiene los archivos de tu extensión.</li> + <li>Selecciona todos los archivos.</li> + <li>Con clic derecho elige Comprimir <em>n</em> elementos.</li> + <li>Cambia el nombre del archivo resultante de <code>something.zip</code> a <code>something.xpi</code>.</li> +</ol> + +<p><img alt="Screenshot of the Finder context menu showing the Compress 15 Items option" src="https://mdn.mozillademos.org/files/11715/Screen%20Shot%202015-10-08%20at%2016.19.02.png" style="height: 460px; width: 850px;"></p> + +<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3> + +<ol> + <li><code>cd path/to/my-extension/</code></li> + <li><code>zip -r ../my-extension.xpi *</code></li> +</ol> + +<h2 id="Instalando_tu_extensión">Instalando tu extensión</h2> + +<ol> + <li>Navega a <code>about:addons</code></li> + <li>Arrastra y suelta el XPI dentro de la página, o abre el menú de opciones y escoge "Instalar complemento desde archivo..."</li> + <li>Da clic en "Instalar" en el diálogo que aparecerá</li> +</ol> + +<h2 id="Instalando_tu_extensión_en_Firefox_OS">Instalando tu extensión en Firefox OS</h2> + +<p>Tu puedes instalar tu extensión desde WebIDE en un escritorio conectado vía USB o Wifi. Abre <code>path/to/my-extension/ como una Aplicación empaquetada en WebIDE.</code></p> + +<p><code>Cuando la validación de manifest.json es correcta podrás instalar y ejecutar tu extensión en el dispositivo con Firefox OS conectado.</code></p> + +<p><code>Para instalar extensiones debe tener habilitada la opción en Configuración->Complementos del dispositivo con Firefox OS.</code></p> + +<h2 id="Resolución_de_problemas">Resolución de problemas</h2> + +<p>Aquí están algunos de los problemas más comunes que podrías encontrarte:</p> + +<h3 id="Este_complemento_no_puede_ser_instalado_porque_no_ha_sido_verificado.">"Este complemento no puede ser instalado porque no ha sido verificado."</h3> + +<ul> + <li>Asegúrate que estás usando <a href="https://nightly.mozilla.org/">Nightly</a> y la preferencia <code>xpinstall.signatures.required</code> está en <code>false</code> en <code>about:config</code>.</li> + <li>Aprende más acerca de <a href="/en-US/docs/Mozilla/Add-ons/Distribution">la firma de complementos y su distribución</a>.</li> +</ul> + +<h3 id="Este_complemento_no_puede_ser_instalado_porque_para_estar_corrupto.">"Este complemento no puede ser instalado porque para estar corrupto."</h3> + +<ul> + <li>Asegúrate que has comprimido los archivos directamente, <em>no la carpeta que contiene</em> los archivos de tu extensión. Tu archivo manifest.json debe estar en la carpeta raíz del archivo ZIP.</li> + <li>Asegúrate que estás usando la versión <a href="https://nightly.mozilla.org/">Nightly</a> de Firefox.</li> +</ul> + +<h3 id="No_pasa_nada">No pasa nada</h3> + +<ul> + <li>Asegúrate que tu archivo actualmente termina en <code>.xpi</code>, existen algunos <em>sistemas operativos que le gusta ocultar</em> las extensiones de los archivos. + + <ul> + <li>En Windows, comprueba con Vista → Mostrar / Ocultar: Extensiones de los archivos.</li> + <li>En Mac OS X, comprueba con Archivo → Obtener información → Nombre y Extensión.</li> + </ul> + </li> + <li>Es posible que te hayas perdido u ocultado el diálogo de instalación. Mira si un icono parecido a una pieza de rompecabezas está al lado del botón Atrás en Nightly. Has clic sobre él para trae nuevamente el diálogo de instalación.</li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html new file mode 100644 index 0000000000..58959678f4 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html @@ -0,0 +1,22 @@ +--- +title: Conversión de extensiones de Google Chrome +slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +--- +<div>{{AddonSidebar}}</div> + +<p>Las extensiones programadas con API de WebExtensions están diseñadas para ser compatibles entre navegadores diferentes: en buena medida, esta tecnología es compatible directamente con la <a class="external external-icon" href="https://developer.chrome.com/extensions">API de extensiones</a> admitida por Google Chrome y Opera. En la mayoría de los casos, las extensiones creadas para estos navegadores se ejecutarán en Firefox con solo unas pocas modificaciones. Casi todas las <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">API de extensiones</a> se admiten a través de funciones de devolución de llamada bajo el espacio de nombres <code>chrome</code>, al igual que Chrome. Las únicas API que no se admiten bajo el espacio de nombres <code>chrome</code> son aquellas que son deliberadamente incompatibles con Chrome. En esos casos contados, la página de documentación de la API manifestará expresamente que se admite solo en el espacio de nombres <code>browser</code>. El proceso de conversión de extensiones de Chrome u Opera es el siguiente:</p> + +<ol> + <li>Revise su utilización de funciones de manifest.json y API de WebExtensions con respecto a la <a href="/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">referencia de incompatibilidades con Chrome</a>. Si está empleando funciones o API que aún no se admiten en Firefox, es posible que no pueda convertir su extensión por el momento. Mozilla ofrece un servicio que puede ayudar a automatizar este paso: <a href="https://www.extensiontest.com/">https://www.extensiontest.com/</a>.</li> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Instale su extensión en Firefox</a> y póngala a prueba.</li> + <li>Si experimenta problemas, póngase en contacto con nosotros a través de la <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">lista de correo «dev-addons»</a> o el <a href="irc://irc.mozilla.org/webextensions">canal #webextensions</a> en <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</li> + <li><a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">Envíe su complemento a AMO para su firma y distribución</a>.</li> +</ol> + +<p>Si dependía de la opción de consola de Chrome para cargar extensiones no empaquetadas, eche un vistazo a la herramienta <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>, la cual automatiza la instalación temporal en Firefox para permitir el desarrollo.</p> + +<ul> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html new file mode 100644 index 0000000000..d022940dab --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html @@ -0,0 +1,17 @@ +--- +title: Prerequisitos +slug: Mozilla/Add-ons/WebExtensions/Prerequisitos +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +<p>Para desarrollar usando las APIs de WebExtension, debes seguir algunos pasos antes de comenzar.</p> + +<ul> + <li>Descarga, instala, y ejecuta <a href="https://www.mozilla.org/es-ES/firefox/developer/">Firefox para Desarrolladores</a> o <a class="external text" href="https://nightly.mozilla.org/" rel="nofollow">Firefox Nightly</a>. Usa Nightly si quieres tener los últimos cambios.</li> + <li>Ve a la preferencia que controla la instalación de complementos no firmados. Nota que esta preferencia solo está disponible en Firefox para Desarrolladores y Firefox Nightly. + <ul> + <li>Escribe <code>about:config</code> dentro de la barra de direcciones de Firefox</li> + <li>En el campo de búsqueda escribe <code>xpinstall.signatures.required</code></li> + <li>Has doble clic sobre la preferencia, o clic derecho y escoge Modificar, para cambiarla a <code>false</code>.</li> + </ul> + </li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html new file mode 100644 index 0000000000..ef81cd0468 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html @@ -0,0 +1,105 @@ +--- +title: Publicando tu extensión +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - AMO + - Addons + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +<div>{{AddonSidebar}}</div> + +<p>Una vez que hayas acabado de modificar y testear tu extensión, es probable que quieras compartirla con el resto del mundo. Mozilla tiene una web: <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org</a> (comunmente abreviada como AMO), en la que los desarrolladores pueden publicar sus complementos y los usuarios pueden encontrarlos. Publicando tu extension en AMO, puedes participar en nuestra comunidad de usuarios y creadores, y encontrar una audiencia para tu extension.</p> + +<p>No tienes por que publicar tu extension en AMO. De todas maneras, aunque no quieras publicarla, tendrás que enviarla a AMO para que pueda ser revisada y firmada. Las versiones oficiales de Firefox no aceptan complementos que no estén firmados por AMO.</p> + +<p>En resumen, este es el proceso para publicar una extensión:</p> + +<ol> + <li><a href="#1._Zip_up_your_extension's_files">Comprime los archivos de tu extension en un zip</a></li> + <li><a href="#2._Create_an_account_on_addons.mozilla.org">Crea una cuenta en AMO</a></li> + <li><a href="#3._Upload_your_zip">Sube tu zip a AMO para firmarlo y revisarlo y selecciona una opción</a></li> + <li><a href="#4._Fix_review_problems">Soluciona los problemas encontrados en la revisión</a></li> + <li><a href="#5._Publish_your_extension">Si seleccionas no publicar la extension en AMO, puedes obtener la extension firmada y publicala por tu cuenta</a></li> +</ol> + +<p>Cuando estés listo para lanzar una nueva versión de tu extensión, puedes actualizarla visitando la página de la extensión en <a class="external external-icon" href="https://addons.mozilla.org">addons.mozilla.org</a>, y subiendo ahí la nueva versión. Ten en cuenta que tendrás que actualizar la página de la extensión para que AMO reconozca que es una actualización de la extensión, y no una extensión completamente nueva.</p> + +<p>Si seleccionas publicar tu extensión en AMO, Firefox buscará las actualizaciones automaticamente. Si seleccionas publicarla por tu cuenta, tendrás que incluir la clave <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> en tu manifest.json, con el atributo <code>update_url</code> apuntando a un <a href="/en-US/Add-ons/Updates">update manifest file</a>.</p> + +<div class="pull-aside"> +<div class="moreinfo"> +<p>Las extensiones empaquetadas de Firefox son "archivos XPI", que son simplemente un .ZIP con otra extensión</p> + +<p>No tienes que usar la extensión .XPI para subirla a AMO.</p> +</div> +</div> + +<h2 id="1._Comprime_los_archivos_en_un_zip">1. Comprime los archivos en un zip</h2> + +<p>En este punto tu extensión consistirá en una carpeta que contiene un manifest.json y otros archivos que necesite (scripts, iconos, documentos HTML, etc.). Necesitarás comprimir todos en un sólo .zip para poder subirlos a AMO.</p> + +<p>Es importante saber que el .zip deber crearse seleccionando<strong> todos los archivos de la extensión, no su carpeta contenedora</strong>.</p> + +<h3 id="Windows">Windows</h3> + +<ol> + <li>Abre la carpeta que contenga los archivos de tu extensión.</li> + <li>Selecciona todos los archivos (CTRL+E o CTRL+A, depende del idioma).</li> + <li>Click derecho en Enviar a → Carpeta comprimida (en zip).</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11949/install-windows.png" style="display: block; height: 576px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Mac_OS_X">Mac OS X</h3> + +<ol> + <li>Abre la carpeta que contenga los archivos de tu extensión.</li> + <li>Selecciona todos los archivos.</li> + <li>Click derecho y selecciona Comprimir <em>n</em> Items.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11951/install-osx.png" style="display: block; height: 449px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<div class="pull-aside"> +<div class="moreinfo">Ver <a href="http://www.info-zip.org/mans/zip.html">http://www.info-zip.org/mans/zip.html</a>.</div> +</div> + +<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3> + +<ol> + <li><code>cd path/to/my-extension/</code></li> + <li><code>zip -r -FS ../my-extension.zip *</code></li> +</ol> + +<div style=""> </div> + +<h2 id="2._Crea_una_cuenta_en_addons.mozilla.org">2. Crea una cuenta en addons.mozilla.org</h2> + +<p>Visita <a href="https://addons.mozilla.org/">https://addons.mozilla.org/</a>. Si ya tienes una <a href="https://support.mozilla.org/en-US/kb/access-mozilla-services-firefox-accounts">Cuenta Firefox</a>, puedes utilizarla para iniciar sesión. Si no, haz click en "Registrar" y se te exigirá crear una cuenta.</p> + +<h2 id="3._Sube_tu_zip">3. Sube tu zip</h2> + +<p>A continuación, sube la extensión comprimida a AMO para poder revisarla y firmarla, y selecciona si quieres publicarla en AMO o no. Hay un <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution/Submitting_an_add-on">tutorial</a> disponible para guiarte durante el proceso de envío. Sería conveniente que también veas <a href="https://developer.mozilla.org/es/Add-ons/Distribution#Enviando_a_AMO">Enviando a AMO</a> para más detalles sobre el proceso.</p> + +<div class="note"> +<p>Ten en cuenta que una vez que hayas subido la extensión a AMO no podrás actualizarla para usar el Add-on SDK o técnicas XUL/XPCOM. Si decides cambiar a una de estas plataformas, tendrás que enviar la extensión de nuevo como si de una nueva extensión se tratase.</p> + +<p>En otras palabras: portar a partir de sistemas de extensiones heredadas para usar APIs WebExtension es un camino de ida.</p> + +<p>Antes de subirla, asegurate de que el ZIP contiene sólo los archivos necesarios para la extensión.</p> +</div> + +<h2 id="4._Soluciona_los_problemas_detectados_en_la_revisión">4. Soluciona los problemas detectados en la revisión</h2> + +<p>En cuanto subas la aplicación, el servidor AMO realizará varios tests básicos y te notificará inmediatamente de cualquier problema. Los problemas se dividen en dos categorías: "errors" y "warnings". Si tienes errores, tienes que arreglarlos y reenviar la extensión. Si sólo tienes avisos, conviene solucionarlos, pero no es obligatorio. Puedes continuar.</p> + +<p>Si el comprobador automático no detecta ningún error, la extensión pasará por una revisión más exhaustiva. Serás contactado con los resultados de la revisión. En caso de tener errores tendrás que solucionarlos e intentarlo de nuevo.</p> + +<p>Si has selccionado que la extensión esté hosteada en AMO, este es el final del proceso de publicación. AMO firmará la extensión y la publicará, tras esto los usuarios ya podrán descargarla e instalarla.</p> + +<h2 id="5._Publica_tu_extensión">5. Publica tu extensión</h2> + +<p>Si seleccionas no publicarla en AMO, obten la extensión firmada y públicala por tu cuenta.</p> + +<p> </p> diff --git a/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html new file mode 100644 index 0000000000..eca9f0ff30 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html @@ -0,0 +1,59 @@ +--- +title: ¿Qué son las extensiones? +slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions +tags: + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>Una extensión agrega características y funciones a un explorador. Se ha creado utilizando tecnologías basadas en Web conocidas: HTML, CSS y JavaScript. Puede aprovechar las mismas API Web que JavaScript en una página web, pero una extensión también tiene acceso a su propio conjunto de APIs de JavaScript. Esto significa que puede hacer mucho más en una extensión de lo que puede con el código en una página web. Estos son sólo algunos ejemplos de las cosas que puedes hacer:</p> + +<p><strong>Mejore o complemente un sitio</strong>: Use un Add-on para ofrecer funciones adicionales en el navegador o información de su sitio Web. Permita a los usuarios recopilar detalles de las páginas que visitan para mejorar el servicio que ofrecen.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p> + +<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/">El asistente de Amazon para Firefox</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/">OneNote Web Clipper</a> y <a href="https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/">Grammarly para Firefox</a></p> + +<p><strong>Permita que los usuarios demuestren su personalidad</strong>: Las extensiones del navegador pueden manipular el contenido de las páginas; por ejemplo, permite a los usuarios agregar su logo favorito o imágen como un fondo de pantalla acada página que visitan. Las extensiones permiten también al usuario actualizar el aspecto de la IU de Firefox, de la misma manera que lo hacen los <a href="https://developer.mozilla.org/es/docs/Temas/Theme_concepts">complementos de temas</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> + +<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/tabliss/">Tabliss</a> y <a href="https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/">VivaldiFox</a></p> + +<p><strong>Agregar o quitar contenido de las páginas web</strong>: es posible que desee ayudar a los usuarios a bloquear los anuncios intrusivos de las páginas web, proporcionar acceso a una guía de viajes siempre que un país o ciudad se menciona en una página web, o reformatear el contenido de la página para ofrecer una experiencia de lectura consistente. Con la capacidad de acceder y actualizar tanto HTML como CSS de una página, las extensiones pueden ayudar a los usuarios a ver la Web de la manera que quieren.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p> + +<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/ublock-origin/">Origen uBlock</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/reader/">Lector</a> y <a href="https://addons.mozilla.org/en-US/firefox/addon/toolbox-google-play-store/">Caja de Herramientas para Google Play Store™</a></p> + +<p><strong>Agregar herramientas y nuevas funciones de navegación</strong>: añada nuevas funciones a un taskboard o genere imágenes de código QR a partir de URLs, hipervínculos o texto de página. Con opciones de interfaz de usuario flexibles y la potencia de las <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions">APIs de WebExtensions</a>, puede añadir fácilmente nuevas funcionalidades a un navegador. Usted puede realzar casi cualquier característica o funcionalidad de sitios web, no tiene que ser su web.</p> + +<p><strong><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></strong></p> + +<p><strong>Ejemplos: <a href="https://addons.mozilla.org/en-US/firefox/addon/qr-code-image-generator/">QR Code Image Generator</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a>, y <a href="https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/">Tomato Clock</a></strong></p> + +<p><strong>Juegos</strong>: ofrecer juegos de ordenador tradicionales, con características de juego fuera de línea, pero también explorar nuevas posibilidades de juego, por ejemplo, mediante la incorporación de gameplay en la navegación cotidiana.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p> + +<p>Ejemplos: <a href="https://addons.mozilla.org/en-US/firefox/addon/asteroids-in-popup/">Asteroids in Popup</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/2048-prime/">2048 Prime</a>.</p> + +<p><strong>Agregar herramientas de desarrollo</strong>: puede proporcionar herramientas de desarrollo web como su negocio o ha desarrollado una técnica útil o un enfoque para el desarrollo web que desea compartir. De cualquier manera, puede mejorar las herramientas de desarrollo de Firefox incorporadas añadiendo una nueva ficha a la barra de herramientas del desarrollador.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p> + +<p><strong>Ejemplos:</strong> <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/react-devtools/">Web React Developer Tools</a>, and <a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe Developer Tools</a></p> + +<p>Las extensiones para Firefox se construyen utilizando las <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions">APIs de WebExtensions</a>, un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">cambios</a>. La API es también totalmente compatible con los <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">multiprocesos de Firefox</a>.</p> + +<p>Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en el<a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> o en <a href="irc://irc.mozilla.org/extdev">#extdev</a> en <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> + +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> + +<ul> + <li>Para recorrer el desarrollo de una simple extensión, vea <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension">Tu primera extensión</a>.</li> + <li>Aprende sobre la estructura de una extensión en <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension">anatomía de una extensión</a>.</li> + <li>Pruebe algunos ejemplos de extensiones en <a href="https://developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Examples">Extensiones de ejemplo</a>.</li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html new file mode 100644 index 0000000000..d444b69f88 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html @@ -0,0 +1,160 @@ +--- +title: Tu primera extensión +slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension +tags: + - Guía + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<div class="blockIndicator note"> +<p>Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a <a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">cómo se ponen juntos los archivos</a>. Entonces, usa la <a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions#Reference">documentación de referencia</a> para empezar a construir tu extensión. Visita el <a href="https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension">Firefox Extension Workshop</a> para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.</p> +</div> + +<p>En este artículo abordaremos la creación de una extensión para Firefox, desde el comienzo hasta el final. La extensión solo agrega un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.</p> + +<p>El código fuente de este ejemplo se encuentra en GitHub: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p> + +<p>Primero, necesitas tener instalado Firefox versión 45 o superior.</p> + +<h2 id="Escribiendo_la_extensión">Escribiendo la extensión</h2> + +<p>Crea una nuevo directorio y navega a él. Por ejemplo, en tu línea de comandos/terminal se hace de esta manera:</p> + +<pre class="brush: bash notranslate">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>Ahora crearemos un archivo nuevo llamado "manifest.json" directamente en la carpeta "borderify". Añádale el siguiente contenido:</p> + +<pre class="brush: json notranslate">{ + + "manifest_version": 2, + "name": "Borderify", + "version": "1.0", + + "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.", + + "icons": { + "48": "icons/border-48.png" + }, + + "content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ] + +}</pre> + +<ul> + <li>Los primeros 3 parámetros:<code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, y <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, son obligatorios, y contienen metadatos básicos para la extensión.</li> + <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> es opcional, pero se recomienda: Se muestra en el Administrador de Add-ons.</li> + <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> es opcional, pero recomendado: permite especificar un ícono para la extensión, se mostrará en el Administrador de Add-ons.</li> +</ul> + +<p>El parámetro más interesante aquí es <code><a href="/es/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, el cual le dice a Firefox que cargue el script en las páginas Web, cuyas URL coincidan con un patrón especifico. En este caso, le estamos pidiendo a Firefox que cargue el script llamado "borderify.js" en todas las paginas HTTP o HTTPS cargadas desde "mozilla.org" o cualquiera de sus subdominios.</p> + +<ul> + <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Aprenda más acerca de los scripts contenidos.</a></li> + <li><a href="/es/Add-ons/WebExtensions/Match_patterns">Aprenda más acerca de los patrones coincidentes</a>.</li> +</ul> + +<div class="warning"> +<p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">En algunas situaciones usted necesita especificar un ID para su extensión</a>. Si necesita especificar un ID para el complemento, incluya el parámetro <code><a href="/es/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> en el <code>manifest.json</code> y configure la propiedad <code>gecko.id</code>:</p> + +<pre class="brush: json notranslate">"applications": { + "gecko": { + "id": "borderify@example.com" + } +}</pre> +</div> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p>La extensión debería tener un ícono. Este se mostrará junto al listado de extensiones en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un ícono en el directorio "icons/border-48.png".</p> + +<p>Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">el de nuestro ejemplo</a>, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a>.</p> + +<p>Si eliges emplear tu propio icono, este debe ser de 48x48 pixeles. También puedes aplicar un icono de 96x96 pixeles, para resoluciones mayores, y si haces esto, se especifica como la propiedad <code>96</code> en el objeto icons del manifest.json:</p> + +<pre class="brush: json notranslate">"icons": { + "48": "icons/border-48.png", + "96": "icons/border-96.png" +}</pre> + +<p>Alternativamente, puedes aplicar un archivo SVG ahí, y este se escalará apropiadamente. (Aunque: si usas SVG y tu icono incluye texto, puedes usar la herramienta "convert to path" del editor SVG para aplanar el texto, de modo que se escalone con un tamaño/posición coherente).</p> + +<ul> + <li><a href="/es/Add-ons/WebExtensions/manifest.json/icons">Aprender mas acerca de la especificación de iconos.</a></li> +</ul> + +<h3 id="borderify.js">borderify.js</h3> + +<p>Finalmente, crea un archivo de nombre "borderify.js" directamente en el directorio "borderify". Y déjale el siguiente contenido:</p> + +<pre class="brush: js notranslate">document.body.style.border = "5px solid red";</pre> + +<p>Este script se cargara en las páginas que coincidan con el patrón dado en el parámetro <code>content_scripts</code> del archivo manifest.json. El script tiene acceso directo al documento, de la misma manera que los scripts cargados por la propia página.</p> + +<ul> + <li><a href="/es/Add-ons/WebExtensions/Content_scripts">Aprender más acerca de los scripts de contenido.</a></li> +</ul> + +<h2 id="Probándolo">Probándolo</h2> + +<p>Primero, verifica que tienes todos los archivos en su lugar:</p> + +<pre class="notranslate">borderify/ + icons/ + border-48.png + borderify.js + manifest.json</pre> + +<h3 id="Instalación">Instalación</h3> + +<p>Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona cualquier archivo en el directorio de la extensión:</p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p>La extensión se encontrará instalada, y lo estará hasta que reinicies Firefox.</p> + +<p>Alternativamente, puede ejecuturar la extensión desde la línea de comandos utilizando la herramienta <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</p> + +<h3 id="Probando">Probando</h3> + +<p>Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde rojo alrededor de la página:</p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<div class="note"> +<p>No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.</p> +</div> + +<p>Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:</p> + +<p>{{EmbedYouTube("NuajE60jfGY")}}</p> + +<ul> + <li><a href="/es/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Aprende más sobre cómo recargar las extensiones</a></li> +</ul> + +<h2 id="Empaquetar_y_publicar">Empaquetar y publicar</h2> + +<p>Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira <a href="/es/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Publicando tu extension"</a>.</p> + +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> + +<p>Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con:</p> + +<ul> + <li><a href="/es/Add-ons/WebExtensions/Your_second_WebExtension">escribe una extensión más compleja</a></li> + <li><a href="/es/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">leer más acerca de la anatomía de una extensión</a></li> + <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/Examples">explora los ejemplos de extensiones</a></li> + <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/What_next_">encuentra lo que necesitas para desarrollar, probar y publicar tu extensión</a></li> + <li><a href="/es/Add-ons/WebExtensions/API">leer acerca de las APIs de JavaScript disponibles para las extensiones.</a></li> + <li><a href="https://wiki.developer.mozilla.org/es/docs/Mozilla/Add-ons/WebExtensions/What_next_#Continue_your_learning_experience">lleva tu aprendizaje más lejos</a></li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/tutorial/index.html b/files/es/mozilla/add-ons/webextensions/tutorial/index.html new file mode 100644 index 0000000000..559320eca0 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/tutorial/index.html @@ -0,0 +1,459 @@ +--- +title: Tu segunda extensión +slug: Mozilla/Add-ons/WebExtensions/Tutorial +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<p>Si ya ha visto el artículo <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Tu_primera_WebExtension">tu primer extensión</a>, ya posee una idea de como escribir una extensión. En este artículo se escribirá una extensión ligeramente más compleja para demostrar un par de cosas más de las APIs.</p> + +<p>La extensión añade un nuevo botón a la barra de herramientas de Firefox. Cuando el usuario da clic sobre el botón, mostraremos una ventana emergente que permite escoger un animal. Una vez que un animal sea escogido, reemplazaremos todas las imágenes en la página actual con la imagen del animal seleccionado.</p> + +<p>Para implementar esto, haremos lo siguiente:</p> + +<ul> + <li><strong>Definir una <a href="/es/Add-ons/WebExtensions/user_interface/Browser_action">acción del navegador</a>, que será el botón añadido a la barra de herramientas de Firefox</strong>.<br> + Para el botón vamos a proporcionar: + <ul> + <li>un icono, llamado "beasts-32.png"</li> + <li>una ventana emergente para abrir cuando el botón sea presionado. La ventana emergente incluye HTML, CSS y JavaScript.</li> + </ul> + </li> + <li><strong>Define un ícono para la extensión,</strong> llamado "beasts-48.png". Este será mostrado en el Administrador de Complementos.</li> + <li><strong>Escribe un script de contenido, "beastify.js" que será inyectado dentro de las páginas web.</strong><br> + Este es el código que modificará las páginas web.</li> + <li><strong>Empaqueta algunas imágenes de animales, para reemplazar las imágnes de la página web</strong>.<br> + Nosotros haremos las imágenes "recursos web accesibles" para que la página web pueda referenciarlos.</li> +</ul> + +<p>Tu puedes notar que la estructura general de la extensión luce como esto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p> + +<p>Esta es una extensión simple, pero muestra muchos de los principales conceptos de la API WebExtensions:</p> + +<ul> + <li>Adicionando un botón a la barra de herramientas</li> + <li>Definiendo un panel emergente usando HTML, CSS y JavaScript</li> + <li>Inyectando scripts de contenido dentro de las páginas web</li> + <li>Comunicándonos entre los scripts de contenido y el resto de la extensión</li> + <li>Empaquetando recursos con tu extensión que pueden ser usados por las páginas web</li> +</ul> + +<p>Tu puedes encontrar el <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">código fuente completo de la extensión en GitHub</a>.</p> + +<p>Para escribir una extensión, necesitará de Firefox 45 o más reciente.</p> + +<h2 id="Escribiendo_la_extensión">Escribiendo la extensión</h2> + +<p>Crea una carpeta nueva y navega hacia ella:</p> + +<pre class="brush: bash">mkdir beastify +cd beastify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>Ahora crea un archivo llamado "manifest.json", y agrega el siguiente contenido:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Beastify", + "version": "1.0", + + "description": "Agrega un icono de acción navegación a la barra de herramientas. Haga clic en el botón para elegir una bestia. El contenido del cuerpo de la pestaña activa se sustituye por una imagen de la bestia elegida. Consulte https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples#beastify", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify", + "icons": { + "48": "icons/beasts-48.png" + }, + + "permissions": [ + "activeTab" + ], + + "browser_action": { + "default_icon": "icons/beasts-32.png", + "default_title": "Bestificar", + "default_popup": "popup/choose_beast.html" + }, + + "web_accessible_resources": [ + "beasts/frog.jpg", + "beasts/turtle.jpg", + "beasts/snake.jpg" + ] + +} +</pre> + +<ul> + <li>Las tres primeras llaves: <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code> , <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code> , y <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code> , son obligatorias y contienen los metadatos básicos para la extensión.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> y <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> son opcionales, pero recomendadas: proporcionan información útil acerca de la extensión.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> es opcional, pero recomedada: permite la especificación de un ícono para la extensión, que será mostrada en el Administrador de Complementos.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> lista los permisos que la extensión necesita. Aquí solo se pide el permiso de <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> permission</a>.</li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> especifica el botón de la barra de herramientas. Nosotros proveemos tres piezas de información aquí: + <ul> + <li><code>default_icon</code> es obligatorio y enlaza al icono para el botón</li> + <li><code>default_title</code> es opcional y será mostrado como descripción</li> + <li><code>default_popup</code> es usado su tu quieres una ventana emergente que será mostrada cuando el usuario de clic en el botón. Lo hacemos y hemos incluido esta llave que apunta a un archivo HTML de la extensión.</li> + </ul> + </li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> lista los archivos que queremos hacer accesibles a las páginas web. Como la extensión reemplaza imágenes en una página con imágenes que hemos empaquetado, necesitamos hacer estas imágenes accesibles a la página.</li> +</ul> + +<p>Nota que todas las rutas dadas son relativas a manifest.json.</p> + +<h3 id="El_ícono">El ícono</h3> + +<p>La extensión debería tener un íncono. Éste, será mostrado junto a la lista de complementos en el Administrador de Complementos (Pude abrirlo introduciendo en la URL "about:addons"). El manifest.json promete que se posee un ícono para la barra de herramientas en "icons/beasts-48.png".</p> + +<p>Cree el directorio "icons" y guarde un ícono ahí y nómbrelo como "beasts-48.png". Puede utilizar <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-48.png">uno de nuestro ejemplo</a>, el cual ha sido tomado del <a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">conjuto de íconos Aha-Soft’s Free Retina</a>, que es utilizado bajo el término de su propia <a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">licencia</a>.</p> + +<p>Si elige proporcionar su propio ícono, debería ser de 48x48 pixeles. También puede proporcionar un ícono de 96x96 pixeles, para pantallas de altas resoluciones y, si usted hace esto, deberá especificarlo como la propiedad <code>96</code> del objeto <code>icons</code> en el manifest.json:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"48":</span> <span class="string token">"icons/beasts-48.png"</span><span class="punctuation token">,</span> + <span class="key token">"96":</span> <span class="string token">"icons/beasts-96.png"</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="El_botón_de_la_barra_de_herramientas">El botón de la barra de herramientas</h3> + +<p>El botón de la barra de herramientas necesita un ícono, y nuestro manifest.json promete eso y nos gustaría tener un ícono para la barra de herramientas en "icons/beasts-32.png".</p> + +<p>Guarde un ícono llamado "beasts-32.png" en el directorio "icons". Tu podrías usar <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png">uno de nuestros ejemplos</a>, los cuales son tomados desde el sitio <a href="http://www.iconbeast.com/free">IconBeast Lite icon set</a> y empleados bajo sus términos de <a href="http://www.iconbeast.com/faq/">licencia</a>.</p> + +<p>Si tu no provees una ventana emergente, entonces el evento clic es disparado hacia tu extensión cuando el usuario de clic sobre el botón. Si provees una ventana emergente entonces el evento clic no se disparará, pero en cambio, se muestra la ventana emergente. Nosotros queremos una ventana emergente, así que vamos a crearla.</p> + +<h3 id="La_ventana_emergente">La ventana emergente</h3> + +<p>La función de la ventana emergente es habilitada si el usuario escoge una de los tres animales.</p> + +<p>Crea una nueva carpeta llamada "popup" bajo la carpeta raíz de la extensión . Esta será donde pondremos el código para la ventana emergente. La carpeta "popup" contendrá estos tres archivos:</p> + +<ul> + <li><strong><code>choose_beast.html</code></strong> define el contenido del panel</li> + <li><strong><code>choose_beast.css</code></strong> los estilos CSS para el contenido</li> + <li><strong><code>choose_beast.js</code></strong> maneja las opciones del usuario ejecutando un script de contenido en la pestaña activa</li> +</ul> + +<h4 id="choose_beast.html">choose_beast.html</h4> + +<p>El archivo HTML luce así:</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>link</span> <span class="attr-name token">rel</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>stylesheet<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>choose_beast.css<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>popup-content<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button beast<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Frog<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button beast<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Turtle<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button beast<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Snake<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Reset<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>error-content<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>hidden<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Can't beastify this web page.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Try a different page.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>choose_beast.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p>Tenemos un elemento <code><div></code> con un ID <code>"popup-content"</code> que contiene un elemento para cada elección de animal. Además, tenemos otro <code><div></code> con un ID <code>"error-content"</code> y una clase <code>"hidden"</code>, que usaremos en el case de que surja algún problema al inicializar la ventana emergente.</p> + +<p>Note que referenciamos los archivos CSS y JS en el HTML como lo haríamos si se tratase de una página web.</p> + +<h4 id="choose_beast.css">choose_beast.css</h4> + +<p>El CSS ajusta el tamaño de la ventana emergente, se asegura que las tres posibles opciones llenen el espacio y les da un poco de estilo básico. Además oculta los elementos con <code>class="hidden"</code>: esto significa que nuestro <code>"error-content"</code> <code><div></code> estará oculto por defecto.</p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html, body</span> <span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100</span><span class="token unit">px</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.hidden</span></span> <span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.button</span></span> <span class="punctuation token">{</span> + <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="token unit">%</span> auto<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">4</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">text-align</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span> + <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">1.5</span><span class="token unit">em</span><span class="punctuation token">;</span> + <span class="property token">cursor</span><span class="punctuation token">:</span> pointer<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.beast</span><span class="pseudo-class token">:hover</span></span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#CFF2F2</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.beast</span></span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#E5F2F2</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.reset</span></span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#FBFBC9</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token"><span class="class token">.reset</span><span class="pseudo-class token">:hover</span></span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#EAEA9D</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="choose_beast.js">choose_beast.js</h4> + +<p>Aquí está el JavaScript para la ventana emergente:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">/** + * CSS para ocultar toda la página + * Excepto los elementos que pertenecen a la clase "beastify-image". + */</span> +<span class="keyword token">const</span> hidePage <span class="operator token">=</span> <span class="template-string token"><span class="string token">`body > :not(.beastify-image) { + display: none; + }`</span></span><span class="punctuation token">;</span> + +<span class="comment token">/** + * Esucha los clicks en los botones y envía el mensaje apropiado + * al script de contenido de la página. + */</span> +<span class="keyword token">function</span> <span class="function token">listenForClicks</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="punctuation token">{</span> + + <span class="comment token">/** + * Recibe el nombre de una bestia y obtiene la URL de la imagen correspondiente. + */</span> + <span class="keyword token">function</span> <span class="function token">beastNameToURL</span><span class="punctuation token">(</span><span class="parameter token">beastName</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">switch</span> <span class="punctuation token">(</span>beastName<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">case</span> <span class="string token">"Frog"</span><span class="punctuation token">:</span> + <span class="keyword token">return</span> browser<span class="punctuation token">.</span>extension<span class="punctuation token">.</span><span class="function token">getURL</span><span class="punctuation token">(</span><span class="string token">"beasts/frog.jpg"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">case</span> <span class="string token">"Snake"</span><span class="punctuation token">:</span> + <span class="keyword token">return</span> browser<span class="punctuation token">.</span>extension<span class="punctuation token">.</span><span class="function token">getURL</span><span class="punctuation token">(</span><span class="string token">"beasts/snake.jpg"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">case</span> <span class="string token">"Turtle"</span><span class="punctuation token">:</span> + <span class="keyword token">return</span> browser<span class="punctuation token">.</span>extension<span class="punctuation token">.</span><span class="function token">getURL</span><span class="punctuation token">(</span><span class="string token">"beasts/turtle.jpg"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + + <span class="comment token">/** + * Inserta dentro de la pestaña activa el CSS que oculta la página + * luego toma la URL de la imagen y + * envía un mensaje "beastify" al script de contenido de la pestaña activa. + */</span> + <span class="keyword token">function</span> <span class="function token">beastify</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">insertCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> hidePage<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> url <span class="operator token">=</span> <span class="function token">beastNameToURL</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>textContent<span class="punctuation token">)</span><span class="punctuation token">;</span> + browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">sendMessage</span><span class="punctuation token">(</span>tabs<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>id<span class="punctuation token">,</span> <span class="punctuation token">{</span> + command<span class="punctuation token">:</span> <span class="string token">"beastify"</span><span class="punctuation token">,</span> + beastURL<span class="punctuation token">:</span> url + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/** + * Remueve el CSS que oculta la página y + * envía un mensaje de "reset" al script de contenido de la pestaña activa. + */</span> + <span class="keyword token">function</span> <span class="function token">reset</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">removeCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> hidePage<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="punctuation token">{</span> + browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">sendMessage</span><span class="punctuation token">(</span>tabs<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>id<span class="punctuation token">,</span> <span class="punctuation token">{</span> + command<span class="punctuation token">:</span> <span class="string token">"reset"</span><span class="punctuation token">,</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/** + * Imprime el error en consola. + */</span> + <span class="keyword token">function</span> <span class="function token">reportError</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`Could not beastify: </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>error<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/** + * Toma la pestaña activa y + * llama a "beastify()" o "reset()" según corresponda. + */</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"beast"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>active<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">,</span> currentWindow<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>beastify<span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">catch</span><span class="punctuation token">(</span>reportError<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"reset"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>active<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">,</span> currentWindow<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>reset<span class="punctuation token">)</span> + <span class="punctuation token">.</span><span class="function token">catch</span><span class="punctuation token">(</span>reportError<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">/** + * Si hubo algún error al ejecutar el script, + * Despliega un popup con el mensaje de error y oculta la UI normal. + */</span> +<span class="keyword token">function</span> <span class="function token">reportExecuteScriptError</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#popup-content"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"hidden"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#error-content"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"hidden"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`Failed to execute beastify content script: </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>error<span class="punctuation token">.</span>message<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">/** + * Cuando se carga la ventana emergente, inyecta el script de contenido en la pestaña activa, + * y agrega un manejador de eventos. + * Si no es posible inyectar el script, se ocupa de manejar el error. + */</span> +browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">executeScript</span><span class="punctuation token">(</span><span class="punctuation token">{</span>file<span class="punctuation token">:</span> <span class="string token">"/content_scripts/beastify.js"</span><span class="punctuation token">}</span><span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>listenForClicks<span class="punctuation token">)</span> +<span class="punctuation token">.</span><span class="function token">catch</span><span class="punctuation token">(</span>reportExecuteScriptError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Empecemos por la linea 96. La ventana emergente ejecuta un script de contenido en la pestaña activa tan pronto como se termina de cargar, usando la API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript()</a></code>. Si la ejecución del script de contenido es exitosa, este quedará cargado en la página hasta que sea cerrada la pestaña o hasta que el usuario navegue hacia una página distinta.</p> + +<div class="blockIndicator note"> +<p>Un motivo común por el cual el llamado a <code>browser.tabs.executeScript()</code> puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, no es posible hacerlo.</p> +</div> + +<p>Si la ejecución falla, <code>reportExecuteScriptError()</code> ocultará el <code><div></code> <code>"popup-content"</code>, mostrará el <code><div></code> <code>"error-content"</code>, y reportará el error en la consola.</p> + +<p>Si la ejecución del script de contenido es exitosa, se llamará a <code>listenForClicks()</code>, que atiende los eventos que se generan al cliquear en la ventana emergente.</p> + +<ul> + <li>Si el clic se produjo en el botón con <code>class="beast"</code>, se llama a <code>beastify()</code>.</li> + <li>Si el clic se produjo en el botón con <code>class="reset"</code>, se llama a <code>reset()</code>.</li> +</ul> + +<p>La función <code>beastify()</code> hace tres cosas:</p> + +<ul> + <li>map the button clicked to a URL pointing to an image of a particular beast</li> + <li>Oculta todo el contenido de la página al insertar CSS con la API <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code></li> + <li>Envía un mensaje "beastify" al script de contenido usando la API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code>, solicitándole "bestificar" la página, y enviándole la URL de la imagen.</li> +</ul> + +<p>La función <code>reset()</code> deshace lo hecho por <code>beastify()</code>:</p> + +<ul> + <li>Remueve el CSS que agregó, usando la API <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code></li> + <li>Envía un mensaje de "reset" al script de contenido, solicitándole que resetee la página</li> +</ul> + +<h3 id="El_script_de_contenido">El script de contenido</h3> + +<p>Crea una carpeta nueva bajo la raíz del complemento llamada "content_scripts" y crea un nuevo archivo en ella llamado "beastify.js", con el contenido siguiente:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">/** + * Revisa e inicializa una variable de guardia. + * Si este script de contenido es insertado más de una vez + * en la misma página, dejará de ejecutarse. + */</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>window<span class="punctuation token">.</span>hasRun<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + window<span class="punctuation token">.</span>hasRun <span class="operator token">=</span> <span class="boolean token">true</span><span class="punctuation token">;</span> + +<span class="comment token">/** +* Recibe la URL de la imagen, remueve las que se hayan agregado antes, +* crea un nodo IMG que apunt hacia la imagen +* e inserta ese nodo en el documento. +*/</span> + <span class="keyword token">function</span> <span class="function token">insertBeast</span><span class="punctuation token">(</span><span class="parameter token">beastURL</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">removeExistingBeasts</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">let</span> beastImage <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"img"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + beastImage<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">"src"</span><span class="punctuation token">,</span> beastURL<span class="punctuation token">)</span><span class="punctuation token">;</span> + beastImage<span class="punctuation token">.</span>style<span class="punctuation token">.</span>height <span class="operator token">=</span> <span class="string token">"100vh"</span><span class="punctuation token">;</span> + beastImage<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"beastify-image"</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>beastImage<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/** + * Remueve todas las bestias de la página. + */</span> + <span class="keyword token">function</span> <span class="function token">removeExistingBeasts</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">let</span> existingBeasts <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".beastify-image"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> beast <span class="keyword token">of</span> existingBeasts<span class="punctuation token">)</span> <span class="punctuation token">{</span> + beast<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + + <span class="comment token">/** + * Atiende mensajes del script de segundo plano. + * Llama a "beastify()" o "reset()". + */</span> + browser<span class="punctuation token">.</span>runtime<span class="punctuation token">.</span>onMessage<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">message</span><span class="punctuation token">)</span> <span class="operator token">=></span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>message<span class="punctuation token">.</span>command <span class="operator token">===</span> <span class="string token">"beastify"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">insertBeast</span><span class="punctuation token">(</span>message<span class="punctuation token">.</span>beastURL<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>message<span class="punctuation token">.</span>command <span class="operator token">===</span> <span class="string token">"reset"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">removeExistingBeasts</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Lo primero que hace el script de contenido es revisar la variable global <code>window.hasRun</code>: si está inicializada termina su ejecución, sino, la inicializa y continúa. La razón por la que hacemos esto es porque cada vez que el usuario abre la ventana emergente, se vuelve a ejecutar el script de contenido en la pestaña activa, por lo que podríamos tener múltiples instancias del script ejecutandose en una sola pestaña. Si esto sucede, necesitamos asegurarnos de que sea sólo la primera instancia la que vaya a realizar cambios.</p> + +<p>Luego, en la linea 40, donde el script de contenido atiende mensajes provenientes de la ventana emergente (usando la API <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code>), vemos que ésta puede enviar dos mensajes diferentes: "beastify" y "reset".</p> + +<ul> + <li>si el mensaje es "beastify", esperamos que contenga la URL de la imagen. Removemos el contenido que ha sido agregado por el anterior llamado a "beastify", y luego construimos y añadimos un elemento <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img"><img></a></code> cuyo atributo <code>src</code> contiene la URL de la imagen.</li> + <li>si el mensaje es "reset", simplemente removemos cualquier imagen que haya sido agregada antes.</li> +</ul> + +<h3 id="Las_bestias">Las bestias</h3> + +<p>Finalmente, necesitamos incluir las imágenes de los animales.</p> + +<p>Crea una carpeta nueva llamada "beasts", y adiciona tres imágenes en ella, con su nombre apropiado. Tu puedes obtener estas imágenes desde el <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">repositorio en GitHub</a>, o desde aquí:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p> + +<h2 id="Probándolo">Probándolo</h2> + +<p>Primero, comprueba nuevamente que tienes todos los archivos necesarios en el lugar adecuado:</p> + +<pre class="line-numbers language-html"><code class="language-html">beastify/ + + beasts/ + frog.jpg + snake.jpg + turtle.jpg + + content_scripts/ + beastify.js + + icons/ + beasts-32.png + beasts-48.png + + popup/ + choose_beast.css + choose_beast.html + choose_beast.js + + manifest.json</code></pre> + +<p>Comenzando con Firefox 45, pueden instalar temporalmente una extensión desde el disco.</p> + +<p>Abre "about:debugging" en Firefox, de clic en "Cargar complemento temporalmente", y seleccione el archivo manifest.json. Entonces, debería de ver el ícono de la extensión aparecer en la barra de herramientas de Firefox:</p> + +<p>{{EmbedYouTube("sAM78GU4P34")}}</p> + +<p>Abra una página web, luego haga clic sobre el ícono, seleccione una bestia, y vea cómo cambia la página web:</p> + +<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p> + +<h2 id="Desarrollo_desde_la_línea_de_comandos">Desarrollo desde la línea de comandos</h2> + +<div id="gt-res-content"> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"> +<div id="tts_button"> </div> + +<p><span id="result_box" lang="es"><span>Puede automatizar el paso de instalación temporal mediante la herramienta <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>.</span> <span>Pruebe esto</span></span>:</p> +</div> +</div> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">cd beastify +web-ext run</code></pre> + +<p> </p> diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html new file mode 100644 index 0000000000..55ce89a9c7 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html @@ -0,0 +1,50 @@ +--- +title: Botón de la Barra de Herramientas +slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador +tags: + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +<div>{{AddonSidebar}}</div> + +<p>Generalmente referidas como <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">acciones de navegador</a>, esta opción de interfaz de usuario corresponde a un botón agregado a la barra de herramientas del navegador. Los usuarios pueden hacer click en el botón para interactuar con tu extensión.<br> + <img alt="" src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="display: block; height: 182px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<p>El botón de la barra de herramientas (acción de navegador) es muy parecido al botón de la barra de direcciones (acción de página). Para conocer las diferencias y obtener consejo en cuándo usar qué tipo de botón, te recomendamos ver <a href="/en-US/Add-ons/WebExtensions/user_interface/Page_actions#Page_actions_and_browser_actions">Acciones de página y acciones de navegador</a>.</p> + +<h2 id="Especificando_la_acción_de_navegador">Especificando la acción de navegador</h2> + +<p>Puedes definir las propiedades de la acción de navegador utilizando la llave <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> del archivo manifest.json:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"browser_action":</span> <span class="punctuation token">{</span> + <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> + <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> + <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span> +<span class="punctuation token">}</span></code></pre> + +<p>El único campo obligatorio es <code>default_icon</code>.</p> + +<p>Existen dos formas de especificar una acción de navegador: con o sin una <a href="/en-US/Add-ons/WebExtensions/Popups">ventana emergente</a>. Si no especificas una ventana emergente, se le entregará un evento a la extensión cada vez que el usuario haga click en el botón. El evento es escuchable usando <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/BrowserAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>browserAction.onClicked</code></a>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>browserAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>En cambio, si especificas una ventana emergente, el evento de click no es despachado al hacer click en el botón: en su lugar, la ventana emergente es mostrada. El usuario podrá interactuar con la ventana emergente, la cual se cerrará automáticamente cada vez que el usuario haga click fuera de ella. Te recomendamos revisar el artículo de <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">ventanas emergentes</a> para conocer más detalles sobre la creación y administración de éstas.</p> + +<p>Cabe destacar que tu extensión puede tener solamente una acción de navegador.</p> + +<p>Puedes cambiar cualquier propiedad de la acción de navegador de forma programática, utilizando la API <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code>.</p> + +<h2 id="Íconos">Íconos</h2> + +<p>Para más detalles sobre cómo crear íconos para usarlos en tu acción de navegador, revisa <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconografía</a> en la documentación del <a href="https://design.firefox.com/photon/index.html">Sistema de Diseño Photon</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El repositorio de GitHub <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> contiene dos ejemplos de extensiones que implementan acciones de navegador:</p> + +<ul> + <li><a href="https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/">bookmark-it</a> usa una acción de navegador sin una ventana emergente.</li> + <li><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a> usa una acción de navegador con una ventana emergente.</li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..5ddf11d958 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,95 @@ +--- +title: User interface +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - NeedsTranslation + - TopicStub + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +<div>{{AddonSidebar}}</div> + +<p>Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.</p> + +<div class="note"> +<p>For advice on using these UI components to create a great user experience in your extension, please see the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a> article.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">UI option</th> + <th scope="col">Description</th> + <th scope="col" style="width: 350px;">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td> + <td>A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.</td> + <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> + </tr> + <tr> + <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td> + <td>A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.</td> + <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td> + </tr> + <tr> + <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td> + <td>Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.</td> + <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td> + <td> + <p dir="ltr">An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.</p> + </td> + <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td> + <td>A page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.</td> + <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td> + <td>Use web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.</td> + <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td> + <td>Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).</td> + <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td> + <td>Offer custom address bar suggestions when the user enters a keyword.</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td> + <td>A tab with an associated HTML document that displays in the browser's developer tools.</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> + </tr> + </tbody> +</table> + +<p>The following how-to guides provide step-by-step guidance to creating some of these user interface options:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li> +</ul> diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..0ec310af9f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,96 @@ +--- +title: Address bar button +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +<div>{{AddonSidebar}}</div> + +<p>Comúnmente denominado botón de acción de página, esta opción de interfaz de usuario es un botón agregado a la barra de direcciones del navegador. Los usuarios pueden hacer clic en el botón para interactuar con sus extensiones.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="display: block; height: 174px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<h2 id="Acciones_de_página_y_acciones_de_navegador">Acciones de página y acciones de navegador</h2> + +<p>El botón de la barra de direcciones (o página de acción) es muy parecida al botón de la barra de herramientas (o acción del navegador).</p> + +<p>Las diferencias son:</p> + +<ul> + <li><strong>La localización del botón:</strong> + + <ul> + <li>La acción de página es mostrado dentro de la barra de direcciones del navegador.</li> + <li>La acción del navegador es mostrado fuera de la barra de direcciones, exactamente en la barra de herramientas del navegador.</li> + </ul> + </li> + <li><strong>La visibilidad del botón:</strong> + <ul> + <li>La acción de página esta oculta por defecto (sin embargo esto puede ser cambiado en la propiedades <code>show_matches</code> y <code>hide_matches</code> <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">manifest key</a>), y tu puedes llamar <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a> y <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> para mostrar o ocultar esto en pestañas especificas.</li> + <li>La acción del navegador siempre esta mostrada.</li> + </ul> + </li> +</ul> + +<p>Usa una página de acción cuando cuando la acción este relacionada a la página en curso, y una acción de navegador cuando cuando la acción este relacionada a todas o a muchas páginas. Por ejemplo:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="row">Type</th> + <th scope="col">Bookmarks action</th> + <th scope="col">Content action</th> + <th scope="col">Tabs operation</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">page action</th> + <td>Marcar esta página</td> + <td>Reddit enhancement</td> + <td>Enviar una pestaña</td> + </tr> + <tr> + <th scope="row">browser action</th> + <td>Mostrar todos los marcadores</td> + <td>Habilitar ad-blocking</td> + <td>Sincronizar todas las pestañas</td> + </tr> + </tbody> +</table> + +<h2 id="Specifying_the_page_action">Specifying the page action</h2> + +<p>You define the page action's properties using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> key in manifest.json:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span> + <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span> + <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> + <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> + <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span> +<span class="punctuation token">}</span></code></pre> + +<p>The only mandatory key is <code>default_icon</code>.</p> + +<p>There are two ways to specify a page action: with or without a <a href="/en-US/Add-ons/WebExtensions/Popups">popup</a>.</p> + +<ul> + <li><strong>Without a popup:</strong> When the user clicks the button, an event is dispatched to the extension, which the extension listens for using <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>:</li> + <li> + <pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + </li> + <li><strong>With a popup:</strong> the <code>click</code> event is not dispatched. Instead, the popup appears when the user clicks the button. The user then interacts with the popup. When the user clicks outside of the popup, it closes automatically. See the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">Popup </a>article for more details on creating and managing popups.</li> +</ul> + +<p>Note that your extension can have one-page action only.</p> + +<p>You can change any of the page action properties programmatically using the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API.</p> + +<h2 id="Icons">Icons</h2> + +<p>For details on how to create icons to use with your page action, see <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a> in the <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> documentation.</p> + +<h2 id="Examples">Examples</h2> + +<p>The <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> repository on GitHub includes the <a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a> example which implements a page action without a popup.</p> diff --git a/files/es/mozilla/add-ons/webextensions/what_next_/index.html b/files/es/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..7566eb1bff --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/what_next_/index.html @@ -0,0 +1,56 @@ +--- +title: What next? +slug: Mozilla/Add-ons/WebExtensions/What_next_ +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +<div>{{AddonSidebar}}</div> + +<p>Ahora estarás listo para comenzar a convertir tus idea para una extensión de navegador en realidad. Antes de comenzar ese viaje, vale la pena ser consciente de algunas cosas que ayudarán a que sea más sencillo.</p> + +<h2 id="Tu_ambiente_de_desarrollo">Tu ambiente de desarrollo</h2> + +<p>No necesitas ninguna herramienta de desarrollo ni entorno de creación en especial a la hora de crear extensiones de navegador: es completamente posible crear grandes extensiones de navegador solo con un editor de texto. Sin embargo, puede ser que tu hayas estado desarrollando para la web y ya poseas un conjunto de herramientas y un entorno que desees reutilizar. Si este es el caso, necesitarás estar al tanto de un par de cosas.</p> + +<p>Si utilizas herramientas de minificación u ofuscación para obtener tu código final, deberás proporcionar tu código fuente al <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_#The_review_process">proceso de revisión de AMO</a>. Además, las herramientas que uses (aquellas para los procesos de minificación, ofuscación y creación) deberán ser de código abierto (u ofrecer un uso gratuito ilimitado) y estar disponibles para ejecutarse en la computadora del revisor (Windows, Mac o Linux). Desafortunadamente, nuestros revisores no pueden trabajar con herramientas comerciales o basadas en la web.</p> + +<p><a href="/en-US/Add-ons/Source_Code_Submission#About_build_tools">Aprenda más sobre las herramientas de construcción</a></p> + +<h2 id="Bibliotecas_de_Terceros">Bibliotecas de Terceros</h2> + +<p>Las bibliotecas de terceros son una excelente manera de agregar características complejas o funcionalidades a su extensiones para navegador rápidamente. Cuando envía una extensión al <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_#The_review_process">proceso de revisión de AMO</a>, el proceso también considerará las bibliotecas de terceros utilizadas. Para simplificar la revisión, asegúrese de descargar siempre bibliotecas de terceros desde su sitio web oficial o repositorio, y si la biblioteca está minimizada, proporcione un enlace al código fuente. Tenga en cuenta que las bibliotecas de terceros no se pueden modificar de ninguna manera.</p> + +<p><a href="/en-US/Add-ons/Source_Code_Submission">Aprenda más sobre el envío de código fuente </a></p> + +<h2 id="Acuerdo_de_Distribución_para_Complementos_de_Firefox">Acuerdo de Distribución para Complementos de Firefox</h2> + +<p>Las extensiones del navegador deben estar firmadas para instalarse en la versión de lanzamiento o en las versiones beta de Firefox. La firma se realiza en addons.mozilla.org (AMO) y está sujeta a los términos y condiciones del Acuerdo de Distribución de Complementos de Firefox. El objetivo del acuerdo es garantizar que los usuarios de Firefox tengan acceso a complementos de calidad bien soportados que mejoren la experiencia de Firefox.</p> + +<p><a href="/Add-ons/AMO/Policy/Agreement">Lea el Acuerdo</a></p> + +<p><a href="/en-US/Add-ons/WebExtensions/Distribution">Aprenda más sobre la firma</a></p> + +<h2 id="Proceso_de_revisión">Proceso de revisión</h2> + +<p>Cuando se envíe una extensión del navegador para su firma, estará sujeta a revisión automática. También podría estar sujeto a una revisión manual, cuando la revisión automática determine que se necesita una revisión manual. La extensión de su navegador no se firmará hasta que haya pasado la revisión automática y puede revocarse su firma si no pasa la revisión manual. El proceso de revisión sigue un estricto conjunto de pautas, por lo que es fácil verificar y evitar cualquier posible problema de revisión.</p> + +<p><a href="/en-US/Add-ons/AMO/Policy/Reviews">Echa un vistazo a las políticas y directrices de revisión</a></p> + +<h2 id="Entensiones_de_navegador_destacadas_AMO">Entensiones de navegador destacadas AMO</h2> + +<p>Si eliges enlistar tu extensión de navegador en AMO, tu extensión podría aparecer en el sitio web de AMO, en el administrador de complementos del navegador Firefox, o en cualquier otro lugar en un sitio web de Mozilla. Hemos compilado una lista de pautas sobre cómo se seleccionan las extensiones para presentarlas; al seguir estas pautas, le da a su extensión la mejor oportunidad de ser presentada.</p> + +<p><a href="/en-US/Add-ons/AMO/Policy/Featured">Aprenda más sobre como destacar sus complementos</a></p> + +<h2 id="Continua_tu_experiencia_de_aprendizaje">Continua tu experiencia de aprendizaje</h2> + +<p>Ahora que sabe lo que sigue, es hora de profundizar en más detalles sobre el desarrollo de extensiones de navegador. En las siguientes secciones, descubrirás:</p> + +<ul> + <li>Más sobre los conceptos fundamentales detrás de las extensiones del navegador, comenzando con detalles sobre cómo <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">usar las API de JavaScript</a>.</li> + <li>Una guía de los <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">componentes de interfaz de usuario</a> disponibles para las extensiones de su navegador.</li> + <li>Una recopilación de guías prácticas sobre cómo lograr tareas clave en sus extensiones o hacer uso de las API de JavaScript.</li> + <li>Información sobre cómo portar otras extensiones de navegador a Firefox.</li> + <li>Detalles sobre los flujos de trabajo específicos de Firefox que puede utilizar para desarrollar extensiones de navegador.</li> + <li>Una completa guía de referencia sobre las API de JavaScript.</li> + <li>Una completa guía de referencia sobre Manifest keys.</li> +</ul> diff --git a/files/es/mozilla/bugzilla/index.html b/files/es/mozilla/bugzilla/index.html new file mode 100644 index 0000000000..37ae6d1b09 --- /dev/null +++ b/files/es/mozilla/bugzilla/index.html @@ -0,0 +1,59 @@ +--- +title: Bugzilla +slug: Mozilla/Bugzilla +tags: + - Bugzilla + - Calidad + - Developing Mozilla + - 'Developing_Mozilla:Tools' + - Herramientas + - Pruebas + - QA + - Tools +translation_of: Mozilla/Bugzilla +--- +<p><a class="link-https" href="https://bugzilla.mozilla.org/">bugzilla.mozilla.org</a> (abreviado comunmente como <em><strong>b.m.o</strong></em>) es un sistema de seguimiento de defectos de Mozilla.org, una base de datos para bugs registrados y solicitudes de mejoras para Firefox, Thunderbird, SeaMonkey, Camino, y otros proyectos de mozilla.org.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Documentación about B.m.o.</h2> + +<dl> + <dt><a href="/en-US/docs/What_to_do_and_what_not_to_do_in_Bugzilla" title="en/What_to_do_and_what_not_to_do_in_Bugzilla">Qué hacer y qué NO hacer en Bugzilla</a></dt> + <dd>Tips for how to use Bugzilla, as well as things you should avoid.</dd> + <dt><a class="link-https" href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">La etiqueta en Bugzilla</a></dt> + <dd>A guide to etiquette; this guide will help you understand how best to conduct yourself on b.m.o. and how using proper manners and civility will help ensure your problem gets solved sooner rather than later.</dd> + <dt><a href="https://www.mozilla.org/quality/help/beginning-duplicate-finding.html" title="https://www.mozilla.org/quality/help/beginning-duplicate-finding.html">Cómo saber si un bug ha sido reportado</a></dt> + <dd>It's useful (but not mandatory) for you to check if the problem you're reporting has been already tracked. This guide will help you do so.</dd> + <dt><a href="/en-US/docs/Mozilla/QA" title="/en-US/docs/Mozilla/QA">Aseguramiento de calidad</a></dt> + <dd>Documentation about quality assurance at Mozilla.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">Guías para redacción de bugs</a></dt> + <dd>A guide to writing a good, understandable, bug that will be easily followed by the development team.</dd> + <dt><a href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch">How to submit a patch</a></dt> + <dd>If you've fixed a bug, or have implemented a new feature, you'll need to get your patch into the tree so it can become part of the product. This guide will teach you how!</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Bugzilla" title="/en-US/docs/tag/CSS">View All...</a></span></p> +</div> + +<div class="section"> +<h2 id="Otros_materiales">Otros materiales</h2> + +<ul> + <li><a class="external" href="https://www.bugzilla.org/about/">An Introduction to Bugzilla</a></li> + <li><a class="external" href="http://blog.johnath.com/2010/02/04/bugzilla-for-humans">Bugzilla for humans</a></li> + <li><a class="external" href="https://bugzilla.mozilla.org/page.cgi?id=quicksearch.html">Bugzilla QuickSearch help page</a>. QuickSearch is a quick, easy, and very effective way of quickly querying bugzilla.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia" title="https://developer.mozilla.org/en-US/docs/Mozilla/Bugzilla/Testopia">Testopia</a> - test case management extension</li> + <li><a class="external" href="https://www.bugzilla.org">bugzilla.org</a> - the project site</li> + <li>{{ interwiki('wikipedia', 'Bugzilla', 'wikipedia:Bugzilla') }} - general description of Bugzilla (not specific to Mozilla projects)</li> + <li><a href="https://wiki.mozilla.org/BMO">BMO on wiki.mozilla.org</a> - information about Mozilla's customized Bugzilla installation, including how to contribute to it</li> +</ul> + +<h2 class="Tools" id="Tools" name="Tools">Herramientas</h2> + +<ul> + <li><a href="https://fitzgen.github.io/bugzilla-todos/" title="https://harthur.github.io/bugzilla-todos/">Bugzilla Todos</a> lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.</li> + <li><a href="https://rawgit.com/leif81/bzkanban/master/index.html?product=Bugzilla&milestone=Bugzilla+6.0&assignee=&comments=false&site=https%3A%2F%2Fbugzilla.mozilla.org">Bz Kanban </a>is a board to visualize the status of bugs within a milestone.</li> +</ul> +</div> +</div> diff --git a/files/es/mozilla/bugzilla/testopia/index.html b/files/es/mozilla/bugzilla/testopia/index.html new file mode 100644 index 0000000000..cfb6d65a22 --- /dev/null +++ b/files/es/mozilla/bugzilla/testopia/index.html @@ -0,0 +1,162 @@ +--- +title: Testopia +slug: Mozilla/Bugzilla/Testopia +translation_of: Mozilla/Bugzilla/Testopia +--- +<p>Testopia es un administrador de casos de prueba, el cual maneja extensiones para interactuar con Bugzilla. Testopia está diseñado para ser una herramienta genérica para el seguimiento de casos de prueba, permitiendo a las organizaciones realizar las pruebas de software e integrar reportes de defectos encontrados, así como el resultado de los caso de prueba. Testopia está diseñado desde el punto de vista de la actividad de pruebas, este puede ser usado para llevar el seguimiento de pruebas, así como el seguimiento virtual de cualquier proceso de ingenieria.</p> + +<h2 id="Testopia_2.5">Testopia 2.5</h2> + +<p>Estas versiones soportan Bugzilla 4.2 y la mejor noticia es que no requerirá mas un patch para Bugzilla. Si estas actualizando, por favor revierte el parche de la versión existente antes de instalar. Una instalación nueva solo requiere que descomprimas el tarball en tu directorio raiz de Bugzilla y corras un checksetup. Gracias a LpSolit del equipo Bugzilla por su esfuerzo en hacer esto posible.</p> + +<h2 id="Testopia_2.4_-_Important_notice!">Testopia 2.4 - Important notice!</h2> + +<p>If you are upgrading on a case sensitive filesystem you must remove the existing testopia folder in the extensions directory. If you have made modifications to the testopia source code, you will need to merge them into the new Testopia folder (capital T). If you are on Windows or another case insensitive file system you should first rename the folder (testopia-old for example) and then unzip the tarball. You can then merge your changes before deleting the old version.</p> + +<p><strong>API USERS TAKE NOTE:</strong> Positional parameters are now deprecated. All params should now be sent in a hash (struct, dict, hashmap or whatever your language of choice calls key, value pairs). Though all attempts have been made to provide continuing support for positional parameters, please be aware that some API calls may fail until you make this change. Also, future versions may remove this support completely.</p> + +<p>As always please backup your installation before attempting to install or upgrade.</p> + +<h2 id="Integration_Points">Integration Points</h2> + +<ul> + <li> + <p style="margin-bottom: 0in;">Testopia integrates with Bugzilla products, components, versions, and milestones to allow a single management interface for high level objects.</p> + </li> + <li> + <p style="margin-bottom: 0in;">Testopia allows users to login to one tool and uses Bugzilla group permissions to limit access to modifying test objects.</p> + </li> + <li> + <p style="margin-bottom: 0in;">Testopia allows users to attach bugs to test case run results for centralized management of the software engineering process.</p> + </li> +</ul> + +<h2 id="Features_for_version_2.4_(Bugzilla_3.6.x)" style="margin-top: 0in; margin-bottom: 0in;">Features for version 2.4 (Bugzilla 3.6.x)</h2> + +<ul> + <li>Bugzilla 3.6 support</li> +</ul> + +<h2 id="Features_for_version_2.3_(Bugzilla_3.4.x)" style="margin-top: 0in; margin-bottom: 0in;">Features for version 2.3 (Bugzilla 3.4.x)</h2> + +<ul> + <li>Support XML export and import of test plans and children</li> + <li>Support CSV export of test cases and results.</li> + <li>New reports: worst offender and case roll-up</li> + <li>Set priorities on indidual case-runs</li> + <li>New clone options</li> + <li>Uses the latest Extjs 3.0 library</li> + <li>Converts Testopia into a true Bugzilla extension</li> + <li>Numerous bug fixes</li> +</ul> + +<h2 id="Features_for_version_2.2_(Bugzilla_3.2_and_3.0.x)" style="margin-top: 0in; margin-bottom: 0in;">Features for version 2.2 (Bugzilla 3.2 and 3.0.x)</h2> + +<p>This release is primarily a bug fix release and to make Testopia compatable with Bugzilla 3.2 and Bugzilla 3.0.6. Please be sure to download the correct package based on your Bugzilla version.</p> + +<p>To install, do the following (see the <a href="http://wiki.mozilla.org/Testopia:README">README</a> for more detailed instructions):</p> + +<ol> + <li>Untar the Testopia 2.4 tarball inside your Bugzilla directory.</li> + <li>Patch the Bugzilla files.<br> + On Linux systems it should look something like: + <p style="border: 1px solid red; padding: 3px; width: 250px;"><code><strong>patch -p0 -i extensions/testopia/patch-3.6</strong></code></p> + </li> + <li>Run checksetup.pl</li> +</ol> + +<p>To upgrade an existing Testopia installation you follow the same steps <strong>only you need to first REVERSE the old patch BEFORE untarring the files. If upgrading Bugzilla at the same time, this should be done before that as well.</strong>.</p> + +<p><code><strong>patch -p0 -R -i extensions/testopia/patch-<version></strong></code></p> + +<p>Where <version> represents the version of the patch you have applied (Bugzilla version).</p> + +<h2 id="Requirements">Requirements</h2> + +<p>As our development has moved forward, we have decided to try to keep abreast of the latest stable release from Bugzilla (currently 3.4). This gives us a stable code base to work from. Developing plugins or extensions for any software is like trying to hit a moving target. This decision allows us to focus our time more on releasing new features often and early rather than back porting. However, this means that most major feature will not be back ported to earlier versions unless and until we have time to do so. Anyone wishing to help in this effort is more than welcome.</p> + +<ul> + <li> + <p style="margin-bottom: 0in;">Bugzilla 3.6.x</p> + </li> + <li> + <p style="margin-bottom: 0in;">Mysql 5.0 or PostGres 8.1.x</p> + </li> + <li> + <p style="margin-bottom: 0in;">Mozilla compatible browser ;-)</p> + </li> + <li> + <p style="margin-bottom: 0in;">Additional Perl Modules: Text::CSV XML::Schema Validator XML::Schema::Parser (for importer) and JSON 2.10</p> + </li> +</ul> + +<h2 id="TODO">TODO</h2> + +<ul> + <li> + <p style="margin-bottom: 0in;">User preferences</p> + </li> + <li> + <p style="margin-bottom: 0in;">Notification emails</p> + </li> + <li> + <p style="margin-bottom: 0in;">More Reports</p> + </li> +</ul> + +<p>See the <a href="http://wiki.mozilla.org/Testopia:Roadmap">Roadmap</a> and <a href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&product=Testopia&long_desc_type=substring&long_desc=&bug_file_loc_type=allwordssubstr&bug_file_loc=&status_whiteboard_type=allwordssubstr&status_whiteboard=&keywords_type=allwords&keywords=&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&emailassigned_to1=1&emailtype1=exact&email1=&emailassigned_to2=1&emailreporter2=1&emailqa_contact2=1&emailtype2=exact&email2=&bugidtype=include&bug_id=&votes=&chfieldfrom=&chfieldto=Now&chfieldvalue=&cmdtype=doit&order=Reuse+same+sort+as+last+time&field0-0-0=noop&type0-0-0=noop&value0-0-0=">Bug List</a> for more details.</p> + +<h2 id="Links">Links</h2> + +<ul> + <li> + <p style="margin-bottom: 0in;"><a href="http://wiki.mozilla.org/Testopia:FAQ">FAQ</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="http://wiki.mozilla.org/Testopia">Wiki</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia2/testopia/doc/Manual.pdf">Docs</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&product=Testopia&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&bug_status=UNCONFIRMED">Bugs</a> (Please read the <a href="https://wiki.mozilla.org/Testopia:Bug_Reporting_Guide">Bug Reporting Guide)</a></p> + </li> + <li> + <p style="margin-bottom: 0in;">Official Testopia <a href="http://testopia.blogspot.com/">Blog</a></p> + </li> + <li> + <p style="margin-bottom: 0in;">IRC: <a href="irc://irc.mozilla.org/testopia">#testopia</a> or <a href="irc://irc.mozilla.org/mozwebtools">#mozwebtools </a></p> + </li> + <li> + <p style="margin-bottom: 0in;">User Help <a href="mailto:support-webtools@lists.mozilla.org">support-webtools@lists.mozilla.org</a></p> + </li> + <li> + <p style="margin-bottom: 0in;">Developers <a href="mailto:dev-apps-webtools@lists.mozilla.org">dev-apps-webtools@lists.mozilla.org</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia2/">Testopia on landfill (2.2 on Bugzilla 3.0.6)</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="http://landfill.mozilla.org/testopia/">Testopia on landfill (2.2 on Bugzilla 3.2)</a></p> + </li> +</ul> + +<h2 id="Downloads">Downloads</h2> + +<ul> + <li> + <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/testopia-2.5-BUGZILLA-4.2.tar.gz">Download 2.5 (Bugzilla 4.2)</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/testopia-2.4-BUGZILLA-3.6.tar.gz">Download 2.4 (Bugzilla 3.6 and 4.0)</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="ftp://ftp.mozilla.org/pub/mozilla.org/webtools/testopia/">Archived Versions</a></p> + </li> +</ul> + +<h2 id="Developers">Developers</h2> + +<p>Greg Hendricks<br> + Vance Baarda (former developer)<br> + Ed Fuentetaja (former developer)</p> diff --git a/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html b/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html new file mode 100644 index 0000000000..00716daf42 --- /dev/null +++ b/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html @@ -0,0 +1,97 @@ +--- +title: Cómo obtener un seguimiento de pila para un informe de bug +slug: Mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error +translation_of: Mozilla/How_to_get_a_stacktrace_for_a_bug_report +--- +<p>Si presenta un informe de bug en Bugzilla sobre un <strong>bloqueo</strong>, debe incluir un seguimiento de pila (pila de llamadas) en su informe. Un seguimiento de pila le dirá a los desarrolladores de Mozilla qué falló y proporcionará un punto de partida para investigar su causa. Este artículo describe cómo usar Mozilla Crash Reporter (Breakpad) para obtener una ID de bloqueo, que nuestros ingenieros pueden usar para obtener un stacktrace, y formas alternativas de obtener un stacktrace si no puede obtener una ID de crash.</p> + +<h2 id="Requirements">Requirements</h2> + +<p>You need a binary build of Firefox from <a class="external external-icon" href="https://www.mozilla.org/en-US/firefox/">Mozilla.org</a>. SeaMonkey and Thunderbird also support crash reporting.</p> + +<p>Mozilla's crash report server currently only has debug information for Mozilla builds and thus the crash reporter cannot work if you use a build from a Linux distribution or if you compile from source code. In these cases you will need to use one of the <a href="#Alternative_ways_to_get_a_stacktrace">alternative methods</a> listed below.</p> + +<div class="note"><strong>Note: </strong>When filing a crash report, it is important to know whether the crash occurs with <a class="external" href="http://support.mozilla.com/en-US/kb/Safe+Mode" title="http://support.mozilla.com/en-US/kb/Safe+Mode">Firefox safe mode</a>. This helps engineers determine whether a particular <a class="external" href="http://support.mozilla.com/en-US/kb/Troubleshooting+extensions+and+themes" title="http://support.mozilla.com/en-US/kb/Troubleshooting+extensions+and+themes">extension</a> or <a class="external" href="http://support.mozilla.com/en-US/kb/Troubleshooting+plugins" title="http://support.mozilla.com/en-US/kb/Troubleshooting+plugins">plugin</a> is the cause of the crash.</div> + +<h2 id="How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter">How to get a crash ID with the Mozilla Crash Reporter</h2> + +<table> + <tbody> + <tr> + <td> + <p><strong>1. Crash and submit a report to the system.</strong></p> + + <p>The Mozilla Crash Reporter window should automatically come up after Firefox crashes. If you have any additional information about the crash, such as additional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box. Be sure that you <strong>check the "Tell Mozilla about this crash"</strong><strong> checkbox</strong> and click the restart button. The crash reporter should now submit the crash report and Firefox should open again.</p> + + <div class="note">The "Details" button gives additional data about the incident, however this is not useful in a bug report.</div> + </td> + <td> + <p style="text-align: center;"><img alt="reporter.jpg" class="internal lwrap" src="../../../../@api/deki/files/2854/=reporter.jpg?size=webview" style="float: left; height: 307px; width: 300px;"></p> + </td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <td> + <p><strong>2. Tell us the ID of the report you submitted.</strong></p> + + <p>To access all of your submitted reports<strong> type "about:crashes" into the Firefox address bar</strong> and press enter. Firefox should open a list of IDs for your submitted crash reports. Copy two or three of the IDs for the appropriate crashes and paste them into your Bugzilla report. Please check the listed times to avoid copying the ID of an unrelated crash report.</p> + + <div class="note">You can prefix a "bp-" to the beginning of an ID to make Bugzilla turn it into a link: <strong>bp-</strong>a70759c6-1295-4160-aa30-bc4772090918</div> + </td> + <td> + <p style="text-align: center;"><img alt="crashlist.jpg" class="internal lwrap" src="../../../../@api/deki/files/2855/=crashlist.jpg?size=webview" style="float: left; height: 403px; width: 450px;"></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="How_to_get_the_crash_ID_if_Firefox_crashes_on_startup">How to get the crash ID if Firefox crashes on startup</h3> + +<p>If Firefox crashes on startup you can still access your submitted crash reports. Crash reports are accessible from all Firefox profiles, so if a <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles">new profile</a> does not crash you can use it to access them through "about:crashes" <a class="external" href="/en-US/docs/Mozilla/How_to_get_a_stacktrace_for_a_bug_report#How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter" title="https://developer.mozilla.org/En/How_to_get_a_stacktrace_for_a_bug_report#How_to_get_a_crash_ID_with_the_Mozilla_Crash_Reporter">as above</a>.</p> + +<h4 id="Accessing_crash_report_IDs_outside_of_Firefox">Accessing crash report IDs outside of Firefox</h4> + +<p>If you cannot load Firefox at all you can find the crash report files at this location depending on your operating system:</p> + +<p>Windows : <span class="filename">%APPDATA%\Mozilla\Firefox\Crash Reports\submitted\</span><br> + OS X : <span class="filename">~/Library/Application Support/Firefox/Crash Reports/submitted/</span><br> + Linux : <span class="filename">~/.mozilla/firefox/Crash Reports/submitted/</span></p> + +<p>Each file in this folder contains one submitted crash report ID. You can check the modified or creation time for each file to discern which crash reports are relevant to your bug report.</p> + +<h2 id="Alternative_ways_to_get_a_stacktrace">Alternative ways to get a stacktrace</h2> + +<p>If the Mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually:</p> + +<h4 id="Windows">Windows</h4> + +<p>See the article <a class="internal" href="/en-US/docs/Mozilla/How_to_get_a_stacktrace_with_WinDbg" title="En/How to get a stacktrace with WinDbg">Create a stacktrace with Windbg</a> for information on how to do this.</p> + +<p>For a full process dump, see <a href="/en-US/docs/How_to_get_a_process_dump_with_Windows_Task_Manage">How to get a process dump with Windows Task Manager [en-US]</a></p> + +<h4 id="OS_X">OS X</h4> + +<p>Run /Applications/Utilities/Console.app. Expand "~/Library/Logs" and "CrashReporter", then look for logs for "firefox-bin".</p> + +<h4 id="Linux">Linux</h4> + +<p>Note that for most distros, the package you need to get symbols for will be something like "xulrunner", not "firefox".</p> + +<h2 id="Where_did_my_crash_get_submitted.3F" name="Where_did_my_crash_get_submitted.3F">Crash reports files on your computer</h2> + +<p>When Breakpad initially catches a crash it first writes crash report files (e.g. .dump and .extra files) into the 'pending' subdirectory of its 'Crash Reports' directory.</p> + +<p>If Breakpad successfully sends the crash report to the reporting server then, by default, the files added to the 'pending' subdirectory for the crash are removed, and a .txt file is placed in the 'submitted' directory containing the crash ID created by the reporting server.</p> + +<p>If you want Breakpad to leave the .dump and .extra files on your computer so that you can examine them locally, then set the MOZ_CRASHREPORTER_NO_DELETE_DUMP environment variable to 1.</p> + +<ul> + <li>Ubuntu: <a class="external external-icon" href="https://wiki.ubuntu.com/MozillaTeam/Bugs#Obtain%20a%20backtrace%20from%20an%20apport%20crash%20report%20(using%20gdb)">Instructions from the Ubuntu Team</a></li> + <li>openSUSE: <a class="external external-icon" href="https://en.opensuse.org/openSUSE:Bugreport_application_crashed">General instructions from openSUSE</a></li> + <li>Fedora: <a class="external external-icon" href="https://fedoraproject.org/wiki/StackTraces">Capturing Stack Traces</a></li> + <li>Gentoo: <a class="external external-icon" href="https://wiki.gentoo.org/wiki/Debugging_with_GDB">Debugging using GDB</a></li> +</ul> diff --git a/files/es/mozilla/connect/index.html b/files/es/mozilla/connect/index.html new file mode 100644 index 0000000000..b7151db9a6 --- /dev/null +++ b/files/es/mozilla/connect/index.html @@ -0,0 +1,143 @@ +--- +title: Conectate con Mozilla +slug: Mozilla/Connect +tags: + - Español + - Mozilla +translation_of: Mozilla/Connect +--- +<div class="summary"> +<p>Se parte de la aventura <strong>Mozilla Developer Network, </strong>Inspirate en colaborar y formar parte del equipo de contribuidores.</p> + +<p>¡Tú también puedes!.</p> +</div> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<div> +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper"> +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Mi_Block">Mi Block</h2> + +<p>Un recurso clave para desarrolladores de la web libre, el blog de Mozilla Hack ofrece noticias y análisis de lo más reciente en tecnologías web y funciones del navegador.</p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Leer ahora </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Canales_de_Retro-Alimentacion">Canales de Retro-Alimentacion</h2> + +<p>¿Tienes una idea para el desarrollo de herramientas? ¡Haznoslo saber y ayuda a darle forma a las futuras características!</p> + +<p>¿Desarrollas algo y nececitas ayuda? preguntanos a distancia.<br> + <span class="smaller"><strong>{{anch("Developer discussions", "Busca abajo en Q&A")}}</strong></span></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&A en Stack Overflow </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Unete_a_MDN">Unete a MDN</h2> + +<p>¡Registrate en MDN! Podrás editar la documentación, crear un perfíl para mostrar tu trabajo y obtener acceso a las diferentes caracteristicas segun los roles que desempeñes con el tiempo.</p> + +<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Unete o inicia sesión</a></div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="Conectarte_con_Mozilla">Conectarte con Mozilla</h2> + +<p>Los desarrolladores están creando el futuro mediante la creación de aplicaciones para todas las personas alrededor del mundo. El objetivo de Mozilla Developer Relations es ayudar a los desarrolladores a utilizar tecnologías web estandarizadas para tener éxito en el logro de sus objetivos. Además de la documentación disponible en MDN, ofrecemos ayuda y otros recursos para este objetivo, a través de diversos canales. Te invitamos a conectarte, aprender y compartir tu conocimiento.</p> + +<p>Ofrecemos ayuda através de <a href="http://stackoverflow.com/r/mozilla">Q&A en Stack Overflow</a>, para solucionar cuestiones técnicas específicas y desafios que pueda tener. Tambien tenemos un boletín para mantenerte informado sobre los últimos acontecimientos en la escena web, entorno a aplicaciones web y mucho más. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Suscríbete al boletín de noticias de apps y hacks</a></p> + +<p>Si compartes la <a href="https://www.mozilla.org/en-US/mission/">misión</a> y <a href="https://www.mozilla.org/en-US/about/manifesto/">principios</a> de Mozilla y quieres ayudar a progresar a otros desarrolladores, da un vistazo a las maneras en que puedes <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">involucrarte en la evangelización técnica</a> y únete a nuestro <a href="https://lists.mozilla.org/listinfo/evangelism">grupo de discusión de evangelización</a>.</p> + +<p>Tenemos muchos planes e ideas para expandir de forma iterativa nuestra oferta de relaciones de desarrolladores y ¡queremos que estés involucrado en como lo hacemos! así que , ¡<a href="http://stackoverflow.com/r/mozilla">sigue las etiquetas de Stack Overflow</a>, <a href="https://hacks.mozilla.org/">suscribete al Blog Hack</a>, <a href="https://marketplace.firefox.com/developers/#newsletter-signup">suscribete al boletin </a>y <a href="/profile/edit">registrate para obtener una cuenta</a>!</p> + +<h2 id="Únete_a_Mozilla" style="line-height: 30px;"><strong>Únete a Mozilla</strong></h2> + +<p>Si quieres ir más allá de la conexión con Mozilla, puedes unirte a Mozilla y ayudar a hacer realidad su misión de construir una mejor internet. Como desarrollador, tienes habilidades para contribuir en muchas áreas, así como la posibiliad de mejorar tus habilidades. Mozilla es un proyecto de código abierto, como es "abierto por defecto" puede "ver el código fuente" y contribuir en el desarrollo de proyectos de software, como el navegador Firefox para escritorio y Android, Firefox OS, y sitios web de Mozilla. Puedes convertirte en parte de la comunidad internacional y obtener reconocimiento por tus esfuerzos. Estas son algunas de las ventajas de contribuir al proyecto Mozilla.</p> + +<h3 id="Oportunidad_de_aprender_algo_nuevo."><strong>Oportunidad de aprender algo nuevo.</strong></h3> + +<div> +<p>Al escribir código para un proyecto de código abierto, podrás enfrentarte a problemas que antes no has encontrado, que presentan oportunidades de aprendizaje para ti. Puedes probar nuevas herramientas y técnicas en un proyecto de código abierto. Si por ejemplo, nunca has hecho pruebas unitarias, y tras codificar no logras obtener el permiso para hacerlo en el trabajo, un proyecto de código abierto sería un excelente lugar para aprender. Contribuir al código abierto le da la oportunidad de conocer y colaborar con muchas personas alrededor del mundo que tiene intereses similiares. Por otra parte, una organización de código abierto como Mozilla tiene muchos colaboradores que le podrán ayudar a solucionar los problemas que encuentre. Si solo acabas de empezar a contribuir, puedes buscar "mentoria de errores", donde un colaborador con mayor experiencia se ha ofrecido a ayudar a los recién llegados a solucionarlos.</p> + +<h3 id="¿Qué_puedo_obtener_contribuyendo"><strong>¿Qué puedo obtener contribuyendo? </strong></h3> + +<p>Explora muchas cosas y obten reconocimiento de la comunidad-- Estos son los beneficios intangibles de contribuir a Mozilla. Si bien no podemos garantizar beneficios tangibles específicos, muchos valiosos colaboradores reciben gratis articulos Mozilla e invitaciones a eventos relacionados, y estan de primeros en las lista para pasantias. por otra parte, tu experiencia en la contribución a un proyecto de código abierto podria ayudarte a obtener un trabajo. Cada vez son mas los empleadores que están buscando contribuyentes de codigo abierto. A ellos les gusta ver que usted está en blogs y contribuyendo en listas de correo, y les gusta ver que usted ayudó en el desarrollo de un proyecto de código abierto. También te puede ayudar en la sección de experiencia laboral para tu CV.</p> + +<h3 id="¿Cómo_puedes_contribuir_a_Mozilla"><strong>¿Cómo puedes contribuir a Mozilla?</strong></h3> + +<p>Hay muchas áreas del proyecto donde puedes contribuir a Mozilla. Puedes encontrar un camino, el listado completo está en la página de <a href="https://www.mozilla.org/contribute">involúcrate</a>. Algunas de las áreas que te pueden interesar como desarrollador incluyen:</p> + +<ul> + <li><a href="http://www.whatcanidoformozilla.org/">Programación</a></li> + <li><a href="http://www.whatcanidoformozilla.org/">Desarrollo Web</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia">Firefox OS</a></li> + <li><a href="https://quality.mozilla.org/teams/">Preguntas y respuestas Q&A </a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Addons">Complementos</a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">Apps</a></li> + <li><a href="/en-US/docs/MDN/Getting_started">Desarrollo de documentacion (aqui en MDN)</a></li> +</ul> +</div> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="QA_en_Stack_Overflow_Veer_todo_QA">Q&A en Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">Veer todo Q&A</a></h2> + +<p>Tenemos Q&A para discutir los asuntos del desarrollo, en particular en Firefox OS y la Web libre en movil. Está disponible en Stack Overflow de forma fácil en la URL de abajo.</p> + +<p><a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p> + +<div class="stack-form">Stack form</div> + +<h3 id="Últimos_temas_de_QA">Últimos temas de Q&A</h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="¿Dónde_está_Mozilla_Mira_los_asistentes_y_detalles_en_nuestra_pagina_de_eventos...">¿Dónde está Mozilla? <a class="heading-link" href="https://developer.mozilla.org/en/events">Mira los asistentes y detalles en nuestra pagina de eventos... </a></h2> + +<p>Aqui hay un listado de los eventos donde los representantes de Mozilla hablarán. ¡Asegurate de hablar con ellos!</p> +</div> + +<div class="column-5"> +<h2 id="Otros_recursos">Otros recursos</h2> + +<ul class="no-bullets"> + <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks en YouTube</a> + + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">videos Firefox OS </a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">videos deherramientas de desarrollo Firefox</a></li> + </ul> + </li> + <li><a href="https://twitter.com/mozhacks">@mozhacks en Twitter</a></li> +</ul> +</div> +</div> +</div> + +<p> </p> diff --git a/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html b/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html new file mode 100644 index 0000000000..1dbd2ca898 --- /dev/null +++ b/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html @@ -0,0 +1,92 @@ +--- +title: Creando un complemento de diccionario de ortografía +slug: Mozilla/creando_un_complemento_de_diccionario_de_ortografia +translation_of: Mozilla/Creating_a_spell_check_dictionary_add-on +--- +<p>Esta página describe cómo empaquetar un diccionario de ortografía Hunspell como complemento para Firefox, o cómo actualizar tu complemento existente para que pueda ser instalado, desinstalado y actualizado sin necesidad de reiniciar.</p> + +<h2 id="Partes_necesarias">Partes necesarias</h2> + +<p>Para crear un complemento de diccionario, primero necesitas dos cosas:</p> + +<ul> + <li>Un diccionario de ortografía en formato Hunspell o Myspell, con una licencia que te permita hacer uso de él. Este diccionario consiste en dos archivos, uno con una extensión de archivo <code>.dic</code> y otro con un <code>.aff</code>.</li> + <li>Un código de localización para describir el idioma del diccionario. Por ejemplo, <code>en-US</code>, <code>de-DE</code> o <code>da</code>. Es importante elegir el código de localización correcto, o sino el revisor de ortografía no podrá comparar adecuadamente el idioma del diccionario con el del sitio web para seleccionar el diccionario correcto a utilizar.</li> +</ul> + +<p>Si estás creando un nuevo diccionario, a diferencia de actualizar uno existente, por favor asegúrate de que no haya un <a href="https://addons.mozilla.org/en-US/firefox/language-tools/" title="https://addons.mozilla.org/en-US/firefox/language-tools/">diccionario disponible</a> para tu localización. Si es que ya hay uno, intenta contactar al autor para actualizarlo, o contacta a los <a href="https://wiki.mozilla.org/AMO:Editors" title="https://wiki.mozilla.org/AMO:Editors">editores de AMO</a> si es que el autor no responde.</p> + +<h2 id="Empaquetamiento">Empaquetamiento</h2> + +<p>Un complemento de Firefox es un archivo ZIP renombrado para usar una extensión de archivo <code>.xpi</code> en lugar de la extensión de archivo <code>.zip</code> normal. Para crear un complemento de diccionario, simplemente crea un archivo ZIP que contenga los siguientes archivos y carpetas:</p> + +<p><code>my-dictionary.xpi</code></p> + +<ul> + <li><code>install.rdf</code></li> + <li><code>dictionaries/</code> + <ul> + <li><em>código-de-localización</em><code>.dic</code></li> + <li><em>código-de-localización</em><code>.aff</code></li> + </ul> + </li> +</ul> + +<p>Los archivos <code>.dic</code> y <code>.aff</code> deben estar ubicados en una subcarpeta llamada <code>dictionaries</code> dentro del archivo ZIP. Ambos archivos deben tener el código de localización como nombre de archivo. También tienes que añadir un archivo llamado <code>install.rdf</code> a la raíz del archivo ZIP. Este archivo contiene información sobre tu complemento, como por ejemplo el nombre y el número de versión (ver a continuación). Además de estos archivos requeridos, puedes añadir archivos opcionales, por ejemplo darle un <a href="/en-US/docs/Install_Manifests#iconURL" title="/en-US/docs/Install_Manifests#iconURL">ícono</a> a tu complemento o describir la licencia del diccionario.</p> + +<p>Aquí hay un ejemplo del archivo <code>install.rdf</code>. Puedes crearlo y editarlo con un editor de texto plano como "Bloc de notas".</p> + +<p><code><?xml version="1.0"?><br> + <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"<br> + xmlns:em="http://www.mozilla.org/2004/em-rdf#"><br> + <Description about="urn:mozilla:install-manifest"><br> + <em:id><span style="color: #ff0000;"><strong><em>Código-de-localización</em></strong></span>@dictionaries.addons.mozilla.org</em:id><br> + <em:version><em><strong><span style="color: #ff0000;">número de versión</span></strong></em></em:version><br> + <em:type>64</em:type><br> + <em:unpack>true</em:unpack><br> + <em:name><span style="color: #ff0000;"><em><strong>Nombre</strong></em></span></em:name><br> + <em><strong><!--<br> + Otros <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">metadatos de install.rdf</a> tales como em:localized, em:description, em:creator,<br> + em:developer, em:translator, em:contributor o em:homepageURL<br> + --></strong></em><br> + <br> + <!-- Firefox --><br> + <em:targetApplication><br> + <Description><br> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id><br> + <em:minVersion>18.0a1</em:minVersion><br> + <em:maxVersion>46.0</em:maxVersion><br> + </Description><br> + </em:targetApplication><br> + <br> + <!-- Thunderbird --><br> + <em:targetApplication><br> + <Description><br> + <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id><br> + <em:minVersion>18.0a1</em:minVersion><br> + <em:maxVersion>22.0</em:maxVersion><br> + </Description><br> + </em:targetApplication><br> + <br> + <!-- SeaMonkey --><br> + <em:targetApplication><br> + <Description><br> + <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id><br> + <em:minVersion>2.15a1</em:minVersion><br> + <em:maxVersion>2.49</em:maxVersion><br> + </Description><br> + </em:targetApplication><br> + </Description><br> + </RDF></code></p> + +<p>Aquí hay algunas reglas sobre cómo debieras adaptar el archivo <code>install.rdf</code>:</p> + +<ul> + <li>Si estás creando un nuevo complemento de diccionario, recomendamos que el <code>em:id</code> consista del código de localización seguido por <code>@dictionaries.addons.mozilla.org</code>, pero si hay más de un diccionario para tu idioma (por ejemplo, en Alemán existe los diccionarios "ortografía antigua" y "ortografía nueva"), puede que debas elegir otro ID, que siga las <a href="/en-US/docs/Install_Manifests#id" title="/en-US/docs/Install_Manifests#id">reglas de em:id</a>. Si actualizas un complemento de diccionario existente, debes mantener el <code>em:id</code> existente, o tus usuarios no serán actualizados a la última versión.</li> + <li><code>em:version</code> debiera seguir las <a href="/en-US/docs/Toolkit_version_format" title="/en-US/docs/Toolkit_version_format">reglas de números de versión de complemento de Mozilla</a>, y si actualizas un complemento de diccionario existente, el número de la nueva versión debe ser mayor al anterior.</li> + <li>No cambies <code>em:type</code> o <code>em:unpack</code>, y no añadas un elemento <code>em:bootstrap</code>. "Type = 64" indica que el complemento está en el formato que no requiere reinicio, y desempacarlo es requerido para que Hunspell lea el diccionario.</li> + <li>Pese a que el formato que no requiere reinicio para complementos de diccionario fue introducido en Gecko 10, las actualizaciones de diccionarios solo funcionan desde Gecko 18. Por ello, <code>em:minVersion</code> debiera ser igual al ejemplo anterior (o mayor). Si ajustas <code>em:minVersion</code> a un valor inferior, Gecko 10-17 no podrá actualizar tu complemento de diciconario una vez que el diccionario que no requiere reinicio sea instalado (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=782118">bug 782118</a>), y Gecko 10-16 podrían advertir al usuario de que el diccionario no es compatible, cuando los usuarios intenten actualizar a una nueva versión de Firefox/Thunderbird (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=782115" title="https://bugzilla.mozilla.org/show_bug.cgi?id=782115">bug 782115</a>).</li> + <li>Actualiza <code>em:maxVersion</code> a la <a href="https://addons.mozilla.org/es/firefox/pages/appversions/" title="https://addons.mozilla.org/en-us/firefox/pages/appversions/">versión más nueva disponible.</a></li> +</ul> + +<p>Una vez que has añadido estos archivos a tu archivo ZIP, y este último lo has renombrado para que tenga la extensión <code>.xpi</code>, puedes instalar tu complemento en Firefox y problarlo. Luego de una prueba exitosa, puedes subir tu complemento a <a href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">addons.mozilla.org</a> y solicitar que sea incluido en la página de <a href="https://addons.mozilla.org/es/firefox/language-tools/" title="https://addons.mozilla.org/en-US/firefox/language-tools/">Diccionarios y paquetes de idioma</a>.</p> diff --git a/files/es/mozilla/developer_guide/index.html b/files/es/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..699953a863 --- /dev/null +++ b/files/es/mozilla/developer_guide/index.html @@ -0,0 +1,149 @@ +--- +title: Developer Guide +slug: Mozilla/Developer_guide +translation_of: Mozilla/Developer_guide +--- +<p>Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.</p> +<h2 id="First_time">First time?</h2> +<dl> + <dt> + <a href="/en-US/docs/Introduction" title="Introduction">Getting Started</a></dt> + <dd> + A step-by-step beginner's guide to getting involved with Mozilla.</dd> +</dl> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + <p><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips">Obsolete Build Caveats and Tips</a></p> + <dl> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt> + <dd> + A code overview, how to get the code, and the coding style guide.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt> + <dd> + How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt> + <dd> + An overview of the entire Mozilla development process.</dd> + <dt> + <a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt> + <dd> + When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt> + <dd> + How to run Mozilla's automated tests, and how to write new tests.</dd> + <dt> + <a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt> + <dd> + After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd> + How to ensure that documentation is kept up to date as you develop.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd> + This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt> + <a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd> + Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd> + Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt> + <a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd> + Find helpful tips and guides for debugging Mozilla code.</dd> + <dt> + <a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd> + Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt> + <a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd> + Information about the workings of the Mozilla platform.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd> + How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd> + Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd> + Information about creating customized versions of Firefox.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd> + How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt> + <a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd> + A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd> + </dl> + </td> + <td> + <h2 class="Tools" id="Tools">Tools</h2> + <dl> + <dt> + <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt> + <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> + <dd> + Browse and search the Mozilla source code repository on the Web.</dd> + <dt> + <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd> + The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd> + <dt> + <a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd> + The distributed version-control system used to manage Mozilla's source code.</dd> + <dt> + <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> + <dd> + <a class="internal" href="/en-US/docs/Tinderbox" title="en-US/docs/Tinderbox">Tinderbox</a> shows the status of the tree (whether or not it currently builds successfully). Check this before checking in and out, to be sure you're working with a working tree.</dd> + <dt> + <a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd> + Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> and <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> crash reporting systems.</dd> + <dt> + <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt> + <dd> + See performance information for Mozilla projects.</dd> + <dt> + <a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd> + A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt> + <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt> + <dd> + A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd> + <dt> + <a class="external" href="http://www.brianbondy.com/mozilla/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt> + <dd> + Brian Bondy's list of frequently referenced information for platform developers.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<div class="twocolumns"> + <div class="geckoVersionNote"> + <div class="syntaxbox"> + </div> + </div> +</div> +<p> </p> diff --git a/files/es/mozilla/developer_guide/mozilla-central/index.html b/files/es/mozilla/developer_guide/mozilla-central/index.html new file mode 100644 index 0000000000..528266153d --- /dev/null +++ b/files/es/mozilla/developer_guide/mozilla-central/index.html @@ -0,0 +1,50 @@ +--- +title: mozilla-central +slug: Mozilla/Developer_guide/mozilla-central +tags: + - Desarrollando_Mozilla + - Mercurial + - Todas_las_Categorías +translation_of: Mozilla/Developer_guide/mozilla-central +--- +<p><strong><code>mozilla-central</code></strong> es un repositorio <a href="/es/Mercurial" title="es/Mercurial">Mercurial</a> del código de Mozilla: <a class="external" href="http://hg.mozilla.org/mozilla-central" rel="freelink">http://hg.mozilla.org/mozilla-central</a> . Es un punto de integración estable para cambios que se incorporarán en el código base de Mozilla 2.</p> + +<p>La página de <a href="/es/Tinderbox" title="es/Tinderbox">Tinderbox</a> de mozilla-central se encuentra en <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=Mozilla2" rel="freelink">http://tinderbox.mozilla.org/showbui...?tree=Mozilla2</a> .</p> + +<p>{{ Note("a diferencia del repositorio CVS de Mozilla, sólo se incluyen en mozilla-central los fuentes de Firefox y XULRunner. Se usarán repositorios separados para el código específico a otras aplicaciones y proyectos.") }}</p> + +<h3 id="Reglas_en_el_.C3.A1rbol_mozilla-central" name="Reglas_en_el_.C3.A1rbol_mozilla-central">Reglas en el árbol mozilla-central</h3> + +<p>El código base de mozilla-central debería ser estable en todo momento para las <a href="/es/Configuraciones_de_compilación_oficiales" title="es/Configuraciones_de_compilación_oficiales">plataformas de prioridad 1</a>:</p> + +<ul> + <li>Las pruebas automatizadas unitarias deben pasarse con éxito</li> + <li>Las pruebas automatizadas de rendimiento y fugas no deben informar de regresiones</li> + <li>Cualquier regresión es causa de retrocesión del parche causante.</li> +</ul> + +<p>Actualmente no están permitidos cambios a las APIs congeladas de XPCOM. Esta regla cambiará una vez se tome una decisión sobre una versión intermedia de la plataforma (Mozilla 1.9.1).</p> + +<ul> + <li>Los desarrolladores <em>no</em> deberían aplicar cambios de prueba en mozilla-central para comprobar si un parche produce una regresión en las pruebas unitarias o de rendimiento. En su lugar, debe usarse el {{ interwiki('wikimo', 'Build:TryServer', 'servidor de pruebas') }}.</li> +</ul> + +<h3 id="Aplicar_cambios_a_mozilla-central" name="Aplicar_cambios_a_mozilla-central">Aplicar cambios a mozilla-central</h3> + +<p>Todos los desarrolladores que tienen acceso para aplicar parches en CVS deberían haber recibido un mensaje de correo electrónico con los detalles de inicio de sesión LDAP para aplicar parches en hg.mozilla.org. Si crees que deberías tener acceso a mozilla-central pero no conoces tus datos de inicio de sesión, <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&component=Server+Operations:+Account+Requests">cursa un bug</a>. Puedes usar la orden <code>hg push</code> para subir los conjuntos de cambios al servidor.</p> + +<ul> + <li>Los cambios no deben introducir múltiples ramas principales (heads) en mozilla-central</li> + <li>Por favor, intenta mantener el historial ordenado. Es preferible un único commit o unos pocos independientes a muchos conjuntos de cambios de "trabajo en curso" que se acumulen en el historial. Considera el uso de <a href="/es/Colas_de_Mercurial" title="es/Colas_de_Mercurial">colas de Mercurial</a> para gestionar los parches antes de aplicarlos.</li> + <li>Como mínimo el juego de cambios final que se suba al servidor debe referenciar el número de bug y el revisor del cambio relevante.</li> + <li>Los cambios deben subirse a <code><a class="external" href="ssh://hg.mozilla.org/mozilla-central/" rel="freelink">ssh://hg.mozilla.org/mozilla-central/</a></code>, revisa <a href="/es/Preguntas_Frecuentes_sobre_Mercurial#.C2.BFC.C3.B3mo_incorporo_.28check_in.29_cambios.3F" title="es/Preguntas_Frecuentes_sobre_Mercurial#.C2.BFC.C3.B3mo_incorporo_.28check_in.29_cambios.3F">Preguntas Frecuentes sobre Mercurial#¿Cómo incorporo (check in) cambios?</a> para más detalles sobre cómo configurar tu instalación.</li> +</ul> + +<h3 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h3> + +<ul> + <li>Mensaje <a class="external" href="http://developer.mozilla.org/devnews/index.php/2008/06/02/mozilla-central-open-for-business/">mozilla-central: open for business</a> en devnews.</li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=433384&hide_resolved=1">Seguimiento: cuestiones que dificultan el desarrollo en mozilla-central</a></li> +</ul> + +<p>{{ languages( { "en": "en/Mozilla-central", "ja": "ja/Mozilla-central" } ) }}</p> diff --git a/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilación_de_mozilla/index.html b/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilación_de_mozilla/index.html new file mode 100644 index 0000000000..6e0c380577 --- /dev/null +++ b/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilación_de_mozilla/index.html @@ -0,0 +1,343 @@ +--- +title: Preguntas frecuentes sobre la compilación de Mozilla +slug: Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla +tags: + - Documentación_de_compilado + - NecesitaRevisiónGramatical +translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ +--- +<p>Mira también:</p> + +<ul> + <li><a href="/es/Debugging_Mozilla_on_Windows_FAQ" title="es/Debugging_Mozilla_on_Windows_FAQ">Debugging Mozilla on Windows FAQ</a>: Consejos para depurar Mozilla en Windows</li> +</ul> + +<h3 id="Preguntas_Generales" name="Preguntas_Generales">Preguntas Generales</h3> + +<dl> + <dt id="platform">Que plataformas soportan Mozilla?</dt> + <dd>Hay varios niveles o grados de "soporte" para Mozilla: + <p>Grado-1 son las plataformas en las cuales se centra el desarrollo. Los problemas en estas plataformas son considerados primordiales. También son las plataformas que se muestran en <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=SeaMonkey">SeaMonkey tinderbox page</a>.</p> + + <p>Las Grado-1 son:</p> + + <ul> + <li>linux/x86 (gcc)</li> + <li>win32/x86 (msvc)</li> + <li>OS X (gcc)</li> + </ul> + + <p>Grado-2 son las plataformas en las que hay algunos desarrolladores y contribuyentes activos, pero que la mayor parte del desarrollo no se centra en los problemas. Nos referimos a estas plataformas como los Puertos y la mayoría se encuentran en <a class="external" href="http://tinderbox.mozilla.org/SeaMonkey-Ports/">SeaMonkey-Ports tinderbox page</a>.</p> + + <p>Estas son:</p> + + <ul> + <li>aix 4.3 (aCC)</li> + <li>beos 5.0.3 (gcc)</li> + <li>bsdi 4.x (gcc)</li> + <li>hpux 10.x,11.x (HP cc)</li> + <li>irix 6.x/gcc (gcc/MIPSpro)</li> + <li>linux/ppc (gcc)</li> + <li>os/2 (gcc)</li> + <li>osf1 5.x (Compaq cc)</li> + <li>solaris (sparc & x86) 2.6+ (gcc/Forte)</li> + </ul> + + <p>Grado-3 son aquellas en las que casi no hay desarrollo activo por la mayor parte de los desarrolladores pero que hay algunas soluciones contribuidas por terceros.</p> + + <p>Las Grado-3 son:</p> + + <ul> + <li>freebsd (gcc)</li> + <li>linux/alpha (gcc)</li> + <li>netbsd (gcc)</li> + <li>openvms (?)</li> + <li>ps2linux (gcc)</li> + <li>qnx 6 (gcc)</li> + <li>win32/x86 (gcc)</li> + </ul> + + <p>Las demás plataformas "no son soportadas" por Mozilla. En realidad "no soportada" quiere decir que no hay gente trabajando activamente en eso y que no son una prioridad.</p> + + <p>La mayoría de los desarrolladores no tienen acceso a las plataformas que no sean Grado-1; así que cualquier bug reportado en una plataforma que no sea Grado-1,debería poseer bastante información para ayudar al responsable del bug a determinar la causa y brindar una solución apropiada. Si puedes proporcionar un parche y/o verificar que el parche del desarrollador funciona en tu plataforma, puedes ayudar a muchos a verificar y arreglar sus bugs.</p> + + <p> </p> + </dd> + <dt>Qué tipo de sistema de compilación usa Mozilla?</dt> + <dd>Mozilla usa para todas las plataformas una delgada capa de configuración GNU sobre el legado de sistema de makefile recursivo de Netscape. Como la mayoría de los proyectos configure-based, utiliza GNU autoconf para generar el script de configuración. GNU make se utiliza para manejar el proceso de compilado. + <p> </p> + </dd> + <dt>Por qué usa GNU?</dt> + <dd>GNU make ha sido exportado a muchos sistemas. Esto hace que exportar Mozilla a esos sistemas sea un poco más fácil. Utilizando las características de make, que son soportadas por el programa nativo make en 10 plataformas diferentes, se logra que el sistema de compilado no sea innecesariamente complicado. + <p> </p> + </dd> + <dt>Funciona otra versión de make?</dt> + <dd>No. El makefiles Mozilla utilza características propias de GNU make que, obviamente, sólo funcionan con GNU make. + <p> </p> + </dd> + <dt>Por qué no usa automake?</dt> + <dd>Parte del legado de Netscape involucra utilizar el make de GNU. Tiene características para incluir un conjunto de reglas comunes desde un puñado de archivos en cada Makefile que necesite usarlas. También, hoy en día el método de generación de librerías de Mozilla no funciona bien con libtool. + <p> </p> + </dd> + <dt>Qué les sucedió a nmake y al sistema de compilado CodeWarrior?</dt> + <dd>Ya no existen. El soporte para nmake se dejó durante la distribución de Mozilla 1.2a. El sistema mac cfm se abandonó con el soporte para OS9 poco después de la liberación de Mozilla 1.3 + <p> </p> + </dd> + <dt>Por qué no ant, tmake, scons o <em>inserte su sistema favorito aquí</em>?</dt> + <dd>Principalmente porque nadie los utiliza en Mozilla. Cuando Mozilla empezó a ser de código abierto, sólo contenia el legado de Netscape. Autoconf se integró en una rama y se mantuvo en paralelo durante 6 meses antes de convertirse en el sistema standard para unix. + <p> </p> + </dd> + <dt>Si deseo utilizar mi sistema favorito,¿ lo empezarìan a usar en Mozilla?. No quiero perder mi tiempo si no lo van a usar.</dt> + <dd>No hay garantías de que cualquier código escrito para Mozilla sea aceptado en árbol por defecto. Todo sistema que se desee utilizar debe demostrar ser mejor que el sistema actual. Velocidad, flexibilidad, portabilidad y la capacidad de que un gran grupo de desarrolladores- que tiene 3 años o más de experiencia- pueda cambiarlo facilmente, son los principales factores que deciden el cambio. Si hablas en serio y vas a realizar mucho trabajo, contacta a <a href="/User:Benjamin_Smedberg" title="User:Benjamin_Smedberg">User:Benjamin Smedberg</a> para discutir los detalles. + <p> </p> + </dd> + <dt>Por qué Mozilla no soporta autoconf 2.5x?</dt> + <dd>Simplemente porque autoconf 2.5x no ofrece nada para que los esfuerzos por actualizar valgan la pena. Autoconf 2.5x no es compatible con 2.13 y las restricciones adicionales hechas en las nuevas versiones de autoconf requirirían reescribir gran parte del código- sistema de compilado de Mozilla. + <p>Algunas características de 2.13, como la posibilidad de pasar argumentos adicionales para sub-configuración, no están disponibles en 2.5x. Varios han preguntado por estas características en las listas de correos de autoconf y no han obtenido respuestas favorables. No es conveniente reescribir las configuraciones para subprojectos de Mozilla (NSPR & LDPA).</p> + + <p> </p> + </dd> + <dt>Por qué NSS no usa aurtoconf?</dt> + <dd>El projecto NSS también es utilizado fuera de Mozilla, y los miembros del mismo creen que cambiar a autoconf no vale la pena. Mira {{ Bug(52990) }} para más detalles. + <p> </p> + </dd> + <dt>Puedo compilar múltiples proyectos basados en Mozilla desde un único árbol-fuente?</dt> + <dd>Sí!, cada projecto debe ser compilado en su propio objdir. + <p> </p> + </dd> + <dt>Qué es un objdir?</dt> + <dd>Un objdir se refiere a crear los archivos de salida en un directorio distinto al que se encuentran las fuentes. Es un estándar en la mayoría de los proyectos basados en configuración. Te permite, desde un único árbol-fuente, compilar para múltiples configuraciones, incluyendo varias plataformas si trabajas en un sistema de archivos de red. También elimina la corrupción de tu árbol-fuente, de esta manera sabes que los archivos en el árbol no han sido modificados en el proceso de compilado. + <p>Si ejecutas configure manualmente, puedes usar el método estàndar de crear un directorio vacío en cualquier parte de la unidad, y luego entrar a ese directorio y ejecutar path/to/mozilla/configure.</p> + + <pre class="eval">mkdir obj-debug +cd obj-debug +../mozilla/configure +</pre> + + <p>Si usas client.mk, puedes agregar lo siguiente al .mozconfig:</p> + + <pre class="eval">mk_add_options MOZ_OBJDIR=/path/to/objdir +</pre> + + <p> </p> + </dd> + <dt>Puedo multi-compilar Mozilla?</dt> + <dd>Sí, mira el documento <a class="external" href="http://www.mozilla.org/build/cross-compiling.html">Cross-Compiling Mozilla</a>. No soporta <a class="external" href="http://www.vmlinux.org/joachim/mirror/www.objsw.com/CrossGCC/FAQ-4.html#ss4.9">Canadian Cross-Compiling</a>. + <p> </p> + </dd> + <dt>Cómo puedo compilar sólo ciertos archivos para pruebas, en lugar de compilar todo el árbol, mientras modifico el código?</dt> + <dd>Entra en el directorio objdir, luego vè al directorio especifico que deseas compilar (la estructura del objdir coincide con la estructura de los directorios de las fuentes), y tipea "make". Sólo funciona si encuentras un directorio que tenga un Makefile (el equivalente en el árbol fuente tandrá "Makefile.in". Si quieres algo más especifico que eso puedes probar con "make <nombrearchivo>.obj". Mira <a href="/es/Incremental_Build" title="es/Incremental_Build">Incremental Build</a>. + <p> </p> + </dd> + <dt>Funcionan las compilaciones paralelas (make -j) en Mozilla?</dt> + <dd>Sí, mira <a class="external" href="http://www.gnu.org/software/make/manual/html_node/Parallel.html">GNU Make Parallel Execution</a> para su uso óptimo. + <p>Si obtienes errores de compilación al utilizar aquello (sobre todo cuando usas -j en lugar de -jN), prueba reduciendo el número de paralelismo disminuyendo el valor de N (o, si usaste paralelismo ilimitado, agrega un número pequeño N a -j)</p> + + <p>La compilación en paralelo con -j4 y -j8 parece funcionar.</p> + + <p> </p> + </dd> + <dt>Cómo fuerzo al sistema de compilación para aceptar cualquier cambio hecho a mi archivo .mozconfig?</dt> + <dd>Toca cualquiera de los scripts de configuración en el árbol. No hay dependencia sobre el archivo mozconfig; el archivo puede encontrarse donde sea a tráves de la variable de entorno MOZCONFIG. + <p> </p> + </dd> + <dt>error: file '../../toolkit/locales/en-US/chrome/necko/contents.rdf' doesn't exist at ../../config/make-jars.pl line 418, <STDIN> line 9.</dt> + <dd>Estás tratando de compilar Firefox sin seguir las intrucciones sobre cómo <a href="/es/Configurar_las_opciones_de_compilaci%C3%B3n" title="es/Configurar_las_opciones_de_compilación">Configurar las opciones de compilación</a>. En particular, tu mozconfig <strong>debe</strong> contener el mozconfig por defecto de Firefox: + <pre class="eval">. $topsrcdir/browser/config/mozconfig +# add your custom additional options here +</pre> + + <p> </p> + </dd> + <dt>Initial cvs checkout fails with the message: <code>cvs {{ mediawiki.external('checkout aborted') }}: *PANIC* administration files missing</code></dt> + <dd>No puedes crear un árbol CVS debajo de un directorio llamado "CVS". Es una característica/bug de CVS. CVS espera encontrar cierta administración de archivos debajo del directorio CVS y no funciona si no la encuentra. + <p> </p> + </dd> + <dt>Error: ../coreconf/rules.mk:406: target `c' doesn't match the target pattern</dt> + <dd>Necesitas make 3.80 y no otras versiones como 3.81 + <ul> + <li>make 3.80 ya no está disponible en el instlador de Cygwin, así que lo deberás encontrar por ti mismo. Puedes buscarlo en google como make-3.80-1.tar.bz2, también está disponble<a class="external" href="http://cygwin.paracoda.com/release/make/make-3.80-1.tar.bz2">aquí</a>.</li> + </ul> + + <p> </p> + </dd> +</dl> + +<h3 id="Preguntas_espec.C3.ADficas_sobre_Mac" name="Preguntas_espec.C3.ADficas_sobre_Mac">Preguntas específicas sobre Mac</h3> + +<p> </p> + +<dl> + <dt>Puede compilar una aplicación Mozilla como un binario universal?</dt> + <dd>Sí, mira <a href="/es/Mac_OS_X_Universal_Binaries" title="es/Mac_OS_X_Universal_Binaries">Mac OS X Universal Binaries</a>. + <p> </p> + </dd> + <dt>Cómo puedo usar distcc para ayudar a compilar?</dt> + <dd>TBA. + <p> </p> + </dd> + <dt>Mozilla compila UFS?</dt> + <dd>Sí, ha sido arreglado desde {{ Bug(157036) }}. + <p> </p> + </dd> + <dt>Mozilla corre sobre UFS?</dt> + <dd>Sí. + <p> </p> + </dd> + <dt>Puedo usar CodeWarrior para compilar Mach-O?</dt> + <dd>No, CodeWarrior murió. Mira {{ Bug(119589) }}. + <p> </p> + </dd> + <dt>Luego de re-compilar, ej. layout. Cómo hago que mi FirefoxDebug.app refleje el cambio?</dt> + <dd>make -C browser/app.</dd> +</dl> + +<p>Para errores comunes en Mac y consejos adicionales sobre solución de problemas. Mira <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X#Soluci.C3.B3n_de_problemas" title="es/Requerimientos_para_la_compilación_en_Mac_OS_X#Soluci.C3.B3n_de_problemas">solución de problemas</a> en <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X" title="es/Requerimientos_para_la_compilación_en_Mac_OS_X">Requerimientos para la compilación en Mac OS X</a>.</p> + +<h3 id="Preguntas_sobre_Win32" name="Preguntas_sobre_Win32">Preguntas sobre Win32</h3> + +<p> </p> + +<dl> + <dt>Existe un archivo de proyecto Microsoft Visual Studio para compilar Mozilla?</dt> + <dd>No. Debes usar cygwin y GNU make. + <p> </p> + </dd> + <dt>Puedo correr los comandos para compilar desde cmd.exe?</dt> + <dd>Sí. Make llama la subshell cygwin /bin/sh para ejecutar el comando, así que no hay problema sobre cual shell uses para llamar a make. + <p> </p> + </dd> + <dt>Qué versión del paquete de autoconf de cygwin debo usar?</dt> + <dd>Debido a las incompatibilidades entre autonconf 2.1x y 2.5x, la gente de cygwin escribió un script (wrapper) que determinará qué versión necesitará tu script de configuración y llamará a esa versión. Necesitarás los paquetes autoconf(-wrapper) y autoconf estable. Mira <a class="external" href="http://cygwin.com/ml/cygwin-announce/2001/msg00177.html" rel="freelink">http://cygwin.com/ml/cygwin-announce.../msg00177.html</a> para más detalles + <p> </p> + </dd> + <dt>Las herramientas de Microsoft (CL, LINK, RC) tiran error <em>File not found</em></dt> + <dd>Las variables de entorno INCLUDE y LIB son usadas por las herramientas de Microsoft Visual C++. Comúnmente están configuradas en vcvars32.bat. Tal vez necesites o no MFC y ATL, dependiendo de qué modulos estés compilando. Debajo hay paths que funcionan si Visual C++ está instalado en "C:\msvs" + <pre class="eval">set INCLUDE=C:\msvs\VC\Include;C:\msvs\VC\ATLMFC\Include +set LIB=C:\msvs\VC\Lib;C:\msvs\VC98\ATLMFC\Lib +</pre> + + <p> </p> + </dd> + <dt>cvs update: authorization failed: server XXXX rejected access -- used empty password; try "cvs login" with a real password</dt> + <dd>Estás mezclando wincvs y cygwin cvs. Usa uno o el otro. + <p> </p> + </dd> + <dt>cvs {{ mediawiki.external('checkout aborted') }}: cannot rename file CVS/Entries.Backup to CVS/Entries: Permission denied</dt> + <dd>En cygwin 1.3.13, ntsec está activada. ntsec es un intento de cygwin por obtener una estructura de permiso mas similar a UNIX sobre características de seguridad que Windows NT. El mensaje de error indica que hay una discrepancia de mapeo entre los permisos de unix listados en el archivo de cygwin /etc/password y los usados por Windows NT. Puedes agregar "nontsec" a tu variable de entorno CYGWIN. Para arreglarlo de forma adecuada deberías solucionar el problema de mapeo. + <p> </p> + </dd> + <dt>Al descomprimir, no se encuentra un archivo .dtd</dt> + <dd>Probablemente usaste Winzip para descomprimir los archivos. No hagas eso. Por defecto, Winzip no extrae los archivos sin longitud (0 bytes). Usa otro utilitario. + <p> </p> + </dd> + <dt>nsinstall u otro programa nativo win32 no encuentra un archivo</dt> + <dd>Revisa tu tabla de subida. Ejecuta el comando de montura, deberia devovler algo como esto: + <pre class="eval">c: on /cygdrive/c type user (binmode,noumount) +e: on /cygdrive/e type user (binmode,noumount) +c:\cygwin on / type system (binmode) +c:\cygwin\bin on /usr/bin type system (binmode) +c:\cygwin\lib on /usr/lib type system (binmode) +</pre> + + <p>El sistema de compilado espera que las particiones del disco hayan sido montadas usando /cygdrive como prefijo de la unidad. Si C: o E: no usan /cygwin como prefijo de unidad no podrás compilar Mozilla en esas unidades. Debes montar la unidad manualmente usando:</p> + + <pre class="eval">mount -s "e:\" /cygdrive/e +</pre> + + <p>Si tu árbol fuente está debajo de tu $HOME, el modo de montura debería ser binmode (finales de líneas estilo Unix), de otro modo fallará al compilar. Si el árbol está fuera de tu $HOME, no importa el modo de montura siempre y cuando tu editor reconozca finales de linea estilo Unix.</p> + </dd> + <dt>No such file or directory errors from lines in your mozconfig</dt> + <dd>This can be caused by your mozconfig file having Windows-style line endings. Convert them to UNIX-style and the error should go away.</dd> + <dt>xpidl.exe cae con una violación de acceso</dt> + <dd>Usualmente ocurre por una discordancia entre tu compilador y tus librerías glib y/o libIDL. + <p>Si compilas con Visual Studio .NET, debes enlazar con las version de VC7 de las DLL glib y libIDL. Para Visual Studio .NET 2003, usa las versiones VC7.1. Para Visual Studio 2005, usa VC8.</p> + + <p>El directorio que contenga esas versiones de librerías para tu compilador debe estar en tu PATH antes que cualquier otra versión de las mismas librerías. Los archivos .dll y lib deben ser ejecutable o cygwin no los cargará.</p> + + <p>Mira los <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Windows/Compiladores_Microsoft_gratuitos" title="es/Requerimientos_para_la_compilación_en_Windows/Compiladores_Microsoft_gratuitos">Requerimientos para la compilación en Windows</a> sobre más consejos para compilar con VC7 o superior.</p> + + <p>También en {{ Bug(242870) }} se encuentran disponibles algunas librerías estáticas que pueden ser usadas en lugar de las librerías específicas del compilador.</p> + + <p>Si compilas con VC6, debes asegurarte que no estás usando las librerías de VC7 a la hora de compilar o ejecutar.</p> + </dd> + <dt>configure: error: the midl major version, , does not match the compiler suite version, <Visual C++ nro de versión> -- lo mismo para el linker</dt> + <dd>TLa herramienta cygwin "link.exe" para enlazar no reconoce el objeto enlazador de la suite del compilador Microsoft, o no se encuentra midl. Asegúrate que las herramientas de Microsoft se encuentran antes que cygwin en el PATH (Mira <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Windows#Configurar_el_entorno" title="es/Requerimientos_para_la_compilación_en_Windows#Configurar_el_entorno">las intrucciones</a>), o renombra o quita el archivo /bin/link.exe. Nota que cygwin tal vez modifique el path cuando arranque su shell, asi que también mira <code>export</code>.</dd> + <dt>configure: error: installation or configuration problem: C compiler cannot create executables.</dt> + <dd>Prueba asegurándote que la variable PATH incluya todos los directorios necesarios. Si usas MS Visual Studio, ejecuta vcvars32.bat (que configura las variables PATH, LIB, y INCLUDE). Si tu entorno ha cambiado, tal vez debas eliminar el archivo config.cache (en el directorio mozilla o directorio objeto) y luego volver a compilar.</dd> + <dt>build error: ../coreconf/rules.mk:365: target `c' doesn't match the target pattern</dt> + <dd>Has usado make 3.81 del instalador cygwin. Debes usar make 3.80. Por favor lee <a href="/es/Requerimientos_para_la_compilaci%C3%B3n_en_Windows#make" title="es/Requerimientos_para_la_compilación_en_Windows#make">las instrucciones</a>.</dd> + <dt>fatal error LNK1112: module machine type 'IA64' conflicts with target machine type 'X86'</dt> + <dd>Prueba cambiando el orden de los directorios en las variables PATH, LIB e INCLUDE. Cambia cualquier directorio que incluya cerca del final: "win64" o "IA64" (o "AMD64").</dd> + <dt>LINK : fatal error LNK1104: cannot open file 'atlthunk.lib'</dt> + <dd>De acuerdo con <a class="external" href="http://forums.microsoft.com/msdn/ShowPost.aspx?PostID=64509">this Microsoft forum thread</a>, hay una versión diferente de Active Template Library (ATL) para Platform Software Development Kit -libre- (PSDK), que para Visual Studio. La ATL en el PSDK no soporta código 32-bits, sólo 64-bits; mientras que Visual Studio soporta ambas y no requiere atlthunk.lib. Aparentemente el archivo atlthunk.lib no está disponible y no se pudo compilar desde <a href="/es/Windows_Build_Prerequisites/Free_Microsoft_Compilers" title="es/Windows_Build_Prerequisites/Free_Microsoft_Compilers">freely available tools</a>, incluyendo las herramientas Visual C++ y Visual Studio Express. De todos modos puedes actualizar a la versión full de Visual Studio y utilizar la versión de ATL del mismo, o puedes trabajar en el problema cambiando algunos códigos en atlbase.h (en \include\atl debajo del directorio PSDK). Ejemplo: + <pre class="eval">--- atlbase.h.old 2006-06-08 08:20:26.671875000 -0400 ++++ atlbase.h 2006-06-08 08:13:26.578125000 -0400 +@@ -283,7 +283,7 @@ + } + }; + #pragma pack(pop) +- ++/* + PVOID __stdcall __AllocStdCallThunk(VOID); + VOID __stdcall __FreeStdCallThunk(PVOID); + +@@ -291,6 +291,11 @@ + #define FreeStdCallThunk(p) __FreeStdCallThunk(p) + + #pragma comment(lib, "atlthunk.lib") ++*/ ++ ++// workaround for not having atlthunk.lib in PSDK or VC++ 2005 Express Edition ++#define AllocStdCallThunk() HeapAlloc(GetProcessHeap(),0,sizeof(_stdcallthunk)) ++#define FreeStdCallThunk(p) HeapFree(GetProcessHeap(), 0, p) + + #elif defined (_M_AMD64) + #pragma pack(push,2) +</pre> + + <p>También hubo que borrar el directorio objeto y volver a compilar desde el principio, de modo que el compilador tome el cambio.</p> + </dd> + <dt>Compilar o generar un ejecutable con cygwin y VS6.0 termina en FIND: Parameter format not correct</dt> + <dd>Hay una confusión entre System32 "find" y /usr/bin/find de cygwin. Lo que queremos es el find de cygwin. Es causado por el orden del path. Algunas posibles soluciones serían: + <ul> + <li>Renombrar temporalmente system32/find.exe</li> + <li>Asegurarse que en la entrada del path esté primero cygwin que system32</li> + </ul> + </dd> + <dt>Empaqueté Firefox a través del instalador:<code> make -C ${OBJ_DIR}/browser/installer installer</code> sin problemas. Al ejecutar pide el archivo perdido mozz.dll; la instalación falla.</dt> + <dd>Tanto Firefox como Thunderbird,deberían compilarse con las etiquetas --enable-static --disable-shared</dd> + <dt>shlibsign.exe - Entry Point Not Found; El procedimiento CERT_GetFirstEmailAddress no ha sido localizado en la librería nss3.dll.</dt> + <dd>Tal vez tengas muchos nss3.dll en tu máquina y en tu path. Haz una búsqueda para todas las copias de este archivo. Mueve todas las copias que se encuentren dentro del árbol de Firefox durante la compilación y vuelve a colocarlos cuando se termine la compilación.</dd> +</dl> + +<h3 id="Preguntas_sobre_Mingw32" name="Preguntas_sobre_Mingw32">Preguntas sobre Mingw32</h3> + +<ul> + <li>Si la compilación o la configuración fallan debido a que se perdió w32api, agrega el directorio /include de mingw32 al final de la variable de entorno INCLUDE. Las librerías o binarios mingw32 no deberían ser necesarios, sólo los headers.</li> +</ul> + +<h3 id="Preguntas_sobre_Unix" name="Preguntas_sobre_Unix">Preguntas sobre Unix</h3> + +<dl> + <dt>Galeon necesita libgtksuperwin.so pero no tengo ese archivo en mi Mozilla gtk2, dónde está?</dt> + <dd>Sólo Mozilla gtk1 compila libgtksuperwin.so. Si deseas usar galeon con compilación gtk2, debes usar galeon2. + <p> </p> + </dd> + <dt>Por qué la configuración dice que necesito libIDL >= 0.6.3 cuando tengo instalado libIDL 0.8.x?</dt> + <dd>libIdl 0.8.x sólo puede ser usado compilando con gtk2. Por defecto, Mozilla compila con gtk1. Para usar libIDl 0.8.x y gtk2 debes especificar --enable-default-toolkit=gtk2 en la línea de comando de laconfiguración o .mozconfig. NOTA: Esto es viejo y ha sido arreglado en Mozilla 1.8</dd> + <dt>Cómo compilo en Solaris 10 x86 (SeaMonkey)?</dt> + <dd>Tuve que hacer lo siguiente para conseguir un entorno que funcione:</dd> + <dd>1. instalar forte (Gratis desde Sun)</dd> + <dd>2. Instalar gmake (desde blastwave)</dd> + <dd>3. mv /usr/ucb/cc /usr/ucb/cc.hold</dd> + <dd>4. CFLAGS="-xlibmil"; exporta CFLAGS</dd> + <dd>5. CXXFLAGS="-xlibmil -xlibmopt -features=tmplife -norunpath"; exporta CXXFLAGS</dd> + <dd>6. LDFLAGS='-R$ORIGIN -R/usr/sfw/lib -R/opt/sfw/lib -R/usr/local/lib -R/opt/csw/lib'; exporta LDFLAGS</dd> + <dd>7. PATH=$PATH:/opt/SUNWspro/bin:/opt/csw/bin:/opt/csw/sbin:/usr/ucb/bin:/usr/ccs/bin; exporta PATH</dd> + <dd>8. LD_LIBRARY_PATH=/opt/SUNWspro/lib:$LD_LIBRARY_PATH; exporta LD_LIBRARY_PATH</dd> + <dd>9. Crear un archivo mozconfig y compilar normalmente.</dd> + <dd>10. La generación del paquete (tar y gzip) falló, así que simplemente lo cree manualmente con los archivos resultantes en el directorio dist.</dd> + <dt>libxpcom_core.so: cannot restore segment prot after reloc: Permission denied</dt></dt> + <dd>Probablemente estés usando Fedora Core 5, o alguna otra distribución de Linux que tiene activado SELinux. Para arreglarlo, utiliza el comando 'chcon -t chcon -t texrel_shlib_t lib*' en el directorio dist/bin.</dd></dd> +</dl> diff --git a/files/es/mozilla/developer_guide/source_code/código_fuente_de_mozilla_(cvs)/index.html b/files/es/mozilla/developer_guide/source_code/código_fuente_de_mozilla_(cvs)/index.html new file mode 100644 index 0000000000..248231aee9 --- /dev/null +++ b/files/es/mozilla/developer_guide/source_code/código_fuente_de_mozilla_(cvs)/index.html @@ -0,0 +1,149 @@ +--- +title: Código fuente de Mozilla (CVS) +slug: Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS) +tags: + - Documentación_de_compilado +translation_of: Mozilla/Developer_guide/Source_Code/CVS +--- +<p> </p> +<p>Aquellos que desarrollan de forma muy activa pueden comprobar el último código fuente utilizando CVS. Si vas a realizar parches y arreglos este es el método más adecuado, porque te permite ver los últimos cambios y unirlos con los tuyos.</p> +<p>Si quieres compilar el producto para su publicación, es mejor <a href="es/Descargar_el_c%c3%b3digo_fuente_de_Mozilla">Descargar el código fuente de Mozilla</a> en un archivo tar.</p> +<h3 id="Gu.C3.ADa_r.C3.A1pida" name="Gu.C3.ADa_r.C3.A1pida">Guía rápida</h3> +<p><span class="comment">I seem to not be editing this page in what others on this development site deem appropriate. So, if you are going to just remove this section, can you please be so kind as to suggest an alternate title of a new page that I can put this information on? Thanks, Jeff Carr</span></p> +<p>Los pasos básicos para descargar la rama (inestable) del código fuente de Firefox son:</p> +<pre class="eval">cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co mozilla/client.mk +cd mozilla +make -f client.mk checkout MOZ_CO_PROJECT=browser +</pre> +<h3 id="Comenzando" name="Comenzando">Comenzando</h3> +<p>CVS significa "Concurrent Versioning System". Para conocer más sobre CVS en general visita <a class="external" href="http://ximbiot.com/cvs/manual/">ximbiot.com</a>, o lee el <a class="external" href="http://ximbiot.com/cvs/cvshome/docs/blandy.html">tutorial</a>.</p> +<p>Cualquiera puede descargar ("check out") el código fuente vía CVS, pero solo ciertas personas pueden subir cambios ("check in" o "commit"). Esas personas son los <a class="external" href="http://www.mozilla.org/owners.html">dueños de módulos</a> y sus delegados. Lee nuestro documento sobre <a class="external" href="http://www.mozilla.org/hacking/">mejorar mozilla</a> para saber como puedes tener la habilidad de enviar cambios. Quizá quieras leer tambien acerca de <a class="external" href="http://www.mozilla.org/cvs-ssh-faq.html">como usar SSH para conectar al CVS</a>.</p> +<h4 id="Requisitos" name="Requisitos">Requisitos</h4> +<p>Para descargar el código fuente, necesitas <a class="external" href="http://www.nongnu.org/cvs/">CVS</a> versión 1.11 o posterior. La versión 1.12.13 no funciona con el servidor CVS, y el resultado es que el programa se cuelga, sin embargo la versión 1.12.9 parece funcioanr. Además, debes usar <a class="external" href="http://www.gnu.org/software/make/">GNU make</a> para descargar y compilar Mozilla. No se acepta ningún otro programa "make". En windows, mac y sistemas GNU habituales (como GNU/Linux), usa "make" para ejecutar GNU make; en la mayoría de los sistemas UNIX no GNU (como por ejemplo Solaris), usa "gmake".</p> +<h3 id="Configuraci.C3.B3n_de_cliente_CVS" name="Configuraci.C3.B3n_de_cliente_CVS">Configuración de cliente CVS</h3> +<p>El "cvsroot" (cadena de identificación del repositorio) que se utiliza para acceder a CVS Mozilla de forma anónima es:</p> +<pre class="eval"><a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot +</pre> +<p>Si usas una interface CVS gráfica, utiliza los siguientes datos del servidor:</p> +<ul> + <li><b>host</b> (servidor): "cvs-mirror.mozilla.org"</li> + <li><b>repository path</b> (ruta del repositorio): "/cvsroot"</li> + <li><b>user</b> (usuario): "anonymous"</li> + <li><b>connection type</b> (tipo de conexión): pserver</li> + <li><b>port</b> (puerto): default (2401)</li> +</ul> +<h3 id="Elegir_un_proyecto_para_descargar" name="Elegir_un_proyecto_para_descargar">Elegir un proyecto para descargar</h3> +<p>Ya que se usa el mismo código para compilar distintas aplicaciones debes elegir qué aplicación quieres descargar en la línea de comandos usando la variable <code>MOZ_CO_PROJECT</code>. esta información debe proporcionarse cuando se necesite para la descarga del código fuente actual (lee la <a href="#Checkout">sección</a> apropiada sobre la <a href="#Checkout_2">descarga</a> más abajo, dependiendo de la rama que quieras descargar). Las posibles opciones incluyen:</p> +<dl> + <dt> + browser </dt> + <dd> + El navegador "Firefox".</dd> + <dt> + mail </dt> + <dd> + El cliente de correo/noticias "Thunderbird".</dd> + <dt> + suite </dt> + <dd> + La suite traditional "Mozilla" SeaMonkey con navegador, correo/noticias, editor web, y otras aplicaciones.</dd> + <dt> + minimo </dt> + <dd> + El navegador para pequeños dispositivos.</dd> + <dt> + composer </dt> + <dd> + El editor HTML.</dd> + <dt> + calendar </dt> + <dd> + La aplicación de calendario "Sunbird".</dd> + <dt> + xulrunner </dt> + <dd> + El interprete de nueva generación para aplicaciones XUL.</dd> + <dt> + camino </dt> + <dd> + El navegador nativos para Macintosh, "Camino".</dd> + <dt> + tamarin </dt> + <dd> + La máquina virtual Adobe Ecmascript.</dd> + <dt> + all </dt> + <dd> + Descarga todos los códigos fuente de todos los proyectos de arriba, además de código útil adicional</dd> +</dl> +<p>Se pueden especificar varios proyectos con comas: <code>MOZ_CO_PROJECT=suite,browser,xulrunner</code>.</p> +<p><b>Ten en cuenta</b> que si estas usando un archivo <tt><a href="es/Configurar_las_opciones_de_compilaci%c3%b3n#Usando_un_archivo_de_configuraci.C3.B3n_.mozconfig">.mozconfig</a></tt> personalizado, debes especificar también el <code>MOZ_CO_PROJECT</code> allí, en vez de hacerlo en la línea de comandos.</p> +<h3 id="Descargar_el_c.C3.B3digo_de_una_rama_nueva" name="Descargar_el_c.C3.B3digo_de_una_rama_nueva">Descargar el código de una rama nueva</h3> +<h4 id="Comprueba_el_Tinderbox" name="Comprueba_el_Tinderbox">Comprueba el Tinderbox</h4> +<p>Antes de descargar una rama, debes comprobar siempre el <a href="es/Tinderbox">Tinderbox</a> apropiado para asegurarte que el código base no esta roto. Si hay tinderboxes en rojo, normalmente es recomendable esperar hasta que estén en verde antes de descargar una rama.</p> +<h4 id="Rama_HEAD" name="Rama_HEAD">Rama HEAD</h4> +<p>Para descargar una rama nuevo desde cero, toma el archivo <code>client.mk</code> que es el que contiene las instruciones que se usarán para descargar el resto de la rama:</p> +<pre class="eval">$ cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co mozilla/client.mk +</pre> +<p>Nota: Si ya tienes un archivo <a href="es/Configurar_las_opciones_de_compilaci%c3%b3n#Usando_un_archivo_de_configuraci.C3.B3n_.mozconfig">.mozconfig</a>, quizá necesites descargar los siguientes archivos:</p> +<dl> + <dt> + Firefox </dt> + <dd> + <pre>cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig</pre> + </dd> + <dt> + Thunderbird </dt> + <dd> + <pre>cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig</pre> + </dd> +</dl> +<h4 id="Rama_espec.C3.ADfica" name="Rama_espec.C3.ADfica">Rama específica</h4> +<p>Si quieres descargar el código de alguna <a class="external" href="http://ximbiot.com/cvs/wiki/index.php?title=CVS--Concurrent_Versions_System_v1.12.12.1:_Branching_and_merging">rama CVS</a> específica, usa:</p> +<pre class="eval">$ cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co -r RAMA mozilla/client.mk +</pre> +<p>Por ejemplo, para descargar la rama en desarrollo de Firefox 2.0, reemplaza RAMA por MOZILLA_1_8_BRANCH. Para ver las ramas disponibles en Mozilla, mira las <a href="es/Etiquetas_CVS">Etiquetas CVS</a>.</p> +<p>Para información sobre como descargar los archivos <code>.mozconfig</code> de un proyecto específico, lee la <a href="#_Rama_HEAD">sección anterior</a> (Por supuesto aplicable a otras ramas diferentes de HEAD también).</p> +<h4 id="Descargar" name="Descargar">Descargar</h4> +<p>Después de elegir la rama correspondiente, ejecuta:</p> +<pre class="eval">$ cd mozilla +$ make -f client.mk checkout MOZ_CO_PROJECT=<i>opción,opción</i> +</pre> +<p>Cómo se mencionó arriba, si ya tienes especificado la rama en un archivo .mozconfig personalizado, no necesitas hacerlo en la línea de comando.</p> +<div class="note"> + Utiliza siempre <code>client.mk</code> para descargar las fuentes Mozilla: no descargues directamente el módulo <code>mozilla/</code>, se descargían varios subprojectos como NSS, NSPR y LDAP C SDK, pero el desarrollo habitual de mozilla se da en el tronco (trunk).</div> +<h4 id="Fecha_espec.C3.ADfica" name="Fecha_espec.C3.ADfica">Fecha específica</h4> +<p>Si quieres descargar el código de alguna fecha en particular utiliza la variable MOZ_CO_DATE. Por ejemplo <tt>MOZ_CO_DATE="20 Oct 2006 17:00 PDT"</tt></p> +<p>También se puede agregar en el .mozconfig, o escribir en la línea de comandos:</p> +<pre class="eval">$ cd mozilla +$ make -f client.mk checkout MOZ_CO_DATE="20 Oct 2006 17:00 PDT" MOZ_CO_PROJECT=<i>option,option</i> +</pre> +<h3 id="Cambiar_el_.C3.A1rbol_de_c.C3.B3digo_a_una_rama_diferente" name="Cambiar_el_.C3.A1rbol_de_c.C3.B3digo_a_una_rama_diferente">Cambiar el árbol de código a una rama diferente</h3> +<h4 id="Branch_HEAD" name="Branch_HEAD">Branch HEAD</h4> +<p>Para actualizar el árbol de código (ya sea la rama HEAD o cualquier otra) a la última versión, primero ejecuta:</p> +<pre class="eval">$ cd mozilla +$ cvs up -A client.mk +</pre> +<p>La opción -a elimina cualquier información "pegada a la rama", actualizaría la rama HEAD.</p> +<h4 id="Rama_espec.C3.ADfica_2" name="Rama_espec.C3.ADfica_2">Rama específica</h4> +<p>Para actualizar el árbol de código de una rama especifica descargado con anterioridad usa:</p> +<pre class="eval">$ cd mozilla +$ cvs up -r RAMA client.mk +</pre> +<p>Reemplaza RAMA con la etiqueta de la rama que desees actualizar.</p> +<h3 id="Actualizar_el_.C3.A1rbol_de_c.C3.B3digo" name="Actualizar_el_.C3.A1rbol_de_c.C3.B3digo">Actualizar el árbol de código</h3> +<p>Para actualizar el árbol de código simplemente haz lo siguiente:</p> +<pre class="eval">$ make -f client.mk checkout MOZ_CO_PROJECT=<i>opción,opción</i> +</pre> +<p>Igual que siempre, si tienes un .mozconfig personalizado con MOZ_CO_PROJECT definido, no necesitas repetirlo en la línea de comando.</p> +<h3 id="Creando_un_archivo_Diff" name="Creando_un_archivo_Diff">Creando un archivo Diff</h3> +<p>Para crear un diff de un archivo local para aplicar en el archivo actual en reposición, usa:</p> +<pre class="eval">$ cvs diff -u8p NOMBREDEARCHIVO +</pre> +<p>Mira <a href="es/Crear_un_parche">Crear un parche</a> para más información.</p> +<h3 id="Convertir_el_.C3.A1rbol_de_c.C3.B3digo_descargado" name="Convertir_el_.C3.A1rbol_de_c.C3.B3digo_descargado">Convertir el árbol de código descargado</h3> +<p>Los árboles descargados desde mozilla.org (<a href="es/Descargar_el_c%c3%b3digo_fuente_de_Mozilla">tarballs con el código fuente</a>) ya poseen información CVS, cómo una descarga normal. Puedes actualizarlo como cualquier otro árbol al la última versión, sin ninguna acción en especial. Para ver cómo actualizar un árbol, mira la sección anterior</p> +<p><span class="comment">interwiki link</span></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/Mozilla_Source_Code_(CVS)", "fr": "fr/Obtenir_le_code_source_de_Mozilla_via_CVS", "ja": "ja/Mozilla_Source_Code_(CVS)", "zh-cn": "cn/\u901a\u8fc7CVS\u83b7\u53d6\u6e90\u7801" } ) }}</p> diff --git a/files/es/mozilla/developer_guide/source_code/index.html b/files/es/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..47a6d9eb88 --- /dev/null +++ b/files/es/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,56 @@ +--- +title: Working with Mozilla source code +slug: Mozilla/Developer_guide/Source_Code +tags: + - Desarrollo de Mozilla + - Necesita traducción + - TopicStub +translation_of: Mozilla/Developer_guide/Source_Code +--- +<p>Los artículos a continuación le ayudarán a tener acceso al código fuente de Mozilla, aprender a navegar por el código y cómo hacer que los cambios que proponga se verifiquen en el árbol.</p> + +<table class="mainpage-table"> + <tbody> + <tr> + <td colspan="2"> + <h2 id="Temas_de_la_documentación">Temas de la documentación</h2> + </td> + </tr> + <tr> + <td> + <p><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code/Mercurial" style="font-weight: 700;">Obtener una máquina virtual del sistema de compilación Mozilla preconfigurado</a></p> + + <dl> + <dt></dt> + <dd>Si planea contribuir con el proyecto de Mozilla, la mejor forma de obtener el código es verificarlo desde el repositorio de control de versiones. Aprenda cómo hacerlo aquí.</dd> + <dt><a class="internal" href="/En/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Mozilla Source Code (HTTP//FTP)">Descargar el código usando HTTP o FTP</a></dt> + <dd>Si desea buscar el código para una versión específica de un producto Mozilla en particular, puede preferir descargar un archivo de código fuente.</dd> + <dt><a class="internal" href="/en/Viewing_and_searching_Mozilla_source_code_online" title="En/Viewing and searching Mozilla source code online">Ver y buscar el código fuente de Mozilla en línea</a></dt> + <dd>Aprenda a usar MXR, la herramienta de búsqueda y navegación en línea de Mozilla para acceder al código fuente. Esta no es una buena manera de descargar el código, pero es una excelente forma de buscarlo.</dd> + <dt><a class="internal" href="/en/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla Source Code Directory Structure">Navegar por el código fuente de Mozilla</a></dt> + <dd>Obtenga información sobre las distintas carpetas en el árbol de fuentes de Mozilla y sobre cómo encontrar lo que está buscando.</dd> + <dt><a class="external" href="/en/Introduction#Find_a_bug_we%27ve_identified_as_being_good_for_newcomers" title="/en/Introduction#Find_a_bug_we%27ve_identified_as_being_good_for_newcomers">Errores para los recién llegados</a></dt> + <dd>Si eres nuevo en el proyecto y quieres algo en lo que trabajar, mira aquí.</dd> + </dl> + </td> + <td> + <dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style">Guía de estilo de codificación de Mozilla</a></dt> + <dd>La guía de estilo de código brinda información sobre cómo debe dar formato a su código fuente para asegurarse de que los revisores no se burlen.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Interface_development_guide">Guía de desarrollo de la interfaz</a></dt> + <dd>Pautas y documentación sobre cómo crear y actualizar las interfaces XPCOM.</dd> + <dt><a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">Probar los servidores</a></dt> + <dd>Los productos de Mozilla se basan en al menos tres plataformas. Si no tiene acceso a todas ellas, puede usar los servidores de prueba para probar sus parches y asegurarse de que las pruebas pasen.</dd> + <dt><a class="internal" href="/en/Creating_a_patch" title="En/Creating a patch">Crear un parche</a></dt> + <dd>Una vez que haya realizado un cambio en el código de Mozilla, el siguiente paso (después de asegurarse de que funciona) es crear un parche y enviarlo para su revisión. Este artículo debe ser actualizado completamente para Mercurial.</dd> + <dt><a class="external" href="http://www.mozilla.org/hacking/committer/" title="http://www.mozilla.org/hacking/committer/">Obtener el acceso de confirmación para el código fuente</a></dt> + <dd>¿Te sientes listo para unirte a los pocos, a los orgullosos, a los que se comprometen? Averigüe cómo obtener acceso de check-in al código de Mozilla.</dd> + <dt><a class="internal" href="/En/Developer_Guide/Source_Code/CVS" title="En/Mozilla Source Code (CVS)">Obtener un código de Mozilla más antiguo desde CVS</a></dt> + <dd>Las versiones anteriores del código fuente de Mozilla, así como las versiones actuales de NSS y NSPR, se guardan en un repositorio de CVS. Aprende sobre eso en este artículo.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code", "pt": "pt/Developer_Guide/Codigo_Fonte" } ) }}</p> diff --git a/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html b/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html new file mode 100644 index 0000000000..76ea78e7b0 --- /dev/null +++ b/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html @@ -0,0 +1,37 @@ +--- +title: Compilar Firefox con código en Rust +slug: Mozilla/Firefox/Compilar_Firefox_con_codigo_en_Rust +tags: + - Compilación + - Gecko + - rust +translation_of: Archive/Mozilla/Firefox/Building_Firefox_with_Rust_code +--- +<div>{{FirefoxSidebar}}</div><p>En mayo de 2015, <a href="https://www.rust-lang.org/">el lenguaje de programación Rust</a> alcanzó su objetivo de estabilidad 1.0 y se comenzaron diversos experimentos que consistieron en escribir partes de Gecko en Rust. Esta página contiene una guía de orientación aproximada para las personas que trabajan en esta área.</p> + +<p>Consulte el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1135640">informe n.º 1135640</a> (<em>oxidation</em>) para ver el seguimiento integral de la integración de componentes en el lenguaje Rust.</p> + +<h2 id="Activación_del_código_en_Rust">Activación del código en Rust</h2> + +<p>Con el trabajo realizado en el <a class="bz_bug_link + bz_status_RESOLVED bz_closed" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1161339" title="RESOLVED FIXED - Support rust files in moz.build SOURCES">informe n.º 1161339</a> se implementó compatibilidad básica para compilar código en Rust. Esta compatibilidad está activada para las compilaciones oficiales de la mayoría de las plataformas, con la excepción de las compilaciones que realice localmente. Si en su «path» tiene «rustc», puede añadir:</p> + +<pre>ac_add_options --enable-rust</pre> + +<p>… a su archivo <a href="/en-US/docs/Configuring_Build_Options">mozconfig</a> y la compilación probablemente funcionará. Normalmente apuntamos a versiones estables de Rust pero, en ocasiones, para admitir algunas plataformas nuevas se necesitan versiones especiales de las herramientas de compilación. Si aún no tiene Rust, utilice la herramienta «<a href="https://www.rustup.rs/">rustup</a>» para instalarlo.</p> + +<h2 id="Poner_a_prueba_el_código_en_Rust">Poner a prueba el código en Rust</h2> + +<p>En el árbol hay una sencilla prueba unitaria de vinculación. Es posible utilizarla para comprobar que Rust esté activado y funcione correctamente con su configuración de compilaciones.</p> + +<pre>./mach gtest rust.*</pre> + +<p>Revise que la prueba <strong>rust.CallFromCpp</strong> se supere, junto con cualquier otra que haya.</p> + +<h2 id="Adición_de_código_en_Rust">Adición de código en Rust</h2> + +<p>Para agregar código nuevo en Rust se requiere añadir el archivo .rs de nivel superior para agruparlo en un cajón (<em>crate</em>) de SOURCES en moz.build.</p> + +<p>Debido a límites de Cargo y al sistema de compilaciones de Firefox, por el momento solo admitimos cajones sencillos, sin dependencias. No empleamos Cargo, sino que creamos un archivo rlib a partir de todos los archivos rust enumerados en SOURCES. El compilador de Rust buscará los módulos internos según los nombres de archivo de código fuente, pero las referencias de <code>extern crate</code> no se resolverán.</p> + +<p>El sistema de compilaciones generará un cajón especial para una «biblioteca unificada de Rust», compilada como una biblioteca estática (<code>librul.a</code>) que a su vez se enlaza en <code>XUL</code>, de modo que todos sus símbolos públicos estén disponibles para el código en C++.</p> diff --git a/files/es/mozilla/firefox/edición_de_desarrollador/index.html b/files/es/mozilla/firefox/edición_de_desarrollador/index.html new file mode 100644 index 0000000000..12642f7044 --- /dev/null +++ b/files/es/mozilla/firefox/edición_de_desarrollador/index.html @@ -0,0 +1,59 @@ +--- +title: Edición de Desarrollador +slug: Mozilla/Firefox/Edición_de_Desarrollador +tags: + - Firefox + - Iniciado + - Lanzamiento +translation_of: Mozilla/Firefox/Developer_Edition +--- +<div>{{FirefoxSidebar}}</div><p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/9143/firefox-dev-ed_logo-only_1024.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 256px;">La versión de Firefox a la medida de los desarrolladores web. (Versión Actualizada)</p> + +<p><a href="https://download.mozilla.org/?product=firefox-aurora-latest-l10n&os=win&lang=es-ES" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Developer Edition </a></p> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="Las_últimas_funciones_de_Firefox"><strong>Las últimas funciones de Firefox</strong></h3> + +<p>Firefox Developer Edition sustituye al canal Aurora en el <a href="https://wiki.mozilla.org/Release_Management/Release_Process">Proceso de lanzamiento de versiones de Firefox</a>. En Developer Edition, como en Aurora, las caracteristicas se lanzan cada seis semanas, despues de que se hayan estabilizado en Nightly builds.</p> + +<p>Utilizando Firefox Developer Edition, tienes acceso a las herramientas y a las caracteristicas de la plataforma al menos 12 semanas antes de que lleguen a alcanzar el canal principal de lanzamiento Firefox.</p> + +<p><a href="/en-US/Firefox/Releases/35">Descubre las novedades de Firefox Developer Edition.</a><a href="https://developer.mozilla.org/en-US/Firefox/Releases/52">.</a></p> +</div> + +<div class="column-half"> +<h3 id="Herramientas_de_Desarrollo_Experimentales"><strong>Herramientas de Desarrollo Experimentales</strong></h3> + +<p>Incluiremos herramientas de desarrollo que aún no están todavía del todo listas para ser lanzadas en la versión final de Firefox. Por ejemplo <a href="https://developer.mozilla.org/es/docs/Tools/Valence">Valence add-on (Adaptador de Herramientas Firefox) </a>, la cual te permite conectar las <a href="https://developer.mozilla.org/es/docs/Tools">Herramientas de Desarrollo Firefox</a> con las de otros navegadores , como Chrome en android o Safari en IOS.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Un_Perfil_Separado"><strong>Un Perfil Separado</strong></h3> + +<p>Firefox Developer Edition utiliza un perfil separado de las otras versiones de Firefox instaladas en tu ordenador. Esto hace que puedas intercambiar más facilmente entre las versiones ya lanzadas o las betas de Firefox.</p> +</div> + +<div class="column-half"> +<h3 id="Configuración_para_Desarrolladores_Web"><strong>Configuración para Desarrolladores Web</strong></h3> + +<p><span id="result_box" lang="es"><span>Hemos establecido valores de preferencia predeterminados adaptados a los desarrolladores web.</span> <span>Por ejemplo, {{glossary ("chrome")}} y depuración remota están habilitados de forma predeterminada.</span></span></p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Una_Apariencia_Distinta"><strong>Una Apariencia Distinta</strong></h3> + +<p>Incluidos accesos directos a las herramientas de desarrollo</p> +</div> + +<div class="note"> +<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span><strong>Nota</strong>: Esto significa que la primera vez que inicie Developer Edition, verá un navegador totalmente no personalizado, sin complementos, marcadores o historial.</span> <span>Puedes <a href="https://support.mozilla.org/es/kb/como-configuro-firefox-sync?redirectlocale=en-US&redirectslug=how-do-i-set-up-firefox-sync">utilizar Firefox Sync</a> si quieres unificar tu configuración entre Developer Edition y otras ediciones de Firefox.</span></span></div> +</div> +</div> + +<p> </p> diff --git a/files/es/mozilla/firefox/edición_de_desarrollador/revertir/index.html b/files/es/mozilla/firefox/edición_de_desarrollador/revertir/index.html new file mode 100644 index 0000000000..a4df9a3ba6 --- /dev/null +++ b/files/es/mozilla/firefox/edición_de_desarrollador/revertir/index.html @@ -0,0 +1,25 @@ +--- +title: Revertir +slug: Mozilla/Firefox/Edición_de_Desarrollador/Revertir +translation_of: Mozilla/Firefox/Developer_Edition/Reverting +--- +<div>{{FirefoxSidebar}}</div><h2 id="Revertir_el_tema_Firefox_Developer_Edition">Revertir el tema Firefox Developer Edition</h2> + +<p><br> + Si quieres usar Firefox Developer Edition, pero prefieres el tema 'Australis' usado en Firefox y Firefox Beta, puedes cambiarlo: simplemente abre el panel "Personalizar" y haz clic en el botón "Usar el tema Firefox Developer Edition".</p> + +<p>{{EmbedYouTube("OvJwofTjsNg")}}</p> + +<p>Ten en cuenta que el tema Firefox Developer Edition no es aún compatible con temas ligeros. Si quieres usar un tema ligero, tendrás que volver al tema 'Australis'.</p> + +<h2 id="Revertir_a_Firefox_Aurora">Revertir a Firefox Aurora</h2> + +<p><br> + Si quieres disfrutar de todas las características pre-Beta de Firefox Developer Edition, descartando el resto de cambios, puedes revertir el navegador a algo parecido al viejo Firefox Aurora. Esto también restaurará tu perfil y datos de sesión previos a la actualización. Es un proceso de dos pasos, que debes de seguir en este orden:</p> + +<ol> + <li>Abre Preferencias y desmarca la opción "Permitir a Firefox Developer Edition y Firefox ejecutarse al mismo tiempo". Se te avisará de que es necesario reiniciar el navegador.</li> + <li>Tras reiniciar, podrás revertir la aplicación del tema Firefox Developer Edition abriendo el panel "Personalizar" y haciendo clic en el botón "Usar el tema Firefox Developer Edition".</li> +</ol> + +<p> </p> diff --git a/files/es/mozilla/firefox/experimental_features/index.html b/files/es/mozilla/firefox/experimental_features/index.html new file mode 100644 index 0000000000..56c26f6755 --- /dev/null +++ b/files/es/mozilla/firefox/experimental_features/index.html @@ -0,0 +1,724 @@ +--- +title: Funciones experimentales de Firefox +slug: Mozilla/Firefox/Experimental_features +tags: + - Experimental + - Firefox + - Preferencias + - características +translation_of: Mozilla/Firefox/Experimental_features +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">Para probar nuevas características, Mozilla publica una versión de prueba del navegador Firefox, <a href="https://nightly.mozilla.org/">Firefox Nightly</a>, cada día. Características experimentales, por ejemplo implementaciones de estándares de plataforma Web, están disponibles. Esta página lista características que están en versiones Nightly de Firefox junto con información sobre cómo activarlas, si es necesario. Puedes probar tus sitios Web y aplicaciones antes de que se lancen las características y confirmar que todo seguirá funcionando con las últimas prestaciones de tecnología Web.</p> + +<p>Para probar esas características experimentales, necesitas descargar <a href="https://nightly.mozilla.org/">Firefox Nightly</a> o <a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a>.</p> + +<h2 id="HTML">HTML</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Característica</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox</th> + <th scope="col">Preferencia</th> + </tr> + <tr> + <td><strong>{{HTMLElement("dialog")}}</strong><br> + Elemento dialog incluyendo APIs de DOM para interactuar con este. La implementación de diálogos modales y accesibilidad sigue faltando.</td> + <td>Desactivado<br> + <sub>(disponible desde 53)</sub></td> + <td>Desactivado<br> + <sub>(disponible desde 53)</sub></td> + <td>---</td> + <td>---</td> + <td><code>dom.dialog_element.enabled</code></td> + </tr> + </thead> +</table> + +<h2 id="CSS">CSS</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Característica</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox</th> + <th scope="col">Preference</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>Subgrids</strong></td> + <td> + <p>Desactivado</p> + + <p>(reconocido pero aún no implementado)</p> + </td> + <td> + <p>Desactivado</p> + + <p>(reconocido pero aún no implementado)</p> + </td> + <td> + <p>Desactivado</p> + + <p>(reconocido pero aún no implementado)</p> + </td> + <td> + <p>Desactivado</p> + + <p>(reconocido pero aún no implementado)</p> + </td> + <td><code>layout.css.grid-template-subgrid-value.enabled</code></td> + </tr> + <tr> + <td><strong>Display stray control characters in CSS as hex boxes</strong><br> + This feature renders control characters (Unicode category Cc) other than <em>tab</em> (<code>U+0009</code>), <em>line feed</em> (<code>U+000A</code>), <em>form feed</em> (<code>U+000C</code>), and <em>carriage return</em> (<code>U+000D</code>) as a hexbox when they are not expected.</td> + <td>43</td> + <td>43</td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1329613">No habilitado</a></td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1329613">No habilitado</a></td> + <td><code>layout.css.control-characters.enabled</code> or <code>layout.css.control-characters.visible</code></td> + </tr> + <tr> + <td><strong>Positioned CSS Masks</strong><br> + A subset of CSS Masks that includes <a href="/en-US/docs/Web/CSS/CSS_Masks">longhand properties of CSS Masks</a>, as well as a change in the shorthand property</td> + <td>51</td> + <td>51</td> + <td>53</td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1251161">No habilitado</a></td> + <td>Controlled by a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).</td> + </tr> + <tr> + <td> + <p><strong>The</strong> <strong><code>font-variation-settings</code> property</strong><br> + The {{cssxref("font-variation-settings")}} provides low-level control over OpenType or TrueType font typographic features, by specifying the four letter axis names of the features you want to vary, along with their variation values.</p> + </td> + <td>No habilitado<br> + <sub>(disponible desde la versión 53)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 53)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 53)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 53)</sub></td> + <td> + <p><code>layout.css.font-variations.enabled</code><br> + Functions only in Mac OS Sierra (and later).<br> + <br> + For the downloadable fonts on axis-praxis, you also need <code>gfx.downloadable_fonts.keep_variation_tables</code> (in Firefox 54 and later)</p> + </td> + </tr> + <tr> + <td><strong>The <code>touch-action</code> CSS property</strong><br> + The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification and allows you to specify how and in what way the user is able to manipulate an object by touch.</td> + <td>50</td> + <td>—</td> + <td>—</td> + <td>—</td> + <td><code>layout.css.touch_action.enabled</code></td> + </tr> + <tr id="shape-outside"> + <td> + <p><strong>The <code>shape-outside</code> CSS property</strong><br> + The {{cssxref("shape-outside")}} CSS property is part of the {{SpecName("CSS Shapes")}} specification and allows you to specify a float area causing inline contents to wrap around a shape.</p> + + <p>Firefox currently implements the <code><shape-box></code> values ({{bug(1309467)}}) as well as the <code>circle()</code> ({{bug(1311244)}}), <code>ellipse()</code> ({{bug(1326406)}}), and <code>polygon()</code> ({{bug(1326409)}}) functions. {{cssxref("shape-outside")}} is animatable desde la versión Firefox 57 ({{bug(1289049)}}).</p> + </td> + <td>No habilitado<br> + <sub>(disponible desde la versión 53)</sub></td> + <td>—</td> + <td>—</td> + <td>—</td> + <td><code>layout.css.shape-outside.enabled</code></td> + </tr> + <tr> + <td><strong>The <code>shape-image-threshold</code> CSS property</strong><br> + The {{cssxref("shape-imahge-threshold")}} CSS property is part of the {{SpecName("CSS Shapes")}} specification, and allows you to specify the alpha channel threshold used to extract the shape using an image as the value for {{cssxref("shape-outside")}}.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td><code>layout.css.shape-outside.enabled</code></td> + </tr> + <tr> + <td><strong>La propiedad <code>contain</code> de CSS</strong><br> + La propiedad de CSS {{cssxref("contain")}} es parte de la especificación {{SpecName("CSS Containment")}} y te permite indicar que un elemento y sus contenidos son independientes del resto del documento, permitiendo a {{Glossary("User agent", "user agents")}} optimizar el renderizado de una página.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 45)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 45)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 45)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 45)</sub></td> + <td><code>layout.css.contain.enabled</code></td> + </tr> + <tr id="column-span"> + <td> + <p><strong>The <code>column-span</code> CSS property</strong><br> + The {{cssxref("column-span")}} CSS property is part of the {{SpecName("CSS3 Multicol")}} specification and allows you to specify how many columns an element spans across.</p> + + <p>Firefox currently only parses the property ({{bug(1339298)}}), it's not actually implemented yet ({{bug(616436)}}).</p> + </td> + <td>No habilitado<br> + <sub>(recognized desde la versión 55, but not implemented yet)</sub></td> + <td>—</td> + <td>—</td> + <td>—</td> + <td><code>layout.css.column-span.enabled</code></td> + </tr> + <tr> + <td><strong>The <code>frames()</code> timing function</strong><br> + Ver <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#The_frames()_class_of_timing-functions">The frames() class of timing-functions</a> para más detalle</td> + <td>Habilitado</td> + <td><sub>N/A</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 55)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 55)</sub></td> + <td>None</td> + </tr> + <tr> + <td><strong>The {{cssxref("::slotted")}} pseudo-element</strong><br> + Selects elements when they are inserted into a {{htmlelement("slot")}} in an HTML {{htmlelement("template")}}.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td><code>dom.webcomponents.customelements.enabled</code> and <code>dom.webcomponents.shadowdom.enabled</code></td> + </tr> + </tbody> +</table> + +<h2 id="JavaScript">JavaScript</h2> + +<p id="ECMAScript_2016">See also <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support</a> for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Feature</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox Release</th> + <th scope="col">Preference</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>Additions to the <code>ArrayBuffer</code> object</strong><br> + Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new <code>ArrayBuffer</code> whose contents have been taken from the <code>oldBuffer</code>'s data (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>).</td> + <td>36</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>None</td> + </tr> + <tr> + <td><strong>TypedObject objects</strong> (<a href="https://github.com/dslomov-chromium/typed-objects-es7">spec</a>)</td> + <td>Habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>None</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SIMD">SIMD</a> (<a href="https://github.com/johnmccutchan/ecmascript_simd">specification and polyfill</a>)</td> + <td>Habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>None</td> + </tr> + <tr> + <td><strong>ECMAScript modules</strong><br> + Allows you to use native ECMAScript modules, for example defining modules with <code><script type="module"></code>, defining fallback scripts with <code><script nomodule></code>, and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">importing</a> code features that have been <a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">exported</a> from modules.</td> + <td>59</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>dom.moduleScripts.enabled</code></td> + </tr> + <tr> + <td>{{jsxref("Array.prototype.flatten()")}} and {{jsxref("Array.prototype.flatMap()")}}</td> + <td>Habilitado (59)</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>None</td> + </tr> + </tbody> +</table> + +<h2 id="APIs">APIs</h2> + +<h3 id="Canvas_WebGL">Canvas & WebGL</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Feature</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox Release</th> + <th scope="col">Preference</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong><code>WEBGL_debug_renderer_info</code> extension</strong><br> + The {{domxref("WEBGL_debug_renderer_info")}} extension allows you to transmit information useful to help debugging problems to the server.</td> + <td>42</td> + <td>42</td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">No habilitado</a></td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=742798">No habilitado</a></td> + <td><code>webgl.enable-debug-renderer-info</code></td> + </tr> + <tr> + <td><strong>OffscreenCanvas</strong><br> + The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> contexts.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 44)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 44)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 44)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 44)</sub></td> + <td><code>gfx.offscreencanvas.enabled</code></td> + </tr> + <tr> + <td><strong><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions</a></strong><br> + Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 30)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 30)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 30)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 30)</sub></td> + <td><code>canvas.hitregions.enabled</code></td> + </tr> + <tr> + <td><strong><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></strong><br> + Allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 57)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 57)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 57)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 57)</sub></td> + <td><code>dom.streams.enabled</code> and <code>javascript.options.streams</code></td> + </tr> + <tr> + <td><strong><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Custom elements</a></strong><br> + Allows the definition and registering of custom elements that can then be used in the document.</td> + <td>Habilitado<br> + <sub>(desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 57)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 57)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 57)</sub></td> + <td><code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code></td> + </tr> + <tr> + <td><strong><a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a></strong><br> + Allows a shadow DOM to be attached to any element, inside which markup, style, and scripting can be safely encapsulated.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 58)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 58)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 58)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 58)</sub></td> + <td><code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.shadowdom.enabled</code></td> + </tr> + </tbody> +</table> + +<h3 id="DOM">DOM</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Característica</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox Release</th> + <th scope="col">Preference</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>Gamepad extensions</strong><br> + <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">The Gamepad Extensions</a> provide access to additional functionality such as pose information in the case of WebVR controllers, and haptic actuator control (e.g. controller vibration hardware).</td> + <td>Habilitado</td> + <td>Habilitado</td> + <td>Habilitado</td> + <td>No habilitado</td> + <td><code>dom.gamepad-extensions.enabled</code></td> + </tr> + <tr> + <td><code><strong>HTMLMediaElement.seekToNextFrame()</strong></code><br> + Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.</td> + <td>49<br> + <sub>(Fundamental update in version 50)</sub></td> + <td>49<br> + <sub>(Fundamental update in version 50)</sub></td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>media.seekToNextFrame.enabled</code></td> + </tr> + <tr> + <td><strong><code>GeometryUtils.getBoxQuads()</code></strong> ({{bug(917755)}})</td> + <td>31</td> + <td>31</td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td> + <td><code>layout.css.getBoxQuads.enabled</code></td> + </tr> + <tr> + <td><strong><code>GeometryUtils.convertPointFromNode()</code></strong>,<br> + <strong><code>GeometryUtils.RectFromNode()</code></strong>, y<br> + <code><strong>GeometryUtils.convertQuadFromNode()</strong></code><br> + ({{bug(918189)}})</td> + <td>31</td> + <td>31</td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107559">No habilitado</a></td> + <td><code>layout.css.convertFromNode.enabled</code></td> + </tr> + <tr> + <td><strong><code>Node.rootNode</code></strong><br> + The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.<br> + <em>This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.</em></td> + <td>48</td> + <td>48</td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">No habilitado</a></td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1269155">No habilitado</a></td> + <td><code>dom.node.rootNode.enabled</code></td> + </tr> + <tr> + <td><strong>WebVTT Regions API</strong><br> + <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.<br> + <em>This interface is considered to be in flux and isn't therefore activated in any version by default.</em></td> + <td>No habilitado<br> + <sub>(Experimental implementation desde la versión version 30)</sub></td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>media.webvtt.regions.enabled</code></td> + </tr> + <tr> + <td><strong>Support for audio and video tracks</strong><br> + Implementa {{domxref("HTMLMediaElement.audioTracks")}} y {{domxref("HTMLMediaElement.videoTracks")}}.<br> + <em>Firefox no soporta pistas de audio o vídeo múltiples, evitando que los usos más comunes de estas propiedades funcionen correctamente. Es por ello que estas propiedades no están activadas por defecto en ninguna versión. </em></td> + <td>No habilitado<br> + <sub>(Implementación experimental desde la versión 33)</sub></td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>media.track.enabled</code></td> + </tr> + <tr> + <td><strong>Better value for <code>Event.timestamp</code></strong><br> + The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, which is now relative to the Unix epoch.</td> + <td>32 (Windows)<br> + 43 (Linux)</td> + <td>32 (Windows)<br> + 43 (Linux)</td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">No habilitado</a></td> + <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1026804">No habilitado</a></td> + <td><code>media.track.enabled</code></td> + </tr> + <tr id="pointer-events"> + <td><strong>Pointer Events</strong></td> + <td>59</td> + <td>59<br> + <sub>(todavía no habilitado en Firefox para Android)</sub></td> + <td>59<br> + <sub>(todavía no habilitado en Firefox para Android)</sub></td> + <td>59<br> + <sub>(todavía no habilitado en Firefox para Android)</sub></td> + <td><code>dom.w3c_pointer_events.enabled</code></td> + </tr> + <tr> + <td><strong>Intersection Observer API</strong><br> + The {{domxref("Intersection Observer API")}} allows you to configure a callback that is called whenever one item, called a target, intersects either the device viewport or a specified element called.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 53)</sub></td> + <td>—</td> + <td>—</td> + <td>—</td> + <td><code>dom.IntersectionObserver.enabled</code></td> + </tr> + <tr> + <td><strong><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API: KeyframeEffect and KeyframeEffectReadOnly</a></strong><br> + The {{domxref("KeyframEffectReadOnly()", "KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} and {{domxref("KeyframeEffect()", "KeyframeEffect.KeyframeEffect()")}} constructors can be used to clone existing {{domxref("KeyframeEffectReadOnly")}} object instances by being given the object to clone as their only parameter (see {{bug(1273784)}}.)</td> + <td>52</td> + <td>52</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>None</td> + </tr> + <tr> + <td><strong>{{domxref("PromiseRejectionEvent")}} and related features</strong><br> + Providing a way to monitor and more finely control the rejection of Promises.<br> + </td> + <td>No habilitado<br> + <sub>(disponible desde la versión 55)</sub></td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>dom.promise_rejection_events.enabled</code></td> + </tr> + <tr> + <td><strong><a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a></strong><br> + Provides a web API for handling web-based payments.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 55)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 55)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 55)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 55)</sub></td> + <td><code>dom.payments.request.enabled</code></td> + </tr> + <tr> + <td><strong>Basic Card Payment API</strong><br> + Provides dictionaries that define data structures describing card payment types and payment responses for use in the Payment Request API. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 56)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 56)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 56)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 56)</sub></td> + <td><code>dom.payments.request.enabled</code></td> + </tr> + <tr> + <td><strong>Window.content only available to Chrome code</strong><br> + The proprietary {{domxref("Window.content")}} property is now only available to chrome (privileged) code, and not available to the web anymore ({{bug(864845)}}).</td> + <td>Habilitado<br> + <sub>(desde la versión 57)</sub></td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td> </td> + </tr> + <tr> + <td><strong>Disabling {{domxref("Navigator.registerContentHandler()")}}</strong><br> + This API is associated with a number of issues., and in addition we are the only browser that implements it. We are intending to remove it completely in the future, but for the moment we are disabling it in non-release versions to see if we get any significant web compat reports back.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>Habilitado</td> + <td><code>dom.registerContentHandler.enabled</code></td> + </tr> + </tbody> +</table> + +<h3 id="WebRTC">WebRTC</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Feature</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox Release</th> + <th scope="col">Preference</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>TCP ICE candidates</strong><br> + ICE candidates that use TCP rather than UDP are considered during ICE negotiation.</td> + <td> + <p>No habilitado<br> + 41</p> + + <p>Habilitado<br> + 54</p> + </td> + <td>No habilitado<br> + 41</td> + <td>No habilitado<br> + 41</td> + <td>No habilitado<br> + 41</td> + <td><code>media.peerconnection.ice.tcp</code></td> + </tr> + </tbody> +</table> + +<h2 id="Developer_Tools">Developer Tools</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Feature</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox Release</th> + <th scope="col">Preference</th> + </tr> + </thead> + <tbody> + <tr id="new-debugger-frontend"> + <td><strong>Debugger rewrite in HTML</strong></td> + <td>52</td> + <td>52</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>devtools.debugger.new-debugger-frontend</code></td> + </tr> + <tr id="new-console-frontend"> + <td><strong>Console rewrite in HTML</strong></td> + <td>52</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>devtools.webconsole.new-frontend-Habilitado</code></td> + </tr> + <tr id="performance-tool-options"> + <td><strong>Experimental Performance tool options</strong><br> + Enables options in the UI for JIT optimizations, memory, etc.</td> + <td>41</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>devtools.performance.ui.experimental</code></td> + </tr> + <tr id="layout-side-panel"> + <td><strong>Layout side panel</strong><br> + The Layout side panel allows to inspect and manage different CSS layout types like <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>.</td> + <td>No habilitado<br> + <sub>(disponible desde la versión 52)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 52)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 52)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 52)</sub></td> + <td><code>devtools.layoutview.enabled</code></td> + </tr> + </tbody> +</table> + +<h2 id="Security">Security</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Feature</th> + <th scope="col">Firefox Nightly</th> + <th scope="col">Firefox Developer Edition</th> + <th scope="col">Firefox Beta</th> + <th scope="col">Firefox Release</th> + <th scope="col">Preference</th> + </tr> + <tr> + <td><strong>TLS 1.3</strong></td> + <td>Habilitado</td> + <td>Habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>security.tls.version.max</code> to <code>4</code></td> + </tr> + <tr> + <td><strong>Block plain text requests from Flash plugins on encrypted pages</strong><br> + A pref has been added to treat mixed OBJECT_SUBREQUESTS as active content to mitigate MitM attacks due to plugins loading "risky" content. See {{bug(1190623)}} for more details.</td> + <td>Habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>Habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>Habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado</td> + <td><code>security.mixed_content.block_object_subrequest </code>to <code>true</code></td> + </tr> + <tr> + <td><strong>{{domxref("SecurityPolicyViolationEvent")}}, and the <code>securitypolicyviolation</code> event</strong><br> + Allows developers to programmatically respond to <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> violations.</td> + <td>Habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>Habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>Habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado</td> + <td><code>security.csp.enable_violation_events</code></td> + </tr> + <tr> + <td> + <p><strong>"Insecure connection" icon display for non-HTTPS sites</strong><br> + Firefox 59 has two new preferences, No habilitado by default, which when Habilitado cause a lock with a strike-through to appear in the address bar when a non-HTTPS site is loaded. This work is part of the preparation for moving to a completely HTTPS web, the idea being that in the near future insecure sites will be specially indicated, rather than secure sites.</p> + </td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td>No habilitado<br> + <sub>(disponible desde la versión 59)</sub></td> + <td> + <p><code>security.insecure_connection_icon.enabled</code> for non-private browsing</p> + + <p><code>security.insecure_connection_icon.pbmode.enabled</code> for private browsing</p> + </td> + </tr> + <tr> + <td> + <p><strong>{{httpheader("Origin")}} header sent for non-CORS requests</strong><br> + To mitigate CSRF attacks, the <code>Origin</code> header should be sent with non-CORS requests unless they are <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> or <code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code> ({{bug(446344)}}). We currently only send <code>Origin</code> on CORS requests.</p> + </td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td>No habilitado</td> + <td><code>network.http.sendOriginHeader</code></td> + </tr> + </thead> +</table> + +<h2 id="Consultar_también">Consultar también</h2> + +<ul> + <li><a href="/es/Firefox/Releases">Notas de desarrollo de Firefox para desarrolladores</a></li> + <li><a href="https://nightly.mozilla.org/">Firefox Nightly</a></li> + <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li> +</ul> diff --git a/files/es/mozilla/firefox/firefox_esr/index.html b/files/es/mozilla/firefox/firefox_esr/index.html new file mode 100644 index 0000000000..af8625e1c3 --- /dev/null +++ b/files/es/mozilla/firefox/firefox_esr/index.html @@ -0,0 +1,13 @@ +--- +title: Firefox ESR +slug: Mozilla/Firefox/Firefox_ESR +tags: + - Necesita revisión +translation_of: Mozilla/Firefox/Firefox_ESR +--- +<div>{{FirefoxSidebar}}</div> + +<p><em>Firefox Extended Support Release (ESR)</em> se basa en una versión oficial de Firefox para el escritorio para su uso por organizaciones que necesitan soporte extendido para implementaciones masivas. La diferencia de otros canales de lanzamiento, las ESR no se actualizan con nuevas características cada seis semanas. En su lugar, son compatibles durante alrededor de un año, actualizándose con importantes soluciones de seguridad o estabilidad. La versión actual de ESR es basa en Firefox 52 emitida el 7 de marzo de 2017. La próxima versión de ESR será el número 59.<br> + <br> + <br> + Animamos firmemente a los usuarios de Firefox ESR que se inscriban en la lista de correo del grupo <em><a href="https://www.mozilla.org/en-US/firefox/organizations/">Enterprise Working Group (EWG)</a></em>.</p> diff --git a/files/es/mozilla/firefox/index.html b/files/es/mozilla/firefox/index.html new file mode 100644 index 0000000000..50b34f27e5 --- /dev/null +++ b/files/es/mozilla/firefox/index.html @@ -0,0 +1,73 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Mozilla + - Página de Llegada +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a> es el popular navegador Web de Mozilla, disponible para múltiples plataformas incluyendo Windows, OS X, y Linux en las máquinas de escritorio así como en los dispositivos móviles basados en Android e iOS. Su amplia compatibilidad, su adaptación a las más recientes tecnologías Web y poderosas herramientas de desarrollo, hacen de Firefox la elección por excelencia para desarrolladores Web y también para usuarios finales.</p> + +<p>Firefox es un proyecto de código abierto; la mayor parte del código lo aporta nuestra gran comunidad de voluntarios. Aquí aprenderás a contribuir al proyecto de Firefox y también encontrarás enlaces a información sobre la creación de complementos de Firefox, utilizando las herramientas de desarrollo de Firefox, y otros temas.</p> + +<div class="summary"> +<p>Aprende a crear complementos para <a class="external external-icon" href="https://www.mozilla.org/es-ES/firefox/new/">FireAAAfox</a>, cómo desarrollar y construir Firefox y cómo funciona Firefox desde dentro y sus subproyectos.</p> +</div> + +<ul class="card-grid"> + <li><span>Notas de la Versión para Desarrolladores</span> + + <p><a href="/es/docs/Mozilla/Firefox/Releases">Notas de la versión centrada para Desarrolladores</a>; descubre qué nuevas capacidades llegan en cada nueva versión de Firefox, tanto para sitios Web como para complementos.</p> + </li> + <li><span>Documentación del proyecto</span> + <p>Obtén información detallada sobre <a href="/es/docs/Mozilla"> el funcionamiento interno de Firefox </a> y su sistema de creación, para que puedas entender bien el código.</p> + </li> + <li><span>Guía del Desarrollador</span> + <p>Nuestra <a href="/es/docs/Developer_Guide">guía del desarrollador</a> ofrece detalles sobre cómo obtener y compilar el código fuente de Firefox, cómo entenderlo y cómo contribuir al proyecto.</p> + </li> +</ul> + +<h2 id="Firefox_channels">Firefox channels</h2> + +<p>Firefox está disponible en cinco <strong>canales</strong>.</p> + +<h3 id="Firefox_Nightly">Firefox Nightly</h3> + +<p>Cada noche, creamos Firefox a partir del más reciente código disponible en <a href="/es/docs/mozilla-central">mozilla-central</a>. Esta estructura es ideal para los desarrolladores de Firefox y para quienes quieran probar las últimas características de vanguardia mientras están aún en un desarrollo activo.</p> + +<p><a class="external external-icon" href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Nightly</a></p> + +<h3 id="Firefox_Developer_Edition">Firefox Developer Edition</h3> + +<p>Esta es una versión de Firefox hecha a la medida de desarrolladores. Cada seis semanas, cogemos las características de Firefox Nightly que son lo suficientemente estables y creamos una nueva versión de Firefox Developer Edition. Además, añadimos algunas características adicionales que solo están disponibles en este canal.</p> + +<p><a href="/es/docs/Firefox/Developer_Edition">Descubre más sobre</a><a href="/es/docs/Firefox/Developer_Edition"> Firefox Developer Edition</a>.</p> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Developer Edition</a></p> + +<h3 id="Firefox_Beta">Firefox Beta</h3> + +<p>Después de pasar seis semanas en Firefox Developer Edition, elegimos las características que son lo suficientemente estables y creamos una nueva versión de Firefox Beta. La estructura de Firefox Beta builds está destinada especialmente a entusiastas que quieren probar el material destinado a convertirse en la siguiente versión de Firefox.</p> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox Beta</a></p> + +<h3 id="Firefox">Firefox</h3> + +<p>Después de estabilizarse durante otras seis semanas en Beta, estamos listos para enviar las nuevas características a cientos de millones de usuarios en el lanzamiento de una nueva versión de Firefox.</p> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox</a></p> + +<h3 id="Firefox_Versión_de_Soporte_Extendida_ESR">Firefox Versión de Soporte Extendida (ESR)</h3> + +<p><span id="result_box" lang="es"><span>Firefox ESR es la edición de soporte a largo plazo de Firefox para escritorio para uso de grandes organizaciones, como escuelas, universidades, empresas y otras personas que necesitan un soporte extendido para implementaciones masivas.</span></span></p> + +<p><a href="https://developer.mozilla.org/es/Firefox/Firefox_ESR">Descubre más sobre Firefox Versión de Soporte Extendida</a>.</p> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/organizations/all/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Descarga Firefox ESR</a></p> + +<h2 id="Perfiles_Firefox">Perfiles Firefox</h2> + +<p>Si sueles utilizar varios canales de Firefox—o simplemente varias configuraciones—, deberías leer <a href="https://developer.mozilla.org/es/docs/Mozilla/Firefox/Multiple_profiles">cómo utilizar varios perfiles Firefox</a> para que puedas adaptar a tus necesidades<span id="result_box" lang="es"><span> el Administrador de Perfiles de Firefox y otras herramientas de gestión de perfiles.</span></span></p> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/index.html b/files/es/mozilla/firefox/multiprocess_firefox/index.html new file mode 100644 index 0000000000..139a345752 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/index.html @@ -0,0 +1,75 @@ +--- +title: Firefox multiproceso +slug: Mozilla/Firefox/Multiprocess_Firefox +translation_of: Mozilla/Firefox/Multiprocess_Firefox +--- +<div>{{FirefoxSidebar}}</div><p>En las versiones actuales de Firefox para escritorio, todo el navegador se ejecuta en un solo proceso del sistema operativo. Esto quiere decir que el código JavaScript que ejecuta la IU (interfaz de usuario) del navegador (también conocido como "código chrome") se ejecuta en el mismo proceso que el código de las página web (también conocido como "contenido" o "contenido web").<br> + <br> + Las versiones futuras de Firefox ejecutarán la interfaz de usuario del navegador en un proceso separado del contenido web. En la primera etapa de esta arquitectura, todas las pestañas del navegador se ejecutarán en el mismo proceso y la IU del navegador en un proceso diferent. En futuras etapas, esperamos tener más de un proceso de contenido. El proyecto de Firefox multiproceso es llamado Electrolysis, en ocasiones abreviado como e10s.</p> + +<p>Las páginas web normales no estarán afectadas por Firefox multiproceso. Quienes trabajen en Firefox en sí mismo y desarrolladores de complementos para Firefox estarán afectados si su código se basa en acceder al contenido web directamente.</p> + +<p>En lugar de acceder al contenido web directamente, el código JavaScript deberá usar el <a href="/Firefox/Multiprocess_Firefox/Message_manager">administrador de mensajes</a> para acceder al contenido. Para facilitar la transición hemos implementado <a href="/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">contenedores de objetos de multiproceso</a> y algunas <a href="/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts#Compatibility_shims">capas de compatibilidad para complementos</a>. Si eres un desarrollador de complementos y deseas saber cómo estrás afectado, revisa la <a href="/Mozilla/Add-ons/Working_with_multiprocess_Firefox">guía para trabajar con Firefox multiproceso</a>.</p> + +<hr> +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/Firefox/Multiprocess_Firefox/Technical_overview">Repaso técnico</a></dt> + <dd>Una vista de alto nivel acerca de cómo se está implementando Firefox multiproceso.</dd> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Web_content_compatibility">Guía de compatibilidad para contenido web</a></dt> + <dd>Directrices y detalles acerca de problemas potenciales de compatiblidad en sitios web que podrían ocurrir debido a la transición. Tip: ¡No son muchos!</dd> + <dt><a href="/Firefox/Multiprocess_Firefox/Glossary">Glosario</a></dt> + <dd>Una referencia de la jerga usada en Firefox multiproceso.</dd> + <dt><a href="/Firefox/Multiprocess_Firefox/Message_Manager">Administrador de mensajes</a></dt> + <dd>Una guía completa a los objetos usados para comunicarse entre el código chrome y el contenido.</dd> + <dt><a href="/en-US/Mozilla/Add-ons/SDK/Guides/Multiprocess_Firefox_and_the_SDK">Complementos basados en el SDK</a></dt> + <dd>Cómo migrar complementos creados utilizando el SDK de complementos.</dd> + <dt><a href="/Firefox/Multiprocess_Firefox/Which_URIs_load_where">Dónde se carga cada URI</a></dt> + <dd>Una guía rápida a qué URIs - chrome:, about:, file:, resource: - se cargan en cada proceso.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/Firefox/Multiprocess_Firefox/Motivation">Motivación</a></dt> + <dd>Por qué estamos implementando Firefox multiproceso: rendimiento, seguridad y estabilidad.</dd> + <dt><a href="/Mozilla/Add-ons/Working_with_multiprocess_Firefox">Guía para la migración de complementos</a></dt> + <dd>Si eres un desarollador de complementos, entérate cómo estás afectado y cómo actualizar tu código.</dd> + <dt><a href="/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">Contenedores de objetos multiproceso</a></dt> + <dd>Los contenedores de objetos multiproceso ayudan a la migración, dando al código chrome acceso síncrono al contenido.</dd> + <dt><a href="/Firefox/Multiprocess_Firefox/Debugging_frame_scripts">Depurando procesos de firefox</a></dt> + <dd>Cómo depurar código en el proceso de contenido, incluyendo scripts de marco y proceso.</dd> + <dt><a href="/docs/Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox">Selección de pestañas en Firefox multiproceso</a></dt> + <dd>Cómo funciona el cambio de pestañas en Firefox multiproceso.</dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts">Limitaciones de los scripts chrome</a></dt> + <dd>Prácticas que ya no funcionan en el código chrome, y cómo solucionarlas.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">Limitaciones de los scripts de marco</a></dt> + <dd>Prácticas que no funcionarán en los scripts de marco, y qué hacer en su lugar.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Contáctanos">Contáctanos</h2> + +<p>Entérate más acerca del proyecto, involúcrate o pregúntanos tus dudas.</p> + +<ul> + <li><strong>Página del proyecto Electrolysis</strong>: <a href="https://wiki.mozilla.org/Electrolysis">https://wiki.mozilla.org/Electrolysis</a></li> + <li><strong>IRC</strong>: #e10s en <a href="https://wiki.mozilla.org/IRC">irc.mozilla.org</a></li> + <li><strong>Lista de correo</strong>: <a href="https://groups.google.com/forum/#!forum/mozilla.dev.tech.electrolysis">dev.tech.electrolysis</a></li> +</ul> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html new file mode 100644 index 0000000000..5d3214a425 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html @@ -0,0 +1,74 @@ +--- +title: Message manager +slug: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager +tags: + - API + - Guide + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager +--- +<div>{{FirefoxSidebar}}</div><p>Message managers provide a way for chrome-privileged JavaScript code to communicate across process boundaries. They are particularly useful for allowing chrome code, including the browser's code and extension's code, to access web content while the browser is running web content in a separate process.</p> + +<p>These guides explain how to use message managers in multiprocess Firefox.</p> + +<p>Note that none of this requires multiprocess Firefox: everything described here will work with single-process Firefox, so the same code will work on both variants.</p> + +<hr> +<h2 id="Guides">Guides</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Message_manager_overview">Message manager overview</a></dt> + <dd> </dd> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Frame_script_loading_and_lifetime">Frame script loading and lifetime</a></dt> + <dd> </dd> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Communicating_with_frame_scripts">Communicating with frame scripts</a></dt> + <dd> </dd> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Performance">Performance Best Practices</a></dt> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Frame_script_environment">Frame script environment</a></dt> + <dd> </dd> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/_Limitations_of_frame_scripts">Limitations of frame scripts</a></dt> + <dd> </dd> + <dt><a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts">Process scripts</a></dt> + <dd> </dd> +</dl> +</div> +</div> + +<hr> +<h2 id="API_reference">API reference</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader">nsIFrameScriptLoader</a></dt> + <dd> </dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager">nsIMessageListenerManager</a></dt> + <dd> </dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster">nsIMessageBroadcaster</a></dt> + <dd> </dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender">nsIMessageSender</a></dt> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISyncMessageSender">nsISyncMessageSender</a></dt> + <dd> </dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentFrameMessageManager">nsIContentFrameMessageManager</a></dt> + <dd> </dd> + <dt><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader">nsIProcessScriptLoader</a></dt> + <dd> </dd> +</dl> +</div> +</div> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html new file mode 100644 index 0000000000..f6011c7836 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html @@ -0,0 +1,81 @@ +--- +title: Process scripts +slug: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts +--- +<div>{{FirefoxSidebar}}</div><div class="geckoVersionNote"> +<p>Los scripts de proceso son nuevos en Firefox 38.</p> +</div> + +<div class="note"> +<p>Si esta utilizando el addon sdk, puede utilizar el <a href="/en-US/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/remote_parent">remote/parent</a> módulo <code>remoteRequire</code> en su lugar.</p> +</div> + +<p><span id="result_box" lang="es"><span>Cuando necesite ejecutar código en el proceso de contenido para acceder al contenido web, debe utilizar secuencias de</span></span> frame scripts. <span id="result_box" lang="es"><span>Sin embargo, un problema con</span></span> los scripts <span id="result_box" lang="es"><span>es que se pueden cargar varias veces en el proceso de contenido, en varios ámbitos que están aislados unos de otros.</span> <span>Por ejemplo, si llama a la funcion </span></span><code>loadFrameScript()</code> del gestor de mensajes de script, <span id="result_box" lang="es"><span>entonces el script se cargará por separado en todas las pestañas abiertas.</span> <span>Esto puede causar un problema que las secuencias de scripts de trama están interactuando con un servicio global en el proceso de contenido.</span></span></p> + +<p><span id="result_box" lang="es"><span>Por ejemplo, en multiprocesos Firefox, si necesita usar</span></span> <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPolicy">nsIContentPolicy</a></code> to register a content policy, <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_chrome_scripts#nsIContentPolicy">you must do this in the content process</a>. <span id="result_box" lang="es"><span>para registrar una política de contenido, debe hacerlo en el proceso de contenido.</span> <span>Pero si lo registra en una secuencia de frame script la secuencia de frame script se carga más de una vez, registrará la política de contenido más de una vez, lo que probablemente no es lo que pretende.</span></span></p> + +<p>De forma similar, algunas notificaciones de observadores deben registrarse en el frame script, pero si lo hace en una secuencia de frame scrip, se cargara más de una vez, recibirá varias notificaciones, para ese evento.</p> + +<p><span id="result_box" lang="es"><span>La solución en estos casos es usar un script de proceso en lugar de un frame script.</span></span></p> + +<p>You can load a process script by accessing a <a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Message_manager_overview#Parent_process">parent process message manager</a> and calling its <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader#loadProcessScript()">loadProcessScript()</a></code> function. The following code uses the global parent process message manager, which will load the script into the the chrome process and any child processes:</p> + +<pre class="brush: js">// chrome code +let ppmm = Cc["@mozilla.org/parentprocessmessagemanager;1"] + .getService(Ci.nsIProcessScriptLoader); +ppmm.loadProcessScript("chrome://whatever/process-script.js", true); +ppmm.addMessageListener("Hello", function(msg) { ... });</pre> + +<p>The process script's global is a <a href="/en-US/Firefox/Multiprocess_Firefox/Message_Manager/Message_manager_overview#Child_process_message_manager">child process message manager</a>, which enables the process script to receive messages from the chrome side, and to send messages to the chrome side:</p> + +<pre class="brush: js">// process-script.js +if (Services.appinfo.processType == Services.appinfo.PROCESS_TYPE_CONTENT) { + dump("Welcome to the process script in a content process"); +} else { + dump("Welcome to the process script in the main process"); +} + +// Message is sent using <code>ContentProcessMessageManager</code> +sendAsyncMessage("Hello");</pre> + +<p>In this example, the <code>dump()</code> statement will run once in each content process as well as in the main process. This example also figures out whether it is running in the chrome or in a content process by looking at the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXULRuntime#Process_type_constants">process type</a> in <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm">Services.appinfo</a></code>.</p> + +<p>In just about every respect, using process scripts is like using frame scripts:</p> + +<ul> + <li>you can pass the allowDelayedLoad to <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader#loadProcessScript()">loadProcessScript()</a></code>. If you do, you must call <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessScriptLoader#removeDelayedProcessScript()">removeDelayedProcessScript()</a></code> when your extension is disabled or removed</li> + <li>the message-passing APIs are the same: <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender#sendAsyncMessage()">sendAsyncMessage()</a></code> is available in both directions, while <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISyncMessageSender#sendSyncMessage()">sendSyncMessage()</a></code> is available from content to chrome only</li> + <li>process scripts are system-privileged, and have access to the <code><a href="/en-US/docs/Components_object">Components</a></code> object. However, process scripts are subject to <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">the same kinds of limitations as frame scripts</a> (for example, no file system access).</li> + <li>process scripts stay loaded until their host process is closed.</li> + <li>the environment for process scripts is similar to that for frame scripts. However, you don't get access to web content or DOM events from a process script.</li> +</ul> + +<h2 id="Retrieving_the_content_frame_message_manager_for_a_content_window">Retrieving the content frame message manager for a content window</h2> + +<p>When an observer notification in a process script contains a content document or window it can be useful to not use talk through the child/parent process message managers but through the window's content frame message manager, e.g. if responses should be processed by a frame script instead of the process script.</p> + +<p>This can be achieved by traversing the docshell tree up to the top window and then retrieving its content message manager, as follows:</p> + +<pre class="brush: js">function contentMMFromContentWindow(window) { + let tree = window.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.<span class="pl-c1">nsIDocShellTreeItem</span>); + let top = tree.sameTypeRootTreeItem; + let iface = QueryInterface(Ci.nsIDocShell).QueryInterface(Ci.nsIInterfaceRequestor); + return iface.getInterface(Ci.nsIContentFrameMessageManager); +} +</pre> + +<div class="note"> +<p>This is intended for unprivileged pages running in a content process. Chrome-privileged pages or things running in the parent process may require special treatment.</p> +</div> + +<p>If the above doesn't work try this:</p> + +<pre class="brush: js">function contentMMFromContentWindow_Method2(aContentWindow) { + return aContentWindow.QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIDocShell) + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIContentFrameMessageManager); +}</pre> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html b/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html new file mode 100644 index 0000000000..0a4f0cb3e6 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html @@ -0,0 +1,46 @@ +--- +title: Motivation +slug: Mozilla/Firefox/Multiprocess_Firefox/Motivation +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Motivation +--- +<div>{{FirefoxSidebar}}</div><p>There are three main reasons for making Firefox run content in a separate process: performance, security, and stability.</p> + +<h2 id="Performance">Performance</h2> + +<p>Most performance work at Mozilla over the last two years has focused on responsiveness of the browser. The goal is to reduce “<a href="/en-US/docs/Glossary/Jank">jank</a>”—those times when the browser seems to briefly freeze when loading a big page, typing in a form, or scrolling. Responsiveness tends to matter a lot more than throughput on the web today. Much of this work has been done as part of the <a href="https://wiki.mozilla.org/Performance/Snappy">Snappy project</a>. The main focuses have been:</p> + +<ul> + <li>Moving long-running actions to a separate thread so that the main thread can continue to respond to the user.</li> + <li>Doing I/O asynchronously or on other threads so that the main thread isn’t blocked waiting for the disk.</li> + <li>Breaking long-running code into shorter pieces and running the event loop in between. Incremental garbage collection is an example of this.</li> +</ul> + +<p>Much of the low-hanging fruit in these areas has already been picked. The remaining issues are difficult to fix. For example, JavaScript execution and layout happen on the main thread, and they block the event loop. Running these components on a separate thread is difficult because they access data, like the DOM, that are not thread-safe. As an alternative, we’ve considered allowing the event loop to run in the middle of JavaScript execution, but doing so would break a lot of assumptions made by other parts of Firefox (not to mention add-ons).</p> + +<p>Running web content in a separate process is a nice alternative to these approaches. Like the threaded approach, Firefox is able to run its event loop while JavaScript and layout are running in a content process. But unlike threading, the UI code has no access to content DOM or or other content data structures, so there is no need for locking or thread-safety. The downside, of course, is that any code in the Firefox UI process that needs to access content data must do so explicitly through message passing.</p> + +<p>We feel this tradeoff makes sense for a few reasons:</p> + +<ul> + <li>It’s not all that common for Firefox code to access content DOM.</li> + <li>Code that is shared with Firefox OS already uses message passing.</li> + <li>In the multiprocess model, Firefox code that fails to use message passing to access content will fail in an obvious, consistent way. In the threaded model, code that accesses content without proper locking will fail in subtle ways that are difficult to debug.</li> +</ul> + +<h2 id="Security">Security</h2> + +<p>Right now, if someone discovers an exploitable bug in Firefox, they’re able to take over users’ computers. There are a lot of techniques to mitigate this problem, but one of the most powerful is <a href="http://en.wikipedia.org/wiki/Sandbox_%28computer_security%29">sandboxing</a>. Technically, sandboxing doesn’t require multiple processes. However, a sandbox that covered single-process Firefox wouldn’t be very useful. Sandboxes are only able to prevent processes from performing actions that a well-behaved process would never do. Unfortunately, a well-behaved Firefox process (especially one with add-ons installed) needs access to much of the network and file system. Consequently, a sandbox for single-process Firefox couldn’t restrict much.</p> + +<p>In multiprocess Firefox, content processes will be sandboxed. A well-behaved content process won’t access the filesystem directly; it will have to ask the main process to perform the request. At that time, the main process can verify that the request is safe and that it makes sense. Consequently, the sandbox for content processes can be quite restrictive. Our hope is that this arrangement will make it much harder to craft exploitable security holes for Firefox.</p> + +<h2 id="Stability">Stability</h2> + +<p>Currently, a crash in the code running a web page will take down the entire browser. With multiprocess Firefox, only the content process that crashed will be killed.</p> + +<div class="note"> +<p>This page incorporates a lot of content from Bill McCloskey's blog post on multiprocess Firefox: <a href="http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/">http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/</a></p> +</div> + +<p> </p> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html b/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html new file mode 100644 index 0000000000..4f109bf795 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html @@ -0,0 +1,212 @@ +--- +title: Pitfalls for add-on developers +slug: Mozilla/Firefox/Multiprocess_Firefox/Pitfalls_for_add-on_developers +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Pitfalls_for_add-on_developers +--- +<div>{{FirefoxSidebar}}</div><h2 id="Overview">Overview</h2> + +<p>This page lists patterns that add-on authors might be using that won't work, or will work differently, in multiprocess Firefox.</p> + +<p>It's split into two sections: chrome process and content process.</p> + +<h3 id="Chrome_process">Chrome process</h3> + +<p>The first section, <em>chrome process</em>, covers things that used to work in the chrome process that will no longer work in multiprocess Firefox. These are the sorts of things that will break an old add-on in multiprocess Firefox. The fix is generally some variant of "do that in a frame script loaded into the content process".</p> + +<h4 id="Compatibility_shims">Compatibility shims</h4> + +<p>For many of the patterns described here we've implemented compatibility shims so the patterns still work. For example: whenever extensions try to access web content from the chrome process, the browser will return a <a href="https://developer.mozilla.org/en-US/docs/Cross_Process_Object_Wrappers">Cross Process Object Wrapper</a> that gives the chrome code synchronous access to the content.</p> + +<p>You'll get the shims for your add-on by default, unless you set the <a href="/en-US/Add-ons/Install_Manifests#multiprocessCompatible"><code>multiprocessCompatible</code> flag in your add-on's install manifest</a>.</p> + +<p>However, these shims are not a substitute for migrating extensions:</p> + +<ul> + <li>they are only a temporary measure, and will be removed eventually</li> + <li>they can have a bad effect on responsiveness</li> + <li>there are likely to be edge cases in which they don't work properly</li> +</ul> + +<p>For each pattern we've noted:</p> + +<ul> + <li>whether a shim exists and what kind of behavior it provides</li> + <li>how to update your add-on so you don't need the shim</li> +</ul> + +<h3 id="Content_process">Content process</h3> + +<p>However, some things that used to work in a chrome process will not work in the content process. The second section, <em>content process</em>, lists these sorts of things along with their mitigation.</p> + +<h2 id="Chrome_process_pitfalls">Chrome process pitfalls</h2> + +<h3 id="gBrowser.contentWindow_window.content...">gBrowser.contentWindow, window.content...</h3> + +<h4 id="Without_the_shim">Without the shim</h4> + +<p>All APIs in the chrome process that provide direct access to content objects will no longer work. For example:</p> + +<pre class="brush: js">// chrome code + +gBrowser.contentWindow; // null + +gBrowser.contentDocument; // null + +gBrowser.selectedBrowser.contentWindow; // null + +window.content; // null + +content; // null +</pre> + +<h4 id="With_the_shim">With the shim</h4> + +<p>The shim will give you a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a> for the content object in these situations.</p> + +<p>To make the shim unnecessary: factor the code that needs to access content into a separate script, load that script into the content process as a frame script, and communicate between the chrome script and the frame script using the message-passing APIs. See the article on <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">using the message manager</a>.</p> + +<h3 id="nsIContentPolicy">nsIContentPolicy</h3> + +<h4 id="Without_the_shim_2">Without the shim</h4> + +<p>Under multiprocess Firefox you can't use <a href="http://dxr.mozilla.org/mozilla-central/source/dom/base/nsIContentPolicy.idl"><code>nsIContentPolicy</code></a> in the chrome process, because it needs to touch web content.</p> + +<h4 id="With_the_shim_2">With the shim</h4> + +<p>The shim enables you to add content policies in the chrome process. It transparently registers an <code>nsIContentPolicy</code> in the content process, whose <code>shouldLoad</code> just forwards to the chrome process. The content to check is forwarded as a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a>. The chrome process then checks the content against the policy supplied by the add-on, and forwards the response back to the child to be enforced.</p> + +<p>To make the shim unnecessary: define and register <code>nsIContentPolicy</code> inside a <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">frame script</a>.</p> + +<h3 id="Observers_in_the_chrome_process">Observers in the chrome process</h3> + +<p>Depending on the topic, you need to register observers in either the chrome process or in a frame script.</p> + +<p>For most topics you need to register observers in the chrome process.</p> + +<p>However, you must listen to <a href="/en/docs/Observer_Notifications#Documents"><code>content-document-global-created</code> and <code>document-element-inserted</code></a> in a frame script. <a href="http://dxr.mozilla.org/mozilla-central/source/xpcom/ds/nsIObserver.idl">Observers</a> for these topics get content objects as the <code>aSubject</code> argument to <code>observe()</code>, so notifications are not sent to the chrome process.</p> + +<p>There is a shim that will forward these two topics to the chrome process, sending <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOWs</a> as the <code>aSubject</code> argument.</p> + +<h4 id="HTTP_requests">HTTP requests</h4> + +<p>You can't observe <a href="https://developer.mozilla.org/en/docs/Observer_Notifications#HTTP_requests">HTTP requests</a> in the content process. If you do, you'll get an error.<br> + <br> + If you do so in the chrome process, it will mostly work. The subject for the observer notification will be an <code><a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/http/nsIHttpChannel.idl">nsIHttpChannel</a></code> as you would expect. A common pattern here is to use the <code>notificationCallbacks</code> property of the <code>nsIHttpChannel</code> to get the DOM window that initiated the load, like this:</p> + +<pre class="brush: js">observe: function (subject, topic, data) { + if (topic == "http-on-modify-request") { + var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel); + var domWindow = httpChannel.notificationCallbacks.getInterface(Ci.nsIDOMWindow); + } +}</pre> + +<p>Or this:</p> + +<pre class="brush: js">observe: function (subject, topic, data) { + if (topic == "http-on-modify-request") { + var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel); + var domWindow = httpChannel.notificationCallbacks.getInterface(Ci.nsILoadContext).associatedWindow; + } +}</pre> + +<p>In multiprocess Firefox these patterns will no longer work: the <code>getInterface</code> call will fail.</p> + +<p>In multiprocess Firefox, <code>notificationCallbacks</code> is a special object that tries to emulate the single-process <code>notificationsCallbacks</code> object as best it can. It will return a dummy <code>nsILoadContext</code> when asked, but any attempt to get a window out of it will fail.<br> + <br> + There is an outstanding bug (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1108827">bug 1108827</a>) to implement a shim here, that will make <code>notificationCallbacks</code> a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a> for the objects in the content process.</p> + +<h3 id="DOM_Events">DOM Events</h3> + +<h4 id="Without_the_shim_3">Without the shim</h4> + +<p>In multiprocess Firefox, if you want to register an event listener on some content DOM node, that needs to happen in the content process.</p> + +<p>It used to be that if you registered a listener on the <a href="/en-US/docs/XUL/browser">XUL <code><browser></code></a> or <a href="/en-US/docs/XUL/tab"><code><tab></code></a> element that hosted some DOM content, then events in the content would bubble up to the XUL and you could handle them there. This no longer happens in multiprocess Firefox.</p> + +<h4 id="With_the_shim_3">With the shim</h4> + +<p>The shim intercepts chrome process code that adds listeners to XUL elements and sets up listeners in the content process, relaying the result back to the chrome process. The <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object itself is relayed to the chrome process as a <a href="/en-US/Firefox/Multiprocess_Firefox/Cross_Process_Object_Wrappers">CPOW</a>.</p> + +<p>To make the shim unnecessary: register event listeners on the global object inside a <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">frame script</a>. For example:</p> + +<pre class="brush: js">addEventListener("load", handler, true) // for example</pre> + +<div>If you need to contact the chrome process when that happens, send it a message.</div> + +<div> </div> + +<h2 id="Content_process_pitfalls">Content process pitfalls</h2> + +<p>Many privileged APIs will just work in a content process. Anything that just manipulates data structures will just work. XHR and Workers will work.</p> + +<h3 id="File_IO">File I/O</h3> + +<p>You should not write to or read from the disk from a frame script, in particular the profile directory. Even if this is possible, you should not do it and may expect that it could stop working at any time. File I/O should all be done in the chrome process. For example:</p> + +<ul> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsIFileStreams.idl"><code>nsIFileInputStream</code></a></li> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsIFileStreams.idl"><code>nsIFileOutputStream</code></a></li> +</ul> + +<h3 id="XUL_and_browser_UI">XUL and browser UI</h3> + +<p>Anything that tries to touch the browser UI or anything to do with XUL is likely to not work in the content process. For example:</p> + +<ul> + <li><code><a href="http://dxr.mozilla.org/mozilla-central/source/embedding/components/windowwatcher/nsIPromptService.idl">nsIPromptService</a></code></li> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/widget/nsIFilePicker.idl"><code>nsIFilePicker</code></a></li> + <li><code>nsIXUL*</code></li> + <li><need more examples></li> +</ul> + +<h3 id="Chrome_windows">Chrome windows</h3> + +<p>Anything that needs to use chrome windows will not work in the content process. For example:</p> + +<ul> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/mobile/android/components/SessionStore.idl"><code>nsISessionStore</code></a></li> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/xpfe/appshell/nsIWindowMediator.idl"><code>nsIWindowMediator</code></a></li> + <li><need more examples></li> +</ul> + +<h3 id="Places_API">Places API</h3> + +<p>The <a href="/en-US/docs/Mozilla/Tech/Places">Places API</a> can't be used inside a frame script. For example:</p> + +<ul> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/nsINavHistoryService.idl"><code>nsINavHistoryService</code></a></li> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/nsINavBookmarksService.idl"><code>nsINavBookmarksService</code></a></li> +</ul> + +<h3 id="Observers_in_the_content_process">Observers in the content process</h3> + +<p>As noted in <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/Problem_areas_for_add-on_developers#Observers_in_the_chrome_process">Observers in the chrome process</a>, most <a href="http://dxr.mozilla.org/mozilla-central/source/xpcom/ds/nsIObserver.idl">observers</a> should be registered in the chrome process and will not work in the content process. The exceptions are <a class="new" href="https://developer.mozilla.org/en/docs/Observer_Notifications#Documents"><code>content-document-global-created</code> and <code>document-element-inserted</code></a> , which must be registered in a frame script.</p> + +<h3 id="QI_from_content_window_to_chrome_window">QI from content window to chrome window</h3> + +<div>There's a particular pattern often used to get from a content window to the associated chrome window. It looks something like this:</div> + +<div> </div> + +<pre class="brush: js">window.QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebNavigation) + .QueryInterface(Ci.nsIDocShellTreeItem) + .rootTreeItem + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIDOMWindow);</pre> + +<div>This will no longer work. In the content process the root tree item is an <a href="http://dxr.mozilla.org/mozilla-central/source/dom/interfaces/base/nsITabChild.idl"><code>nsITabChild</code></a>, that cannot be converted to an <code>nsIDOMWindow</code>, so the second <code>getInterface</code> call here will fail.</div> + +<div> </div> + +<p>If you want a chrome window: send a message from the content process using the <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>. The <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListener#receiveMessage()"><code>target</code></a> property of the object passed into the message handler in the chrome process is the XUL <a href="/en-US/docs/XUL/browser"><code><browser></code></a> receiving the message, and you can get the chrome window from that (Note: I'm not really sure how...).</p> + +<h3 id="nsIAboutModule">nsIAboutModule</h3> + +<p>By default, custom <code>about:</code> pages registered using <a href="http://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/nsIAboutModule.idl"><code>nsIAboutModule</code></a> are loaded in the chrome process. This means that you can't access their content from the content process (via XHR, for example).</p> + +<p>There is a shim for this, that makes the content of <code>about:</code> pages registered by the add-on transparently available in the content process.</p> + +<p>To avoid the shim: if you need to access the content of your about page from the content process, you need to register the <code>nsIAboutModule</code> in the content process as well as the chrome process. By default, <code>about:</code> pages (except for a small whitelist) are loaded in the chrome process when browsed to from the AwesomeBar.</p> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html new file mode 100644 index 0000000000..083b13f1e0 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html @@ -0,0 +1,127 @@ +--- +title: RemotePageManager +slug: Mozilla/Firefox/Multiprocess_Firefox/RemotePageManager +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/RemotePageManager +--- +<div>{{FirefoxSidebar}}</div><p>{{ gecko_minversion_header('39') }}</p> + +<p>One of the challenges of converting Firefox features and add-ons to <a href="/en-US/Firefox/Multiprocess_Firefox">multiprocess Firefox</a> involves in-content pages. These pages (like about:addons) display in a tab but for now still render in the main process. There can be many reasons for wanting to move these into the content process, particularly if the page interacts with web content in any way but more generally just to keep the main UI as responsive as possible.</p> + +<p>This raises the problem of how the page communicates back to the main process to get information and trigger actions. Commonly this is done with a frame script listening for DOM events from inside the page, performing the necessary message passing and then passing results back to the page. However, this middleman approach has problems. The frame code is maintained separately from the page code leading to three different pieces of code handling behavior for the page. Add-ons also have to be careful to choose unique names for messages to avoid conflicting with other add-ons and Firefox code.</p> + +<p><code>RemotePageManager</code> is an API designed to simplify this. It acts as the middleman between code in the main process and code in the page without needing to write custom code in a frame script. Code in the main process registers URLs that it is interested in. Whenever a frame loads a page with that URL, a pseudo message manager is created to allow message passing between just that page and the code in the main process. Code running in the page itself can access the message manager directly without needing to use a frame script at all.</p> + +<h2 id="RemotePageManager">RemotePageManager</h2> + +<p><code>RemotePageManager</code> is the low-level way to interact with in-content pages. It includes the following methods:</p> + +<dl> + <dt><code>addRemotePageListener(url, callback)</code></dt> + <dd>Registers interest in a URL. Whenever a new page loads at that URL callback is called and passed the message channel to use to communicate with the page. Only one callback can be registered per URL.</dd> + <dt><code>removeRemotePageListener(url)</code></dt> + <dd>Unregisters interest in a URL. The callback passed above will not be called again.</dd> +</dl> + +<h2 id="RemotePages">RemotePages</h2> + +<p><code>RemotePages</code> is a higher-level option. As well as the methods listed here it also has the <a href="/en-US/Firefox/Multiprocess_Firefox/RemotePageManager#Message_channel_methods">message channel methods</a> which will send messages to, and receive messages from, every page currently loaded at the URL.</p> + +<dl> + <dt><code>RemotePages(url)</code></dt> + <dd>Creates a new <code>RemotePages</code> instance for a URL.</dd> + <dt><code>destroy()</code></dt> + <dd>Destroys the instance.</dd> +</dl> + +<h2 id="Message_channel_methods">Message channel methods</h2> + +<p>All of these methods are available directly in the page, on <code>RemotePages</code> instances, or on the channel passed to callbacks registered with <code>RemotePageManager.addRemotePageListener</code>.</p> + +<dl> + <dt><code>sendAsyncMessage(name, data)</code></dt> + <dd>Sends a named message to the other side of the channel. <code>data</code> is copied as a structured clone.</dd> + <dt><code>addMessageListener(name, listener)</code></dt> + <dd>Adds a listener for a named message. <code>listener</code> will be called when the other side of the channel sends a message for <code>name</code>. <code>listener</code> will be passed an object with the properties <code>target</code>, <code>name</code>, and <code>data</code>.</dd> + <dt><code>removeMessageListener(name, listener)</code></dt> + <dd>Removed a listener for a named message.</dd> +</dl> + +<h2 id="Special_messages">Special messages</h2> + +<p>As well as any messages that Firefox or add-on code sends through the message channels, some special messages will be sent. Generally any message name starting with "RemotePage:" should be considered reserved for future use.</p> + +<dl> + <dt>RemotePage:Init</dt> + <dd>Sent to a <code>RemotePages</code> instance when a new page is loaded with the matching URL. The <code>target</code> property of the object passed to any listener is a message channel for just that page.</dd> + <dt>RemotePage:Load</dt> + <dd>Sent when the load event for a matching page in the content process is fired.</dd> + <dt>RemotePage.Unload</dt> + <dd>Sent when a matching page in the content process is unloaded.</dd> +</dl> + +<h2 id="Low_level_example">Low level example</h2> + +<p>This example waits for a page to load and then passes it some information.</p> + +<pre class="brush: js">// code running in the main process somewhere +Components.utils.import("resource://gre/modules/RemotePageManager.jsm"); + +RemotePageManager.addRemotePageListener("about:foo", (channel) => { + // Wait for page load here to be sure the page has had chance to register for this message + channel.addMessageListener("RemotePage:Load", function() { + channel.sendAsyncMessage("MyMessage", { somedata: 42 }); + }); +}); +</pre> + +<p>Here is the code that runs in the page. Note that it has direct access to <code>addMessageListener</code> (as well as the other message channel methods).</p> + +<pre class="brush: js">// code running in the content webpage +addMessageListener("MyMessage", function(msg) { + alert(msg.data.somedata); +}); +</pre> + +<h2 id="High_level_example">High level example</h2> + +<p>The code above uses a callback that is called every time a page is loaded. In reality it is going to be more common for code in the main process to simply respond to requests from the page and want to update all pages at once. <code>RemotePages</code> is more suited to this:</p> + +<pre class="brush: js">// code running in the main process somewhere +Components.utils.import("resource://gre/modules/Preferences.jsm"); +Components.utils.import("resource://gre/modules/RemotePageManager.jsm"); + +let listener = new RemotePages("about:bar"); + +// Listens to messages from all current and future pages +listener.addMessageListener("GetLabel", ({ target }) => { + // target is the channel for just the page that sent this message + target.sendAsyncMessage("SetLabel", Preferences.get("extensions.label.text")); +}); + +Preferences.observe("extensions.label.text", (newLabel) => { + // Sends messages to all currently open pages + listener.sendAsyncMessage("SetLabel", newLabel); +}); + +listener.addMessageListener("ButtonClicked", () => { + // Do something here +}); +</pre> + +<pre class="brush: js">// code running in the content webpage +var button = document.getElementById("button"); +var label = document.getElementById("label"); + +sendAsyncMessage("GetLabel"); +addMessageListener("SetLabel", function(msg) { + label.textContent = msg.data; +}); + +function buttonClicked() { + sendAsyncMessage("ButtonClicked"); +} + +button.addEventListener("click", buttonClicked, false); +</pre> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html b/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html new file mode 100644 index 0000000000..255fe18315 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html @@ -0,0 +1,23 @@ +--- +title: Tab selection in multiprocess Firefox +slug: Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox +--- +<div>{{FirefoxSidebar}}</div><p>In single-process Firefox, when the user switches tabs, this is a synchronous operation. The browser blocks while it loads content into the newly selected tab, then switches to that tab. It indicates that the tab is selected by setting the <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code> attribute on the XUL <code>tab</code> object. Code (including browser code, extensions, or themes) that wants to change the appearance of the selected tab can use the <code>selected</code> attribute to apply CSS for that tab.</p> + +<p>In multiprocess Firefox, tab switching is asynchronous. When the user switches tabs, the chrome process sends a request to the content process to load the page into the newly selected tab. The function in the chrome process then returns immediately, so other code can run. Once the content process is ready, it sends a message back to the chrome process, which then switches tabs in the user interface.</p> + +<p>There's also a timer in the chrome process: if the content process has not responded before the timer expires, then the browser switches tabs anyway, and just displays an empty tab containing a spinner, until the content process has finished loading the page. Currently the timer is set to 300 milliseconds.</p> + +<p>There are, correspondingly, two attributes used to signal tab selection:</p> + +<ul> + <li>The old <code><a href="/en-US/docs/XUL/Attribute/selected">selected</a></code> attribute is set synchronously, at the start of the process. It signals that tab selection has started, but at this point the user interface has not yet been updated.</li> + <li>A new attribute <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/visuallyselected">visuallyselected</a></code> is now used once the browser has actually updated the user interface, either because the content process is ready or because the timer has expired.</li> +</ul> + +<p>This means that code which wants to style the currently selected tab needs to use the <code>visuallyselected</code> attribute to do so. If it uses the <code>selected</code> attribute, then there will be a momentary disconnect in which the newly selected tab's style is updated, but the browser is still displaying the old tab's content.</p> + +<footer class="entry-meta"> </footer> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html b/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html new file mode 100644 index 0000000000..bc743d1dfb --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html @@ -0,0 +1,166 @@ +--- +title: Technical overview +slug: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview +--- +<div>{{FirefoxSidebar}}</div><div class="note"> +<p>This page is an edited extract from Bill McCloskey's blog post on multiprocess Firefox: <a class="external external-icon" href="http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/">http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/</a></p> +</div> + +<p>At a very high level, multiprocess Firefox works as follows. The process that starts up when Firefox launches is called the <em>parent process</em>. Initially, this process works similarly to single-process Firefox: it opens a window displaying <a href="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.xul"><code>browser.xul</code></a>, which contains all the principal UI elements for Firefox. Firefox has a flexible GUI toolkit called XUL that allows GUI elements to be declared and laid out declaratively, similar to web content. Just like web content, the Firefox UI has a <code>window</code> object, which has a <code>document</code> property, and this document contains all the XML elements from <code>browser.xul</code>. All the Firefox menus, toolbars, sidebars, and tabs are XML elements in this document. Each tab element contains a <code><browser></code> element to display web content.</p> + +<p>The first place where multiprocess Firefox diverges from single-process Firefox is that each <code><browser></code> element has a <code>remote="true"</code> attribute. When such a browser element is added to the document, a new content process is started. This process is called a <em>child process</em>. An IPC channel is created that links the parent and child processes. Initially, the child displays <code>about:blank</code>, but the parent can send the child a command to navigate elsewhere.</p> + +<h2 id="Drawing"><strong id="drawing">Drawing</strong></h2> + +<p>Somehow, displayed web content needs to get from the child process to the parent and then to the screen. Multiprocess Firefox depends on a new Firefox feature called <a href="http://benoitgirard.wordpress.com/2012/05/15/off-main-thread-compositing-omtc-and-why-it-matters/"><em>off main thread compositing</em></a> (OMTC). In brief, each Firefox window is broken into a series of <em>layers</em>, somewhat similar to layers in Photoshop. Each time Firefox draws, these layers are submitted to a compositor thread that clips and translates the layers and combines them together into a single image that is then drawn.</p> + +<p>Layers are structured as a tree. The root layer of the tree is responsible for the entire Firefox window. This layer contains other layers, some of which are responsible for drawing the menus and tabs. One subtree displays all the web content. Web content itself may be broken into multiple layers, but they’re all rooted at a single “content” layer.</p> + +<p>In multiprocess Firefox, the content layer subtree is actually a shim. Most of the time, it contains a placeholder node that simply keeps a reference to the IPC link with the child process. The content process retains the actual layer tree for web content. It builds and draws to this layer tree. When it’s done, it sends the structure of its layer tree to the parent process via IPC. Backing buffers are shared with the parent either through shared memory or GPU memory. References to this memory are sent as part of the layer tree. When the parent receives the layer tree, it removes its placeholder content node and replaces it with the actual tree from content. Then it composites and draws as normal. When it’s done, it puts the placeholder back.</p> + +<p>The basic architecture of how OMTC works with multiple processes has existed for some time, since it is needed for Firefox OS. However, Matt Woodrow and David Anderson have done a lot of work to get everything working properly on Windows, Mac, and Linux. One of the big challenges for multiprocess Firefox will be getting OMTC enabled on all platforms. Right now, only Macs use it by default.</p> + +<h2 id="User_input"><strong id="input">User input</strong></h2> + +<p>Events in Firefox work the same way as they do on the web. Namely, there is a DOM tree for the entire window, and events are threaded through this tree in capture and bubbling phases. Imagine that the user clicks on a button on a web page. In single-process Firefox, the root DOM node of the Firefox window gets the first chance to process the event. Then, nodes lower down in the DOM tree get a chance. The event handling proceeds down through to the XUL <code><browser></code> element. At this point, nodes in the web page’s DOM tree are given a chance to handle the event, all the way down to the button. The bubble phase follows, running in the opposite order, all the way back up to the root node of the Firefox window.</p> + +<p>With multiple processes, event handling works the same way until the <code><browser></code> element is hit. At that point, if the event hasn’t been handled yet, it gets sent to the child process by IPC, where handling starts at the root of the content DOM tree. The parent process then waits to run its bubbling phase until the content process has finished handling the event.</p> + +<h2 id="Inter-process_communication"><strong id="ipc">Inter-process communication</strong></h2> + +<p>All IPC happens using the Chromium IPC libraries. Each child process has its own separate IPC link with the parent. Children cannot communicate directly with each other. To prevent deadlocks and to ensure responsiveness, the parent process is not allowed to sit around waiting for messages from the child. However, the child is allowed to block on messages from the parent.</p> + +<p>Rather than directly sending packets of data over IPC as one might expect, we use code generation to make the process much nicer. The IPC protocol is defined in <a href="https://wiki.mozilla.org/IPDL">IPDL</a>, which sort of stands for “inter-* protocol definition language”. A typical IPDL file is <code><a href="http://mxr.mozilla.org/mozilla-central/source/netwerk/ipc/PNecko.ipdl">PNecko.ipdl</a></code>. It defines a set messages and their parameters. Parameters are serialized and included in the message. To send a message <code>M</code>, C++ code just needs to call the method <code>SendM</code>. To receive the message, it implements the method <code>RecvM</code>.</p> + +<p>IPDL is used in all the low-level C++ parts of Gecko where IPC is required. In many cases, IPC is just used to forward actions from the child to the parent. This is a common pattern in Gecko:</p> + +<pre class="brush: cpp">void AddHistoryEntry(param) { + if (XRE_GetProcessType() == GeckoProcessType_Content) { + // If we're in the child, ask the parent to do this for us. + SendAddHistoryEntry(param); + return; + } + + // Actually add the history entry... +} + +bool RecvAddHistoryEntry(param) { + // Got a message from the child. Do the work for it. + AddHistoryEntry(param); + return true; +} +</pre> + +<p>When <code>AddHistoryEntry</code> is called in the child, we detect that we’re inside the child process and send an IPC message to the parent. When the parent receives that message, it calls <code>AddHistoryEntry</code> on its side.</p> + +<p>For a more realistic illustration, consider the Places database, which stores visited URLs for populating the awesome bar. Whenever the user visits a URL in the content process, we call <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/components/places/History.cpp?rev=8b9687f6c602#2326">this code</a>. Notice the content process check followed by the <code>SendVisitURI</code> call and an immediate return. The message is received <a href="http://mxr.mozilla.org/mozilla-central/source/dom/ipc/ContentParent.cpp?rev=fecda5f4a0df#2666">here</a>; this code just calls <code>VisitURI</code> in the parent.</p> + +<p>The code for IndexedDB, the places database, and HTTP connections all runs in the parent process, and they all use roughly the same proxying mechanism in the child.</p> + +<h2 id="Frame_scripts"><strong id="contentscripts">Frame scripts</strong></h2> + +<p>IPDL takes care of passing messages in C++, but much of Firefox is actually written in JavaScript. Instead of using IPDL directly, JavaScript code relies on <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">the message manager</a> to communicate between processes. To use the message manager in JS, you need to get hold of a message manager object. There is a global message manager, message managers for each Firefox window, and message managers for each <code><browser></code> element. A message manager can be used to load JS code into the child process and to exchange messages with it.</p> + +<p>As a simple example, imagine that we want to be informed every time a <code>load</code> event triggers in web content. We’re not interested in any particular browser or window, so we use the global message manager. The basic process is as follows:</p> + +<pre class="brush: js">// Get the global message manager. +let mm = Cc["@<span class="skimlinks-unlinked">mozilla.org/globalmessagemanager;1</span>"]. + getService(Ci.nsIMessageListenerManager); + +// Wait for load event. +mm.addMessageListener("GotLoadEvent", function (msg) { + dump("Received load event: " + <span class="skimlinks-unlinked">msg.data.url</span> + "\n"); +}); + +// Load code into the child process to listen for the event. +mm.loadFrameScript("chrome://content/<span class="skimlinks-unlinked">content-script.js</span>", true); +</pre> + +<p>For this to work, we also need to have a file <code>content-script.js</code>:</p> + +<pre class="brush: js">// Listen for the load event. +addEventListener("load", function (e) { + // Inform the parent process. + let docURL = content.document.documentURI; + sendAsyncMessage("GotLoadEvent", {url: docURL}); +}, false); +</pre> + +<p>This file is called a <em>frame script</em>. When the <code>loadFrameScript</code> function call runs, the code for the script is run once for each <code><browser></code> element. This includes both remote browsers and regular ones. If we had used a per-window message manager, the code would only be run for the browser elements in that window. Any time a new browser element is added, the script is run automatically (this is the purpose of the <code>true</code> parameter to <code>loadFrameScript</code>). Since the script is run once per browser, it can access the browser’s window object and docshell via the <code>content</code> and <code>docShell</code> globals.</p> + +<p>The great thing about frame scripts is that they work in both single-process and multiprocess Firefox. To learn more about the message manager, see the <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager guide</a>.</p> + +<h2 id="Cross-process_APIs"><strong id="shims">Cross-process APIs</strong></h2> + +<p>There are a lot of APIs in Firefox that cross between the parent and child processes. An example is the <code>webNavigation</code> property of XUL <code><browser></code> elements. The <code>webNavigation</code> property is an object that provides methods like <code>loadURI</code>, <code>goBack</code>, and <code>goForward</code>. These methods are called in the parent process, but the actions need to happen in the child. First I’ll cover how these methods work in single-process Firefox, and then I’ll describe how we adapted them for multiple processes.</p> + +<p>The <code>webNavigation</code> property is defined using the XML Binding Language (XBL). XBL is a declarative language for customizing how XML elements work. Its syntax is a combination of XML and JavaScript. Firefox uses XBL extensively to customize XUL elements like <code><browser></code> and <code><tabbrowser></code>. The <code><browser></code> customizations reside in <code><a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/browser.xml?rev=754cf7fc84cd">browser.xml</a></code>. <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/browser.xml?rev=754cf7fc84cd#262">Here</a> is how <code>browser.webNavigation</code> is defined:</p> + +<pre class="brush: xml"><field name="_webNavigation">null</field> + +<property name="webNavigation" readonly="true"> + <getter> + <![CDATA[ + if (!this._webNavigation) + this._webNavigation = this.docShell.QueryInterface(Components.interfaces.nsIWebNavigation); + return this._webNavigation; + ]]> + </getter> +</property> +</pre> + +<p>This code is invoked whenever JavaScript code in Firefox accesses <code>browser.webNavigation</code>, where <code>browser</code> is some <code><browser></code> element. It checks if the result has already been cached in the <code>browser._webNavigation</code> field. If it hasn’t been cached, then it fetches the navigation object based off the browser’s <em>docshell</em>. The docshell is a Firefox-specific object that encapsulates a lot of functionality for loading new pages, navigating back and forth, and saving page history. In multiprocess Firefox, the docshell lives in the child process. Since the <code>webNavigation</code> accessor runs in the parent process, <code>this.docShell</code> above will just return null. As a consequence, this code will fail completely.</p> + +<p>One way to fix this problem would be to create a fake docshell in C++ that could be returned. It would operate by sending IPDL messages to the real docshell in the child to get work done. We may eventually take this route in the future. We decided to do the message passing in JavaScript instead, since it’s easier and faster to prototype things there. Rather than change every docshell-using accessor to test if we’re using multiprocess browsing, we decided to create a new XBL binding that applies only to remote <code><browser></code> elements. It is called <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/widgets/remote-browser.xml?rev=9583bd3099ae"><code>remote-browser.xml</code></a>, and it extends the existing <code>browser.xml</code> binding.</p> + +<p>The <code>remote-browser.xml</code> binding returns a JavaScript <em>shim object</em> whenever anyone uses <code>browser.webNavigation</code> or other similar objects. The shim object is implemented <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/modules/RemoteWebNavigation.jsm">in its own JavaScript module</a>. It uses the message manager to send messages like <code>"WebNavigation:LoadURI"</code> to <a href="http://mxr.mozilla.org/mozilla-central/source/toolkit/content/browser-child.js?rev=9583bd3099ae#107">a content script loaded by <code>remote-browser.xml</code></a>. The content script performs the actual action.</p> + +<p>The shims we provide emulate their real counterparts imperfectly. They offer enough functionality to make Firefox work, but add-ons that use them may find them insufficient. I’ll discuss strategies for making add-ons work in more detail later.</p> + +<h2 id="Cross-process_object_wrappers"><strong id="cpows">Cross-process object wrappers</strong></h2> + +<p>The message manager API does not allow the parent process to call <code>sendSyncMessage</code>; that is, the parent is not allowed to wait for a response from the child. It’s detrimental for the parent to wait on the child, since we don’t want the browser UI to be unresponsive because of slow content. However, converting Firefox code to be asynchronous (i.e., to use <code>sendAsyncMessage</code> instead) can sometimes be onerous. As an expedient, we’ve introduced a new primitive that allows code in the parent process to access objects in the child process synchronously.</p> + +<p>These objects are called cross-process object wrappers, frequently abbreviated to CPOWs. They’re created using the message manager. Consider this example content script:</p> + +<pre class="brush: js">addEventListener("load", function (e) { + let doc = content.document; + sendAsyncMessage("GotLoadEvent", <strong>{}, {document: doc}</strong>); +}, false); +</pre> + +<p>In this code, we want to be able to send a reference to the document to the parent process. We can’t use the second parameter to <code>sendAsyncMessage</code> to do this: that argument is converted to JSON before it is sent up. The optional third parameter allows us to send object references. Each property of this argument becomes accessible in the parent process as a CPOW. Here’s what the parent code might look like:</p> + +<pre class="brush: js">let mm = Cc["@<span class="skimlinks-unlinked">mozilla.org/globalmessagemanager;1</span>"]. + getService(Ci.nsIMessageListenerManager); + +mm.addMessageListener("GotLoadEvent", function (msg) { + let uri = <strong>msg.objects.document.documentURI</strong>; + dump("Received load event: " + uri + "\n"); +}); +mm.loadFrameScript("chrome://content/<span class="skimlinks-unlinked">content-script.js</span>", true); +</pre> + +<p>It’s important to realize that we’re send object <em>references</em>. The <code>msg.objects.document</code> object is only a wrapper. The access to its <code>documentURI</code> property sends a synchronous message down to the child asking for the value. The dump statement only happens after a reply has come back from the child.</p> + +<p>Because every property access sends a message, CPOWs can be slow to use. There is no caching, so 1,000 accesses to the same property will send 1,000 messages.</p> + +<p>Another problem with CPOWs is that they violate some assumptions people might have about message ordering. Consider this code:</p> + +<pre class="brush: js">mm.addMessageListener("GotLoadEvent", function (msg) { + mm.sendAsyncMessage("ChangeDocumentURI", {newURI: "<span class="skimlinks-unlinked">hello.com</span>"}); + let uri = <strong>msg.objects.document.documentURI</strong>; + dump("Received load event: " + uri + "\n"); +}); +</pre> + +<p>This code sends a message asking the child to change the current document URI. Then it accesses the current document URI via a CPOW. You might expect the value of <code>uri</code> to come back as <code>"hello.com"</code>. But it might not. In order to avoid deadlocks, CPOW messages can bypass normal messages and be processed first. It’s possible that the request for the <code>documentURI</code> property will be processed before the <code>"ChangeDocumentURI"</code> message, in which case <code>uri</code> will have some other value.</p> + +<p>For this reason, it’s best not to mix CPOWs with normal message manager messages. It’s also a bad idea to use CPOWs for anything security-related, since you may not get results that are consistent with surrounding code that might use the message manager.</p> + +<p>Despite these problems, we’ve found CPOWs to be useful for converting certain parts of Firefox to be multiprocess-compatible. It’s best to use them in cases where users are less likely to notice poor responsiveness. As an example, we use CPOWs to implement the context menu that pops up when users right-click on content elements. Whether this code is asynchronous or synchronous, the menu cannot be displayed until content has responded with data about the element that has been clicked. The user is unlikely to notice if, for example, tab animations don’t run while waiting for the menu to pop up. Their only concern is for the menu to come up as quickly as possible, which is entirely gated on the response time of the content process. For this reason, we chose to use CPOWs, since they’re easier than converting the code to be asynchronous.</p> + +<p>It’s possible that CPOWs will be phased out in the future. Asynchronous messaging using the message manager gives a user experience that is at least as good as, and often strictly better than, CPOWs. We strongly recommend that people use the message manager over CPOWs when possible. Nevertheless, CPOWs are sometimes useful.</p> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html new file mode 100644 index 0000000000..fe2917686b --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html @@ -0,0 +1,179 @@ +--- +title: Message manager overview +slug: Mozilla/Firefox/Multiprocess_Firefox/Types_of_message_manager +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Types_of_message_manager +--- +<div>{{FirefoxSidebar}}</div><p>In the initial version of multiprocess Firefox there are two processes:</p> + +<ul> + <li>the chrome process, also called the parent process, runs the browser UI (chrome) code and code inserted by extensions</li> + <li>the content process, also called the child process, runs all web content. In future versions of multiprocess Firefox different tabs may run in different processes, but for now, all content tabs share a single content process.</li> +</ul> + +<p>Message managers are designed to enable code in one process to communicate with code in a different process. At the top level, there are two different sorts of message managers:</p> + +<ul> + <li><em>Frame message managers</em>: these enable chrome process code to load a script into a browser frame (essentially, a single browser tab) in the content process. These scripts are called <em>frame scripts</em>, and as the name suggests, they are scoped to a specific browser frame. If chrome code wants to run code in the content process so it can access web content, this is usually the sort of message manager to use.</li> + <li><em>Process message managers</em>: these correspond to process boundaries, and enable code running in the parent (chrome) process to communicate with code running in the child (content) process. From Firefox 38 onwards, they also enable code running in the parent process to load <em>process scripts</em> into the child process. These are like frame scripts, except they are global to the child process. Process scripts are most likely to be useful when chrome code wants to run some code only once in the content process, to access some global service: for example, to register an observer or a content policy.</li> +</ul> + +<h2 id="Frame_message_managers">Frame message managers</h2> + +<p>In multiprocess Firefox, when chrome code needs to interact with web content, it needs to:</p> + +<ul> + <li>factor the code that needs direct access to content into separate scripts, which are called "frame scripts"</li> + <li>use a frame message manager to load these frame scripts into the content process</li> + <li>use the frame message manager API to communicate with the frame script</li> +</ul> + +<div class="note"> +<p>Some older articles on multiprocess Firefox and the message manager might refer to "content scripts" instead of "frame scripts", but this usage is deprecated because the Add-on SDK uses "content script" to refer to a <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Content_Scripts">similar but different kind of script</a>.</p> +</div> + +<p>There are three different subtypes of frame message manager: the global message manager, the window message manager, and the browser message manager. All three enable chrome code to:</p> + +<ul> + <li>load a script into a frame in the content the content process using a <code>loadFrameScript()</code> function. These scripts are called "frame scripts".</li> + <li>communicate with frame scripts using <code>addMessageListener()</code> and <code>broadcastAsyncMessage() </code>or <code>sendAsyncMessage() </code>functions.</li> +</ul> + +<div class="note"> +<p>Note that in this context, "browser" refers to the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/browser">XUL <browser> object</a>, which is a frame that hosts a single Web document. It does not refer to the more general sense of a Web browser.</p> +</div> + +<h3 id="Global_message_manager">Global message manager</h3> + +<p>The <strong>global message manager</strong> operates on every <code><browser></code> (that is, every open content tab).<code> </code></p> + +<ul> + <li><code>loadFrameScript()</code> loads the given script into every <code><browser></code> in every browser window.</li> + <li><code>broadcastAsyncMessage()</code> sends the message to every <code><browser></code> in every browser window.</li> +</ul> + +<p>It's a <code>ChromeMessageBroadcaster</code> object, which implements the following interfaces:</p> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader" title="">nsIFrameScriptLoader</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster" title="">nsIMessageBroadcaster</a></code></li> +</ul> + +<p>You can access the global message manager like this:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// chrome script +</span><span class="keyword token">let</span> globalMM <span class="operator token">=</span> Cc<span class="punctuation token">[</span><span class="string token">"@mozilla.org/globalmessagemanager;1"</span><span class="punctuation token">]</span> + <span class="punctuation token">.</span><span class="function token">getService<span class="punctuation token">(</span></span>Ci<span class="punctuation token">.</span>nsIMessageListenerManager<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Window_message_manager">Window message manager</h3> + +<p>The <strong>window message manager</strong> is associated with a specific browser window, and operates on every <code><browser></code> (that is, every content tab) loaded into that window:</p> + +<ul> + <li><code>loadFrameScript()</code> loads the given script into every <code><browser></code> in that browser window</li> + <li><code>broadcastAsyncMessage()</code> sends the message to every <code><browser></code> in that browser window.</li> +</ul> + +<p>It's a <code>ChromeMessageBroadcaster</code> object, which implements the following interfaces:</p> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader" title="">nsIFrameScriptLoader</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster" title="">nsIMessageBroadcaster</a></code></li> +</ul> + +<p>The window message manager can be accessed as a property of the browser window:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// chrome script +</span><span class="keyword token">let</span> windowMM <span class="operator token">=</span> window<span class="punctuation token">.</span>messageManager<span class="punctuation token">;</span></code></pre> + +<h3 id="Browser_message_manager">Browser message manager</h3> + +<p>The <strong>browser message manager</strong> is specific to a single XUL <code><browser></code> element (which essentially corresponds to a single tab):</p> + +<ul> + <li><code>loadFrameScript()</code> loads the given script only into its <code><browser></code></li> + <li><code>sendAsyncMessage()</code> sends the message only to that <code><browser></code>.</li> +</ul> + +<p>You can mix and match: so for example, you could load a script into every <code><browser></code> using the global message manager, but then send a message to the script instance loaded into a specific <code><browser></code> using the browser message manager.</p> + +<p>It's a <code>ChromeMessageSender</code> object, which implements the following interfaces:</p> + +<ul> + <li><code><a class="new" href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIProcessChecker" title="">nsIProcessChecker</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFrameScriptLoader" title="">nsIFrameScriptLoader</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender" title="">nsIMessageSender</a></code></li> +</ul> + +<p>The browser message manager can be accessed as a property of the XUL <code><browser></code> element:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// chrome script +</span><span class="keyword token">let</span> browserMM <span class="operator token">=</span> gBrowser<span class="punctuation token">.</span>selectedBrowser<span class="punctuation token">.</span>messageManager<span class="punctuation token">;</span></code></pre> + +<h2 id="Process_message_managers">Process message managers</h2> + +<p>Process message managers correspond to process boundaries, and enable code running in different processes to communicate. Multiprocess Firefox has the concept of:</p> + +<ul> + <li>a "parent process"</li> + <li>"child processes" which are processes spawned by the parent process.</li> +</ul> + +<p>For practical purposes, in multiprocess Firefox the parent process is the chrome process, and child processes are content processes. </p> + +<p>In each child process, there's a single <em>child process message manager</em> (CPMM). For each child process message manager, there's a <em>parent process message manager</em> (PPMM) in the parent process. There's also a single <em>global parent process message manager</em> (GPPMM) in the parent process, that provides access to all the parent process message managers:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10791/process-message-managers.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 524px;"></p> + +<p> </p> + +<p>With the GPPMM, you can broadcast messages to all CPMMs. With a PPMM, you can send a message to its corresponding CPMM. With a CPMM, you can send messages to the parent process: these messages are received first by the corresponding PPMM, then by the GPPMM.</p> + +<p>From Firefox 38 onwards, you can also use a parent process message manager to load a script into a child process. This is the recommended way to load a script that executes just once per child process, which is something you might want to do if you are interacting with some global service (for example, adding listeners to observer notifications or registering components).</p> + +<h3 id="Accessing_process_message_managers">Accessing process message managers</h3> + +<p>You can access the global parent process manager with code like this:</p> + +<pre class="brush: js">// parent process +let parentProcessMessageManager = Cc["@mozilla.org/parentprocessmessagemanager;1"] + .getService(Ci.nsIMessageBroadcaster);</pre> + +<p>You can also access it as the <code>ppmm</code> property of <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm">Services.jsm</a>.</p> + +<pre class="brush: js">// child process script +let childProcessMessageManager = Cc["@mozilla.org/childprocessmessagemanager;1"] + .getService(Ci.nsISyncMessageSender);</pre> + +<h3 id="Parent_process_message_manager">Parent process message manager</h3> + +<p>The parent process message manager lives in the</p> + +<p>implements</p> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageBroadcaster" title="">nsIMessageBroadcaster</a></code></li> +</ul> + +<p> </p> + +<h3 id="Child_process_message_manager">Child process message manager</h3> + +<p>implements</p> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageListenerManager" title="">nsIMessageListenerManager</a></code></li> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIMessageSender" title="">nsIMessageSender</a></code></li> +</ul> + +<h4 id="Loading_scripts_per_child_process">Loading scripts per child process</h4> + +<p>Since the process message managers do not support script loading the only way to implement per-child process code is to use a <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox/The_message_manager#frame-scripts">frame script</a> which imports a custom <a href="https://developer.mozilla.org/en-US/docs/JavaScript_code_modules/Using">javascript module (JSM)</a>. Since javascript modules are singletons they will only be executed once per process even when they are loaded in multiple frame scripts.<br> + The JSM can then use the child process message manager to exchange messages with the parent process message manager.</p> + +<p>This can be useful for addons to register categories, observers and components in child processes.</p> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html b/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html new file mode 100644 index 0000000000..3089e24000 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html @@ -0,0 +1,28 @@ +--- +title: Web content compatibility +slug: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility +--- +<div>{{FirefoxSidebar}}</div><p><span class="seoSummary">While the introduction of multi-process capabilities to Firefox should be seamless and invisible to Web content, there are some exceptions and subtle changes from past behavior. This article discusses the known differences you may encounter.</span></p> + +<h2 id="Events">Events</h2> + +<p>Here you'll find information about events whose behaviors have changed due to multiprocess Firefox's implementation.</p> + +<h3 id="No_bubbling_of_events_from_<option>_to_<select>">No bubbling of events from <code><option></code> to <code><select></code></h3> + +<p>Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code><option></code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code><select></code> element is displayed as a drop-down list. This behavior is unchanged if the <code><select></code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1.</p> + +<p>Rather than watching <code><option></code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Multiprocess Firefox</li> + <li>{{HTMLElement("option")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> +</ul> diff --git a/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html b/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html new file mode 100644 index 0000000000..7f9ee69755 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html @@ -0,0 +1,61 @@ +--- +title: Which URIs load where +slug: Mozilla/Firefox/Multiprocess_Firefox/Which_URIs_load_where +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Which_URIs_load_where +--- +<div>{{FirefoxSidebar}}</div><p>Based initially on the page's URI scheme, the browser can decide whether to load a page in the chrome process or a content process. For some schemes, you can change the default behavior.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Scheme</th> + <th scope="col">Behavior</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>about:</code></td> + <td> + <p>By default, <code>about:</code> pages are always loaded in the chrome process. However, when you register a new <code>about:</code> page, you can change this default.</p> + + <p>Two new flags are defined in <code><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/nsIAboutModule.idl">nsIAboutModule</a></code>:</p> + + <ul> + <li><code>URI_CAN_LOAD_IN_CHILD</code>: the page will be loaded in the same process as the <code><a href="/en-US/docs/XUL/browser">browser</a></code> that has loaded it.</li> + <li><code>URI_MUST_LOAD_IN_CHILD</code>: the page will always be loaded in a child process.</li> + </ul> + + <p>To use one of these flags, return it from your implementation of <code>getURIFlags</code> in the <a href="/en-US/docs/Custom_about:_URLs">code that registers the <code>about:</code> URI</a>.</p> + + <p>If you use these flags, you must register the about page in the framescript for each tab. If you do not set multiprocessCompatible to true in your install.rdf then shims will be used. But the e10s shims will be deprecated soon. Read more here - <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1257201">Bug 1257201</a>.</p> + </td> + </tr> + <tr> + <td><code>chrome:</code></td> + <td> + <p>By default, <code>chrome:</code> pages are always loaded in the chrome process. However, when you register a new <code>chrome:</code> page, you can change this default.</p> + + <p>Two new flags are defined in the <a href="/en-US/docs/Chrome_Registration">chrome.manifest file</a>:</p> + + <ul> + <li>remoteenabled: the page will be loaded in the same process as the <code><a href="/en-US/docs/XUL/browser">browser</a></code> that has loaded it.</li> + <li>remoterequired: the page will always be loaded in a child process.</li> + </ul> + </td> + </tr> + <tr> + <td><code>file:</code></td> + <td> + <p>Always loaded in a content process.</p> + + <p><strong>Note:</strong> This does not mean <code>file:</code> URIs can be used freely by code in content processes. Sandboxing may blacklist particular directories and future changes may restrict <code>file:</code> URIs to a separate content process, isolated from regular web content. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1187099">bug 1187099</a> how this can affect addons attempting to load files from the profile directory.</p> + </td> + </tr> + <tr> + <td><code>resource:</code></td> + <td>Always loaded in a content process.</td> + </tr> + </tbody> +</table> diff --git a/files/es/mozilla/firefox/privacy/index.html b/files/es/mozilla/firefox/privacy/index.html new file mode 100644 index 0000000000..c6a9e69b09 --- /dev/null +++ b/files/es/mozilla/firefox/privacy/index.html @@ -0,0 +1,9 @@ +--- +title: Privacy +slug: Mozilla/Firefox/Privacy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Privacy +--- +<div>{{FirefoxSidebar}}</div><p>{{ ListSubpages () }}</p> diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html new file mode 100644 index 0000000000..a66c128f8f --- /dev/null +++ b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html @@ -0,0 +1,97 @@ +--- +title: 'Blocked: Storage access requests from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +--- +<h2 id="Mensaje">Mensaje</h2> + +<p>Firefox:</p> + +<pre class="syntaxbox"> <span class="tlid-translation translation" lang="es"><span title="">CookieBlockedTracker = La solicitud de acceso a cookies o almacenamiento en "X" se bloqueó porque provenía de un rastreador y el bloqueo de contenido está habilitado.</span></span> +</pre> + +<h2 id="¿Qué_salió_mal"><span class="tlid-translation translation" lang="es"><span title="">¿Qué salió mal</span></span>?</h2> + +<p><span class="tlid-translation translation" lang="es"><span title="">Se bloqueó una solicitud de acceso a cookies o almacenamiento porque el navegador la identificó como proveniente de un rastreador y el bloqueo de contenido está habilitado</span></span> .</p> + +<p><span class="tlid-translation translation" lang="es"><span title="">El permiso puede ser cambiado o eliminado por</span></span>:</p> + +<ul> + <li>Going to <em>Preferences > Content Blocking </em>and either + + <ul> + <li>adding an exception with the <em>Manage Exceptions</em>… button</li> + <li>choosing the <em>Custom</em> Content Blocking and unchecking the <em>Tracker</em> checkbox</li> + </ul> + </li> +</ul> + +<p>If the blocked resource doesn't need authentication, you can fix the warning message by adding a <code>crossorigin="anonymous"</code> attribute to the relevant element.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://support.mozilla.org/en-US/kb/content-blocking">Content blocking</a> on <a href="https://support.mozilla.org">support.mozilla.org</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">The <code>crossorigin</code> attribute</a></li> +</ul> + +<div class="boxed translate-source hidden"><textarea><div>{{FirefoxSidebar}}</div> + +<h2 id="Message">Message</h2> + +<p>Firefox:</p> + +<pre class="syntaxbox">CookieBlockedTracker=Request to access cookies or storage on “X” was blocked because it came from a tracker and content blocking is enabled. +</pre> + +<h2 id="What_went_wrong">What went wrong?</h2> + +<p>A request to access cookies or storage was blocked because the browser identified it as coming from a tracker and content blocking is enabled.</p> + +<p>The permission can be changed or removed by:</p> + +<ul> + <li>Going to <em>Preferences &gt; Content Blocking </em>and either + + <ul> + <li>adding an exception with the <em>Manage Exceptions</em>… button</li> + <li>choosing the <em>Custom</em> Content Blocking and unchecking the <em>Tracker</em> checkbox</li> + </ul> + </li> +</ul> + +<p>If the blocked resource doesn't need authentication, you can fix the warning message by adding a <code>crossorigin="anonymous"</code> attribute to the relevant element.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://support.mozilla.org/en-US/kb/content-blocking">Content blocking</a> on <a href="https://support.mozilla.org">support.mozilla.org</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">The <code>crossorigin</code> attribute</a></li> +</ul></textarea></div> + +<article class="localized"> +<header> +<h3 id="Traducción_en_Español">Traducción en Español:</h3> +</header> + +<div class="guide-links"><a href="/es/docs/MDN/Community" rel="noopener">¿Necesitas ayuda?</a> • <a href="/es/docs/MDN/Contribute/Editor" rel="noopener">Guía editorial</a> • <a href="/es/docs/MDN/Contribute/Content/Style_guide" rel="noopener">Guía de estilo</a></div> + +<div class="editor-wrapper" id="editor-wrapper"> +<div class="draft-container"> +<div class="draft-old"></div> + +<div class="draft-status">Autoguardado activado.</div> +</div> + +<div class="ckeditor-container editor-container dirty"> +<div class="editor"> +<div class="editor-tools"></div> +<textarea><p>La solicitud para acceder a la cookie o al almacenamiento en "https://www.dominio.com/" se bloqueó porque provenía de un rastreador y el bloqueador de contenido está habilitado.</p></textarea> + +<div style="height: 172px;"> +<div style="border: 1px solid rgb(182, 182, 182); width: 617px; position: fixed; top: 0px;"></div> +</div> +</div> +</div> +</div> +</article> diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html new file mode 100644 index 0000000000..e34540eb06 --- /dev/null +++ b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html @@ -0,0 +1,24 @@ +--- +title: Errors +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +tags: + - Cookies + - Errors + - NeedsTranslation + - Storage + - TopicStub + - storage access policy +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +--- +<div>{{FirefoxSidebar}}</div> + +<p>This page lists the errors that can be raised due to Firefox's anti-tracking functionality, governed by the <a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy">Storage access policy</a>. You can find further information about them by clicking on the links below:</p> + +<p>A request to access cookies or storage was blocked because</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedByPermission">of custom cookie permission</a>.</li> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker">it came from a tracker and content blocking is enabled</a>.</li> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedAll">we are blocking all storage access requests</a>.</li> + <li><a href="/en-US/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedForeign">we are blocking all third-party storage access requests and content blocking is enabled</a>.</li> +</ul> diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/index.html new file mode 100644 index 0000000000..14d79a009c --- /dev/null +++ b/files/es/mozilla/firefox/privacy/storage_access_policy/index.html @@ -0,0 +1,267 @@ +--- +title: 'Storage access policy: Block cookies from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy +tags: + - NeedsTranslation + - Privacy + - TopicStub + - storage access policy + - tracking protection +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">Firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources. This new policy is designed as an alternative to the <a href="/en-US/docs/Mozilla/Cookies_Preferences">current policies</a>, which have been available in Firefox for many years. The new policy protects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. This article explains how the new policy works and how you can test it.</p> + +<h2 id="Testing_in_Firefox">Testing in Firefox</h2> + +<p>You can test how your website works under the new policy in Firefox version 63+. Those who want to test the absolute newest version of the policy can download <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Firefox Nightly</a>, but note that Nightly may include versions of the policy that end up changing before they reach our Release users. You can enable it through the “Content Blocking” menu in the <a href="https://support.mozilla.org/en-US/kb/control-center-site-privacy-and-security-firefox">Control Center</a> in Firefox:</p> + +<ul> + <li>Open up any version of Firefox version 63 or above. (for those who want to test the newest policy revision: download, install, and open up <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Firefox Nightly</a>.)</li> + <li>Open the Content Blocking menu in the Control Center.</li> + <li>Click "Add Blocking…" next to "Third-party Cookies".</li> + <li>On the page that follows check "Third-party Cookies" and set the radio button to "Trackers".</li> +</ul> + +<p>As this is an experimental policy, it will likely change as we discover site breakage and fix bugs. We’ll keep this page updated with the newest information.</p> + +<h3 id="Report_Broken_Sites">Report Broken Sites</h3> + +<p>If you find a website broken as a result of this change, file a bug under the Tracking Protection component within the Firefox product on <a href="https://bugzilla.mozilla.org/enter_bug.cgi?assigned_to=nobody%40mozilla.org&blocked=1480137&bug_file_loc=http%3A%2F%2F&bug_ignored=0&bug_severity=normal&bug_status=NEW&cf_fx_iteration=---&cf_fx_points=---&cf_platform_rel=---&cf_status_firefox62=---&cf_status_firefox63=---&cf_status_firefox64=---&cf_status_firefox_esr60=---&cf_status_geckoview62=---&cf_tracking_firefox62=---&cf_tracking_firefox63=---&cf_tracking_firefox64=---&cf_tracking_firefox_esr60=---&cf_tracking_firefox_relnote=---&cf_tracking_geckoview62=---&component=Tracking%20Protection&contenttypemethod=list&contenttypeselection=text%2Fplain&defined_groups=1&flag_type-203=X&flag_type-37=X&flag_type-41=X&flag_type-5=X&flag_type-607=X&flag_type-721=X&flag_type-737=X&flag_type-748=X&flag_type-787=X&flag_type-799=X&flag_type-800=X&flag_type-803=X&flag_type-835=X&flag_type-846=X&flag_type-855=X&flag_type-864=X&flag_type-914=X&flag_type-916=X&flag_type-929=X&flag_type-930=X&flag_type-933=X&form_name=enter_bug&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=Unspecified&priority=--&product=Firefox&rep_platform=Unspecified&target_milestone=---&version=unspecified">Bugzilla</a>. Alternatively you can report a broken sites directly in Firefox by clicking "Report a Problem" in the Content Blocking section of the Control Center.</p> + +<p><img alt="diagram showing the report a problem button within the Content Blocking section of the Control Center" src="https://mdn.mozillademos.org/files/16249/control_center_report_problem.png" style="height: 475px; width: 509px;"></p> + +<h2 id="Tracking_protection_explained">Tracking protection explained</h2> + +<p>How does Firefox determine which resources are tracking resources?</p> + +<p>Firefox uses the Tracking Protection list to determine which resources are tracking resources. The Tracking Protection list is <a href="https://github.com/disconnectme/disconnect-tracking-protection/issues">maintained by Disconnect</a>. When the list is applied in Firefox, we make two important changes:</p> + +<ul> + <li>First, we only use the "Basic Protection" version of the list, which <a href="https://github.com/mozilla-services/shavar-prod-lists#blacklist">excludes some categories of trackers</a>. In the future, we may expand our protections to use the "Strict Protection" version of the list.</li> + <li>Second, Firefox uses an additional "<a href="https://github.com/mozilla-services/shavar-prod-lists/blob/master/disconnect-entitylist.json">entity list</a>", which prevents <a href="https://github.com/mozilla-services/shavar-prod-lists#entity-list">domains from being classified as trackers when they are loaded on a top-level site owned by the same organization</a>.</li> +</ul> + +<p>Firefox uses the built-in <a href="https://support.mozilla.org/en-US/kb/tracking-protection">Tracking Protection</a> URL classifier to determine which resources match the tracking protection list. Domains are matched against the list in accordance with the <a href="https://developers.google.com/safe-browsing/v4/urls-hashing#suffixprefix-expressions">SafeBrowsing v4 specification</a>. Specifically, we check the exact hostname of the resource against the list, as well as the last four hostnames formed by starting with the last five components and successively removing the leading component. Consider the following examples:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Hostname on the list</th> + <th scope="col">Hostname of resource</th> + <th scope="col">Matched</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>example.com</code></td> + <td><code>example.com</code></td> + <td>Yes</td> + </tr> + <tr> + <td><code>example.com</code></td> + <td><code>a.b.example.com</code></td> + <td>Yes</td> + </tr> + <tr> + <td><code>blah.example.com</code></td> + <td><code>example.com</code></td> + <td>No</td> + </tr> + <tr> + <td><code>a.b.example.com</code></td> + <td><code>c.d.example.com</code></td> + <td>No</td> + </tr> + <tr> + <td><code>blah.example.com</code></td> + <td><code>foo.blah.example.com</code></td> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="What_does_the_storage_access_policy_block">What does the storage access policy block?</h2> + +<p>The storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. This prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. Specifically, Firefox does this by imposing the following restrictions:</p> + +<p>Cookies:</p> + +<ul> + <li>Block {{httpheader("Cookie")}} request headers and ignore {{httpheader("Set-Cookie")}} response headers.</li> + <li>Return an empty string for calls to {{domxref("Document.cookie")}} and ignore requests to set cookies via <code>Document.cookie</code>.</li> +</ul> + +<p>DOM Storage:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Storage_API">localStorage</a>: window.localStorage is null. Thus, attempts to read and write using this object will throw a <code>TypeError</code> exception</li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API">sessionStorage</a>: read and write attempts are permitted.</li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>: read and write attempts throw a <code>SecurityError</code> exception.</li> +</ul> + +<p>Messaging and Workers:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>: attempts to create a new {{domxref("BroadcastChannel")}} will throw a <code>SecurityError</code> exception.</li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">Shared Worker</a>: attempts to create a new {{domxref("SharedWorker")}} will throw a <code>SecurityError</code> exception.</li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a>: attempts to create a new {{domxref("ServiceWorker")}} will throw a <code>SecurityError</code> exception.</li> +</ul> + +<p>DOM Cache:</p> + +<ul> + <li>Calls to {{domxref("CacheStorage")}} will always reject with a <code>SecurityError</code>.</li> +</ul> + +<p>Browser caches:</p> + +<ul> + <li>The <a href="/en-US/docs/Mozilla/HTTP_cache">HTTP cache</a> and the Image cache are partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other.</li> +</ul> + +<h3 id="What_is_not_blocked_by_the_policy">What is not blocked by the policy?</h3> + +<ol> + <li>This policy does not currently restrict third-party storage access for resources that are not classified as tracking resources. We may choose to apply additional restrictions to third-party storage access in the future.</li> + <li>The restrictions applied by the policy will not prevent third-party scripts classified as tracking resources from accessing storage in the main context of the page. These scripts can continue to use storage scoped to the top-level origin.</li> + <li>Origins classified as trackers will have access to their own storage when they are loaded in a first-party context.</li> + <li>Cross-origin resources loaded from the same eTLD+1 as the top-level context will still have access to their storage.</li> + <li>Origins normally classified as trackers will <a href="https://github.com/mozilla-services/shavar-prod-lists#entity-list">not be blocked if the top-level page origin is determined to be from the same organization as them</a>.</li> +</ol> + +<h2 id="Storage_access_grants">Storage access grants</h2> + +<p>In order to improve web compatibility and permit third-party integrations that require storage access, Firefox will grant storage access scoped to the first party for a particular third-party origin as described in this section. Currently, Firefox includes some web compatibility heuristics that grant storage access to third-party resources classified as trackers when a user interacts with those third parties. We do this when we expect that not granting access would cause the web page to break. We also support an initial implementation of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>, through which embedded {{htmlelement("iframe")}}s can request storage access by calling {{domxref("Document.requestStorageAccess()")}}. Although both of these approaches provide the same level of storage access, we recommend third parties switch to using the Storage Access API in order to guarantee their access to storage.</p> + +<h3 id="Automatic_storage_access_upon_interaction">Automatic storage access upon interaction</h3> + +<p>In order to improve web compatibility, Firefox currently includes some heuristics to grant storage access automatically to third parties that receive user interaction. These heuristics are intended to allow some third-party integrations that are common on the web to continue to function. They are intended to be temporary and will be removed in a future version of Firefox. They should not be relied upon for current and future web development.</p> + +<p>Third-party storage access may be granted to resources that have been classified as tracking resources when a user gesture triggers a pop-up window that has <a href="/en-US/docs/Web/API/Window/opener">opener access</a> to the originating document. When that occurs, there are two possible ways a third-party origin can be granted access:</p> + +<ul> + <li>The origin of the resource that is initially loaded in the pop-up window is granted storage access on the opener document if that origin has received user interaction as a first party within the past 30 days.</li> + <li>After the initial resource is loaded in the pop-up window, the window may go through a series of redirects to other hosts. If a user interacts with the pop-up window following a redirect, the origin of the content loaded in the pop-up window is given storage access on the opener document.</li> +</ul> + +<h3 id="Scope_of_storage_access">Scope of storage access</h3> + +<p>When storage access is granted, it is scoped to the origin of the opener document or subdomains of that origin. Access that is granted on the subdomain of an origin does not extend to the top-level origin. As an example, if a resource from <code>tracker.example</code> is granted storage access on <code>foo.example.com</code>, then <code>tracker.example</code> will be able to access its cookies on <code>bar.foo.example.com</code> but not <code>example.com</code>. Instead, if <code>tracker.example</code> were granted access on <code>example.com</code> it would be able to access its storage on <code>bar.foo.example.com</code>, <code>foo.example.com</code>, and <code>example.com</code>.</p> + +<p>When storage access is granted to <code>tracker.example</code> on <code>example.com</code>, all resources loaded from <code>tracker.example</code> on any top-level document loaded from <code>example.com</code> are immediately given storage access. This includes all resources loaded in the main context of the page, embedded <code><iframe></code>s, and resources loaded within embedded <code><iframe></code>s. Storage access is not extended to other resources loaded on <code>example.com</code> (e.g. <code>other-tracker.example</code>), nor to other first parties on which <code>tracker.example</code> is embedded (e.g. <code>example.org</code>).</p> + +<p>Storage access grants extend into the first level of nested contexts, but no further. This means that <code><iframe></code>s embedded in the main context of the page and loaded from a domain classified as a tracker will have full access to all storage locations accessible through JavaScript. Similarly, requests for resources loaded in <code><iframe></code>s embedded in the main context of the page will have access to HTTP cookies. However, further nested contexts, including but not limited to those from the origin classified as a tracker, will not be granted storage access.</p> + +<p>Consider the following embedding scenarios on a top-level page loaded from <code>example.com</code> on which <code>tracker.example</code> has been granted storage access.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Embedding</th> + <th scope="col">tracker.example resource storage access</th> + </tr> + </thead> + <tbody> + <tr> + <td>An image is loaded from <code>tracker.example</code> and embedded in the main context of <code>example.com</code>.</td> + <td>HTTP: Yes<br> + JS: N/A</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>example.org</code>. That <code><iframe></code> goes on to load an image from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: N/A</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>example.org</code>. That <code><iframe></code> goes on to embed an <code><iframe></code> from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: No</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: Yes</td> + </tr> + <tr> + <td><code>example.com</code> embeds an <code><iframe></code> from <code>example.com</code> (same origin). The nested <code><iframe></code> embeds an <code><iframe></code> from <code>tracker.example</code>.</td> + <td>HTTP: Yes<br> + JS: No</td> + </tr> + </tbody> +</table> + +<h3 id="Storage_access_expiration">Storage access expiration</h3> + +<p>The storage access grant expires after 30 days. Domains classified as tracking resources may be granted third-party storage access on multiple first parties, and the storage permission for each party expires independently. The above heuristics will also serve to extend the lifetime of a third-party storage permission on origins that have already been granted access. Each time the heuristic is activated, or a success call to the Storage Access API is made, the pre-existing storage access expiration will be extended by 30 days, counting from the time the previous access was granted.</p> + +<p>Please note that in the future we expect to make changes to how long storage access will remain valid for. As mentioned before, the way to know that you will be able to use storage as a third-party going forward will be using the Storage Access API.</p> + +<h2 id="Debugging">Debugging</h2> + +<p>We encourage site owners to test their sites, particularly those that rely on third-party content integrations. We’ve added several new features to Firefox to make testing easier.</p> + +<h3 id="Developer_Tools_notifications">Developer Tools notifications</h3> + +<p>The <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> in Firefox Developer Tools now includes an indicator for all resource requests that have been classified as tracking resources. This indicator is shown as a shield icon in the domain column. In the sample image below, <code>trackertest.org</code> is classified as a tracking resource, while the request to example.com is not.</p> + +<p><img alt="network requests in Firefox devtools indicating which ones are tracking resources with a small shield icon" src="https://mdn.mozillademos.org/files/16181/Screen_Shot_2018-09-21_at_10.34.22_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Adding_custom_domains_to_the_Tracking_Protection_list">Adding custom domains to the Tracking Protection list</h3> + +<p>Curious how things will work if a third-party domain on your site were classified as a tracker? We’ve added a preference that allows you to add custom domains to the Tracking Protection URL classifier. To do so:</p> + +<ol> + <li>Type <code>about:config</code> in your address bar. If you are presented with a page that warns you "This may void your warranty!", click "I accept the risk!"</li> + <li>Right click on the next page and click "New" > "String".</li> + <li>For the preference name enter "urlclassifier.trackingAnnotationTable.testEntries".</li> + <li>For the preference value enter comma separated origins that you’d like to have classified as trackers. E.g. "example.net,example.org".</li> +</ol> + +<div class="warning"> +<p><strong>Warning</strong>: Be sure to remove these entries after you have finished testing.</p> +</div> + +<h2 id="FAQ">FAQ</h2> + +<p>This cookie policy has the potential to lead to site breakage, but has been designed to allow common third-party integrations to continue to work while preventing cross-site tracking. In this section we describe the functionality you can expect in different integration scenarios.</p> + +<h3 id="Will_this_storage_access_policy_block_ads_from_displaying_on_my_website">Will this storage access policy block ads from displaying on my website?</h3> + +<p>No — this feature only restricts access to cookies and site data that can be used to track users across websites. Blocking tracking identifiers does not prevent the display of advertisements.</p> + +<h3 id="I_use_a_third-party_analytics_service_that_is_classified_as_a_tracker._Will_I_still_receive_analytics_data">I use a third-party analytics service that is classified as a tracker. Will I still receive analytics data?</h3> + +<p>This depends on how the third-party analytics service is implemented. Third-party analytics providers will no longer be able to user their third-party storage to collect data. This means that providers using cookies which are scoped to their third-party domain, or local storage and other site data stored under their origin, will no longer have access to those identifiers across other websites.</p> + +<p>If these services are embedded into the main context of the page, they can continue to use first-party cookies and site storage to track users across page visits on that specific first-party domain.</p> + +<h3 id="I_use_third-party_services_for_social_login_like_and_share_button_integration._Will_my_users_still_be_able_to_make_use_of_these_services">I use third-party services for social login, like, and share button integration. Will my users still be able to make use of these services?</h3> + +<p>This depends on how the social integration is implemented. We expect that many of the popular social integrations will continue to function as they do under Firefox’s current cookie policy with some minor differences in the user experience.</p> + +<p>A social content provider that is classified as a tracker will not have access to their third-party cookies when the user first visits a new first party. Thus, the user may appear logged out to the service despite being logged in when they visit the provider’s website directly. Depending on the type of integration, the user may have to take some action to interact with the social content provider before the provider is given access to their cookies. For example:</p> + +<ul> + <li>For social login, the user may have to click a login button on the first party.</li> + <li>For social like or share buttons, the user will have to first interact with the button in a logged-out state. Once they do, many social content providers will prompt them to log in.</li> +</ul> + +<p>After these interactions, the provider will receive third-party storage access if they prompt the user in a way that is captured by the storage access activation heuristics described above. These providers should consider switching to explicitly request storage access through the Storage Access API as soon as possible. An <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1469714">initial implementation of this API</a> is currently available in Nightly.</p> + +<p> </p> + +<h3 id="I_use_third-party_pixels_and_other_tools_to_measure_the_effectiveness_of_my_ad_campaigns._Will_I_still_be_able_to_measure_the_conversion_rate_of_my_ads">I use third-party pixels and other tools to measure the effectiveness of my ad campaigns. Will I still be able to measure the conversion rate of my ads?</h3> + +<p>This depends on how the third party has implemented the measurement tool, but generally ad conversion measurement will be more difficult. Consider the following examples:</p> + +<ol> + <li>You run an ad on a social media website that is seen several times by a user, but never clicked. That user later visits your website, which includes a conversion tracking tag from the same social media website. This type of conversion is often referred to as a “view-through conversion.” Since the social media website does not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that most view-through conversion tracking techniques will no longer work, including those offered by display networks.</li> + <li>You run an ad on a display network or social media website that is clicked by a user. That user lands on your website, which includes a conversion tracking tag from the same website that displayed your ad. This type of conversion is often referred to as a “click-through conversion.” Since the social media site or display network will not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that this version of click-through conversion will no longer work.</li> + <li>You run an ad that appears on a social media website. A user clicks on your advertisement and is taken to a landing page that contains a conversion tracking tag from the third-party network. On the social media website, the network annotates the advertisement landing page URL with a query parameter that signals that the visit was the result of a click on an advertisement. On your website, the display network’s tag checks the URL query parameters and saves any ad tracking parameters to first-party storage. If a user later completes a conversion event, the network’s tag checks first-party storage to determine which click (or clicks) was responsible for the visit. We expect that click-through conversion implemented in this way will continue to work.</li> +</ol> + +<p> </p> + +<p> </p> diff --git a/files/es/mozilla/firefox/privacy/tracking_protection/index.html b/files/es/mozilla/firefox/privacy/tracking_protection/index.html new file mode 100644 index 0000000000..50dfda6984 --- /dev/null +++ b/files/es/mozilla/firefox/privacy/tracking_protection/index.html @@ -0,0 +1,80 @@ +--- +title: Protección contra el rastreo +slug: Mozilla/Firefox/Privacy/Tracking_Protection +tags: + - bloqueo + - navegación privada + - privacidad + - rastreo + - seguimiento +translation_of: Mozilla/Firefox/Privacy/Tracking_Protection +--- +<div>{{FirefoxSidebar}}</div><h2 id="¿Qué_es_la_protección_contra_el_rastreo">¿Qué es la protección contra el rastreo?</h2> + +<p>A partir de la versión 42, Firefox para PC y Firefox para Android cuentan con protección contra el rastreo integrada. En las ventanas de Navegación Privada (o pestañas privadas, en Firefox para Android), Firefox bloqueará el contenido de dominios que rastrean la navegación de los usuarios entre diferentes sitios.</p> + +<p>A veces, algunos contenidos bloqueados son parte de la estructura de la página, y los usuarios notarán problemas de disposición de elementos cuando Firefox realice estos bloqueos. Otras veces los usuarios no notarán nada, si la estructura de la página está diseñada de tal manera que los espacios vacíos dejados por los elementos bloqueados los ocupen otros contenidos.</p> + +<p>Cuando Firefox bloquee contenido, registrará un mensaje como el siguiente en la consola web:</p> + +<pre>The resource at "http://some/url" was blocked because tracking protection is enabled.</pre> + +<p>Nótese que en Firefox para Android uno puede acceder a la salida de la consola usando el depurador remoto.</p> + +<p>La interfaz de usuario de Firefox indica a los usuarios cuándo se ha producido un bloqueo de contenido y les permite desbloquearlo en esa sesión. Si lo desean, también pueden desactivar completamente la protección contra el rastreo. Descubre más en <a href="https://support.mozilla.org/es/kb/navegacion-privada-con-proteccion-contra-el-rastreo">este artículo.</a></p> + +<h2 id="¿Cómo_elige_Firefox_qué_bloquear">¿Cómo elige Firefox qué bloquear?</h2> + +<p>El contenido se bloquea en base al dominio desde el que se carga.</p> + +<p>Firefox se lanza junto con una lista de sitios en los que se ha detectado actividades de rastreo entre diferentes sitios web. Cuando la protección está activada, Firefox bloqueará el contenido de todos los sitios que se encuentran en esa lista.</p> + +<p>Por norma general,, los sitios que hacen este tipo de rastreo son analíticos y de publicidad de terceras partes.</p> + +<h2 id="¿Qué_significa_esto_para_tu_sitio">¿Qué significa esto para tu sitio?</h2> + +<p>Lo más común es que cuando la protección contra rastreo esté activada:</p> + +<ul> + <li>el contenido servido por rastreadores de terceros no será visible para los usuarios;</li> + <li>tu sitio no podrá usar publicidad de terceros o servicios de analíticas cuando estén haciendo seguimiento de tus usuarios.</li> +</ul> + +<p>Lo menos común es que si otras partes de tu sitio dependen de la carga de estos rastreadores, entonces estas partes no funcionarán cuando la protección esté habilitada. Por ejemplo, si tu sitio incluye una llamada (<em>callback</em>) que se ejecuta cuando se carga el contenido de un sitio que rastrea, entonces no se ejecutará esa llamada.</p> + +<p>Por ejemplo, no deberías usar Google Analytics de la siguiente forma:</p> + +<pre class="brush:html example-bad"><a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a> +<script> +function trackLink(url,event) { + event.preventDefault(); + ga('send', 'event', 'outbound', 'click', url, { + 'transport': 'beacon', + 'hitCallback': function() { + document.location = url; + } + }); +} +</script></pre> + +<p>En cambio, deberías tener cuenta la posibilidad de que no se cargue Google Analytics. Para ello, comprueba si se ha iniciado el objeto <code>ga</code>:</p> + +<pre class="brush:html example-good"><a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a> +<script> +function trackLink(url,event) { + event.preventDefault(); + if (window.ga && <span class="pl-smi">ga</span>.loaded) { + ga('send', 'event', 'outbound', 'click', url, { + 'transport': 'beacon', + 'hitCallback': function() { document.location = url; } + }); + } else { + document.location = url; + } +} +</script> +</pre> + +<p>Encontrarás más información sobre esta técnica en <a href="https://hacks.mozilla.org/2016/01/google-analytics-privacy-and-event-tracking/">este artículo (en inglés).</a></p> + +<p>Nótese que, de cualquier manera, la dependencia de terceras partes no es una buena práctica, ya que implica que tu sitio no funcione si la tercera parte va lenta o es inaccesible, o si un complemento bloquea ese elemento rastreador.</p> diff --git a/files/es/mozilla/firefox/releases/30/index.html b/files/es/mozilla/firefox/releases/30/index.html new file mode 100644 index 0000000000..01c5be6cda --- /dev/null +++ b/files/es/mozilla/firefox/releases/30/index.html @@ -0,0 +1,92 @@ +--- +title: Firefox 30 for developers +slug: Mozilla/Firefox/Releases/30 +translation_of: Mozilla/Firefox/Releases/30 +--- +<div>{{FirefoxSidebar}}</div><p>Want to help document Firefox 30? See the <a class="external" href="http://beta.elchi3.de/doctracker/#list=fx&version=30.0">list of bugs that need to be written about</a> and pitch in!</p> + +<h2 id="Cambios_para_los_Desarrolladores_Web">Cambios para los Desarrolladores Web</h2> + +<h3 id="Herramientas_para_Desarrolladores">Herramientas para Desarrolladores</h3> + +<ul> + <li>Ha sido implementado el Modelo de Caja Resaltado (Box Model Highlighter) ({{bug(663778)}}).</li> + <li>En cualquier parte el nodo DOM aparece en la salida de la consola, se resalta cuando se encima la salida de esa consola ({{bug(757866)}}). Sucede lo mismo con todas las funciones y objetos JS, son resaltados en la salida de la consola ({{bug(584733)}}). Más información acerca de las mejoras de la consola pueden econtrarse en el siguiente <a href="http://www.robodesign.ro/mihai/blog/web-console-improvements-episode-30">post del blog</a>.</li> + <li>Sopoerte para {{domxref("Console.count()")}} ha sido agregado ({{bug(922208)}}).</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>La propiedad {{cssxref("background-blend-mode")}} ha sido habilitada por defecto ({{bug(970600)}}).</li> + <li>La propiedad no estándar {{cssxref("overflow-clip-box")}} ha sido implementada para utilizarse solamente en las hojas de estilo UA ({{bug(966992)}}).</li> + <li>La propiedad {{cssxref("line-height")}} afecta ahora a las entradas de lineas de texto sencillas (<code><input type=text|password|email|search|tel|url|unknown></code> types) aunque no puede reducir su tamaño por debajo de una altura de la línea de <code>1.0</code> ({{bug(349259)}}).</li> + <li>La propiedad {{cssxref("line-height")}} ahora también afecta el <code>type=button</code>, sin restricciones ({{bug(697451)}}).</li> + <li>El cambio al nombre de los keyframes no afecta los elementos actuales ({{bug(978648)}}).</li> +</ul> + +<h3 id="HTML">HTML</h3> + +<p><em>Sin cambios.</em></p> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>New ES6-compatible <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">array comprehensions</a> <code>[for (item of iterable) item]</code> and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">generator comprehensions</a> <code>(for (item of iterable) item)</code> have been implemented ({{bug(979865)}}).</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Property_access">Typed arrays</a> are now extensible and support new named properties ({{bug(695438)}}).</li> + <li>The {{jsxref("Error.prototype.stack")}} property now contains column numbers ({{bug(762556)}}) and has been improved <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack#Stack_of_eval'ed_code">when using <code>Function()</code> and <code>eval()</code> calls</a>. This can help you to better debug minified or generated JavaScript code.</li> + <li>The <code>Promise.cast()</code> method has been renamed to {{jsxref("Promise.resolve()")}} ({{bug(966348)}}).</li> +</ul> + +<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3> + +<ul> + <li>{{domxref("Navigator.sendBeacon")}} has been implemented, easing telemetry collection ({{bug(936340)}}).</li> + <li>Added a <code>relList</code> property returning a {{domxref("DOMTokenList")}} to {{domxref("HTMLLinkElement")}}, {{domxref("HTMLAreaElement")}} and {{domxref("HTMLAnchorElement")}} ({{bug(968637)}}).</li> + <li>As per the latest specification, the first argument of {{domxref("OscillatorNode.start")}} and {{domxref("OscillatorNode.stop")}} is now optional and defaults to <code>0</code> ({{bug(982541)}}).</li> + <li>The method {{domxref("Navigator.requestWakeLock()")}} and the non-standard {{domxref("MozWakeLock")}} are no longer available from the Web on Desktop ({{bug(963366)}}).</li> + <li>The <code>DOM_VK_ENTER</code> constant has been removed from {{domxref("KeyboardEvent")}} ({{bug(969247)}}).</li> + <li>Web components' {{domxref("Document.register")}} has been adapted to follow the behavior described in the latest version of the specification ({{bug(856140)}}).</li> + <li>Basic support for Hit regions on canvas has been added: the methods {{domxref("CanvasRenderingContext2D.addHitRegion()")}} and {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} have been added. These are disabled by default; to activate them set the preference <code>canvas.hitregions.enabled</code> to <code>true</code>. ({{bug(966591)}})</li> + <li>The non-standard, and deprecated since Firefox 15, {{domxref("Blob.mozSlice")}} is no longer supported ({{bug(961804)}}).</li> + <li>The non-standard {{domxref("ArchiveReader")}} and {{domxref("ArchiveRequest")}} are no longer exposed to the Web ({{bug(968883)}}).</li> + <li><a href="http://dxr.mozilla.org/mozilla-central/source/dom/webidl/">WebIDL constructors</a> cannot be called as functions anymore. They need to be preceded by the keyword <code>new</code>. ({{bug(916644)}})</li> + <li>Added support for a new value (<code>alpha</code>) for the second, optional, parameter of the {{domxref("Canvas.getContext()")}} method allowing to define if alpha blending must be stored or not for this context. When not, the per-pixel alpha value in this store is always <code>1.0</code>. This allows the back-end to implement a fast-track. ({{bug(982480)}})</li> + <li>{{domxref("GlobalWorkerScope.consle")}} now returns for the regular {{domxref("Console")}}; {{domxref("WorkerConsole")}} has been removed ({{bug(965860)}}).</li> +</ul> + +<h3 id="MathML">MathML</h3> + +<p><em>No change.</em></p> + +<h3 id="SVG">SVG</h3> + +<ul> + <li>{{SVGElement("feDropShadow")}}, and its interface {{domxref("SVGFEDropShadowElement")}}, from the Filter Effects Module are now supported ({{bug(964200)}}).</li> +</ul> + +<h3 id="AudioVideo">Audio/Video</h3> + +<ul> + <li>On Linux, Gstreamer 1.0 is now supported (instead of 0.10) ({{bug(806917)}}).</li> +</ul> + +<h2 id="Security">Security</h2> + +<p><em>No change.</em></p> + +<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> + +<ul> + <li>The interface <code>nsIDOMWindowUtils</code> now supports the Boolean attribute <code>audioMuted</code> and <code>audioVolume</code>, a float in the range <code>[0.0</code> , <code>1.0]</code>, allowing to control the sound produced by a window (that is any tab or iframe). There is no UI for this, but is available to add-ons. ({{bug(923247)}})</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox/Releases/30/Site_Compatibility">Site Compatibility for Firefox 30</a></li> +</ul> + +<h3 id="Older_versions">Older versions</h3> + +<p>{{Firefox_for_developers('29')}}</p> diff --git a/files/es/mozilla/firefox/releases/50/index.html b/files/es/mozilla/firefox/releases/50/index.html new file mode 100644 index 0000000000..bac952686e --- /dev/null +++ b/files/es/mozilla/firefox/releases/50/index.html @@ -0,0 +1,203 @@ +--- +title: Firefox 50 para desarrolladores +slug: Mozilla/Firefox/Releases/50 +tags: + - Firefox + - Release Notes +translation_of: Mozilla/Firefox/Releases/50 +--- +<div>{{FirefoxSidebar}}</div> + +<p>Firefox 50 was released on November 15, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.</p> + +<h2 id="Cambios_para_desarrolladores_Web">Cambios para desarrolladores Web</h2> + +<ul> +</ul> + +<h3 id="HTML">HTML</h3> + +<ul> + <li>El estilo por defecto {{HTMLElement("bdo")}} ahora asigna {{cssxref("unicode-bidi")}} con el valor <code>isolate-override</code> ({{bug(1249497)}}).</li> + <li>Asignar el atributo {{htmlattrxref("src", "track")}} del elemento {{HTMLElement("track")}} ahora funciona correctamente ({{bug(1281418)}}).</li> + <li>El atributo <code>referrerpolicy</code> en los elementos {{HTMLElement("area")}}, {{HTMLElement("a")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}} y {{HTMLElement("link")}} ahora está disponible por defecto ({{bug(1223838)}}, {{bug(1264165)}}).</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>Esquinas con estilos punteados y rayados (<code>dashed, dotted</code>) Border-radiused ahora son mostradas con el estilo especificado en lugar de estilo sólido ({{bug(382721)}}).</li> + <li>El selector pseudo-clase no estándar {{cssxref(":-moz-full-screen-ancestor")}} fue removido ({{bug(1199529)}}).</li> + <li>{{cssxref("box-sizing")}}<code>: padding-box</code> fue removido, dado que ya no forma parte de la especificación y Firefox era el unico entre los principales navegadores que lo implementaba ({{bug(1166728)}}).</li> + <li>Se removió el prefijo de los tres valores <code>isolate</code>, <code>isolate-override</code>, y <code>plaintext</code> de la propiedad {{cssxref("unicode-bidi")}} ({{bug(1141895)}}).</li> + <li>En modo de compatibilidad, la etiqueta de un elemento de lista ahora hereda el tamaño de la lista, como en el modo estandar ({{bug(648331)}}).</li> + <li>Las pseudo-clases {{cssxref(":in-range")}} y {{cssxref(":out-of-range")}} cambiaron su comportamiento para no coincidir elementos input deshabilitados o de solo lectura ({{bug(1264157)}}).</li> + <li>Se removió el prefijo de la pseudo-clase {{cssxref(":any-link")}}({{bug(843579)}}).</li> + <li>El valor <code>space</code> para {{cssxref("border-image-repeat")}} fue implementado ({{bug(720531)}}).</li> +</ul> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>La propiedad del ES2015 {{jsxref("Symbol.hasInstance")}} ha sido implementada ({{bug(1054906)}}).</li> + <li>El método de ES2017 {{jsxref("Object.getOwnPropertyDescriptors()")}} ha sido implementado ({{bug(1245024)}}).</li> + <li>El comportamiento de \W in {{jsxref("RegExp")}} con los flags unicode e ignoreCase cambió para estar de acuerdo con el borrador mas reciente de la especificación. Ahora no coincide con K, S, k, s, and KELVIN SIGN (U+212A), y LATIN SMALL LETTER LONG S (U+017F) ({{bug(1281739)}}).</li> +</ul> + +<h3 id="Herramientas_de_desarrollador">Herramientas de desarrollador</h3> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Tools/Web_Console/Console_messages#Source_maps">La consola Web ahora entiende los source maps.</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Tools/Storage_Inspector#IndexedDB">El inspector de almacenamiento ahora permite borrar elementos individuales desde los objetos de almacenamiento de IndexedDB.</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Tools/Memory">La herramienta de memoria está habilitada por defecto.</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">La panel de "Modelo de caja" fue movido al panel lateral Computado.</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">La consola Web ahora muestra las trazas de pila para las peticiones de red XHR o Fetch().</a></li> + <li> + <p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263766&chfield=resolution&chfieldfrom=2016-06-06&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-08-01&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">Todos los bugs corregidos entre Firefox 49 y Firefox 50</a>.</p> + </li> +</ul> + +<h3 id="HTTP">HTTP</h3> + +<ul> + <li>El protocolo experimental (y obsoleto) <a href="https://es.wikipedia.org/wiki/SPDY">SPDY</a> 3.1 ahora está deshabilitado por defecto {{bug(1287132)}}.</li> + <li>Se añadió soporte para {{HTTPHeader("X-Content-Type-Options")}} ({{bug(471020)}}).</li> + <li>Los prefijos de cookies <strong><code>__Host-</code></strong> and <strong><code>__Secure-</code></strong> han sido implementados. Ver {{HTTPHeader("Set-Cookie")}} y {{bug(1283368)}}.</li> + <li>El encabezado {{HTTPHeader("Referrer-Policy")}} ha sido implementado {{bug(1264164)}}.</li> +</ul> + +<h3 id="Seguridad">Seguridad</h3> + +<ul> + <li>El atributo {{htmlattrxref("ping", "a")}} del elemento {{htmlelement("a")}} ahora se apega al <code><a href="https://developer.mozilla.org/es/docs/Web/Security/CSP/CSP_policy_directives#connect-src">connect-src</a></code> <a href="https://developer.mozilla.org/es/docs/Web/Security/CSP/CSP_policy_directives">CSP 1.1 policy directive</a> ({{bug(1100181)}}).</li> + <li>Agregado soporte para la directiva <code><a href="https://developer.mozilla.org/es/docs/Web/Security/CSP/CSP_policy_directives#sandbox">sandbox</a></code> <a href="/en-US/docs/Web/Security/CSP">CSP</a> ({{bug(671389)}}).</li> + <li>Ahora es posible indicar una política <a href="/es/docs/Web/API/Web_Workers_API/Using_web_workers#Content_security_policy">content security policy for workers</a> ({{bug (959388)}}).</li> + <li>El método {{domxref("Navigator.sendBeacon()")}} ya no lanza una excepción si los datos de la baliza (Beacon Data) no pudieron ser enviados devido a una política de restricción consentimiento method <a href="/es/docs/Web/Security/CSP">Content Security Policy</a>; en su lugar, retorna <code>false</code> como es esperado ({{bug(1234813)}}).</li> +</ul> + +<h3 id="Redes">Redes</h3> + +<ul> + <li>Cuando un error es encontrado durante una {{domxref("XMLHttpRequest")}} asíncrona, el método {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} ahora retorna un string vacio ({{bug(1286744)}}).</li> + <li>En lugar de retornar un <code>NetworkError</code>, ahora el asynchronous {{domxref("XMLHttpRequest")}} asíncrono que falla por CORS u otras restricciones de red, ahora lanza un {{event("error")}} que puede ser capturado como cualquier otro error ({{bug(709991)}}).</li> + <li>{{domxref("XMLHttpRequest.getResponseHeader()")}} y {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} ahora también retornan encabezados vacíos por defecto. Esto puede ser controlado mediante la preferencia <code>network.http.keep_empty_response_headers_as_empty_string</code> ({{bug(918721)}}).</li> + <li>La opción <code>only-if-cached</code> fue agregada a <code><a href="https://developer.mozilla.org/es/docs/Web/API/Request/cache">Request.cache</a></code> ({{bug(1272436)}}).</li> +</ul> + +<h3 id="DOM">DOM</h3> + +<ul> + <li>Ahora la opción <code>once</code> para {{domxref("EventTarget.addEventListener()")}} es soportada ({{bug(1287706)}}).</li> + <li>La interfaz {{domxref("NodeList")}} are now iterable and the methods {{domxref("NodeList.forEach()", "forEach()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.entries()")}} and {{domxref("NodeList.keys()")}} are now available ({{bug(1290636)}}).</li> + <li>The interface {{domxref("DOMTokenList")}} are now iterable and the methods {{domxref("DOMTokenList.forEach()", "forEach()")}}, {{domxref("DOMTokenList.values()", "values()")}}, {{domxref("DOMTokenList.entries()")}} and {{domxref("DOMTokenList.keys()")}} are now available ({{bug(1290636)}}).</li> + <li>The methods {{domxref("Document.createElement()")}} and {{domxref("Document.createElementNS()")}} now have an optional <code>options</code> parameter for creating <a href="/en-US/docs/Web/Web_Components/Custom_Elements">custom elements</a> ({{bug(1276579)}}).</li> +</ul> + +<h3 id="SVG">SVG</h3> + +<ul> + <li>The <code>allowReorder</code> attribute has been dropped and the behavior it was setting is now the default for SVG {{SVGElement("switch")}} elements ({{bug(1279690)}}).</li> + <li>The <code>defer</code> keyword for the {{SVGAttr("preserveAspectRatio")}} attribute on SVG {{SVGElement("image")}} elements has been removed to follow the latest SVG2 specification ({{bug(1280425)}}).</li> +</ul> + +<h3 id="Drag_and_Drop_API">Drag and Drop API</h3> + +<ul> + <li>The {{domxref("DataTransfer.items")}} property has been implemented, allowing access to multiple items being dragged and dropped using the HTML Drag and Drop API. To allow this, the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces are now supported as well ({{bug(906420)}}). This is enabled by default.</li> + <li>The old, obsolete Firefox specific drag and drop API events <code>dragdrop</code> and <code>draggesture</code> are no longer supported. Be sure to update any code still using them to use the <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML drag and drop API</a> ({{bug(1162050)}}.</li> +</ul> + +<h3 id="Pointer_Lock_API">Pointer Lock API</h3> + +<ul> + <li>The <a href="/en-US/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> is now unprefixed ({{bug(991899)}}).</li> + <li>Before Firefox 50, <code><a href="/en-US/docs/Web/API/Element/requestPointerLock">requestPointerLock()</a></code> asked for permission using a doorhanger, and pointer lock would not be enabled until the user granted permission. From Firefox 50, pointer lock is like the <a href="/en-US/docs/Web/API/Fullscreen_API">fullscreen API</a>: it's granted immediately, but a notification is displayed explaining to the user how to exit ({{bug(1273351)}}).</li> +</ul> + +<h3 id="IndexedDB">IndexedDB</h3> + +<ul> + <li>Ahora se envía un evento {{event("close")}} al objeto {{domxref("IDBDatabase")}} cuando la base de datos respectiva es cerrada de forma inesperada ({{bug(1151017)}}).</li> +</ul> + +<h3 id="Service_Workers">Service Workers</h3> + +<ul> + <li>The {{domxref("WindowClient.navigate()")}} method has been implemented. This method lets you open a specified URL into a client window which is being controlled by the service worker ({{bug(1218148)}}).</li> +</ul> + +<h3 id="WebGL">WebGL</h3> + +<ul> + <li>The {{domxref("EXT_shader_texture_lod")}} WebGL extension has been implemented ({{bug(1111689)}}).</li> + <li>The texImage methods have been updated for <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> to implement PBOs (<code>PIXEL_UNPACK_BUFFER</code>) ({{bug(1280499)}}).</li> +</ul> + +<h3 id="WebRTC">WebRTC</h3> + +<ul> + <li>Adding a track to a {{domxref("MediaStream")}} now generates the {{event("addtrack")}} event as described in the specification. The event is of type {{domxref("MediaStreamTrackEvent")}} and is fired on the stream to which the track was added. You can use either {{domxref("EventTarget.addEventListener", "MediaStream.addEventListener('addtrack', ...)")}} or the {{domxref("MediaStream.onaddtrack")}} property to handle <code>"addtrack"</code> events.</li> + <li>The {{domxref("MediaStreamTrack")}} interface now supports the {{event("ended")}} event and the {{domxref("MediaStreamTrack.onended")}} event handler.</li> + <li>Firefox now supports the {{domxref("MediaStreamTrack.readyState")}} property, which indicates whether the track is live or permanently ended.</li> + <li>The {{domxref("MediaStreamTrack")}} methods {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} and {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} have been implemented; these let you get the most recently applied set of customized property constraints and the actual values of all of the track's constrainable properties, respectively. The accompanying data types have been documented as well.</li> + <li>The {{domxref("RTCDataChannel.stream")}} property has been removed. This was replaced with {{domxref("RTCDataChannel.id")}} in <a href="/en-US/docs/Mozilla/Firefox/Releases/24">Firefox 24</a>, but was supported for backward compatibility. Please be sure to update your code to use the <code>id</code> property if you haven't done so yet.</li> +</ul> + +<h3 id="Web_Audio_API">Web Audio API</h3> + +<ul> + <li>The {{domxref("PannerNode")}} interface now supports the 3D Cartesian space properties for the position ({{domxref("PannerNode.positionX")}}, {{domxref("PannerNode.positionY")}}, and {{domxref("PannerNode.positionZ")}}) and directionality ({{domxref("PannerNode.orientationX")}}, {{domxref("PannerNode.orientationY")}}, {{domxref("PannerNode.orientationZ")}}) of an audio source.</li> + <li>The interface {{domxref("IIRFilterNode")}}, which implements a general {{interwiki("wikipedia", "infinite impulse response")}} (IIR) filter, has been implemented.</li> + <li>Throttling in background tabs of timers created by {{domxref("WindowTimers.setInterval", "Window.setInterval()")}} and {{domxref("WindowTimers.setTimeout", "Window.setTimeout()")}} no longer occurs if a <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ({{bug(1181073)}}).</li> +</ul> + +<h3 id="AudioVideo">Audio/Video</h3> + +<ul> + <li>The <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly previously included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected ({{bug(1276130)}}).</li> + <li>The non-standard and experimental method {{domxref("HTMLMediaElement.seekToNextFrame()")}} now seeks to the next frame in the media asynchronously, rather than synchronously, and returns a {{jsxref("Promise")}} which resolves once the seek is complete.</li> + <li>The implementation of {{domxref("HTMLTrackElement")}} has been corrected to allow {{HTMLElement("track")}} elements to load resources even if not in a document ({{bug(871747)}}).</li> +</ul> + +<h3 id="API_de_batería">API de batería</h3> + +<ul> + <li>The {{domxref("navigator.battery")}} property, which has been deprecated since Firefox 43, is now obsolete and has been removed. Use the {{domxref("navigator.getBattery()")}} method instead to get a battery {{jsxref("Promise")}}, which will resolve when the {{domxref("BatteryManager")}} is available for use; the {{domxref("BatteryManager")}} is passed into the fulfillment handler for the promise ({{bug(12593355)}}).</li> +</ul> + +<h3 id="Archivos_y_directorios">Archivos y directorios</h3> + +<ul> + <li>A subset of the <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a> has been implemented, to improve compatibility with sites that were previously only compatible with Google Chrome ({{bug(1265767)}}). + + <ul> + <li>The asynchronous API interfaces have been implemented, with the caveat that only reading of files is supported; for example, the {{domxref("FileSystemFileEntry.createWriter()")}} method is a no-op.</li> + <li>These interfaces have been implemented: + <ul> + <li>{{domxref("FileSystem")}}</li> + <li>{{domxref("FileSystemEntry")}} (properties only; the methods have not been implemented)</li> + <li>{{domxref("FileSystemFileEntry")}} (except for {{domxref("FileSystemFileEntry.createWriter", "createWriter()")}})</li> + <li>{{domxref("FileSystemDirectoryEntry")}} (except for {{domxref("FileSystemDirectoryEntry.removeRecursively", "removeRecursively()")}})</li> + <li>{{domxref("FileSystemDirectoryReader")}}</li> + </ul> + </li> + <li>{{domxref("HTMLInputElement.webkitdirectory")}} as well as the {{HTMLattrxref("webkitdirectory", "input")}} attribute of the {{HTMLElement("input")}} element have been implemented; this lets you configure a file input to accept directories instead of files ({{bug(1258489)}}).</li> + <li>{{domxref("HTMLInputElement.webkitEntries")}} has been implemented; this returns an array of {{domxref("FileSystemEntry")}}-based objects representing the selected items.</li> + <li>{{domxref("File.webkitRelativePath")}} has been implemented; this contains the path of the file relative to the root of the containing {{domxref("FileSystemDirectoryEntry")}} that was among the items in the list returned by {{domxref("HTMLInputElement.webkitGetEntries()")}}.</li> + <li>See <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a> for details about what we do and do not support in this API.</li> + <li>These APIs are now enabled by default; some were previously available but only behind a preference ({{bug(1288683)}}).</li> + </ul> + </li> + <li>We've implemented {{domxref("DataTransferItem.webkitGetAsEntry()")}} as part of the <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a>; this lets you obtain a {{domxref("FileSystemEntry")}} representing a dropped file ({{bug(1289255)}}). This is enabled by default.</li> + <li>The <code>HTMLInputElement.directory</code> property, part of the <a href="https://wicg.github.io/directory-upload/proposal.html">Directory Upload API</a> proposal, has been renamed to <code>allowdirs</code> ({{bug(1288681)}}). This property is hidden behind a preference.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-US/versions/50">Compatibilidad de sitios para Firefox 50</a></li> +</ul> + +<h2 id="Versiones_anteriores">Versiones anteriores</h2> + +<p>{{Firefox_for_developers(49)}}</p> diff --git a/files/es/mozilla/firefox/releases/57/index.html b/files/es/mozilla/firefox/releases/57/index.html new file mode 100644 index 0000000000..557684e1fa --- /dev/null +++ b/files/es/mozilla/firefox/releases/57/index.html @@ -0,0 +1,299 @@ +--- +title: Firefox Quantum 57 para programadores +slug: Mozilla/Firefox/Releases/57 +tags: + - '57' + - Firefox + - Notas de publicación +translation_of: Mozilla/Firefox/Releases/57 +--- +<div>{{FirefoxSidebar}}</div><p class="summary">Este artículo proporciona información sobre los cambios incluidos en Firefox 57 (también conocido como Firefox Quantum) que conciernen a los desarrolladores. Firefox 57 se disponibilizó al público el <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">14 de noviembre de 2017</a>.</p> + +<h2 id="Firefox_57_Firefox_Quantum">Firefox 57 === Firefox Quantum</h2> + +<p>Hemos bautizado a Firefox 57 como <strong>Quantum</strong> por el proyecto de ingeniería <a href="https://wiki.mozilla.org/Quantum">Firefox Quantum</a>, cuyo objetivo ha sido el de reconstruir Firefox desde cero para darle un rendimiento y una estabilidad excelentes, así como mejorar su apariencia visual. Esta es la primera versión de Firefox en incluir algunos de estos cambios, así que quisimos conmemorar el acontecimiento.</p> + +<div class="note"> +<p><strong>Nota</strong>: para obtener más información sobre las funciones de Quantum incluidas en esta versión, consúltese el artículo <a href="https://hacks.mozilla.org/2017/09/firefox-quantum-developer-edition-fastest-firefox-ever/">«Firefox Quantum Developer Edition: el Firefox más rápido, con IU Photon y mejores herramientas»</a>, escrito por Dan Callahan.</p> +</div> + +<p><a href="https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/">El nuevo procesador de CSS en paralelo de Firefox</a> ―también denominado <strong>Quantum CSS</strong> o <strong>Stylo</strong>― está activado de manera predeterminada en Firefox 57 para escritorio; las versiones para móviles darán el salto en el futuro. Los programadores no deberían notar ninguna diferencia importante, aparte de la amplia gama de mejoras de rendimiento. Sin embargo, existen algunas diferencias menores de funcionalidad en Stylo, las cuales se han implementado para corregir comportamientos no estándares de Gecko que habrían de desaparecer. Informaremos de esas diferencias en las páginas de referencia y en las notas de publicación según proceda (véanse {{anch("Notas sobre Quantum CSS")}}).</p> + +<article class="text-content" id="wikiArticle"> +<h2 id="Cambios_para_programadores_web">Cambios para programadores web</h2> + +<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3> + +<p><em>No hay ningún cambio.</em></p> + +<h3 id="HTML">HTML</h3> + +<ul> + <li>Los tipos <a href="/en-US/docs/Web/HTML/Element/input/date">«date»</a> y <a href="/en-US/docs/Web/HTML/Element/input/time">«time»</a> de {{htmlelement("input")}} ya están activados en todas las compilaciones ({{bug("1399036")}}).</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>Ahora admitimos los valores <code>minimal-ui</code> y <code>standalone</code> de la consulta <code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code> ({{bug(1369815)}}). Consúltese también el <a href="/en-US/docs/Web/Manifest#display">campo de manifiesto de aplicación web <code>display</code></a>.</li> + <li>Se corrigió un problema que causaba que la notación abreviada de la cuadrícula quedara restablecida al utilizar {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} ({{bug(1387410)}}).</li> + <li>Se ha eliminado la preferencia <code>layout.css.clip-path-shapes.enabled</code>, que permitía activar o desactivar la compatibilidad de {{cssxref("<basic-shape>")}} con {{cssxref("clip-path")}} ({{bug(1399767)}}).</li> +</ul> + +<h4 id="Notas_sobre_Quantum_CSS">Notas sobre Quantum CSS</h4> + +<ul> + <li>Los valores de degradados radiales tales como <code>radial-gradient(circle gold,red)</code> funcionan en el sistema de estilos de Gecko anterior, pero no debería por la coma faltante entre <code>circle</code> y <code>gold</code> ({{bug(1383323)}}). Quantum corrige este defecto.</li> + <li>Cuando se da animación a un elemento ubicado fuera de la pantalla y se establece un tiempo de retardo, Gecko no actualiza la visualización correctamente en algunas plataformas, como Windows ({{bug(1383239)}}). Esto ha quedado corregido en Quantum.</li> + <li>En Gecko, no es posible desplegar de manera predeterminada los elementos {{htmlelement("details")}} mediante el atributo <code>open</code> si tienen una propiedad {{cssxref("animation")}} activa ({{bug(1382124)}}). Quantum corrige este problema.</li> + <li>En Gecko, los efectos {{cssxref("transition", "transitions")}} no funcionan si se transiciona desde un {{cssxref("text-shadow")}} con un color especificado a un <code>text-shadow</code> sin ningún color ({{bug(726550)}}). Este comportamiento se ha corregido en Quantum.</li> + <li>En Gecko, cancelar una animación de relleno (p. ej., con <code>animation-fill-mode: forwards</code> definido) puede desencadenar un conjunto de transiciones en el mismo elemento, aunque únicamente una vez (véase el {{bug(1192592)}} y <a href="https://bug1192592.bmoattachments.org/attachment.cgi?id=8843824">estas pruebas</a> para más información). Por lo general, las animaciones declaratorias no deberían desencadenar animaciones. Esto se ha corregido en Quantum.</li> + <li>En Gecko, las animaciones que utilizan ems como unidad no reciben las modificaciones realizadas en {{cssxref("font-size")}} en el elemento padre del elemento animado, aunque deberían ({{bug(1254424)}}). Quantum CSS corrige esto.</li> + <li>Gecko además maneja la herencia de <code>font-size</code> de manera diferente a la de Quantum CSS, por lo que para algunas configuraciones de idioma, los tamaños de letra heredados quedaban más pequeños de lo esperado (véase {{bug(1391341)}}). Quantum corrige esto.</li> + <li>Gecko reutiliza el mismo mecanismo empleado al analizar una ficha de URL durante el análisis de las funciones <code>domain()</code> o <code>url-prefix()</code> para la regla {{cssxref("@document", "@-moz-document")}}. Quantum CSS no utiliza el mismo mecanismo y no considera las fichas como no válidas cuando contienen paréntesis o comillas ({{bug(1362333)}}).</li> + <li>En Gecko, cuando se define un tipo de letra del sistema como el valor del {{domxref("CanvasRenderingContext2D.font", "tipo de letra")}} de algún contexto del lienzo 2D (p. ej., <code>menu</code>), la obtención del valor del tipo de letra no devuelve el resultado correcto (no devuelve nada). Este problema quedó solucionado en Quantum. ({{bug(1374885)}}).</li> + <li>En Gecko, cuando se crea un subárbol desligado (p. ej., un {{htmlelement("div")}} creado a través de {{domxref("Document.createElement","createElement()")}} que todavía no se inserta en el DOM), el elemento raíz del subárbol se define como un elemento de nivel bloque. En Quantum CSS, el elemento se define como alineado, tal como se define en la especificación ({{bug(1374994)}}).</li> + <li>Gecko rechaza las expresiones {{cssxref("calc")}} ―lo que invalida el valor― cuando se utilizan como el componente radial de una función {{cssxref("radial-gradient")}} ({{bug(1376019)}}). Quantum CSS lo resuelve.</li> + <li>En Gecko, <code>calc(1*2*3)</code> no es analizado debidamente; Quantum CSS soluciona el problema ({{bug(1379467)}}).</li> + <li>En Quantum CSS, <a href="https://drafts.csswg.org/css-values-3/#calc-notation"><code>calc()</code> se admite en todos los sitios que la especificación indica</a> ({{bug(1350857)}}). En Gecko, este no es el caso.</li> + <li>Gecko contiene un defecto que provoca que los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}} se generen aun si el valor de la propiedad {{cssxref("content")}} se define como <code>normal</code> o <code>none</code>. Este comportamiento es contrario a la especificación ({{bug(1387931)}}) y se ha corregido en Quantum.</li> + <li>Otro defecto de Gecko provoca que la propiedad {{cssxref("background-position")}} no pueda transicionarse entre dos valores que contengan números diferentes de valores {{cssxref("<position>")}}, por ejemplo, <code>background-position: 10px 10px;</code> y <code>background-position: 20px 20px, 30px 30px;</code> (véase {{bug(1390446)}}). Quantum resuelve el error.</li> +</ul> + +<h3 id="SVG">SVG</h3> + +<p><em>No hay ningún cambio.</em></p> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>El bucle no estándar {{jsxref("Statements/for_each...in", "for each...in")}} (E4X) fue eliminado. En su lugar, utilícese {{jsxref("Statements/for...of", "for...of")}} y consúltese <a href="/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Atención: los bucles de JavaScript 1.6 «for-each-in» son obsoletos</a> para obtener ayuda en la migración. ({{bug(1083470)}}).</li> + <li>Se marcaron como obsoletos los métodos {{jsxref("Object.prototype.watch()")}} y {{jsxref("Object.unwatch", "unwatch()")}}. Se emitirá una alerta si se utilizan y serán eliminados en el futuro próximo ({{bug(934669)}}).</li> + <li>Se eliminaron los objetos {{jsxref("Iterator")}} y {{jsxref("StopIteration")}} y el protocolo de iteración heredado ({{bug(1098412)}}).</li> +</ul> + +<h3 id="API">API</h3> + +<h4 id="API_nuevas">API nuevas</h4> + +<ul> + <li>Se ha activado de manera predeterminada la API {{domxref("PerformanceObserver")}} ({{bug(1386021)}}).</li> + <li>Añadimos las interfaces {{domxref("AbortController")}} y {{domxref("AbortSignal")}} (conocidas como la API «Abort»), que permiten interrumpir las solicitudes del DOM (como las de <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">recuperación</a>) si así se desea ({{bug(1378342)}}).</li> +</ul> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>Se ha implementado la propiedad {{domxref("Selection.type")}} de la <a href="/en-US/docs/Web/API/Selection_API">API Selection</a> ({{bug(1359157)}}).</li> + <li>Se admite {{domxref("Document.createEvent", "Document.createEvent('FocusEvent')")}} ahora ({{bug(1388069)}}).</li> + <li>La propiedad <code>files</code> de la interfaz {{domxref("HTMLInputElement")}} puede definirse ahora ({{bug(1384030)}}).</li> + <li>El método <code>HTMLDocument.getSelection()</code> se ha trasladado a la interfaz {{domxref("Document.getSelection","Document")}} para que quede disponible para los documentos XML ({{bug(718711)}}).</li> + <li>Hemos implementado el suceso {{Event("messageerror")}}, el cual puede ejecutar código tras su desencadenamiento por parte de manejadores de sucesos utilizados en destinos de mensajes. Véase {{domxref("MessagePort.onmessageerror")}}, {{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}, {{domxref("Worker.onmessageerror")}}, {{domxref("BroadcastChannel.onmessageerror")}} y {{domxref("Window.onmessageerror")}} ({{bug(1359017)}}).</li> + <li>Cuando se emplea la iteración en valores {{domxref("Headers")}}, estos quedarán organizados en orden lexicográfico y se combinarán los valores de los nombres de cabeceras duplicados ({{bug(1396848)}}).</li> +</ul> + +<h4 id="Sucesos_de_DOM">Sucesos de DOM</h4> + +<p><em>No hay ningún cambio.</em></p> + +<h4 id="Multimedia_y_WebRTC">Multimedia y WebRTC</h4> + +<ul> + <li>Ahora se admiten mensajes de cualquier tamaño (hasta 1 GiB, aunque 256 kiB es más interoperativo) en {{domxref("RTCDataChannel")}} por medio del uso de la opción «end-of-record» (EOR) en los mensajes de SCTP. Consúltese {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Using_data_channels", "Understanding message size limits")}} para obtener más información ({{bug(979417)}}). + <div class="note">Como Firefox aún no admite el protocolo ndata de SCTP, que permite intercalar mensajes de SCTP de varias fuentes, enviar objetos de datos grandes puede causar retardos importantes en el resto del tránsito SCTP. Véase el {{bug(1381145)}} para estar al tanto de la implementación de ndata en Firefox.</div> + </li> + <li>El método {{domxref("RTCDataChannel.send()")}} ahora puede emitir una excepción <code>TypeError</code> si el tamaño del mensaje que se intenta enviar no es compatible con el agente de usuario de destino (esto se implementó como parte del {{bug(979417)}}).</li> + <li>La <a href="/en-US/docs/Web/API/MediaStream_Recording_API">API MediaStream Recording</a> se ha actualizado de modo que los sucesos {{event("error")}} que se envíen para notificar problemas acaecidos durante la grabación son ahora del tipo {{domxref("MediaRecorderErrorEvent")}} en lugar de sucesos genéricos.</li> + <li>Se actualizó la documentación concerniente a {{domxref("OfflineAudioContext")}}, dado que sus entradas de constructores pueden especificarse ahora dentro de un objeto en lugar de una lista de parámetros ({{bug(1388591)}}).</li> +</ul> + +<h3 id="Seguridad">Seguridad</h3> + +<ul> + <li>Los URL <code>resource://</code> ya no filtran información ({{bug(863246)}})</li> + <li>Los URI de datos ahora se manipulan como orígenes opacos únicos, en vez de heredar el origen del objeto de configuración responsable de la navegación ({{bug(1324406)}}).</li> +</ul> + +<h3 id="Plugins"><em>Plugins</em></h3> + +<p><em>No hay ningún cambio.</em></p> + +<h3 id="Otros">Otros</h3> + +<ul> + <li>El valor <code>fullscreen</code> del campo <code>display</code> del <a href="/en-US/docs/Web/Manifest">manifiesto de aplicación web</a> ahora funciona en Firefox para Android 57 ({{bug(1126479)}}).</li> + <li>La <a href="/en-US/docs/Mozilla/Firefox/Headless_mode">modalidad sin periféricos</a> de Firefox ahora incluye el parámetro <code>-screenshot</code>, que permite a los usuarios tomar capturas de pantalla de sitios web directamente desde la consola ({{bug(1378010)}}).</li> +</ul> + +<h2 id="Eliminaciones_de_la_plataforma_web">Eliminaciones de la plataforma web</h2> + +<h3 id="HTML_2">HTML</h3> + +<ul> + <li><code><link rel="preload"></code> (véase <a href="/en-US/docs/Web/HTML/Preloading_content">Precargar contenido con rel="preload"</a>) fue desactivado en Firefox 57 a causa de varios problemas de compatibilidad con la web (p. ej., {{bug(1405761)}}). Se espera que para Firefox 58 quede lista la versión de reemplazo, la cual funcionará para recursos no almacenables en la antememoria.</li> +</ul> + +<h3 id="API_2">API</h3> + +<ul> + <li>La <a href="/en-US/docs/Archive/Social_API">API Social</a>, privativa de Mozilla, se ha eliminado completamente ({{bug(1388902)}}).</li> +</ul> + +<h3 id="SVG_2">SVG</h3> + +<p><em>No hay ningún cambio.</em></p> + +<h2 id="Cambios_relativos_a_los_complementos_y_los_programadores_de_Mozilla">Cambios relativos a los complementos y los programadores de Mozilla</h2> + +<div class="note"> +<p>A partir de Firefox 57, se ha eliminado por completo la compatibilidad con los complementos basados en la tecnología XPCOM. Todas las extensiones deben convertirse para emplear la <a href="/en-US/Add-ons/WebExtensions">tecnología nueva</a>, conocida como WebExtensions, o de lo contrario dejarán de funcionar.</p> +</div> + +<h3 id="WebExtensions">WebExtensions</h3> + +<p>Se añadieron o ampliaron las API siguientes:</p> + +<ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks">bookmarks</a></code> + + <ul> + <li>compatibilidad con separadores mediante <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNodeType">bookmarks.BookmarkTreeNodeType</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> + <ul> + <li>propiedad <code>theme_icons</code> para iconos claros u oscuros en función del tema</li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction/openPopup">browserAction.openPopup()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings">browserSettings</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/allowPopupsForUserEvents">allowPopupsForUserEvents</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/homepageOverride">homepageOverride</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/imageAnimationBehavior">imageAnimationBehavior</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/newTabPageOverride">newTabPageOverride</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browsingData">browsingData</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browsingData/removeLocalStorage">browsingData.removeLocalStorage()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard">clipboard</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData">setImageData()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities">contextualIdentities</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onCreated">onCreated</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onRemoved">onRemoved</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onUpdated">onUpdated</a></code></li> + <li><code>colorCode</code> y <code>iconUrl</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities/ContextualIdentity">contextualIdentitities.ContextualIdentity</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane">devtools.panels.ElementsPanel.createSidebarPane()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads">downloads</a></code> + <ul> + <li>opción <code>incognito</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads/download">downloads.download()</a></code></li> + <li>propiedad <code>estimatedEndTime</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads/DownloadItem">downloads.DownloadItem</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/find">find</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/find/find">find()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/find/highlightResults">highlightResults()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/find/removeHighlighting">removeHighlighting()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/openPopup">pageAction.openPopup()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/privacy/websites">privacy</a></code> + <ul> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/privacy/websites">websites.trackingProtectionMode</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/proxy">proxy</a></code> + <ul> + <li><code>FindProxyForURL()</code> puede devolver un objeto ahora</li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime">runtime</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage()</a></code> funciona en Android</li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions">sessions</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/setTabValue">setTabValue()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/getTabValue">getTabValue()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/removeTabValue">removeTabValue()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/setWindowValue">setWindowValue()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/getWindowValue">getWindowValue()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions/removeWindowValue">removeWindowValue()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction">sidebarAction</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction/open">sidebarAction.open()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/managed">storage.managed</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></code> + <ul> + <li>opción <code>loadReplace</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/update">tabs.update()</a></code></li> + <li>propiedad <code>discarded</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab">tabs.Tab</a></code>, <code><a href="/en-US/docs/">tabs.onUpdated</a></code> y <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/create">tabs.create()</a></code> puede abrir URL con «view-source:»</li> + <li>propiedad <code>openerTabId</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab">tabs.Tab</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/create">tabs.create()</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">tabs.query()</a></code> y <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/update">tabs.update()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code> + <ul> + <li><code>colors.toolbar</code></li> + <li><code>colors.toolbar_field</code></li> + <li><code>colors.toolbar_field_text</code></li> + <li><code>colors.toolbar_text</code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme">theme</a></code> + <ul> + <li>opción <code>windowId</code> para <code><a href="/en-US/Add-ons/WebExtensions/API/theme/update">theme.update()</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code> + <ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/filterResponseData">filterResponseData()</a></code></li> + <li>propiedad <code>proxyInfo</code> en sucesos <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code></li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows">windows</a></code> + <ul> + <li>opción <code>allowScriptsToClose</code> en <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows/create">windows.create()</a></code></li> + </ul> + </li> +</ul> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-US/versions/57">Compatibilidad de sitios con Firefox 57</a></li> +</ul> +</article> + +<ul> +</ul> + +<h2 id="Versiones_anteriores"> Versiones anteriores</h2> + +<p>{{Firefox_for_developers(56)}}</p> diff --git a/files/es/mozilla/firefox/releases/61/index.html b/files/es/mozilla/firefox/releases/61/index.html new file mode 100644 index 0000000000..49fbfdb07c --- /dev/null +++ b/files/es/mozilla/firefox/releases/61/index.html @@ -0,0 +1,135 @@ +--- +title: Firefox 61 for developers +slug: Mozilla/Firefox/Releases/61 +translation_of: Mozilla/Firefox/Releases/61 +--- +<div>{{FirefoxSidebar}}</div><div>{{draft}}</div> + +<p class="summary">Este artículo muestra información sobre los cambios en Firefox 61 que afectarán a los desarrolladores. Firefox 61 es la versión beta actual de Firefox, y se lanzará el 26 de Junio de 2018.</p> + +<h2 id="Cambios_para_desarrolladores_web">Cambios para desarrolladores web</h2> + +<h3 id="Herramientas_de_desarrollador">Herramientas de desarrollador</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="HTML">HTML</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="CSS">CSS</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="SVG">SVG</h3> + +<ul> + <li>Las propiedades <code>ping</code>, <code>rel</code>, <code>referrerPolicy</code>, <code>relList</code>, <code>hreflang</code>, <code>type</code> y <code>text</code> han sido añadidas al elemento {{SVGElement("a")}} ({{domxref("SVGAElement")}}) para ser consistente con el elemento HTML {{HTMLElement("a")}} ({{bug("1451823")}}).</li> + <li> El elemento {{SVGElement("textPath")}}({{domxref("SVGTextPathElement")}}) ahora soporta el <code>path</code> SVG2 y los atributos <code>side</code> ({{bug("1446617")}} y {{bug("1446650")}}).</li> + <li>La interfaz {{domxref("SVGGeometryElement")}} ahora es soportada por más elementos y no solo para el elemento {{SVGElement("path")}} ({{bug("1325320")}}).</li> +</ul> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>Los metodos {{jsxref("String.prototype.trimStart()")}} y {{jsxref("String.prototype.trimEnd()")}} han sido implementados (mira {{bug(1434007)}}). <code>trimLeft</code> y <code>trimRight</code> permanecen como alias por razones de compatibilidad web.</li> +</ul> + +<h3 id="APIs">APIs</h3> + +<h4 id="Nueva_APIs">Nueva APIs</h4> + +<p><em>No hay cambios.</em></p> + +<h4 id="DOM">DOM</h4> + +<p><em>No hay cambios.</em></p> + +<h4 id="Eventos_DOM">Eventos DOM</h4> + +<p><em>No hay cambios.</em></p> + +<h4 id="Trabajadores_del_servicio">Trabajadores del servicio</h4> + +<p><em>No hay cambios.</em></p> + +<h4 id="Media_y_WebRTC">Media y WebRTC</h4> + +<p><em>No hay cambios.</em></p> + +<h4 id="Canvas_y_WebGL">Canvas y WebGL</h4> + +<p><em>No hay cambios.</em></p> + +<h3 id="CSSOM">CSSOM</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="HTTP">HTTP</h3> + +<ul> + <li>La cookie <code><strong>SameSite</strong></code> ha sido implementada. Mira <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> y <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> ({{bug(795346)}}).</li> +</ul> + +<h3 id="Seguridad">Seguridad</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="Plugins">Plugins</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="Otros">Otros</h3> + +<p><em>No hay cambios.</em></p> + +<h2 id="Eliminaciones_de_la_plataforma_web">Eliminaciones de la plataforma web</h2> + +<h3 id="HTML_2">HTML</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="CSS_2">CSS</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="APIs_2">APIs</h3> + +<p><em>No hay cambios.</em></p> + +<h3 id="SVG_2">SVG</h3> + +<ul> + <li>La obsoleta (y nunca implementada correctamente) propiedad {{domxref("SVGViewElement")}}<code>.viewTarget</code> ha sido eliminada ({{bug(1455763)}}).</li> + <li>Las siguientes propiedades obsoletas han sido eliminadas de {{domxref("SVGSVGElement")}} ({{bug(1133172)}}): + <ul> + <li><code>pixelUnitToMillimeterX</code></li> + <li><code>pixelUnitToMillimeterY</code></li> + <li><code>screenPixelToMillimeterX</code></li> + <li><code>screenPixelToMillimeterY</code></li> + </ul> + </li> + <li>El constructor no-estandar <code>SVGNumber()</code> ha sido eliminado ({{bug("1455940")}}).</li> +</ul> + +<h3 id="Otros_2">Otros</h3> + +<p><em>No hay cambios.</em></p> + +<h2 id="Cambios_para_modificaciones_y_desarrolladores_de_Mozilla">Cambios para modificaciones y desarrolladores de Mozilla</h2> + +<h3 id="Extensiones_web">Extensiones web</h3> + +<p><em>No hay cambios.</em></p> + +<h2 id="También_puedes_ver">También puedes ver</h2> + +<ul> + <li>Compatibilidad de sitios para Firefox 61</li> +</ul> + +<h2 id="Versiones_anteriores">Versiones anteriores</h2> + +<p>{{Firefox_for_developers(60)}}</p> + +<p> </p> diff --git a/files/es/mozilla/firefox/releases/62/index.html b/files/es/mozilla/firefox/releases/62/index.html new file mode 100644 index 0000000000..ccc68fce29 --- /dev/null +++ b/files/es/mozilla/firefox/releases/62/index.html @@ -0,0 +1,235 @@ +--- +title: Firefox 62 for developers +slug: Mozilla/Firefox/Releases/62 +translation_of: Mozilla/Firefox/Releases/62 +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">Este artículo provee información sobre los cambios de Firefox 62 que van a afectar a los programadores. Firefox 62 ha sido lanzado en 5 de septiembre, 2018.</p> + +<h2 id="Cambios_para_programadores_de_red">Cambios para programadores de red</h2> + +<h3 id="Herramientas_para_programadores">Herramientas para programadores</h3> + +<ul> + <li>La editor de formas ya está disponible por defecto -- vea a <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Editar formas en CSS </a>para más informacion.</li> + <li>You can now split the Rules view out into its own pane, separate from the other tabs on the CSS pane. See <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">Page inspector 3-pane mode</a> for more details.</li> + <li>The Grid inspector has updated features, and all new documentation — see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a>.</li> + <li>You now have four options for the location of the Developer Tools. In addition to the default location on the bottom of the window, you can choose to locate the tools on either the left or right sides of the main window or in a separate window ({{bug(1192642)}}).</li> + <li>The <a href="/en-US/docs/Tools/Accessibility_inspector">Accessibility inspector</a> has had a couple of minor updates: + <ul> + <li>It no longer exposes the <code>help</code> property, which isn't properly implemented in Gecko ({{bug(1467643)}}).</li> + <li>The <code>keyboardShortcut</code> property now correctly exposes any keyboard shortcut available to activate the currently inspected node ({{bug(1467381)}}).</li> + </ul> + </li> + <li>A close button has been added to the <a href="/en-US/docs/Tools/Web_Console/Split_console">split console</a> toolbar.</li> + <li>If the option to "Select an iframe as the currently targeted document" is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes ({{bug(1456069)}}).</li> + <li>The <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>'s <a href="/en-US/docs/Tools/Network_Monitor#Cookies">Cookies tab</a> now shows the cookie <code>samesite</code> attribute ({{bug(1452715)}}).</li> + <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive design mode</a> now works inside container tabs ({{bug(1306975)}}).</li> + <li>When {{Glossary("CORS")}} errors occur and are reported on the console, Firefox now provides a link to the corresponding page in our <a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS error documentation</a> ({{bug(1475391)}}).</li> + <li>Create a screenshot of the current page (with an optional filename) from the Console tab ({{bug(1464461)}}) using the following command:<br> + <br> + <code>:screenshot <filename.png> --fullpage</code><br> + <br> + where <code><filename.png></code> is the desired filename. The file will be saved to your downloads folder. The <code>--fullpage</code> parameter is optional, but if included, it will save the full web page. This option also adds <code>-fullpage</code> to the name of the file. For a list of all options available for this command, enter: <code>:screenshot --help</code></li> +</ul> + +<h4 id="Removals">Removals</h4> + +<ul> + <li>The <a href="/en-US/docs/Tools/GCLI">Developer Toolbar/GCLI</a> (accessed with <kbd>Shift</kbd> + <kbd>F2</kbd>), <strong>has been removed</strong> from Firefox ({{bug(1461970)}}). Both the Developer Toolbar UI and the GCLI upstream library have become unmaintained, some of its features are broken (some ever since e10s), it is blocking the <code><span class="quote">unsafeSetInnerHTML</span></code> work, usage numbers are very low, alternatives exist for the most used commands.</li> +</ul> + +<h3 id="HTML">HTML</h3> + +<p><em>No changes.</em></p> + +<h3 id="CSS">CSS</h3> + +<ul> + <li><code>:-moz-selection</code> has been unprefixed to {{cssxref("::selection")}} ({{bug(509958)}}).</li> + <li><code>x</code> is now supported as a unit for the {{cssxref("<resolution>")}} type ({{bug(1460655)}}).</li> + <li>{{cssxref("shape-margin")}}, {{cssxref("shape-outside")}}, and {{cssxref("shape-image-threshold")}} are now enabled by default ({{bug(1457297)}}).</li> +</ul> + +<h4 id="Removals_2">Removals</h4> + +<ul> + <li>All <a href="/en-US/docs/Web/CSS/display#XUL_values">XUL <code>display</code> values</a> with the exception of <code>-moz-box</code> and <code>-moz-inline-box</code> have been removed from non-XUL documents in {{bug(1288572)}}.</li> +</ul> + +<h3 id="SVG">SVG</h3> + +<p><em>No changes.</em></p> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>The {{jsxref("WebAssembly.Global()")}} constructor is now supported, along with global variables in WebAssembly ({{bug(1464656)}}).</li> + <li>The {{jsxref("Array.prototype.flat()")}} and {{jsxref("Array.prototype.flatMap()")}} methods are now enabled by default ({{bug(1435813)}}).</li> + <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import.meta">import.meta</a></code> property has been implemented to expose context-specific metadata to a JavaScript module ({{bug(1427610)}}).</li> + <li>JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">string literals</a> may now directly contain the U+2028 LINE SEPARATOR and U+2029 PARAGRAPH SEPARATOR characters. As a consequence, {{jsxref("JSON")}} syntax is now a subset of JavaScript literal syntax (see {{bug(1435828)}} and the TC39 proposal <a href="https://github.com/tc39/proposal-json-superset">json-superset</a>).</li> + <li>For out-of-bounds <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> indexes, {{jsxref("Reflect.defineProperty()")}} and {{jsxref("Reflect.set()")}} will now return <code>false</code> instead of <code>true</code> ({{bug(1308735)}}).</li> +</ul> + +<h4 id="Removals_3">Removals</h4> + +<ul> + <li>The <code>DOMPoint</code> and <code>DOMPointReadOnly</code> constructors no longer support an input parameter of type <code>DOMPointInit</code>; the values of the properties must be specified using the <code>x</code>, <code>y</code>, <code>z</code>, and <code>w</code> parameters ({{bug(1186265)}}).</li> + <li>The {{domxref("URL.createObjectURL()")}} method no longer supports creating object URLs to represent a {{domxref("MediaStream")}}. This capability has been obsolete for some time now, since you can now simply set {{domxref("HTMLMediaElement.srcObject")}} to the <code>MediaStream</code> directly ({{bug(1454889)}}).</li> +</ul> + +<h3 id="APIs">APIs</h3> + +<h4 id="New_APIs">New APIs</h4> + +<ul> + <li>The {{domxref("Web_Speech_API", "Speech Synthesis API (Text-to-Speech)", "", "1")}} is now enabled by default on Firefox for Android ({{bug(1463496)}}).</li> +</ul> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>The {{domxref("DOMPointReadOnly")}} interface now supports the static function {{domxref("DOMPointReadOnly.fromPoint()")}}, which creates a new point object from a dictionary that's compatible with {{domxref("DOMPointInit")}}, which includes any {{domxref("DOMPoint")}} object. This function is also available on {{domxref("DOMPoint")}} ({{bug(1186265)}}).</li> + <li>For compatibility purposes, the {{domxref("Event.srcElement")}} property is now supported. It is an alias for {{domxref("Event.target")}} ({{bug(453968)}}).</li> + <li>{{domxref("Navigator.registerProtocolHandler()")}} now must only be called from a secure context ({{bug(1460506)}}).</li> + <li>The {{domxref("Navigator.registerContentHandler()")}} method has been disabled by default in preparation for being removed entirely, as it's been obsolete for some time ({{bug(1460481)}}).</li> + <li>The {{domxref("DataTransfer.DataTransfer", "DataTransfer()")}} constructor has been implemented ({{bug(1351193)}}).</li> + <li>{{domxref("Document.domain")}} can no longer return <code>null</code> ({{bug(819475)}}). If the domain cannot be identified, then <code>domain</code> returns an empty string instead of <code>null</code>.</li> + <li>Added the {{domxref("Console.timeLog()")}} method to display the current value of a console timer while continuing to track the time ({{bug(1458466)}}).</li> + <li>Added {{domxref("Console.countReset()")}} to reset a console counter value ({{bug(1459279)}}).</li> +</ul> + +<h4 id="DOM_events">DOM events</h4> + +<p><em>No changes.</em></p> + +<h4 id="Service_workers">Service workers</h4> + +<p><em>No changes.</em></p> + +<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> + +<ul> + <li>The <code>"media.autoplay.enabled"</code> preference now controls automatic playback of both audio and video media, instead of just video media ({{bug(1413098)}}).</li> + <li>The {{domxref("ChannelSplitterNode")}} has been fixed to correctly default to having 6 channels with the <code>channelInterpretation</code> set to <code>"discrete"</code> and the <code>channelCountMode</code> set to <code>"explicit"</code>, as per the specification ({{bug(1456265)}}).</li> +</ul> + +<h4 id="Removals_4">Removals</h4> + +<ul> + <li>The {{event("userproximity")}} and {{event("deviceproximity")}} events (see also {{domxref("UserProximityEvent")}} and {{domxref("DeviceProximityEvent")}}) have been disabled by default behind the <code>device.sensors.proximity.enabled</code> preference ({{bug(1462308)}}).</li> + <li>The {{event("devicelight")}} event (see also {{domxref("DeviceLightEvent")}}) has been disabled by default behind the <code>device.sensors.ambientLight.enabled</code> preference ({{bug(1462308)}}).</li> + <li>The {{event("DOMSubtreeModified")}} and {{event("DOMAttrModified")}} <a href="/en-US/docs/Web/Guide/Events/Mutation_events">mutation events</a> are no longer thrown when the {{htmlattrxref("style")}} attribute is changed via the CSSOM ({{bug(1460295)}}, see also this <a href="https://www.fxsitecompat.com/en-CA/docs/2018/domattrmodified-and-domsubtreemodified-events-are-no-longer-fired-when-style-attribute-is-changed-via-cssom/">site compatibility post</a>).</li> + <li>Support for {{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} has been removed ({{bug(1408301)}}).</li> + <li>Support for {{domxref("CSSValue")}}, {{domxref("CSSPrimitiveValue")}}, and {{domxref("CSSValueList")}} has been removed ({{bug(1459871)}}).</li> + <li>{{domxref("window.getComputedStyle()")}} no longer returns <code>null</code> when called on a <code>Window</code> which has no presentation ({{bug(1467722)}}).</li> +</ul> + +<ul> +</ul> + +<ul> +</ul> + +<h3 id="HTTP">HTTP</h3> + +<h4 id="Removals_5">Removals</h4> + +<ul> + <li>The deprecated CSP {{CSP("referrer")}} directive has been removed. Please use the {{HTTPHeader("Referrer-Policy")}} header instead ({{bug(1302449)}}).</li> +</ul> + +<h3 id="Security">Security</h3> + +<p><em>No changes.</em></p> + +<h3 id="Plugins">Plugins</h3> + +<p><em>No changes.</em></p> + +<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3> + +<h4 id="New_features">New features</h4> + +<ul> + <li> + <p>Command "<code>WebDriver:ElementSendKeys</code>" has been made WebDriver conforming for file uploads ({{bug(1448792)}})</p> + </li> + <li> + <p>User prompts as raised by "<code>beforeunload</code>" events are automatically dismissed for "<code>WebDriver:Get</code>", "<code>WebDriver:Back</code>", "<code>WebDriver:Forward</code>", "<code>WebDriver:Refresh</code>", and "<code>WebDriver:Close</code>" commands ({{bug(1434872)}})</p> + </li> + <li> + <p>"<code>WebDriver:PerformActions</code>" for <kbd>Ctrl</kbd> + <code>Click</code> synthesizes a {{event("contextmenu")}} event ({{bug(1421323)}})</p> + </li> +</ul> + +<h4 id="API_changes">API changes</h4> + +<ul> + <li>Removed obsolete endpoints including "<code>getWindowPosition</code>", "<code>setWindowPosition</code>", "<code>getWindowSize</code>", and "<code>setWindowSize</code>" ({{bug(1348145)}})</li> + <li>WebDriver commands which return success with data "<code>null</code>" now return an empty dictionary ({{bug(1461463)}})</li> +</ul> + +<h4 id="Bug_fixes">Bug fixes</h4> + +<ul> + <li> + <p>"<code>WebDriver:ExecuteScript</code>" caused cyclic reference error for <a href="/en-US/docs/Web/WebDriver/WebElement">WebElement</a> collections ({{bug(1447977)}})</p> + </li> + <li> + <p>Dispatching a "<code>pointerMove</code>" or "<code>pause</code>" action primitive could cause a hang, and the command to never send a reply ({{bug(1467743)}}, {{bug(1447449)}})</p> + + <p> </p> + </li> +</ul> + +<h3 id="Other">Other</h3> + +<p><em>No changes.</em></p> + +<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2> + +<h3 id="API_changes_2">API changes</h3> + +<ul> + <li>Added the {{WebExtAPIRef("webRequest.getSecurityInfo()")}} API to examine details of TLS connections ({{bug(1322748)}}).</li> + <li>Added the {{WebExtAPIRef("browserSettings.newTabPosition")}} to customize where new tabs open ({{bug(1344749)}}).</li> + <li><code>windowTypes</code> has been deprecated in {{WebExtAPIRef("windows.get()")}}, {{WebExtAPIRef("windows.getCurrent()")}}, and {{WebExtAPIRef("windows.getLastFocused()")}} ({{bug(1419132)}}).</li> + <li>It's now possible to modify a browser action on a per-window basis ({{bug(1419893)}}).</li> +</ul> + +<h3 id="Manifest_changes">Manifest changes</h3> + +<ul> + <li>New <code>open_at_install</code> property of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> manifest key enables extensions to control whether their sidebars should open automatically on install or not ({{bug(1460910)}}).</li> + <li>Changes to the <code>browser_style</code> property of various manifest keys: + <ul> + <li>In <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> it defaults to <code>false</code>.</li> + <li>In <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> it defaults to <code>true</code>.</li> + </ul> + </li> +</ul> + +<h3 id="Theme_changes">Theme changes</h3> + +<ul> + <li>New <code>tab_background_separator</code> property of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code> manifest key enables extensions to change the color of the tab separator ({{bug(1459455)}}).</li> +</ul> + +<h3 id="Removals_6">Removals</h3> + +<ul> + <li>Support for unpacked sideloaded extensions has been removed ({{bug(1385057)}}).</li> + <li>The warning about <code>browser_style</code> displayed when temporarily loading an extension for testing is no longer displayed ({{bug(1404724)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-US/versions/62">Site compatibility for Firefox 62</a></li> +</ul> + +<h2 id="Older_versions">Older versions</h2> + +<p>{{Firefox_for_developers(61)}}</p> diff --git a/files/es/mozilla/firefox/releases/63/index.html b/files/es/mozilla/firefox/releases/63/index.html new file mode 100644 index 0000000000..cd63bb1eac --- /dev/null +++ b/files/es/mozilla/firefox/releases/63/index.html @@ -0,0 +1,274 @@ +--- +title: Firefox 63 para desarrolladores +slug: Mozilla/Firefox/Releases/63 +tags: + - Firefox + - Mozilla + - Release +translation_of: Mozilla/Firefox/Releases/63 +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">Este articulo proporciona información sobre los cambios en Firefox 63, que afectara a los desarrolladores. La versión de Firefox 63 fue publicada el 23 de octubre del 2018.</p> + +<h2 id="Cambios_para_los_desarrolladores_web">Cambios para los desarrolladores web</h2> + +<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3> + +<ul> + <li>La pestaña de fuentes en el <a href="/en-US/docs/Tools/Page_Inspector">Inspector de Pagina</a> ahora incluye un editor que facilita ver y editar los ajustes de fuente en tu página. ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">editar fuentes </a>para más detalles.</li> + <li>El <a href="/en-US/docs/Tools/Accessibility_inspector">Inspector de accesibilidad</a> ahora está habilitado por defecto. ({{bug(1482454)}}).</li> + <li>Cuando flotas sobre un objeto en el <a href="/en-US/docs/Tools/Accessibility_inspector">Inspector de accesibilidad</a>, <a href="/en-US/docs/Tools/Accessibility_inspector#Highlighting_of_UI_items">el objeto es resaltado </a>y su rol y nombre serán mostrados en una barra de información de la página. ({{bug(1473030)}}).</li> + <li>La consola de comandos en la <a href="/en-US/docs/Tools/Web_Console">Consola Web</a> es ahora mostrada inmediatamente con su respectivo resultado. ({{bug(1136299)}}).</li> + <li>Un nuevo icono ha sido añadido al contenido <a href="/en-US/docs/Tools/Network_Monitor">Monitor de Red</a> para indicar cuando una URL pertenece a un rastreador desconocido — ver <a href="/en-US/docs/Tools/Network_Monitor/request_list#Security_icons">iconos de seguridad.</a> ({{bug(1333994)}}).</li> + <li>El valor por defecto de <code>devtools.aboutdebugging.showSystemAddons</code> es ahora <code>false</code>, significa que los complementos del sistema no serán listados en el <code>about:debugging</code> página. Puedes cambiar los ajustes navegando en <code>about:config</code> ({{bug(1425347)}}).</li> + <li>la barra de tareas <a href="/en-US/docs/Tools/Responsive_Design_Mode">Modo de diseño responsivo</a> fue simplificada, y añadimos la opción de alinear a la izquierda left-align la ventanilla.</li> + <li>El inspector de página incluye un <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Custom_element_definition">enlace a la definición de clases</a> para un elemento personalizado. ({{bug(1443923)}}).</li> +</ul> + +<h3 id="HTML">HTML</h3> + +<ul> + <li>Soporte para los {{HTMLElement("img")}} elementos <code>decoding</code> el atributo ha sido añadido ({{bug(1416328)}}); ver tambien {{DOMxRef("HTMLImageElement.decoding")}}.</li> +</ul> + +<h4 id="Removals">Removals</h4> + +<ul> + <li>Soporte para la <code>sidebar</code> (barralateral) tipo de enlace (<code>rel="sidebar"</code>) ha sido removido. si una etiqueta de anclaje incluye este atributo, sera ignorado. ({{bug(1452645)}}).</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>Soporte para {{CSSxRef(":defined")}} pseudo-clase ha sido añadida ({{bug(1331334)}}).</li> + <li>soporte para {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} y {{CSSxRef("gap")}} ha sido añadida en <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#The_gap_properties">diseño flexbox</a> ({{bug(1398483)}}).</li> + <li>Soporte reactivado para <a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio">webkit-prefixed pixel-density @media queries</a> ({{bug(1444139)}}).</li> + <li>Soporte añadido para <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Caja de diseño flexible</a> (Flexbox) propiedades {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, y {{CSSxRef("align-items")}} también como {{CSSxRef("justify-content")}} propiedad ({{bug(1472843)}}).</li> + <li>implementado el path()función para {{CSSxRef("offset-path")}} ({{bug(1429298)}}).</li> + <li>Implementado <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4">mejoras en la sintaxis de la petición de medios nivel 4</a> ({{bug(1472843)}}).</li> + <li>Cambio de nombre offset-* propiedades a {{CSSxRef("inset-block-start")}}, {{CSSxRef("inset-block-end")}}, {{CSSxRef("inset-inline-start")}}, and {{CSSxRef("inset-inline-end")}} ({{bug(1464782)}}).</li> + <li>Adiciona soporte para <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">preferencia-movimiento-reducido</a> implementación contenido media. ({{bug(1365045)}}, {{bug(1475462)}}).</li> + <li>Added flow relative values (<code>block</code>, <code>inline</code>) for the {{CSSxRef("resize")}} property ({{bug(1464786)}}).</li> + <li>Implemented flexbox layout for <code>safe</code> & <code>unsafe</code> values in {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, and {{CSSxRef("justify-content")}} ({{bug(1297774)}}).</li> + <li>The <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">logical properties</a> (where appropriate) are now animatable ({{bug(1309752)}}).</li> +</ul> + +<h4 id="Removals_2">Removals</h4> + +<ul> + <li>Removed <code>offset-block-start</code>, <code>offset-block-end</code>, <code>offset-inline-start</code> and <code>offset-inline-end</code>; these have been renamed to <code>inset-*</code>, as described above ({{bug(1464782)}}).</li> +</ul> + +<h3 id="SVG">SVG</h3> + +<p><em>No changes.</em></p> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>The {{JSxRef("Symbol.prototype.description")}} property has been implemented ({{bug(1472170)}}).</li> + <li>The {{JSxRef("Object.fromEntries()")}} method has been added ({{bug(1469019)}}).</li> + <li>When you try to access a property of an undefined object, the error message is now much improved. Considering the case where <code>x</code> is undefined and you try to access <code>x.y</code>, instead of <code>TypeError: x is undefined</code> the console now returns the more descriptive <code><a href="/en-US/docs/Web/JavaScript/Reference/Errors/cant_access_property">x is undefined; can't access its "y" property</a></code> ({{bug(1259822)}}).</li> +</ul> + +<h4 id="Removals_3">Removals</h4> + +<ul> + <li>Experimental WebAssembly Module IndexedDB serialization support has been removed ({{bug(1469395)}}).</li> +</ul> + +<h3 id="APIs">APIs</h3> + +<h4 id="New_APIs">New APIs</h4> + +<ul> + <li>The Shadow DOM ({{bug(1471947)}}) and Custom Elements ({{bug(1471948)}}) APIs have been enabled by default; See <a href="/en-US/docs/Web/Web_Components">Web components</a> for more details.</li> + <li>The {{domxref("Media_Capabilities_API", "Media Capabilities API", "", "1")}} been implemented ({{bug(1409664)}}).</li> + <li>The {{domxref("Clipboard", "Async Clipboard API", "", "1")}} has been implemented and enabled by default for all channels ({{bug(1461465)}}). As is the case with Chrome, Firefox currently implements only the {{domxref("Clipboard.writeText", "writeText()")}} and {{domxref("Clipboard.readText", "readText()")}} methods; however, unlike Chrome, <code>readText()</code> is only available in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">browser extensions</a>.</li> + <li>The {{DOMxRef("SecurityPolicyViolationEvent")}} interface is now supported. It allows sending events when the {{HTTPHeader("Content-Security-Policy")}} is violated ({{bug(1472661)}}).</li> +</ul> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>The following portions of the {{domxref("Web_Animations_API", "Web Animations API", "", "1")}} have been enabled by default (see {{bug(1476158)}}): + <ul> + <li>The {{DOMxRef("Animation")}} properties {{DOMxRef("Animation.ready", "ready")}} and {{DOMxRef("Animation.finished", "finished")}}, specifying the <code>Animation</code> object's <code>ready</code> and <code>finished</code> {{JSxRef("Promise")}}s.</li> + <li>The {{DOMxRef("Animation")}} object's {{DOMxRef("Animation.effect", "effect")}} property.</li> + <li>The interfaces {{DOMxRef("KeyframeEffect")}} and {{DOMxRef("AnimationEffect")}}.</li> + </ul> + </li> + <li>The {{DOMxRef("Element.toggleAttribute()")}} method has been implemented ({{bug(1469592)}}).</li> + <li>The historical, previously non-standard, {{DOMxRef("Event.returnValue")}} property is now supported for compatibility purposes ({{bug(1452569)}}).</li> + <li>We implemented the {{DOMxRef("Window.event")}} property to improve web compatibility, now that it's become standard ({{bug(218415)}}).</li> + <li>To bring Firefox into alignment with Edge and Chrome, the {{DOMxRef("NavigatorID.platform", "navigator.platform")}} property now returns <code>"Win32"</code> even when running on 64-bit Windows ({{bug(1472618)}}).</li> + <li>Prior to Firefox 63, links that open new windows that had <code>rel="noopener"</code>, as well as calls to {{DOMxRef("Window.open()")}} with the <code><a href="/en-US/docs/Web/API/Window/open#noopener">noopener</a></code> window feature enabled would default to having all window features disabled, so that you had to explicitly re-enable any standard features you wanted. Now these windows have the same set of features enabled as any other window, and you need to explicitly turn off any you don't want ({{bug(1419960)}}).</li> +</ul> + +<h4 id="DOM_events">DOM events</h4> + +<ul> + <li>Handling of the <kbd>Alt</kbd> key <em>on the right side</em> of the keyboard has been improved on Windows. If the user's current keyboard layout maps the <kbd>Alt</kbd> key to the <kbd>AltGr</kbd> modifier key, the value of {{DOMxRef("KeyboardEvent.key")}} is now reported as <code>"AltGraph"</code>. This behavior matches the behavior recently introduced in Chrome ({{bug(900750)}}).</li> +</ul> + +<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> + +<ul> + <li>Microphone access now works simultaneously in multiple tabs, even within the same content process ({{bug(1404977)}}).</li> + <li>{{DOMxRef("RTCDataChannel")}} has been updated to support the sctp-sdp-21 data format for the data, in addition to the older sctp-sdp-05 format previously supported.</li> + <li>The {{DOMxRef("ConstantSourceNode")}} node type for Web Audio API now has a default channel count of 2 rather than 1, in order to match the specification ({{bug(1413283)}}).</li> + <li>The {{domxref("Web_Audio_API", "Web Audio API", "", "1")}} interface {{DOMxRef("AudioScheduledSourceNode")}} (and by extension, all the other node types based on it) now throw the correct exception when a negative value is specified for the node start time. That error is <code>RangeError</code> ({{bug(1413284)}}).</li> + <li>The minimum and maximum permitted values for an {{DOMxRef("AudioParam")}} object's {{DOMxRef("AudioParam.value", "value")}} have been changed to the minimum negative single-precision floating-point value (-340,282,346,638,528,859,811,704,183,484,516,925,440) and the maximum positive single-precision floating-point value (+340,282,346,638,528,859,811,704,183,484,516,925,440) respectively ({{bug(1476695)}}).</li> + <li>The {{DOMxRef("SourceBuffer.changeType")}} method, which allows you to change codecs during an active stream, has been enabled by default. This is part of the {{domxref("Media_Source_Extensions_API", "Media Source Extensions API", "", "1")}} ({{bug(1481166)}}).</li> + <li>The {{DOMxRef("AudioParam.setValueCurveAtTime()")}} method has been updated to correctly accept an array of floating-point values to indicate the parameter's values to change to over time. Previously, it required a {{DOMxRef("Float32Array")}} ({{bug(1421091)}}).</li> + <li>{{DOMxRef("AudioParam.setValueCurveAtTime()")}} has also been updated to correctly return a proper <code>TypeError</code> when a non-finite value is found in the <code>values</code> array ({{bug(1472095)}}).</li> + <li>In addition, <code>setValueCurveAtTime()</code> has been updated to ensure that, when the parameter finishes following the specified value curve after the duration elapses, the value of the parameter is set to the last value in the list of values to curve through ({{bug(1308436)}}).</li> + <li>The <code>RTCRTPStreamStats</code> dictionary has been renamed to {{DOMxRef("RTCRtpStreamStats")}} for consistency with other WebRTC dictionaries and the specification ({{bug(1480498)}}).</li> + <li>Support for the <code>RTCRtpStreamStats</code> dictionary's {{DOMxRef("RTCRtpStreamStats.kind", "kind")}} property has been added ({{bug(1481851)}}).</li> + <li>The {{DOMxRef("RTCRtpStreamStats")}} dictionary's {{DOMxRef("RTCRtpStreamStats.isRemote", "isRemote")}} property is deprecated and will be removed in Firefox 65. A warning is now output to console when this property is accessed. See <a href="https://blog.mozilla.org/webrtc/getstats-isremote-65/">this blog post on the Advancing WebRTC blog</a> for details ({{bug(1393306)}}).</li> +</ul> + +<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4> + +<ul> + <li>A new <code>powerPreference</code> context attribute has been added to {{DOMxRef("HTMLCanvasElement.getContext()")}}. On macOS this allows WebGL non-performance-critical applications and applets to request the low-power GPU instead of the high-power GPU in multi-GPU systems ({{bug(1349799)}}).</li> +</ul> + +<h4 id="Removals_4">Removals</h4> + +<ul> + <li>The obsolete and non-standard Firefox-only methods {{DOMxRef("Window.back()")}} and {{DOMxRef("Window.forward()")}} have been removed. Please use the {{DOMxRef("History.back", "window.history.back()")}} and {{DOMxRef("History.forward", "window.history.forward()")}} methods instead ({{bug(1479486)}}).</li> + <li>The {{DOMxRef("URL.createObjectURL", "createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL", "revokeObjectURL()")}} methods are no longer available on {{DOMxRef("ServiceWorker")}} instances due to the potential they introduced for memory leaks to occur ({{bug(1264182)}}).</li> + <li>Since it was deprecated in the specification anyway, the limited support for Doppler effects on {{DOMxRef("PannerNode")}} has been removed from the Web Audio API. The {{DOMxRef("AudioListener")}} properties {{DOMxRef("AudioListener.dopplerFactor", "dopplerFactor")}} and {{DOMxRef("AudioListener.speedOfSound", "speedOfSound")}} have been removed, along with the <code>PannerNode</code> method {{DOMxRef("PannerNode.setVelocity", "setVelocity()")}} ({{bug(1148354)}}).</li> +</ul> + +<h3 id="CSSOM">CSSOM</h3> + +<p><em>No changes.</em></p> + +<h3 id="HTTP">HTTP</h3> + +<ul> + <li>The {{HTTPHeader("Clear-Site-Data")}} header is implemented and no longer behind a preference ({{bug(1470111)}}).</li> +</ul> + +<h3 id="Security">Security</h3> + +<ul> + <li>Site favicons are now subject to <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a>, if one is configured for the site ({{bug(1297156)}}).</li> + <li>CSP <code>script-src</code> directive's <code>'report-sample'</code> expression now recognized when generating violation reports. This directive indicates that a short sample of where the violation occurred should be included in the report. Previously, Firefox always included this sample ({{bug(1473218)}}).</li> + <li>Firefox now uses NSS 3.39 ({{bug(1470914)}}).</li> +</ul> + +<h3 id="Plugins">Plugins</h3> + +<p><em>No changes.</em></p> + +<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3> + +<h4 id="New_features">New features</h4> + +<ul> + <li>Marionette now returns a <code>setWindowRect</code> <a href="/en-US/docs/Web/WebDriver/Capabilities">capability</a> in the <code>WebDriver:NewSession</code> response that is true if the browser window can be repositioned and resized, which e.g. is the case for Firefox but not any mobile applications ({{bug(1470659)}}).</li> + <li>Added support for the <code>unhandledPromptBehavior</code> capability, which allows to define a specific <a href="https://w3c.github.io/webdriver/#dfn-user-prompt-handler">prompt behavior</a> of the WebDriver specification ({{bug(1264259)}}).</li> + <li>Handling of user prompts has been added to the <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> commands ({{bug(1439995)}}).</li> +</ul> + +<h4 id="API_changes">API changes</h4> + +<ul> + <li>Deprecated command end-points without the <code>WebDriver:</code> prefix have been removed ({{bug(1451725)}}).</li> + <li>The <code>WebDriver:NewSession</code> command returns recommended strings (<code>linux</code>, <code>mac</code>, <code>windows</code>) for <code>platformName</code> as defined in the WebDriver specification ({{bug(1470646)}}).</li> +</ul> + +<h4 id="Bug_fixes">Bug fixes</h4> + +<ul> + <li>Focus related events were missing on element interaction when Firefox was not running as the top-most application ({{bug(1398111)}}).</li> + <li>Performing a <code>pointerDown</code> and <code>pointerUp</code> action in a subsequent action sequence could trigger a double click because <code>WebDriver:ReleaseActions</code> didn't reset the double click tracker ({{bug(1422583)}}).</li> + <li>Executing <code>pause</code> actions repeatedly could cause an infinite hang ({{bug(1447449)}}).</li> + <li>Fixed a bug where returning an element collection from <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> would cause a cyclic reference error ({{bug(1447977)}}).</li> + <li>To prevent a race condition both the <code>WebDriver:AcceptAlert</code> and <code>WebDriver:DismissAlert</code> commands now wait until the user prompt has been closed ({{bug(1479368)}}).</li> + <li>Log entries as emitted by the frame script were no longer limited by <code>MarionettePrefs.logLevel</code> but logged everything ({{bug(1482829)}}).</li> + <li><code>WebDriver:TakeScreenshot</code> raised an error when taking a screenshot of a window larger than 32767 pixels in width or height ({{bug(1485730)}}).</li> + <li><code>WebDriver:SendAlertText</code> didn't replace default user prompt value if text to send is an empty string ({{bug(1486485)}}).</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li>Corrected the behavior of {{DOMxRef("PerformanceObserver.observe()")}} to simply do nothing if no valid entry types are found in the specified array of entry types to observe, or if the array is empty or missing. Previously, Firefox was incorrectly throwing a <code>TypeError</code> ({{bug(1403027)}}).</li> + <li>In <a href="/en-US/docs/Web/OpenSearch">OpenSearch</a>, Firefox now accepts <code>application/json</code> as a search URL type, as an alias of <code>application/x-suggestions+json</code> ({{bug(1425827)}}).</li> +</ul> + +<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2> + +<h3 id="API_changes_2">API changes</h3> + +<h4 id="Theming">Theming</h4> + +<ul> + <li>The default text color for {{WebExtAPIRef("browserAction")}} badges is now automatically set to black or white, to maximise contrast with the background ({{bug(1474110)}}).</li> + <li>The <code>accentcolor</code> and <code>textcolor</code> properties of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code> manifest key are now optional ({{bug(1413144)}}).</li> + <li>{{WebExtAPIRef("browserAction.getBadgeTextColor()")}} and {{WebExtAPIRef("browserAction.setBadgeTextColor()")}} enable you to get and set the text color of browser action badges ({{bug(1424620)}}).</li> + <li>The theme <code>colors</code> key in <code>manifest.json</code> now supports the <code>ntp_text</code> property to set the text color in a new tab, and the <code>ntp_background</code> property to set the color of a new tab ({{bug(1347204)}}).</li> + <li>Themes can now define the colors for sidebars, such as the bookmarks sidebar ({{bug(1418602)}}). The relevant properties include: + <ul> + <li><code>sidebar</code>: The background color for sidebars.</li> + <li><code>sidebar_text</code>: The text color for sidebars.</li> + <li><code>sidebar_highlight</code>: The background color of a selected item in a sidebar.</li> + <li><code>sidebar_highlight_text</code>: The text color of a selected item in a sidebar.</li> + </ul> + </li> + <li>The method {{WebExtAPIRef("management.install()")}} allows web extensions to install and enable signed browser themes ({{bug(1369209)}}).</li> +</ul> + +<h4 id="Search">Search</h4> + +<ul> + <li>The new {{WebExtAPIRef("search")}} AP<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/search">I</a> enables you to retrieve the list of installed search engines and perform searches with them ({{bug(1352598)}}).</li> + <li>{{WebExtAPIRef("topSites.get()")}} now takes an <code>options</code> parameter enabling you to set various options for the list of sites returned ({{bug(1445836)}}).</li> +</ul> + +<h4 id="Tabs">Tabs</h4> + +<ul> + <li>{{WebExtAPIRef("tabs.onHighlighted")}} now supports multi-select ({{bug(1474440)}}).</li> + <li>{{WebExtAPIRef("tabs.highlight")}} includes an optional field in the <code>highlightInfo</code> object. The optional populate field defaults to <code>true</code>. Setting it to <code>false</code> prevents the returned <code>windows.Window</code> object from being populated with a list of tabs.</li> + <li>{{WebExtAPIRef("tabs.update")}} now supports changing the selection status of a tab by including <code>highlighted: true</code> in the <code>updateProperties</code> parameter ({{bug(1479129)}}).</li> + <li>{{WebExtAPIRef("tabs.update")}} supports changing the selection status of a tab without changing the focused tab ({{bug(1486050)}}) by including both <code>highlighted: true</code> and <code>active: false</code> in the <code>updateProperties</code> parameter.</li> + <li>{{WebExtAPIRef("tabs.query")}} now returns an array of {{WebExtAPIRef("tabs.Tab")}} objects if multiple tabs are selected ({{bug(1465170)}}).</li> + <li>The {{WebExtAPIRef("tabs.Tab")}} property now properly reflects which tabs in a browser window are selected (highlighted) and {{WebExtAPIRef("tabs.highlight")}} supports changing the highlighted status of multiple tabs ({{bug(1464862)}}).</li> + <li>The <code>isarticle</code> property in the <code>extraParameters</code> object passed into {{WebExtAPIRef("tabs.onUpdated")}} has been renamed to <code>isArticle</code>. The old name is retained but deprecated. This change was uplifted to Firefox 62 ({{bug(1461695)}}).</li> + <li>The {{WebExtAPIRef('tabs.onUpdated')}} event can be used to track when a tab is drawing the user's attention with <code>attention</code> property of the <code>changeInfo</code> object ({{bug(1396684)}}).</li> +</ul> + +<h4 id="Menus">Menus</h4> + +<ul> + <li>Added {{WebExtApiRef("menus.getTargetElement()")}} to the {{WebExtApiRef("menus")}} API. The method returns the clicked on element referenced by the <code>targetElementId</code> parameter ({{bug(1325814)}}).</li> + <li>{{WebExtAPIRef("menus.create()")}} now enables you to create invisible menu items, and {{WebExtAPIRef("menus.update()")}} enables you to toggle menu item visibility ({{bug(1482529)}}).</li> + <li>Items created using the {{WebExtAPIRef("menus")}} API now support access keys ({{bug(1320462)}}).</li> + <li>The <code>targetUrlPatterns</code> parameter of {{WebExtApiRef("menus.create()")}} and {{WebExtApiRef("menus.update()")}} now supports any URL scheme, even those that are usually not allowed in a match pattern ({{bug(1280370)}}).</li> +</ul> + +<h4 id="Other_2">Other</h4> + +<ul> + <li>{{WebExtAPIRef("commands.onCommand")}} is now treated as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions">user input</a> ({{bug(1408129)}}).</li> + <li>The {{WebExtAPIRef("webRequest")}} API now enables you to filter for speculative connections ({{bug(1479565)}}).</li> + <li>{{WebExtAPIRef("webRequest.SecurityInfo")}} adds two new properties, <code>keaGroupName</code> and <code>signatureSchemeName</code>. This change was uplifted to Firefox 62 ({{bug(1471959)}}).</li> + <li>{{WebExtAPIRef("cookies.Cookie")}} now includes a property indicating the SameSite state of the cookie. The {{WebExtAPIRef("cookies.SameSiteStatus")}} enumeration defines SameSite state values ({{bug(1351663)}}).</li> + <li>Match patterns for URLs now explicitly match the "data" URL scheme ({{bug(1280370)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-CA/versions/63/">Site compatibility for Firefox 63</a></li> +</ul> + +<h2 id="Older_versions">Older versions</h2> + +<p>{{Firefox_for_developers(62)}}</p> diff --git a/files/es/mozilla/firefox/releases/66/index.html b/files/es/mozilla/firefox/releases/66/index.html new file mode 100644 index 0000000000..1231c4e85a --- /dev/null +++ b/files/es/mozilla/firefox/releases/66/index.html @@ -0,0 +1,162 @@ +--- +title: Firefox 66 para desarrolladores +slug: Mozilla/Firefox/Releases/66 +tags: + - '66' + - Firefox + - Lanzamiento + - Mozilla +translation_of: Mozilla/Firefox/Releases/66 +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary"><font>Este artículo proporciona información sobre los cambios en Firefox 66 que afectarán a los desarrolladores.<span> </span></font><font>Firefox 66 fue lanzado el 19 de marzo de 2019.</font></p> + +<h2 id="Cambios_para_desarrolladores_web" style='margin: 103px 0px 20px; padding: 0px; border: 0px; font-size: 2.33333rem; font-family: x-locale-heading-primary, zillaslab, Palatino, "Palatino Linotype", x-locale-heading-secondary, serif; line-height: 1.2; position: relative; color: rgb(51, 51, 51); font-style: normal; letter-spacing: -0.04448px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;'><font><font>Cambios para desarrolladores web</font></font></h2> + +<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3> + +<ul> + <li><font><font>Los captadores de JavaScript ahora pueden ejecutarse desde la ventana emergente de autocompletado en la<span> </span></font></font> <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Consola Web</a> ({{bug(1499289)}}).</li> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Los métodos de la ventana</span> {{domxref("Window.alert()", "alert()")}}, {{domxref("Window.prompt()","prompt()")}}, and {{domxref("Window.confirm()","confirm()")}} ahora trabajan de nuevo en el <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">Modo de diseño de respuesta</a>, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">después de un período de ruptura </span>({{bug(1273997)}}).</li> + <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Puede copiar la salida de la consola al portapapeles haciendo clic derecho y seleccionando "</font></font><strong style="border: 0px; margin: 0px; padding: 0px;"><font><font>Exportar mensajes visibles al portapapeles</font></font></strong><font><font>" en el menú contextual.</font></font></li> +</ul> + +<h3 id="HTML">HTML</h3> + +<ul> + <li><font><font>Los archivos HTML (y texto sin formato)<span> </span></font><font>codificados en UTF-8 que se<span> </span></font><font>cargan desde las<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>file:</code><font><font>URL ahora son compatibles sin<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'><meta charset="utf-8"> </code><font><font>la lista de materiales UTF-8 BOM, lo que facilita el trabajo local en dichos archivos antes de cargarlos en un servidor.<span> </span></font><font>Aún debe asegurarse de que el servidor envíe<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>charset=utf-8</code><font><font> en el<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: normal; font-weight: 400; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace; color: rgb(51, 51, 51); font-size: 16px; letter-spacing: -0.04448px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; text-decoration-style: initial;'>Content-Type</code><font><font> encabezado HTTP para dichos archivos, de lo contrario, el mecanismo de detección utilizado para los archivos locales interrumpiría la carga incremental en el caso de la red<span> </span></font></font> ({{bug(1071816)}}).</li> +</ul> + +<h4 id="Removido" style='margin: 30px 0px 20px; padding: 0px; border: 0px; font-size: 1.33333rem; font-family: x-locale-heading-primary, zillaslab, Palatino, "Palatino Linotype", x-locale-heading-secondary, serif; line-height: 1.2; color: rgb(51, 51, 51); font-style: normal; letter-spacing: -0.04448px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-style: initial;'><font><font>Removido</font></font></h4> + +<ul> + <li>El <code>x-moz-errormessage</code> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">atributo se ha eliminado del</span> {{HTMLElement("input")}} elemento ({{bug(1513890)}}). Debe usar {{domxref("Constraint_validation", "Funciones de validación de restricciones", "", "1")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">para implementar mensajes de validación personalizados en su luga</span>r.</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li><a href="https://drafts.csswg.org/css-scroll-anchoring/">El Anclaje de desplazamiento</a> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">se ha implementado en Firefox Desktop (pero todavía no en dispositivos móviles), que incluye la</span> {{cssxref("overflow-anchor")}} propiedad ({{bug(1305957)}}).</li> + <li><font>Hemos implementado el<span> </span></font><font>modificador de</font> <a href="/en-US/docs/Web/CSS/Attribute_selectors">selector de atributo</a> que distingue entre <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">mayúsculas y minúsculas</span>, <code>s</code> ({{Bug(1512386)}}).</li> + <li>Varias <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">propiedades logicas</a><font><font> abreviadas</font><font><span> </span>han aterrizado, junto con las propiedades del radio del borde relativo al flujo:</font></font> + <ul> + <li>{{cssxref("padding-block")}} y {{cssxref("padding-inline")}} ({{bug(1519847)}}).</li> + <li>{{cssxref("margin-block")}} y {{cssxref("margin-inline")}} ({{bug(1519944)}}).</li> + <li>{{cssxref("inset")}}, {{cssxref("inset-block")}}, y {{cssxref("inset-inline")}} ({{bug(1520229)}}).</li> + <li>{{cssxref("border-block-color")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-width")}}, {{cssxref("border-inline-color")}}, {{cssxref("border-inline-style")}}, and {{cssxref("border-inline-width")}} ({{bug(1520236)}}).</li> + <li>{{cssxref("border-block")}} y {{cssxref("border-inline")}} ({{bug(1520396)}}).</li> + <li>{{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, y {{cssxref("border-end-end-radius")}} ({{bug(1520684)}}).</li> + </ul> + </li> + <li><font>Implementamos las<span> </span></font><font>consultas</font> {{cssxref("@media/overflow-inline", "overflow-inline")}} y {{cssxref("@media/overflow-block", "overflow-block")}} medios ({{Bug(1422235)}}).</li> + <li>{{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">ahora se pueden animar, según las reglas establecidas en sus especificaciones</span> ({{bug(1348519)}}).</li> + <li>Ahora soportamos {{cssxref("calc")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">con porcentajes para celdas de tabla y anchos de columna</span> ({{bug(957915)}}).</li> + <li><font>Las<span> </span></font><font>palabras clave</font> <code>min-content</code> y <code>max-content</code> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">ahora están disponibles sin prefijo</span> ({{bug(1322780)}}). <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Estos se pueden establecer en</span>: + <ul> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("min-width")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("min-block-size")}}</li> + <li>{{cssxref("min-inline-size")}}</li> + <li>{{cssxref("max-block-size")}}</li> + <li>{{cssxref("max-inline-size")}}</li> + <li>{{cssxref("block-size")}}</li> + <li>{{cssxref("inline-size")}}</li> + </ul> + </li> +</ul> + +<h3 id="SVG">SVG</h3> + +<p><em>No hay adicionales.</em></p> + +<h4 id="Removido_2">Removido</h4> + +<ul> + <li>Eliminamos el soporte para <code><a href="/en-US/docs/XML_introduction/xml:base">xml:base</a></code> atributo ({{Bug(903372)}}).</li> +</ul> + +<h3 id="JavaScript">JavaScript</h3> + +<p><em>Sin cambios.</em></p> + +<h3 id="APIs">APIs</h3> + +<h4 id="Nuevos_en_APIscambios">Nuevos en APIs/cambios</h4> + +<ul> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">La reproducción automática de audio se bloqueará de forma predeterminada poco después de que la versión 66 se convierta en la versión de lanzamiento de Firefox</span> ({{bug(1487844)}}, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">consulte el</span> {{bug(1535667)}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">para obtener información detallada sobre la implementación</span>). <font><span> </span></font><font>La función se extenderá gradualmente a los usuarios hasta que todos la tengan.</font></li> +</ul> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>El {{domxref("HTMLSlotElement.assignedElements()")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">método ha sido implementado</span> ({{bug(1425685)}}).</li> + <li>El {{domxref("TextEncoder.encodeInto()")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">método ha sido implementado</span> ({{bug(1514664)}}).</li> +</ul> + +<h4 id="Eventos_DOM">Eventos DOM</h4> + +<ul> + <li>La {{domxref("InputEvent.inputType")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">propiedad ha sido implementada</span> ({{bug(1447239)}}).</li> + <li><font>Las<span> </span></font><font>propiedades</font> {{domxref("Window.event")}} y {{domxref("Event.returnValue")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">ropiedades, que originalmente eran propiedad de IE, y que luego se admitían en otros navegadores por motivos de compatibilidad, se han vuelto a introducir en Firefox 66, después de haber sido agregadas primero en las versiones 63 y 64 respectivamente, pero luego se eliminaron nuevamente debido a problemas de compatibilidad.</span></li> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">A partir de 66, cuando la</span> {{domxref("KeyboardEvent.keyCode")}} propiedad del {{event("keypress")}} evento del objeto es 0, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">el valor será el mismo que<span> </span></span> {{domxref("KeyboardEvent.charCode")}}. <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Por el contrario, cuando</span>, <code>charCode</code> es 0, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">será igual que</span> <code>keyCode</code>. <font><font>Este comportamiento de duplicación coincide con otros navegadores y se espera que solucione la mayoría de los problemas de compatibilidad asociados, sin embargo, la detección de agentes de usuario puede causar problemas adicionales en algunas bibliotecas de JavaScript.<span> </span></font><font>Tenga en cuenta que en términos de especificaciones, hemos cambiado desde el<span> </span></font></font><em><font><font>modelo de división</font></font></em><font><font><span> </span>del<span> </span></font></font><em><font><font>modelo fusionado</font></font></em> (ver <a href="https://w3c.github.io/uievents/#determine-keypress-keyCode">Como determinar keyCode para eventos de pulsaciones de tecla</a> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">en la especificación de interfaz de usuario de eventos</span>).</li> +</ul> + +<h4 id="Media_Audio_Web_y_WebRTC">Media, Audio Web, y WebRTC</h4> + +<ul> + <li>El {{domxref("MediaDevices")}} método {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">disponible como<span> </span></span><code>navigator.mediaDevices.getDisplayMedia()</code>, <font>se ha agregado y sincronizado con la especificación.<span> </span></font><font>Este método le permite capturar una pantalla o parte de una pantalla<span> </span></font>{{domxref("MediaStream")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">para manipularla o compartirla</span> ({{bug(1321221)}}).</li> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Como un paso hacia la desaprobación específico de Firefox<span> </span></span> {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}- <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">método basado para capturar contenido de la pantalla y de la ventana, no la restricción </span><code>mediaSource</code> <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">estándar, ahora trata los valores</span> <code>screen</code> y <code>window</code> de forma idéntica. <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Ambos ahora presentan una lista de pantallas y ventanas para que el usuario pueda elegir</span> ({{bug(1474376)}}).</li> + <li>{{domxref("RTCRtpStreamStats.qpSum", "qpSum")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Se ha agregado a</span> {{domxref("RTCRTPStreamStats")}} <font>objetos de<span> </span></font><font>salida locales</font>. <font>Esto mide el total de los valores de los parámetros de cuantización para cada fotograma enviado o recibido en la pista de video.<span> </span></font><font>Cuanto mayor sea este número, más comprimida estará probablemente la transmisión</font> ({{bug(1347070)}}).</li> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">En un paso en el camino hacia la implementación del soporte para la Política de funciones en una futura actualización de Firefox</span>, {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">a no se puede usar en situaciones en las que no hay un origen adecuado para el contenido, como cuando se llama desde un espacio aislado</span> {{HTMLElement("iframe")}} o desde una <code>data</code> URL <font><span> </span>ingresada en el Barra de direcciones por el usuario.<span> </span></font><font>Para obtener más detalles específicos, consulte</font> {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Security")}} ({{bug(1371741)}}).</li> +</ul> + +<h4 id="Removido_3">Removido</h4> + +<ul> + <li>El legado WebRTC {{domxref("PeerConnection.getStats()")}} <font>método<span> </span></font><font>heredado de WebRTC<span> </span></font><font>se ha eliminado, junto con los tipos asociados</font> ({{bug(1328194)}}).</li> +</ul> + +<h3 id="Redes">Redes</h3> + +<ul> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">El valor predeterminado del</span> {{httpheader("Accept")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">encabezado se ha cambiado a</span> <code>*/*</code> ({{bug(1417463)}}).</li> +</ul> + +<h3 id="Seguridad">Seguridad</h3> + +<p><em>Sin cambios.</em></p> + +<h3 id="Complementos">Complementos</h3> + +<p><em>Sin cambios.</em></p> + +<h2 id="Cambios_para_desarrolladores_de_complementos">Cambios para desarrolladores de complementos</h2> + +<h3 id="Cambios_en_la_API">Cambios en la API</h3> + +<h4 id="Menús">Menús</h4> + +<ul> + <li><span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">Los elementos del menú de extensión del "marcador"</span> {{WebExtAPIRef("menus.ContextType", "type")}} <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">también aparecerán en la barra lateral de Marcadores</span> (<kbd>Ctrl</kbd> + <kbd>B</kbd>) <span style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.04448px; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">y en la ventana de la Biblioteca</span> (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) ({{bug(1419195)}}).</li> +</ul> + +<h3 id="Cambios_en_Manifesto">Cambios en Manifesto</h3> + +<p><em>Sin cambios.</em></p> + +<h2 id="Véase_también_la">Véase también la</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-CA/versions/66/">Compatibilidad del sitio para Firefox 66</a></li> +</ul> + +<h2 id="Versiones_anteriores">Versiones anteriores</h2> + +<p>{{Firefox_for_developers(65)}}</p> diff --git a/files/es/mozilla/firefox/releases/67/index.html b/files/es/mozilla/firefox/releases/67/index.html new file mode 100644 index 0000000000..a60df8ab8a --- /dev/null +++ b/files/es/mozilla/firefox/releases/67/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 67 for developers +slug: Mozilla/Firefox/Releases/67 +tags: + - '67' + - Firefox + - Lanzamiento + - Mozilla +translation_of: Mozilla/Firefox/Releases/67 +--- +<p>{{FirefoxSidebar}}</p> + +<p class="summary">Este artículo provee información sobre los cambios en Firefox 67 que afectarán a los desarrolladores. Firefox 67 fue lanzado el 21 de Mayo de 2019.</p> + +<h2 id="Cambios_para_desarrolladores_web">Cambios para desarrolladores web</h2> + +<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3> + +<ul> + <li>Actualizaciones del depurador: + <ul> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Los puntos de interrupción de columna</a> te permiten elegir el punto específico (o columna) en una línea de código donde quieres que el depurador pare ({{bug(1528417)}}).</li> + <li><a href="/en-US/docs/Tools/Debugger/Set_a_log_point">Los puntos de registro</a> te permiten registrar información específica a la consola durante la ejecución de código sin pausar la ejecución y sin la necesidad de cambiar el código.</li> + <li>The <a href="/en-US/docs/Tools/Debugger/Using_the_Debugger_map_scopes_feature">map scopes feature</a> allows you to view the variables from the original source.</li> + <li>You can <a href="/en-US/docs/Tools/Debugger/Debug_worker_threads">debug service worker</a> threads directly in the debugger.</li> + </ul> + </li> + <li><a href="/en-US/docs/Tools/Web_Console">Web Console</a> updates: + <ul> + <li>Navigate details in the console using the keyboard ({{bug(1424159)}}).</li> + <li>Cmd + K will now clear the console of its contents on macOS ({{bug(1532939)}}).</li> + <li>When the user clears the console, the error messages cache is cleared as well ({{bug(717611)}}).</li> + <li>The user can import existing modules into the current page using import ({{bug(1517546)}}).</li> + <li>A new context menu item allows the user to use the <strong>Copy Link Location</strong> command ({{bug(1457111)}}).</li> + <li>Clicking a link in the Console causes the same behavior that it would in a content window ({{bug(1466040)}}).</li> + <li>Clicking the source link for a code file in the Console panel navigates to the Debugger if debugger knows the file ({{bug(1447244)}}).</li> + <li>When the user has filtered the contents of the console, an icon will be added to the filter text box to clear the filter ({{bug(1525821)}}).</li> + </ul> + </li> + <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> enhancements: + <ul> + <li>The <a href="/en-US/docs/Tools/Network_Monitor/request_details#Headers">Header</a> panel of the Network monitor will now display a notification for resources belonging to a known tracker ({{bug(1485416)}}).</li> + <li>In the Network monitor <a href="/en-US/docs/Tools/Network_Monitor/request_list#Network_request_columns">request columns</a>, you can control the visible columns and column sorting. The context menu now includes a command to restore the list sort parameters to the default ({{bug(1454962)}}).</li> + </ul> + </li> +</ul> + +<h4 id="Removals">Removals</h4> + +<ul> + <li>The following Developer Tools panels have been removed (see <a href="/en-US/docs/Tools/Deprecated_tools">Deprecated tools</a> for details): + + <ul> + <li>Canvas debugger ({{bug(1403938)}}).</li> + <li>Shader editor ({{bug(1342237)}}).</li> + <li>WebAudio editor ({{bug(1403944)}}).</li> + </ul> + </li> + <li>The following Developer Tools have been deprecated (see <a href="/en-US/docs/Tools/Deprecated_tools">Deprecated tools</a> for details): + <ul> + <li>WebIDE ({{bug(1539462)}}).</li> + <li>Connect... page ({{bug(1539462)}}).</li> + </ul> + </li> +</ul> + +<h3 id="HTML">HTML</h3> + +<ul> + <li>{{htmlelement("input")}} elements with <code><a href="/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete</a>="new-password"</code> set on them will no longer have previously saved passwords auto-filled ({{bug(1119063)}}).</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>The {{cssxref("revert")}} keyword has been implemented ({{bug(1215878)}}).</li> + <li>The <code>break-word</code> value of the {{cssxref("word-break")}} property is now supported ({{bug(1296042)}}).</li> + <li>The <code><a href="/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code> media feature is now supported ({{bug(1494034)}}).</li> + <li>Custom {{cssxref("cursor")}}s of greater than 32px in size are now disallowed, to mitigate potential malware uses of large cursors ({{bug(1445844)}}).</li> +</ul> + +<h4 id="Removals_2">Removals</h4> + +<ul> + <li>Use of the proprietary {{cssxref("-moz-binding")}} property is now restricted to chrome and UA-stylesheets ({{bug(1523712)}}).</li> +</ul> + +<h3 id="SVG">SVG</h3> + +<p><em>No changes.</em></p> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>{{jsxref("String.prototype.matchAll")}} has been implemented and enabled by default ({{bug(1435829)}}, {{bug(1531830)}}).</li> + <li>Support for the dynamic module {{jsxref("Statements/import", "import()", "#Dynamic_Imports")}} proposal is now available by default ({{bug(1517546)}}).</li> + <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Hashbang_comments">hashbang grammar</a> proposal is now implemented ({{bug(1519097)}}).</li> +</ul> + +<h3 id="APIs">APIs</h3> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>The default value for {{domxref("Response.statusText")}} is now <code>""</code> ({{bug(1508996)}}).</li> + <li>The default value for the {{domxref("VTTCue")}} interface's <code>positionAlign</code> property is now auto ({{bug(1528420)}}).</li> + <li>User gestures are now preserved for rejected calls to {{domxref("Document.requestStorageAccess")}}, as well as fulfilled calls ({{bug(1522912)}}).</li> +</ul> + +<h4 id="DOM_events">DOM events</h4> + +<ul> + <li>CSS transition ({{bug(1530239)}}) and animation ({{bug(1531605)}}) events now fire on disabled (e.g. form) elements.</li> + <li>{{domxref("InputEvent.data")}} and {{domxref("InputEvent.dataTransfer")}} have been implemented ({{bug("998941")}}).</li> + <li>The <code>insertFromPasteAsQuotation</code> {{domxref("InputEvent.inputType")}} value is now supported ({{bug(1532527)}}).</li> +</ul> + +<h4 id="WorkersService_workers">Workers/Service workers</h4> + +<ul> + <li>Strict MIME type checks are now enforced on scripts imported by {{domxref("WorkerGlobalScope.importScripts()")}} ({{bug(1514680)}}).</li> +</ul> + +<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> + +<ul> + <li><a href="https://code.videolan.org/videolan/dav1d">dav1d</a> is now the default media decoder for <a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">AV1</a> (see for example {{bug(1533742)}} and {{bug(1535038)}}).</li> + <li>Calling {{domxref("RTCPeerConnection.addTrack()")}} without specifying any streams to which to add the new track now works as expected: it adds a streamless track to the connection. Each peer is responsible for managing the association between the track and any stream on its end ({{bug(1231414)}}).</li> + <li>The {{domxref("MediaDeviceInfo.groupId")}} property is now implemented ({{bug(1213453)}}). While it has existed in Firefox since Firefox 39, it did not actually gather related devices together into the same group IDs.</li> + <li>The {{domxref("RTCIceCandidate.usernameFragment")}} property is now implemented ({{bug(1490658)}}).</li> +</ul> + +<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4> + +<ul> + <li>The <code><a href="/en-US/docs/Web/API/EXT_float_blend">EXT_float_blend</a></code> WebGL extension has been enabled by default ({{bug(1535808)}}).</li> +</ul> + +<h4 id="Removals_3">Removals</h4> + +<ul> + <li>The deprecated <code>ShadowRoot.getElementsByTagName</code>, <code>ShadowRoot.getElementsByTagNameNS</code>, and <code>ShadowRoot.getElementsByClassName</code> properties (part of Shadow DOM v0) have been removed ({{bug(1535438)}}).</li> + <li><code><a href="/en-US/docs/Web/API/Document/createEvent">Document.createEvent("TouchEvent")</a></code>, {{domxref("Document.createTouch()")}}, {{domxref("Document.createTouchList()")}}, and the <code>ontouch*</code> event handler properties have been disabled on desktop to improve web compatibility on websites where touch support is used for mobile detection ({{bug(1412485)}}). In such cases, websites have been seen to behave incorrectly or unexpectedly on touchscreen laptops.</li> +</ul> + +<h3 id="Security">Security</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/Notifications_API">Notifications</a> are now only available in a <a href="/en-US/docs/Web/Security/Secure_Contexts">secure context</a> ({{bug(1429432)}}).</li> + <li>Firefox now blocks the loading of external protocol URLs in {{htmlelement("iframe")}}s ({{bug(1527882)}}).</li> +</ul> + +<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3> + +<h4 id="API_changes">API changes</h4> + +<ul> + <li>Made <code>WebDriver:SendAlertText</code> conformant to the <a href="https://w3c.github.io/webdriver/">WebDriver specification</a> ({{bug(1502360)}}).</li> +</ul> + +<h4 id="Corrección_de_errores">Corrección de errores</h4> + +<ul> + <li><code>WebDriver:NewWindow</code> will no longer timeout because of <code>focus</code>-related inconsistencies across platforms ({{bug(1523234)}}).</li> +</ul> + +<h4 id="Otros">Otros</h4> + +<ul> + <li>Both <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> now use <code>Promises</code> internally ({{bug(1398095)}}).</li> + <li><code>WebDriver:NewSession</code> returns Firefox's <code>BuildID</code> string as part of the capabilities object ({{bug(1525829)}}).</li> +</ul> + +<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2> + +<h3 id="Cambios_en_API">Cambios en API</h3> + +<ul> + <li>Using the <code>proxy.settings.set()</code> method to change <code>{{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}}</code> values will throw an exception unless the extension was granted private window access by the user ({{bug(1525447)}}).</li> +</ul> + +<h3 id="Cambios_en_manifiesto">Cambios en manifiesto</h3> + +<ul> + <li>A new manifest key, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/incognito">incognito</a>, defines the behavior of an extension in private browsing windows or tabs ({{bug(1511636)}}).</li> + <li>The <code>toolbar_field_highlight</code> setting controls the background color used to indicate the current selection of text in the URL bar ({{bug(1450114)}}).</li> + <li>The <code>toolbar_field_highlight_text</code> setting controls the text color used to indicate the current selection of text in the URL bar ({{bug(1450114)}}).</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-CA/versions/67/">Sitio de compatibilidad para Firefox 67</a></li> +</ul> + +<h2 id="Versiones_anteriores">Versiones anteriores</h2> + +<p>{{Firefox_for_developers(66)}}</p> diff --git a/files/es/mozilla/firefox/releases/68/index.html b/files/es/mozilla/firefox/releases/68/index.html new file mode 100644 index 0000000000..4c2649dcd2 --- /dev/null +++ b/files/es/mozilla/firefox/releases/68/index.html @@ -0,0 +1,233 @@ +--- +title: Firefox 68 for developers +slug: Mozilla/Firefox/Releases/68 +translation_of: Mozilla/Firefox/Releases/68 +--- +<p>{{FirefoxSidebar}}</p> + +<p class="summary">This article provides information about the changes in Firefox 68 that will affect developers. Firefox 68 was released on July 9, 2019.</p> + +<h2 id="Changes_for_web_developers">Changes for web developers</h2> + +<h3 id="Developer_tools">Developer tools</h3> + +<h4 id="Browserweb_console">Browser/web console</h4> + +<ul> + <li>The Web console now shows <a href="/en-US/docs/Tools/Web_Console/Console_messages#CSS">more information about CSS warnings</a>, including a node list of the DOM elements that used the rule ({{bug(1093953)}}).</li> + <li>You can now filter content in the Web console using regular expressions ({{bug(1441079)}}).</li> + <li>The Browser console now allows you to show or hide messages from the content process by setting or clearing the checkbox labeled <em>Show Content Messages</em> ({{bug(1260877)}}).</li> +</ul> + +<h4 id="JavaScript_debugger">JavaScript debugger</h4> + +<ul> + <li>You can now <a href="/en-US/docs/Tools/Debugger/How_to/Search#Searching_in_all_files">Search</a> in all files in the current project from the debugger by pressing <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>F</kbd> (Windows or Linux) or <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>F</kbd> (macOS) ({{bug(1320325)}}).</li> +</ul> + +<h4 id="Network_monitor">Network monitor</h4> + +<ul> + <li>The Network monitor <a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">request list</a> now allows you to block a specific URL ({{bug(1151368)}}).</li> + <li>You can now resend a network request without editing the method, URL, parameters, and headers, using the <a href="/en-US/docs/Tools/Network_Monitor/request_list#Context_menu">Resend</a> command on the context menu ({{bug(1422014)}}).</li> + <li>The context menu of the Network monitor <a href="/en-US/docs/Tools/Network_Monitor/request_details#Headers">Headers</a> tab now allows you to copy all or some of the header information to the clipboard in JSON format ({{bug(1442249)}}).</li> +</ul> + +<h4 id="Page_inspector">Page inspector</h4> + +<ul> + <li>A button has been added to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">rules panel</a> of the Page inspector that allows you to toggle the display of any print media queries ({{bug(1534984)}}).</li> + <li>The <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">fonts panel</a> now includes a slider to modify <code>letter-spacing</code> ({{bug(1536237)}}).</li> + <li>A warning icon appears next to unsupported CSS properties or rules that have invalid values, to help you understand why certain styles are not being applied ({{bug(1306054)}}).</li> +</ul> + +<h4 id="Storage_inspector">Storage inspector</h4> + +<ul> + <li>You can now <a href="/en-US/docs/Tools/Storage_Inspector#Local_storage_Session_storage">delete local and session storage</a> entries by selecting the item in the storage inspector and pressing the backspace key ({{bug(1522893)}}).</li> +</ul> + +<h4 id="Other">Other</h4> + +<ul> + <li>The <a href="/en-US/docs/Tools/Accessibility_inspector">Accessibility Inspector</a> now includes a new <em>Check for issues</em> feature, which will include a number of audit tools to highlight accessibility problems on your web pages. The first available check is <em>contrast</em>, for highlighting color contrast problems.</li> + <li>The preference that controls the visibility of internal extensions (system add-ons and hidden extensions) on the <a href="/en-US/docs/Tools/about:debugging">about:debugging</a> page has been changed from <code>devtools.aboutdebugging.showSystemAddons</code> to <code>devtools.aboutdebugging.showHiddenAddons</code> ({{bug(1544372)}}).</li> + <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive design mode</a> has been redesigned — the <em>Device Settings</em> dialog (device selection menu > <em>Edit List...</em>) is now more intuitive and simpler to use ({{bug(1487857)}}).</li> +</ul> + +<h4 id="Removals">Removals</h4> + +<ul> + <li>The "Enable add-on debugging" checkbox has been removed from the <a href="/en-US/docs/Tools/about:debugging">about:debugging</a> page ({{bug(1544813)}}).</li> +</ul> + +<h3 id="HTML">HTML</h3> + +<ul> + <li>The {{HTMLElement("track")}} element — represented by {{domxref("HTMLTrackElement")}} — now receives a {{domxref("HTMLTrackElement.cuechange_event", "cuechange")}} event in addition to the {{domxref("TextTrack")}} itself, if the text track is a contained by a media element ({{bug(1548731)}}).</li> + <li>{{htmlelement("link")}} elements support the <code>disabled</code> attribute again, albeit with different behavior. When <code>disabled</code> is set on a <code><link></code> element along with <code>rel="stylesheet"</code>, the referenced stylesheet is not loaded during page load, and will be loaded on demand when the <code>disabled</code> attribute is changed to <code>false</code> or removed ({{bug(1281135)}}).</li> +</ul> + +<h4 id="Removals_2"> Removals</h4> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/meta"><meta http-equiv="set-cookie"></a></code> is no longer supported ({{bug(1457503)}}).</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snapping</a> has been updated to the latest version of the specification ({{bug(1312163)}}) and ({{bug(1544136)}}), this includes: + + <ul> + <li>The <code>scroll-padding</code> properties ({{bug(1373832)}})</li> + <li>The <code>scroll-margin</code> properties ({{bug(1373833)}})</li> + <li>{{CSSxRef("scroll-snap-align")}} ({{bug(1373835)}})</li> + </ul> + </li> + <li>The {{CSSxRef("-webkit-line-clamp")}} property has been implemented for compatibility with other browsers ({{bug(866102)}}).</li> + <li>Support has been added for the {{CSSxRef("::marker")}} pseudo-element ({{bug(205202)}}) and animation for <code>::marker</code> pseudos ({{bug(1538618)}})</li> + <li>We changed {{CSSxRef("currentColor")}} to be a computed value (except for the {{cssxref("color")}} property) ({{bug(760345)}}).</li> + <li>Support has been fixed for the <code>ch</code> length unit so it now matches the spec (fallback for no '0' glyph, vertical metrics) ({{bug(282126)}})</li> + <li>The {{CSSxRef("counter-set")}} property has been implemented. ({{bug(1518201)}}).</li> + <li>We now implement list numbering using a built-in "list-item" counter; this fixes list numbering bugs ({{bug(288704)}}).</li> + <li>Selector matching and parsing support has been implemented for <code><a href="/en-US/docs/Web/CSS/::part">::part()</a></code> ({{bug(1545430)}}) and ({{bug(1545425)}}).</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Transforms">CSS Transforms</a> are now supported in indirectly rendered things e.g.) {{SVGElement("mask")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{SVGElement("clipPath")}} ({{bug(1323962)}}).</li> + <li> + <p>While we're keeping the prefixed versions of the various gradient properties ({{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("repeating-radial-gradient")}} available for compatibility reasons, we have revised how they're parsed so that they're handled much more like the non-prefixed versions. This means that certain existing styles won't work correctly.</p> + + <p>In particular, the complicated syntax taking both an angle and a position will no longer work, and the <code>to</code> keyword in the <code><side-or-corner></code> parameter is not required for the prefixed gradient properties. You are encouraged to use the standard, non-prefixed gradient properties instead, as they're now widely supported ({{bug(1547939)}}).</p> + </li> +</ul> + +<h4 id="Removals_3">Removals</h4> + +<ul> + <li>{{CSSxRef("scroll-snap-coordinate")}}, {{CSSxRef("scroll-snap-destination")}}, {{CSSxRef("scroll-snap-type-x")}} and {{CSSxRef("scroll-snap-type-y")}} have been removed.</li> + <li>The {{CSSxRef("scroll-snap-type")}} property has become a longhand, so the old shorthand syntax like <code>scroll-snap-type:mandatory</code> will stop working. See the <a href="https://www.fxsitecompat.com/en-CA/docs/2019/legacy-css-scroll-snap-syntax-support-has-been-dropped/">Firefox Site Compatability</a> note.</li> +</ul> + +<h3 id="SVG">SVG</h3> + +<p><em>No changes.</em></p> + +<h3 id="JavaScript">JavaScript</h3> + +<ul> + <li>The new {{jsxref("BigInt")}} primitive is enabled by default ({{bug(1527902)}}).</li> +</ul> + +<h3 id="APIs">APIs</h3> + +<h4 id="CSS_Object_Model_(CSSOM)">CSS Object Model (CSSOM)</h4> + +<ul> + <li>The legacy {{domxref("CSSStyleSheet.rules", "rules")}} property and {{domxref("CSSStyleSheet.addRule", "addRule()")}} and {{domxref("CSSStyleSheet.removeRule", "removeRule()")}} methods have been added to the {{domxref("CSSStyleSheet")}} interface. These were introduced by Internet Explorer 9 and have never managed to quite be stamped out, so they have been added to improve compatibility with the small percentage of sites that still use them ({{bug(1545823)}}).</li> +</ul> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>The <a href="/en-US/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> has now been enabled by default on Android ({{bug(1512813)}}). Adding this API to desktop versions of Firefox is being tracked in {{bug(1551302)}}.</li> + <li>The {{domxref("Window")}} feature <code><a href="/en-US/docs/Web/API/Window/open#noreferrer">noreferrer</a></code> is now supported; if specified, the new window's content is loaded without sharing the hostname, IP address, URL, or other identifying information about the host device ({{bug(1527287)}}).</li> + <li>The {{domxref("HTMLImageElement.decode", "decode()")}} method on <code>HTMLImageElement</code> is now implemented. This can be used to trigger loading and decoding of an image prior to adding it to the DOM ({{bug(1501794)}}).</li> + <li>{{domxref("XMLHttpRequest")}} has been updated to no longer accept the non-standard <code>moz-chunked-arraybuffer</code> value for {{domxref("XMLHttpRequest.responseType", "responseType")}}. Code still using it should be updated to <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams#Consuming_a_fetch_as_a_stream">use the Fetch API as a stream</a> ({{bug(1120171)}}).</li> + <li><code>XMLHttpRequest</code> now outputs a warning to console if you perform a synchronous request while handling an {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, or {{domxref("Window.pagehide_event", "pagehide")}} event ({{bug(980902)}}).</li> + <li>The {{domxref("Document.cookie", "cookie")}} property has moved from the {{domxref("HTMLDocument")}} interface to the {{domxref("Document")}} interface, allowing documents other than {{Glossary("HTML")}} to use cookies ({{bug(144795)}}).</li> + <li>The {{domxref("HTMLElement.focus()")}} and {{domxref("SVGElement.focus()")}} methods now accept an optional object that may contain a boolean <code>preventScroll</code> option specifying whether or not to block the browser from scrolling the newly-focused element into view ({{bug(1374045)}}).</li> +</ul> + +<h4 id="DOM_events">DOM events</h4> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> no longer incorrectly sends a {{domxref("Window.resize_event", "resize")}} event until after the first frame is painted; this improves web compatibility with sites that don't expect this event to occur ({{bug(1528052)}}).</li> + <li>The dispatching of events for non-primary mouse buttons has been made to more closely follow the specification; the {{domxref("Element.click_event", "click")}} event is no longer sent when non-primary buttons are clicked, instead using {{domxref("Element.auxclick_event", "auxclick")}}. In addition, {{domxref("Element.dblclick_event", "dblclick")}} no longer fires for non-primary buttons ({{bug(1379466)}}).</li> + <li>The proprietary {{domxref("MouseEvent.mozPressure")}} property has been deprecated, and will now trigger a warning in the console ({{bug(1165211)}}).</li> +</ul> + +<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> + +<ul> + <li>WebRTC has been updated to recognize that a <code>null</code> candidate passed into the {{domxref("RTCPeerConnection.icecandidate", "icecandidate")}} event handler, indicating the receipt of a candidate, instead indicates that there are no further candidates coming; when this happens the ICE gathering ({{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}) state reaches <code>complete</code> ({{bug(1318167)}}).</li> + <li>The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} now support video tracks; previously they only worked on audio ({{bug(1534466)}}).</li> + <li>The Web Audio API {{domxref("MediaStreamTrackAudioSourceNode")}} interface is now supported, as is the method {{domxref("AudioContext.createMediaStreamTrackSource()")}} ({{bug(1324548)}}).</li> + <li>{{domxref("RTCDataChannel.negotiated")}} is now implemented ({{bug(1529695)}}).</li> + <li>The {{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode", "MediaStreamAudioSourceNode()")}} constructor has been updated to match the current specification's definition that the "first audio track" in the stream is the track whose ID comes first in lexicographical order ({{bug(1324548)}}).</li> + <li> + <p>{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} may no longer be used from a non-secure context; attempting to do so now throws a <code>NotAllowedError</code> exception. Secure contexts are those loaded using HTTPS, those located using the <code>file:///</code> scheme, and those loaded from <code>localhost</code>. For now, if you must, you can re-enable the ability to perform insecure calls to <code>getUserMedia()</code> by setting the preference <code>media.getusermedia.insecure.enabled</code> to <code>true</code> ({{bug(1335740)}}).</p> + + <div class="blockIndicator note"> + <p><strong>Note:</strong> In the future, Firefox will also remove the {{domxref("navigator.mediaDevices")}} property on insecure contexts, preventing all access to the {{domxref("MediaDevices")}} APIs. <strong>This is already the case in Nightly builds.</strong></p> + </div> + </li> +</ul> + +<h4 id="Removals_4">Removals</h4> + +<ul> + <li>Removed the non-standard {{DOMxRef("XMLDocument.load()")}} method ({{bug(332175)}}).</li> + <li>Removed the non-standard {{DOMxRef("XMLDocument.async")}} property ({{bug(1328138)}}).</li> + <li>The {{domxref("RTCIceCredentialType")}} <code>token</code> value has been removed ({{bug(1529595)}}).</li> +</ul> + +<h3 id="HTTP">HTTP</h3> + +<ul> + <li>The <a href="/en-US/docs/Web/HTTP">HTTP</a> {{HTTPHeader("Clear-Site-Data")}} header no longer supports the <code>executionContexts</code> directive. This was removed due to problems with interactions between interconnections among different kinds of data at different points in the navigation process and the way the specification is designed. It <a href="https://github.com/w3c/webappsec-clear-site-data/issues/59">has been proposed</a> that this directive be removed from the specification for this reason, among others ({{bug(1548034)}}).</li> +</ul> + +<h4 id="Removals_5">Removals</h4> + +<ul> + <li>The {{HTTPHeader("Content-Security-Policy")}} directive <code>require-sri-for</code> is no longer supported due to concerns about its standardization status. It was previously available only behind a preference, which was off by default ({{bug(1386214)}}).</li> +</ul> + +<h3 id="Security">Security</h3> + +<p><em>No changes.</em></p> + +<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3> + +<h4 id="Bug_fixes">Bug fixes</h4> + +<ul> + <li>If <code>WebDriver:SwitchToWindow</code> changes the selection to a different window it now waits for its <code>focus</code> and <code>activate</code> events before returning ({{bug(1335085)}}).</li> + <li>Fixed the <code>TypeError: this.tabModal is null</code> failure, which sometimes appeared when interacting with modal dialogs or user prompts ({{bug(1538782)}})</li> +</ul> + +<h4 id="Other_2">Other</h4> + +<ul> + <li>Disabled the feature to force unloading background tabs on low memory conditions, to prevent top-level browser contexts from magically disappearing ({{bug(1553748)}}).</li> + <li>Disabled priviledged content processes that caused HTTP authentication dialogs not to appear when navigating to a website after opening a new tab ({{bug(1558763)}}).</li> +</ul> + +<h3 id="Plugins">Plugins</h3> + +<p><em>No changes.</em></p> + +<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2> + +<h3 id="API_changes">API changes</h3> + +<ul> + <li>The The <code>proxy.register()</code> and <code>proxy.unregister()</code> functions have been deprecated and will be removed from Firefox 71 ({{bug(1545811)}}).</li> + <li>When an add-on attempts to add a bookmark folder to the root folder, the resulting error message is now much more intuitive ({{bug(1512171)}}).</li> + <li>The promise returned by <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/duplicate">browser.tabs.duplicate()</a></code> now resolves immediately, before the tabs are completely loaded, to improve performance ({{bug(1394376)}}).</li> + <li>Support has been added for chrome.storage.managed, allowing web extension settings to be implemented via enterprise policy ({{bug(1230802)}}).</li> + <li>There is now a Group Policy option to blacklist <em>all</em> extensions except the ones that have been whitelisted ({{bug(1522823)}}).</li> +</ul> + +<h3 id="Manifest_changes">Manifest changes</h3> + +<p><em>No changes.</em></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-CA/versions/68/">Site compatibility for Firefox 68</a></li> +</ul> + +<h2 id="Older_versions">Older versions</h2> + +<p>{{Firefox_for_developers(67)}}</p> diff --git a/files/es/mozilla/firefox/releases/9/index.html b/files/es/mozilla/firefox/releases/9/index.html new file mode 100644 index 0000000000..4e976f6262 --- /dev/null +++ b/files/es/mozilla/firefox/releases/9/index.html @@ -0,0 +1,237 @@ +--- +title: Firefox 9 for developers +slug: Mozilla/Firefox/Releases/9 +tags: + - Firefox + - Firefox 9 + - Gecko 9 + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Releases/9 +--- +<div><section class="Quick_links" id="Quick_Links"> + <ol> + <li class="toggle"> + <details> + <summary>Notas de la Versión para Desarrolladores de Firefox</summary> + <ol> + <li><a href="/es/docs/Mozilla/Firefox/Releases">Notas de la Versión para Desarrolladores de Firefox</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Complementos</summary> + <ol> + <li><a href="/es/Add-ons/WebExtensions">Extensiones del navegador</a></li> + <li><a href="/es/Add-ons/Themes">Temas</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Firefox por dentro</summary> + <ol> + <li><a href="/es/docs/Mozilla/">Proyecto Mozilla (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/Gecko">Gecko</a></li> + <li><a href="/es/docs/Mozilla/Firefox/Headless_mode">Headless mode</a></li> + <li><a href="/es/docs/Mozilla/JavaScript_code_modules">Modulos de código JavaScript (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/js-ctypes">JS-ctypes (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/MathML_Project">Proyecto MathML</a></li> + <li><a href="/es/docs/Mozilla/MFBT">MFBT (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/Projects">Proyectos Mozilla (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/Preferences">Sistema de Preferencias (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/WebIDL_bindings">Ataduras WebIDL (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/Tech/XPCOM">XPCOM</a></li> + <li><a href="/es/docs/Mozilla/Tech/XUL">XUL</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Crear y contribuir</summary> + <ol> + <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions">Instrucciones para la compilación</a></li> + <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options">Configurar las opciones de compilación</a></li> + <li><a href="/es/docs/Mozilla/Developer_guide/Build_Instructions/How_Mozilla_s_build_system_works">Cómo funciona el sistema de compilación (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Código fuente de Mozilla</a></li> + <li><a href="/es/docs/Mozilla/Localization">Localización</a></li> + <li><a href="/es/docs/Mozilla/Mercurial">Mercurial (Inglés)</a></li> + <li><a href="/es/docs/Mozilla/QA">Garantía de Calidad</a></li> + <li><a href="/es/docs/Mozilla/Using_Mozilla_code_in_other_projects">Usar Mozilla en otros proyectos (Inglés)</a></li> + </ol> + </details> + </li> + </ol> +</section></div> + +<p>Firefox 9 was released for Windows on December 20, 2011. Mac and Linux version 9.0.1, which fixed a crashing bug discovered at the last minute, were released on December 21, 2011.</p> + +<h2 id="Changes_for_web_developers">Changes for web developers</h2> + +<h3 id="HTML">HTML</h3> + +<ul> + <li>The <code>value</code> attribute of <a href="/es/docs/Web/HTML/Elemento/li" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code><li></code></a> now can be negative as specified in HTML5. Previously negative values were converted to 0.</li> + <li>You can now <a href="/en-US/docs/Using_HTML5_audio_and_video#Specifying_playback_range" title="en-US/docs/Using_HTML5_audio_and_video#Specifying_playback_range">specify the start and stop time of media</a> in the URI of the media when using <a href="/es/docs/Web/HTML/Elemento/audio" title="El elemento audio se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento audio se agregó como parte de HTML 5."><code><audio></code></a> and <a href="/es/docs/Web/HTML/Elemento/video" title="El elemento video se utiliza para incrustar vídeos en un documento HTML o XHTML."><code><video></code></a> elements.</li> + <li><a href="/es/docs/Web/HTML/Elemento/input" title="El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type."><code><input></code></a> and <a href="/es/docs/Web/HTML/Elemento/textarea" title="El elemento HTML <textarea> representa un control para edición muti-línea de texto plano."><code><textarea></code></a> elements <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms#Controlling_the_spellchecker_language" title="en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms#Controlling_the_spellchecker_language">now respect the value of the <code>lang</code> attribute</a> when invoking the spell checker.</li> + <li>Firefox on Android now lets users snap photos with their phone's camera without leaving the browser when the <a href="/es/docs/Web/HTML/Elemento/input" title="El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web, que reciban datos del usuario. La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type."><code><input></code></a> element is used with <code>type="file"</code> and <code>accept="image/*"</code>.</li> + <li>Windows Vista style PNG ICO images are now supported.</li> + <li>Drawing images that use the <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes"><code>crossorigin</code></a> attribute to request CORS access no longer incorrectly <a href="/en-US/docs/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" title="en-US/docs/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">taint the canvas</a> when CORS is granted.</li> + <li>The value of the <code><a href="/es/docs/Web/HTML/Element/td#attr-rowspan">rowspan</a></code> attribute may now be as large as 65,534, up from 8190.</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li>The <a href="/es/docs/Web/CSS/font-stretch" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>font-stretch</code></a> property is now supported.</li> + <li>The <a href="/es/docs/Web/CSS/columns" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>columns</code></a> property is now supported, with the <code>-moz</code> prefix. This is a shorthand for the following properties: <a href="/es/docs/Web/CSS/column-width" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>column-width</code></a> and <a href="/es/docs/Web/CSS/column-count" title="La propiedad CSS column-count define el número de columnas de un elemento."><code>column-count</code></a>.</li> + <li>When a stylesheet included using the <a href="/es/docs/Web/HTML/Elemento/link" title="El elemento HTML <link> especifica la relación entre el documento actual y un recurso externo. Los usos posibles de este elemento incluyen la definición de un marco relacional para navegación. Este elemento es más frecuentemente usado para enlazar hojas de estilos."><code><link></code></a> element has been fully loaded and parsed (but not yet applied to the document), a <a href="/en-US/docs/HTML/Element/link#Stylesheet_load_events" title="en-US/docs/HTML/Element/link#Stylesheet_load_events"><code>load</code> event</a> is now fired. Also, if an error occurs processing a style sheet, an <code>error</code> event is fired.</li> + <li>You can now specify overflow settings for both the left and right edges of content using a new two-value syntax for <a href="/es/docs/Web/CSS/text-overflow" title="La propiedad de CSS text-overflow determina como el contenido que se desborda y que no es mostrado, va a hacersele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('…', U+2026 Horizontal Ellipsis), o mostrar una cadena de texto personalizada."><code>text-overflow</code></a>.</li> +</ul> + +<h3 id="JavaScript">JavaScript</h3> + +<p><em>No change.</em></p> + +<h3 id="DOM">DOM</h3> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Using full-screen mode</a></dt> + <dd>The new full-screen API provides a way to present content using the entire screen, with no browser interface. This is great for video and games. This API is currently experimental and prefixed.</dd> +</dl> + +<ul> + <li>The <a href="/es/docs/Web/API/Node/contains" title="El método Node.contains() devuelve un valor Boolean indicando si un nodo es descendiente de un nodo dado o no, por ejemplo, el propio nodo, uno de sus hijos directos ((childNodes)), uno de los hijos directos de su nodo hijo, etc."><code>Node.contains()</code></a> method is now implemented; this lets you determine if a given node is a descendant of another node.</li> + <li>The <a href="/es/docs/Web/API/Node/parentElement" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>Node.parentElement</code></a> attribute has been implemented; this returns the parent <a href="/es/docs/Web/API/Element" title="Varias especificaciones aplicadas a los elementos:"><code>Element</code></a> of a DOM node, or <code>null</code> if the parent isn't an element.</li> + <li>DOM Level 3 <a href="/en-US/docs/DOM/CompositionEvent" title="CompositionEvent">composition events</a> are now supported.</li> + <li>The <a href="/es/docs/Web/API/Document/scripts" title="Devuelve una lista de elementos <script> ubicados en el documento. El objeto devuelto es una colección HTMLCollection."><code>Document.scripts</code></a> attribute has been implemented; this returns an <a href="/es/docs/Web/API/HTMLCollection" title="La interfaz HTMLCollection representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista."><code>HTMLCollection</code></a> of all the <a href="/es/docs/Web/HTML/Elemento/script" title="El elemento HTML Script (<script>) se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML."><code><script></code></a> elements on the document.</li> + <li>The <a href="/es/docs/Web/API/Document/queryCommandSupported" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>Document.queryCommandSupported()</code></a> method has been implemented.</li> + <li>The set of events that can be listened for on <a href="/es/docs/Web/HTML/Elemento/body" title="El Elemento HTML <body> representa el contenido de un documento HTML. Sólo puede haber un elemento <body> en un documento."><code><body></code></a> elements has been revised to match the latest draft of the HTML5 specification. The list of events in the <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM event reference">DOM event reference</a> reflects which events can be listened for on <a href="/es/docs/Web/HTML/Elemento/body" title="El Elemento HTML <body> representa el contenido de un documento HTML. Sólo puede haber un elemento <body> en un documento."><code><body></code></a>.</li> + <li>The <code>readystatechange</code> event is now fired only on the <a href="/es/docs/Web/API/Document" title="La interfaz Document representa cualquer página web cargada en el navegador y sirve como punto de entrada al contenido de la página (El árbol DOM)."><code>Document</code></a>, as intended.</li> + <li>Event handlers are now implemented as standard IDL interfaces. For most cases, this won't affect content, but <a href="/en-US/docs/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9" title="en-US/docs/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9">there are exceptions</a>.</li> + <li>A new response type, "<code>moz-json</code>", has been added to <code>XMLHttpRequest</code>, letting <code>XMLHttpRequest</code> automatically parse <a href="/en-US/docs/JSON" title="JSON">JSON</a> strings for you; when you request this type, a returned JSON string is parsed, so that the value of the <code>response</code> property is the resulting JavaScript object.</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress"><code>XMLHttpRequest</code> "progress" events</a> are now reliably sent for every chunk of data received; in the past it was possible for the last chunk of data received to not fire a "progress" event. Now you can track progress by following only "progress" events, instead of also having to monitor "load" events to detect the receipt of the last chunk of data.</li> + <li>In the past, calling <a href="/en-US/docs/DOM/element.addEventListener" title="element.addEventListener"><code>addEventListener()</code></a> with a <code>null</code> listener would throw an exception. Now it returns without error and with no effect.</li> + <li>The new <a href="/es/docs/Web/API/Navigator/doNotTrack" title='Devuelve los ajustes de do-not-track del usuario. Esto es "1" si el usuario ha solicitado no ser rastreado por sitios web, contenidos, o anuncios.'><code>navigator.doNotTrack</code></a> property lets your content easily determine whether or not the user has enabled their do-no-track preference; if this value is "yes", you should not track the user.</li> + <li><a href="/es/docs/Web/API/Range" title="El objeto Range representa un fragmento de un documento que puede contener nodos y partes de nodos de texto en un documento dado."><code>Range</code></a> and <a href="/es/docs/Web/API/Selection" title="Selección es la clase de objeto devuelto por window.getSelection() y otros métodos."><code>Selection</code></a> objects now behave according to their specifications when <a href="/es/docs/Web/API/Text/splitText" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>splitText()</code></a> and <a href="/es/docs/Web/API/Node/normalize" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>normalize()</code></a> are called.</li> + <li>The value of <a href="/es/docs/Web/API/Node/ownerDocument" title="La propiedad de lectura Nodo.ownerDocument devuelve el objecto Document de más alto nivel/jerarquia para ese nodo."><code>Node.ownerDocument</code></a> for doctype nodes is now the document on which <a href="/en-US/docs/DOM/DOMImplementation.createDocumentType" title="DOMImplementation.createDocumentType"><code>createDocumentType()</code></a> was called to create the node, instead of <code>null</code>.</li> + <li><code>window.navigator.taintEnabled</code> has been removed; it has not been supported in many years.</li> +</ul> + +<h3 id="Workers">Workers</h3> + +<ul> + <li>Workers implemented in blob URLs were broken in Firefox 8, and work again starting in Firefox 9.</li> +</ul> + +<h3 id="WebGL">WebGL</h3> + +<ul> + <li>The <a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> context <code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes are now supported.</li> +</ul> + +<h3 id="MathML">MathML</h3> + +<ul> + <li>The non-standard <code>restyle</code> value for the <code>actiontype</code> attribute on <code><a href="/es/docs/Web/MathML/Elemento/maction" title="<maction>"><maction></a></code> elements has been removed.</li> + <li>While still unsupported, using the <code><a href="/es/docs/Web/MathML/Elemento/mlabeledtr" title="<mlabeledtr>"><mlabeledtr></a></code> element no longer breaks rendering completely. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=689641" title="Add support for mlabeledtr">error 689641</a> for progress on actual support of this element.</li> +</ul> + +<h3 id="Networking">Networking</h3> + +<ul> + <li>You can now send the contents of <a href="/en-US/docs/JavaScript_typed_arrays" title="JavaScript typed arrays">JavaScript typed arrays</a> (that is, the contents of an <a href="/en-US/docs/JavaScript_typed_arrays/ArrayBuffer" title="ArrayBuffer"><code>ArrayBuffer</code></a> object) <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Sending_typed_arrays_as_binary_data" title="en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Sending_typed_arrays_as_binary_data">using XMLHttpRequest</a>.</li> + <li>WebSocket connections now permit non-characters in otherwise valid UTF-8 data frames to be received, instead of failing.</li> + <li>The HTTP <code>Accept</code> header for XSLT requests has been changed to simply "*/*" for simplicity. Since fetching XSLT has always fallen back to "*/*" anyway, it made sense to simplify the initial request.</li> + <li>Attempts by a server to use the <code>301 Moved Permanently</code> or <code>307 Temporary Redirect</code> response codes to redirect the user to a <code>javascript:</code> URI now <a href="/en-US/docs/HTTP#More_on_redirection_responses" title="en-US/docs/HTTP#More_on_redirection_responses">result in a "bad connection" error</a> instead of actually redirecting. This prevents certain types of cross-site scripting attacks.</li> + <li>Content served with an empty <a href="/es/docs/Web/HTTP/Headers/Content-Disposition" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>Content-Disposition</code></a> were previously treated as if the <a href="/es/docs/Web/HTTP/Headers/Content-Disposition" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>Content-Disposition</code></a> were "attachment"; this didn't always work as expected. These are now handled as if the <a href="/es/docs/Web/HTTP/Headers/Content-Disposition" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>Content-Disposition</code></a> were "inline".</li> + <li>The default maximum size of an item in the disk cache has been increased to 50 MB; previously, only items up to 5 MB were cached.</li> +</ul> + +<h3 id="Developer_tools">Developer tools</h3> + +<ul> + <li>The web console now supports basic <a href="/en-US/docs/Using_the_Web_Console#String_substitutions" title="en-US/docs/Using_the_Web_Console#String_substitutions">string substitutions</a> in its logging methods.</li> + <li>You can now <a href="/en-US/docs/Using_the_Web_Console#Using_groups_in_the_console" title="en-US/docs/Using_the_Web_Console#Using_groups_in_the_console">create visually nested blocks of output</a> in the web console, to help make it easier to read.</li> +</ul> + +<h2 id="Changes_for_Mozilla_and_add-on_developers">Changes for Mozilla and add-on developers</h2> + +<p>See <a href="/en-US/docs/Firefox/Updating_add-ons_for_Firefox_9" title="en-US/docs/Firefox/Updating add-ons for Firefox 9">Updating add-ons for Firefox 9</a> for an overview of the changes you may need to make to get your add-ons working in Firefox 9.</p> + +<h3 id="XUL">XUL</h3> + +<ul> + <li>The <code><a href="/es/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has a <code id="a-pending"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/pending">pending</a></code> attribute, whose value is <code>true</code>, when the tab is in the process of being restored by the session store service. This can be used for styling the tab in themes. The attribute isn't present on tabs that aren't pending.</li> + <li>The <code><a href="/es/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> element now has an <code id="a-unread"><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Attribute/unread">unread</a></code> attribute, whose value is <code>true</code>, when the tab has changed since the last time it was the active tab or if it hasn't been selected since the current session began. The attribute isn't present on tabs that are not unread.</li> + <li>You can now use a <code><a href="/es/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> as a drag image for DOM drag and drop operations. This lets you use the standard drag & drop API for <a href="/en-US/docs/DragDrop/Drag_Operations#Using_XUL_panels_as_drag_images" title="en-US/docs/DragDrop/Drag_Operations#Using_XUL_panels_as_drag_images">drag and drop of XUL content</a>.</li> + <li>The <code><a href="/es/docs/Mozilla/Tech/XUL/notificationbox" title="notificationbox">notificationbox</a></code> element's <span id="m-appendNotification"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/appendNotification">appendNotification</a></code></span> method now lets you specify a callback that gets called for interesting events related to the notification box. Currently, the only event is "removed", which tells you the box has been removed from its window.</li> +</ul> + +<h3 id="JavaScript_code_module_changes">JavaScript code module changes</h3> + +<ul> + <li><a href="/en-US/docs/JavaScript_code_modules/FileUtils.jsm" title="FileUtils.jsm"><code>FileUtils.jsm</code></a> now has a <code>File</code> constructor that returns an <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code> object representing a file specified by its pathname.</li> +</ul> + +<h3 id="Service_changes">Service changes</h3> + +<ul> + <li>The content preference service now <a href="/en-US/docs/Using_content_preferences#private-browsing" title="en-US/docs/Using_content_preferences#private-browsing">handles private mode browsing</a> (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=679784" title="FIXED: nsIContentPrefService should handle private browsing mode">error 679784</a>).</li> +</ul> + +<h3 id="NSPR">NSPR</h3> + +<ul> + <li>NSPR now has an "append" module, which lets you append new data to the end of an existing log.</li> +</ul> + +<h3 id="Interface_changes">Interface changes</h3> + +<h4 id="Removed_interfaces">Removed interfaces</h4> + +<ul> + <li><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIGlobalHistory3" title="">nsIGlobalHistory3</a></code> has been removed during streamlining of the Places and DocShell code.</li> +</ul> + +<h4 id="Miscellaneous_interface_changes">Miscellaneous interface changes</h4> + +<ul> + <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISound" title="">nsISound</a></code> interface has a new constant, <code>EVENT_EDITOR_MAX_LEN</code>. The allows for playing the system sound for when more characters than the maximum allowed are typed into a text field. Currently, this is only used on Windows.</li> + <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIScriptError2" title="">nsIScriptError2</a></code> interface has new <code>timeStamp</code> and <code>innerWindowID</code> properties; in addition, the <code>initWithWindowID()</code> method now takes an inner window ID instead of an outer window ID.</li> + <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIBidiKeyboard#haveBidiKeyboards">nsIBidiKeyboard.haveBidiKeyboards</a></code> attribute has been added; this lets you determine if the system has at least one keyboard installed for each direction: left-to-right and right-to-left.</li> + <li>The new <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIEditor#isSelectionEditable">nsIEditor.isSelectionEditable</a></code> attribute lets you determine if the current selection anchor is editable. This helps to support cases where only parts of the document are editable, by letting you see if the current selection is in an editable section.</li> + <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIBrowserHistory#registerOpenPage()">nsIBrowserHistory.registerOpenPage()</a></code> and <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIBrowserHistory#unregisterOpenPage()">nsIBrowserHistory.unregisterOpenPage()</a></code> methods have been removed as part of a performance overhaul in the Places system. You can use the corresponding methods in <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/mozIPlacesAutoComplete" title="">mozIPlacesAutoComplete</a></code> instead.</li> + <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils#wrapDOMFile()">nsIDOMWindowUtils.wrapDOMFile()</a></code> method has been added; this returns a DOM <a href="/es/docs/Web/API/File" title="La interfaz File provee información acerca de los archivos y permite el acceso a su contenido."><code>File</code></a> object for a given <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="">nsIFile</a></code>.</li> + <li>The <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#removeDelayedFrameScript()">nsIChromeFrameMessageManager.removeDelayedFrameScript()</a></code> method was added to support removing delayed load scripts. Bootstrapped add-ons should use this, at shutdown, to remove any scripts it loaded using <code><a href="https://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIChromeFrameMessageManager#loadFrameScript()">nsIChromeFrameMessageManager.loadFrameScript()</a></code> with the delayed load flag set. This is exposed to add-ons as <code>browser.messageManager.removeDelayedFrameScript()</code>.</li> + <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAppStartup" title="">nsIAppStartup</a></code> interface has a new <code>interrupted</code> attribute, which lets you know if the startup process was interrupted at any point by an interactive prompt. This can be helpful, for example, when timing startups during performance evaluation, to be able to drop numbers from sessions that were interrupted.</li> + <li>The <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIEditorSpellCheck" title="">nsIEditorSpellCheck</a></code> interface has been revised to support per-site selection of spell checker dictionaries.</li> +</ul> + +<h3 id="IDL_parser">IDL parser</h3> + +<p>The IDL parser no longer includes support for the never fully-implemented notion of unique pointers.</p> + +<h3 id="Build_system_changes">Build system changes</h3> + +<ul> + <li>The <code>--enable-application=standalone</code> option for building standalone XPConnect has been removed; it hasn't worked since 2007 anyway.</li> + <li>Support for building Necko and Transformiix XSLT standalone has been removed; you can no longer use <code>--enable-application=network</code> or <code>--enable-application=content/xslt</code>.</li> + <li>The build system now looks for <code>.mozconfig</code> at <code>$topsrcdir/.mozconfig</code> or <code>$topsrcdir/mozconfig</code>, and nowhere else, unless you override the <code>.mozconfig</code> path using the <code>MOZCONFIG</code> environment variable.</li> + <li>The <code>xpidl</code> utility has been replaced in the SDK with <a href="/en-US/docs/XPIDL/pyxpidl" title="pyxpidl">pyxpidl</a>.</li> +</ul> + +<h3 id="Other_changes">Other changes</h3> + +<ul> + <li>The spell checker no longer has an arbitrary 130-character word-length limit on the length of words it will attempt to spell check. This limit was previously in place to prevent crashes that were occurring in the spell checker, but the underlying bugs have since been fixed.</li> + <li>You can now register components to add features to the <a href="/es/docs/Web/API/Window/navigator" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>window.navigator</code></a> object by using the "JavaScript-navigator-property" category. See <a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding APIs to the navigator object">Adding APIs to the navigator object</a> for details and examples.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<div><div class="multiColumnList"> +<ul> +<li><a href="/es/docs/Mozilla/Firefox/Releases/8">Firefox 8 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/7">Firefox 7 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/6">Firefox 6 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/5">Firefox 5 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/4">Firefox 4 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/3.6">Firefox 3.6 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/3">Firefox 3 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/2">Firefox 2 for developers</a></li><li><a href="/es/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5 for developers</a></li></ul> +</div></div> diff --git a/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html new file mode 100644 index 0000000000..ff9d1e483e --- /dev/null +++ b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html @@ -0,0 +1,69 @@ +--- +title: Actualizando add-ons para Firefox 9 +slug: Mozilla/Firefox/Releases/9/Updating_add-ons +translation_of: Mozilla/Firefox/Releases/9/Updating_add-ons +--- +<div>{{FirefoxSidebar}}</div><p><span id="result_box" lang="es"><span class="hps">Firefox</span> <span class="hps">9</span> <span class="hps">no tiene</span> <span class="hps">una gran cantidad de</span> <span class="hps">cambios</span> <span class="hps">que deberian ser</span><span class="hps"> problemas de compatibilidad</span> <span class="hps">para los desarrolladores</span> <span class="hps">de add-ons.</span> <span class="hps">Sin embargo</span><span>,</span> <span class="hps">hay algunos</span> <span class="hps">elementos</span> <span class="hps">posibles que</span> <span class="hps">puedan ser problematicos</span><span>,</span> <span class="hps">así que vamos</span> <span class="hps">a echar un vistazo</span><span>.</span> </span></p> + +<h2 id="¿Es_necesario_hacer_halgo"><span id="result_box" lang="es"><span class="hps">¿</span></span>Es necesario hacer halgo?</h2> + +<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">se distribuye</span> <span class="hps">su</span> <span class="hps">add-on</span> <span class="hps">en</span> <span class="hps">addons.mozilla.org</span> <span class="hps">(AMO</span><span>)</span><span>,</span> <span class="hps">ha sido</span> <span class="hps">verificado</span> <span class="hps">por</span> <span class="hps">una herramienta</span> <span class="hps">de verificación de</span><span class="hps"> compatibilidad</span> <span class="hps">automatizada.</span> <span class="atn hps">Add-</span><span>ons</span> <span class="hps">que</span> <span class="hps">no utilice</span> <span class="hps">API</span> <span class="hps">que cambiaron</span> <span class="hps">en</span> <span class="hps">Firefox 8</span><span>,</span> <span class="hps">y no tienen</span> <span class="hps">componentes</span> <span class="atn hps">binarios (</span><span>que deben</span> <span class="hps">volver a compilar</span> <span class="hps">para cada</span> <span class="hps">versión importante</span> <span class="hps">de Firefox</span><span>)</span><span>,</span> <span class="hps">automáticamente</span> <span class="hps">se han</span> <span class="hps">actualizado</span> <span class="hps">en</span> <span class="hps">AMO</span> <span class="hps">para indicar que</span> <span class="hps">funcionan</span> <span class="hps">en</span> <span class="hps">Firefox</span> <span class="hps">9</span><span>.</span><br> + <br> + <span class="hps">Así que usted debe</span> <span class="hps">empezar por visitando</span> <span class="hps">AMO</span> <span class="hps">y mirando</span> <span class="hps">para ver</span> <span class="hps">si su</span> add-on</span> requiere trabajo.</p> + +<div class="note"><span id="result_box" lang="es"><span class="hps"><strong>Nota</strong>: Aún</span> <span class="hps">deberia probar su</span> <span class="hps">add-on</span> <span class="hps">en</span> <span class="hps">Firefox</span> <span class="hps">9</span><span>,</span> <span class="hps">incluso</span> <span class="hps">si se ha</span> <span class="hps">actualizado</span> <span class="hps">automáticamente.</span> <span class="hps">Hay</span> <span class="hps">casos raros </span><span class="hps">que</span> <span class="hps">no</span> <span class="hps">se pueden detectar</span> <span class="hps">de forma automática</span><span>.</span></span></div> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Ya </span><span class="hps">que haya confirmado</span> <span class="hps">que</span><span class="hps"> necesitas hacer cambios</span><span>, vuelva</span> <span class="hps">de nuevo a</span> <span class="hps">esta página y</span> <span class="hps">siga leyendo.</span></span></div> + +<div dir="ltr" style="zoom: 1;"> </div> +</div> + +<h2 id="Add-ons_que_estan_bootstrapped_pueden_quitar_scripts_de_carga_retrasada"><span id="result_box" lang="es"><span class="hps">Add-ons que estan</span> <span class="hps">bootstrapped</span> <span class="hps">pueden quitar</span> <span class="hps">scripts </span><span class="hps">de carga</span> <span class="hps">retrasada</span> </span></h2> + +<p><span id="result_box" lang="es"><span class="hps">Si su</span> <span class="hps">complemento usa</span> <span class="atn hps">{</span><span class="atn">{</span><span>ifmethod</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>nsIChromeFrameMessageManager</span><span>"</span><span>,</span> <span class="atn hps">"</span><span>loadFrameScript</span><span>"</span><span>)</span><span>}</span><span>}</span> <span class="hps">con el delayed-load</span> <span class="hps">disponido</span><span>, el script</span> <span class="hps">se carga</span> <span class="hps">en todo cuadro</span> <span class="hps">creado a partir</span> <span class="hps">de ese momento</span><span>.</span> <span class="hps">Esto es genial,</span> <span class="hps">excepto que</span> <span class="hps">desde Firefox</span> <span class="hps">9</span><span>,</span> <span class="hps">no había</span> <span class="hps">manera de</span> <span class="hps">detener la carga de</span> el script<span>,</span> <span class="hps">asi que que </span><span class="hps">seguiria ocurriendo</span> <span class="hps">incluso después de que</span> <span class="hps">su</span> <span class="hps">add-on</span> <span class="hps">fue cerrado</span><span>.</span><br> + <br> + <span class="hps">A partir de</span> <span class="hps">Firefox</span> <span class="hps">9</span><span>, debe llamar a</span> <span class="hps">el nuevo</span> <span class="atn hps">{</span><span class="atn">{</span><span>}</span> <span class="hps">ifmethod</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>nsIChromeFrameMessageManager</span><span>"</span><span>,</span> <span class="atn hps">"</span><span>removeDelayedFrameScript</span><span>"</span><span>)</span><span>}</span> <span class="hps">método para</span> <span class="hps">detener la carga de</span> el script <span class="hps">en los nuevos cuadros</span><span>.</span> <span class="hps">Esto se hace</span> <span class="hps">de esta manera</span><span>, por ejemplo</span><span>:</span></span></p> + +<pre>browser.messageManager.removeDelayedFrameScript("chrome://myextension/content/somescript.js"); +</pre> + +<h2 id="Interface_changes">Interface changes</h2> + +<ul> + <li>The {{ interface("nsIURL") }} interface has been changed a bit. The {{ ifattribute("nsIURL", "param") }} attribute was removed, and the {{ ifmethod("nsIURLParser", "parsePath") }} method has two fewer arguments than it did previously.</li> + <li>Two methods have been removed from {{ interface("nsIBrowserHistory") }}: <code>registerOpenPage()</code> and <code>unregisterOpenPage()</code>. These methods had been deprecated.</li> + <li>The {{ ifmethod("nsIEditorSpellCheck", "saveDefaultDictionary") }} method has been removed as part of supporting per-site spell check settings. Also, {{ ifmethod("nsIEditorSpellCheck", "updateCurrentDictionary") }} no longer takes a parameter.</li> + <li>The {{ interface("nsIGlobalHistory3") }} interface has been removed. Its functionality was of limited (if any) use to add-ons, so this shouldn't affect anyone.</li> + <li>Several specialized channels' properties attributes have been merged into the base {{ interface("nsIChannel") }} interface. This shouldn't affect compatibility at all, since those interfaces inherit from <code>nsIChannel</code> anyway.</li> +</ul> + +<h2 id="Preference_changes">Preference changes</h2> + +<p>The <code>geo.wifi.*</code> preferences no longer have default values, although they're honored if they exist. If your code reads these without handling the case where they don't exist, you need to update your code to handle the exception that gets thrown when they're not present.</p> + +<h2 id="XPConnect_changes">XPConnect changes</h2> + +<p><code>nodePrincipal</code> and <code>baseURIObject</code> have been moved from <code>nsDOMClassInfo</code> to <code>XrayWrapper</code>. This shouldn't affect many add-ons, since it would only be an issue if they try to access these properties on DOM {{ domxref("Node") }} objects from unprivileged script that have requested XPConnect privileges using <code>enablePrivilege()</code>.</p> + +<h2 id="DOM_changes">DOM changes</h2> + +<ul> + <li>The long-obsolete method <code>Navigator.taintEnabled()</code> has been removed. This hasn't done anything useful in a very long time, but was often used in browser detection scripts, since it was Netscape-specific. Calling this method throws an exception starting in Firefox 9.</li> + <li>Event handlers are now implemented as standard IDL interfaces. For most cases, this won't affect you, but <a href="/en/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9" title="en/DOM/DOM_event_handlers#Event_handler_changes_in_Firefox_9">there are exceptions</a>.</li> +</ul> + +<h2 id="Other_changes_that_may_affect_binary_compatibility">Other changes that may affect binary compatibility</h2> + +<p>These changes are notable in that they may affect binary XPCOM components. These will need rebuilding anyway, since that's required for every major release of Firefox, but could introduce compile-time errors, so they're worth noting in particular.</p> + +<ul> + <li>The {{ interface("nsIDOMHTMLDocument") }} interface now has a new <code>scripts</code> attribute, which implements the {{ domxref("Document.scripts") }} attribute.</li> + <li>The {{ ifmethod("nsIJumpListShortcut", "iconImageUri") }} method has been added, to make it possible to establish favicons on jump list URI entries on Windows.</li> +</ul> + +<h2 id="Theme_changes">Theme changes</h2> + +<p>The {{ XULAttr("pending") }} attribute has been added to the {{ XULElem("tab") }} element. If this attribute is present, the tab is in the process of being restored by the session store service. You can use that to style the tab during the restore process. It's worth noting that if the user has turned on the "Don't load tabs until selected" preference, the {{ XULAttr("pending") }} attribute is set on tabs until they get loaded.</p> + +<p>Similarly, tabs also now have an {{ XULAttr("unread") }} attribute; this property, if present, indicates that the tab has changed since the last time it was the active tab. You can use this to style tabs differently when they have changed since the last time the user looked at them. This is also present on tabs that have not yet been looked at during the current session.</p> diff --git a/files/es/mozilla/firefox/releases/index.html b/files/es/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..969916af10 --- /dev/null +++ b/files/es/mozilla/firefox/releases/index.html @@ -0,0 +1,11 @@ +--- +title: Notas de desarrollo de Firefox +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div><p>Esta página provee enlaces a artículos de desarrolladores para Firefox X para cada versión de Firefox. Estas notas permiten ver las características añadidas y los errores eliminados en cada versión de Firefox.</p> + +<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div> diff --git a/files/es/mozilla/firefox_para_android/index.html b/files/es/mozilla/firefox_para_android/index.html new file mode 100644 index 0000000000..7ba3ca497b --- /dev/null +++ b/files/es/mozilla/firefox_para_android/index.html @@ -0,0 +1,65 @@ +--- +title: Firefox para Android +slug: Mozilla/Firefox_para_Android +translation_of: Mozilla/Firefox_for_Android +--- +<p>Para cada vez más personas, los dispositivos móviles representan su manera principal —o incluso la única manera— de navegar por la web.<a class="link-https" href="https://www.mozilla.org/en-US/mobile/"> Firefox para Android</a> (cuyo nombre en código es Fennec) es un navegador abierto, «hackeable» y que cumple con los estándares, al igual que el Firefox de escritorio.</p> + +<p>Firefox para Android construye su interfaz de usuario mediante «widgets» nativos de Android en lugar de XUL: esto mejora considerablemente el rendimiento, especialmente el tiempo de inicio y el consumo de memoria. Actualmente esta versión está destinada únicamente a los teléfonos, y la versión para tabletas todavía utiliza XUL. En el futuro, esperamos traer la compatibilidad con los «widgets» nativos también para la IU para tabletas.</p> + +<h2 id="Contribuir_a_Firefox_para_Android">Contribuir a Firefox para Android</h2> + +<p>El punto de partida principal para obtener información sobre el proyecto Firefox para Android es la <a class="link-https" href="https://wiki.mozilla.org/Mobile">página del wiki del proyecto</a>.</p> + +<p>Puede ayudarnos a crear y mejorar Firefox para Android:</p> + +<ul> + <li>ayúdenos <a class="link-https" href="https://wiki.mozilla.org/Mobile/Testdrivers_Program">realizando pruebas</a> + + <ul> + <li>pruebe los sitios web más comunes para revisar la compatibilidad del motor móvil gecko; vaya <a href="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">aquí</a> para más información</li> + </ul> + </li> + <li>contacte al equipo mediante <a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a> o únase a nuestra <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">reunión de desarrollo de los miércoles</a></li> + <li>manténgase informado de las noticias del proyecto en <a class="external" href="http://planet.firefox.com/mobile/">planet firefox</a> y <a class="link-https" href="https://twitter.com/#!/mozmobile" title="https://twitter.com/#!/mozmobile">Twitter</a></li> + <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">compile y haga cambios en el código de Firefox para Android</a> (Fennec)</li> +</ul> + +<h2 id="Desarrolle_para_la_web_movil">Desarrolle para la web movil</h2> + +<p>Hemos comenzado a armar una guía para <a href="/En/Mobile" title="En/Mobile">diseñar sitios web para dispositivos móviles</a>.</p> + +<p>Con Firefox para Android, tiene acceso a varias API que permiten acceder a las capacidades fundamentales del dispositivo, cerrando la brecha entre la Web y las aplicaciones nativas:</p> + +<p><a class="external external-icon" href="https://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">B'</a></p> + +<ul> + <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">Cámara</a></li> + <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">TelefoníaWeb</a></li> + <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">SMSWeb</a></li> + <li><a href="/En/Using_geolocation" title="Using geolocation">Geolocalización</a></li> + <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientación</a></li> +</ul> + +<p>Para probar su sitio web en Firefox para Android, puede <a class="external external-icon" href="https://www.mozilla.org/es-ES/firefox/">instalarlo en un dispositivo con Android</a> o <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">ejecútelo en su escritorio mediante el Emulador de Android</a>.</p> + +<h2 id="Cree_complementos_para_móviles">Cree complementos para móviles</h2> + +<p><a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">Firefox para Android es compatible con los complementos</a>, utilizando el mismo <a href="/en/Extensions" title="en/Extensions">sistema de extensiones</a> que usan todas las demás aplicaciones basadas en Gecko. No hemos inventado un nuevo sistema de complementos. Esto quiere decir que crear un complemento para Firefox en Android es el <a href="/en/Building_an_Extension" title="en/Building_an_Extension">mismo proceso</a> que seguiría con Firefox para el escritorio. Los complementos que funcionan en el Firefox del escritorio <strong>no</strong> funcionan automáticamente en Firefox para Android. Pongámoslo así: las interfaces son demasiado diferentes.</p> + +<div class="note">Firefox en Android tiene un identificador de aplicación único que debe utilizarse en <code>install.rdf</code>. El identificador es <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code></div> + +<p>Son compatibles ambas clases de complementos (los clásicos, que requieren reinicio; y los más recientes <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">que no lo necesitan</a>). De ser posible, se prefiere utilizar la clase que no necesita reinicio, porque la experiencia del usuario es mucho mejor cuando no se necesita forzar un reinicio de la aplicación cada vez que el usuario instala o desinstala un complemento.</p> + +<h3 id="Visión_general_rápida">Visión general rápida</h3> + +<ul> + <li>No hay XUL visible en la IU, asi que tratar de usar capas superpuestas para añadir o cambiar la UI no servira de nada.</li> + <li>El código y objetos internos, como <code>gBrowser</code>, no existen. Eche un vistazo al archivo <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a> de Firefox para Android, para saber más sobre el funcionamiento interno. Existe una gran parte de la funcionalidad fundamental.</li> + <li>Los servicios como <code>nsIPromptService</code> y <code>nsIAlertsService</code> están implementados para usar la IU nativa de Android.</li> + <li>Hay un objeto de JavaScript sencillo, llamado <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a>, que le permite manipular partes de la interfaz nativa de Android.</li> +</ul> + +<h2 id="Obtenga_ayuda_con_Firefox_para_Android">Obtenga ayuda con Firefox para Android</h2> + +<p>En el <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">sitio web de asistencia de Mozilla</a> hay documentación y tutoriales para aprender a usar Firefox para Android y resolver problemas.</p> diff --git a/files/es/mozilla/git/index.html b/files/es/mozilla/git/index.html new file mode 100644 index 0000000000..a92f22d5ed --- /dev/null +++ b/files/es/mozilla/git/index.html @@ -0,0 +1,12 @@ +--- +title: Git +slug: Mozilla/Git +translation_of: Mozilla/Git +--- +<p><span class="tlid-translation translation" lang="es"><span title="">El espejo git oficial actual de la base de código de Firefox (también conocido como "gecko" o "mozilla-central") se puede encontrar en <a href="https://github.com/mozilla/gecko-dev">https://github.com/mozilla/gecko-dev.</a></span> <span title="">Este repositorio contiene todas las ramas que forman parte del desarrollo de la línea principal, incluidas las ramas del tren mozilla-central (todas las noches), mozilla-aurora (edición para desarrolladores), mozilla-beta y mozilla-release.</span><br> + <br> + <span title="">Si está buscando trabajar con otras ramas de Mozilla, <a href="https://github.com/mozilla/gecko-projects">https://github.com/mozilla/gecko-projects</a> también podrían ser útiles.</span> <span title="">Este repositorio contiene las <a href="https://wiki.mozilla.org/ReleaseEngineering/DisposableProjectBranches#BOOKING_SCHEDULE">ramas del proyecto </a>(también conocidas como "ramitas") cuyo uso varió.</span><br> + <br> + <span title="">Si prefiere usar git directamente con los repositorios hg, este flujo de trabajo describe cómo proceder.</span> <span title="">El uso de este enfoque también le permitirá pasar directamente de su repositorio git a mercurial.</span><br> + <br> + <span title="">El <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Git$translate?tolocale=es#workflow">flujo de trabajo</a> mencionado anteriormente es el enfoque más actual y <a href="https://wiki.mozilla.org/GitHub/Gecko_Repositories">oficialmente documentado</a> para usar git para interactuar con mozilla-central.</span></span></p> diff --git a/files/es/mozilla/http_cache/index.html b/files/es/mozilla/http_cache/index.html new file mode 100644 index 0000000000..44b59a8bc1 --- /dev/null +++ b/files/es/mozilla/http_cache/index.html @@ -0,0 +1,487 @@ +--- +title: HTTP Cache +slug: Mozilla/HTTP_cache +translation_of: Mozilla/HTTP_cache +--- +<div class="geckoVersionNote"> +<p style="margin-bottom: 0in;">Este documento describe la <strong>Nueva caché HTTP versión 2</strong>.</p> +</div> + +<p style="margin-bottom: 0in;"></p> + +<p style="margin-bottom: 0in;">El código reside en <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/">/network/cache2</a>.</p> + +<p style="margin-bottom: 0in;"></p> + +<h2 id="API" style="margin-bottom: 0in;">API</h2> + +<p>Aquí hay una descripción detallada de la API de caché HTTP v2, con ejemplos incluidos. Este documento sólo contiene lo que no se puede encontrar o puede no estar claro directamente de los comentarios de los <a href="http://mxr.mozilla.org/mozilla-central/find?text=&string=cache2/nsICache">archivos IDL.</a></p> + +<ul> + <li>La API de caché es <strong>completamente thread-safe</strong> y <strong>non-blocking</strong>.</li> + <li><strong>No hay soporte IPC</strong>. Solo es accesible en el proceso predeterminado de Chrome.</li> + <li> + <p>Cuando no hay perfil, la nueva caché HTTP funciona, pero todo se almacena solo en la memoria que no obedece a ningún límite en particular.</p> + </li> +</ul> + +<div class="warning"> +<p>Está fuertemente codificado para <strong>NO USAR </strong>más la <strong>ANTIGUA</strong> API de <strong> </strong>caché - <code>nsICacheService</code> y otros. Pronto será completamente obsoleto y eliminado (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913828">bug 913828</a>).</p> +</div> + +<h3 id="nsICacheStorageService_2" style="margin-bottom: 0in;"><a name="nsICacheStorageService"><strong>nsICacheStorageService</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;">El punto de entrada de la memoria caché HTTP. Accesible solo como un servicio, totalmente seguro para subprocesos y programable.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="display: none;"> </span><code><span style="color: #b22222;">"@mozilla.org/netwerk/cache-storage-service;1"</span></code></p> + </li> + <li> + <p style="margin-bottom: 0in;">Proporciona métodos para acceder a los objetos de “almacenamiento” – ver <a href="#nsICacheStorage"><code>nsICacheStorage </code></a> más abajo – para obtener más acceso a las entradas de caché – ver <a href="#nsICacheStorage"><code>nsICacheEntry</code></a> más abajo – por URL específica.</p> + </li> + <li> + <p style="margin-bottom: 0in;">Actualmente hay 3 tipos de almacenamientos, todos los métodos de acceso devuelve un objeto <a href="#nsICacheStorage"><code>nsICacheStorage</code></a> :</p> + + <ul> + <li> + <p style="margin-bottom: 0in;"><strong>memory-only</strong> (<code>memoryCacheStorage</code>): Almacena datos solo en memoria caché, los datos en este almacenamiento nunca se guardan en disco.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><strong>disk</strong> (<code>diskCacheStorage</code>): Almacena datos en el disco, pero para entradas existentes <u>además busca dentro del storage de memory-only; </u></p> + + <p style="margin-bottom: 0in;">cuando se le indica a través de un argumento especial, t<u>ambién busca principalmente en la cache de aplicacion.</u></p> + </li> + <li> + <p style="margin-bottom: 0in;"><strong>application cache</strong> (<code>appCacheStorage</code>): Cuando un cliente tiene un objeto <code>nsIApplicationCache</code> especifico (i.e. una version particular de app cache en un grupo ) en manos, este almacenamiento provee acceso de lectura y escritura a los registros en la aplicacion de Cache, cuando la app de Cache no ha sido especificada, el almacenamiento opera, sobre todas las app de cache.</p> + </li> + </ul> + </li> + <li> + <p style="margin-bottom: 0in;">El servicio también proporciona métodos para limpiar todo el disco y el contenido de la memoria caché o purgar cualquier estructura intermedia de memoria:</p> + + <ul> + <li> + <p style="margin-bottom: 0in;"><code>clear </code>– after it returns, all entries are no longer accessible through the cache APIs; the method is fast to execute and non-blocking in any way; the actual erase happens in background</p> + </li> + <li> + <p style="margin-bottom: 0in;"><code>purgeFromMemory </code>– removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the <a href="#Intermediate_memory_caching">intermediate cache</a> below)</p> + </li> + </ul> + </li> +</ul> + +<h3 id="nsILoadContextInfo_2" style="margin-bottom: 0in;"><a name="nsILoadContextInfo">nsILoadContextInfo</a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;">Distingue el scope del almacenamiento demandado para abrir.</p> + </li> + <li> + <p style="margin-bottom: 0in;">Argumento obligatorio de <code>*Storage</code> metodos de <code>nsICacheStorageService</code>.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Es una interaz de ayuda que se ajusta siguiendo 4 argumentos en uno solo</span><span style="font-weight: normal;">:</span></p> + + <ul> + <li> + <p style="margin-bottom: 0in; font-weight: normal;"><strong>private-browsing</strong> boolean flag</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;"><strong>anonymous load</strong> boolean flag</p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>app ID</strong> number (<code>0</code> for no app)</span></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>is-in-browser</strong> boolean flag</span></p> + </li> + </ul> + </li> + <li> + <div class="note"> + <p style="margin-bottom: 0in;">Helper functions to create nsILoadContextInfo objects:</p> + + <ul> + <li> + <p style="margin-bottom: 0in;">C++ consumers: functions at <code>LoadContextInfo.h</code> exported header</p> + </li> + <li> + <p style="margin-bottom: 0in;">JS consumers: <code>resource://gre/modules/LoadContextInfo.jsm</code> module methods</p> + </li> + </ul> + </div> + </li> + <li> + <p style="margin-bottom: 0in;">Dos objectos de almacenamiento creados con el mismo set de <code>nsILoadContextInfo </code>argumentos son identicos, conteniedo las mismas entredas de cache.</p> + </li> + <li> + <p style="margin-bottom: 0in;">Two storage objects created with in any way different <code>nsILoadContextInfo </code>arguments are strictly and completely distinct and cache entries in them do not overlap even when having the same URIs.</p> + </li> +</ul> + +<h3 id="nsICacheStorage_2" style="margin-bottom: 0in;"><a name="nsICacheStorage"><strong>nsICacheStorage</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl"><span style="font-weight: normal;">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl</span></a></p> + </li> + <li> + <p style="margin-bottom: 0in;">Obtained from call to one of the <code>*Storage</code> methods on <a href="#nsICacheStorageService"><code>nsICacheStorageService</code></a>.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Represents a distinct storage area (or scope) to put and get cache entries mapped by URLs into and from it.</span></p> + </li> + <li> + <p style="margin-bottom: 0in;"><em><span style="font-weight: normal;">Similarity with the old cache</span></em><span style="font-weight: normal;">: this interface may be with some limitations considered as a mirror to <code>nsICacheSession</code>, but less generic and not inclining to abuse.</span></p> + </li> + <li> + <div class="warning"> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>Unimplemented or underimplemented functionality:</strong></span></p> + + <p><span style="font-weight: normal;">asyncEvictStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977766">bug 977766</a>)</span>, asyncVisitStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916052">bug 916052</a>)</p> + </div> + </li> +</ul> + +<h3 id="nsICacheEntryOpenCallback_2" style="margin-bottom: 0in;"><a name="nsICacheEntryOpenCallback"><strong>nsICacheEntryOpenCallback</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in; font-weight: normal;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">The result of <code>nsICacheStorage.asyncOpenURI</code> is always and only sent to callbacks on this interface.</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">These callbacks are ensured to be invoked when <code>asyncOpenURI</code> returns <code>NS_OK</code>.</p> + </li> + <li> + <div class="warning"> + <p style="margin-bottom: 0in; font-weight: normal;"><strong>Important difference in behavior from the old cache:</strong> when the cache entry object is already present in memory or open as “force-new” (a.k.a “open-truncate”) this callback is invoked sooner then the <code>asyncOpenURI </code>method returns (i.e. immediately); there is currently no way to opt out of this feature (watch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=938186">bug 938186</a>).</p> + </div> + </li> +</ul> + +<h3 id="nsICacheEntry_2" style="margin-bottom: 0in;"><a name="nsICacheEntry"><strong>nsICacheEntry</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Obtained asynchronously or pseudo-asynchronously by a call to <code><a href="#nsICacheStorage">nsICacheStorage</a>.asyncOpenURI</code>.</span></p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">Provides access to a cached entry data and meta data for reading or writing or in some cases both, see below.</p> + </li> +</ul> + +<h4 id="Ciclo_de_vida_de_un_nuevo_ingreso">Ciclo de vida de un nuevo ingreso</h4> + +<ul> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Como una entrada es inicialmente vacia (ningun dato o metado es almacenado en este).</span></p> + </li> + <li> + <p style="margin-bottom: 0in;">El argumento <code>aNew </code>en <code>onCacheEntryAvailable</code> es <code>true</code> para este y nuevos ingresos.</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">Only one consumer (the so called "<em>writer</em>") may have such an entry available (obtained via <code>onCacheEntryAvailable</code>).</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">Other parallel openers of the same cache entry are blocked (wait) for invocation of their <code>onCacheEntryAvailable</code> until one of the following occurs:</p> + + <ul> + <li>The <em>writer </em>simply throws the entry away: other waiting opener in line gets the entry again as "<em>new</em>", the cycle repeats. + + <div class="note"> + <p>This applies in general, writers throwing away the cache entry means a failure to write the cache entry and a new writer is being looked for again, the cache entry remains empty (a.k.a. "new").</p> + </div> + </li> + <li>The <em>writer </em>stored all necessary meta data in the cache entry and called <code>metaDataReady</code> on it: other consumers now get the entry and may examine and potentially modify the meta data and read the data (if any) of the cache entry.</li> + <li>When the <em>writer</em> has data (i.e. the response payload) to write to the cache entry, it <strong>must </strong>open the output stream on it <strong>before </strong>it calls <code>metaDataReady</code>.</li> + </ul> + </li> + <li>When the <em>writer</em> still keeps the cache entry and has open and keeps open the output stream on it, other consumers may open input streams on the entry. The data will be available as the <em>writer</em> writes data to the cache entry's output stream immediately, even before the output stream is closed. This is called <a href="#Concurrent_read_and_write"><strong>concurrent read/write</strong></a>.</li> +</ul> + +<h4 id="Concurrent_read_and_write" style="margin-bottom: 0in; font-weight: normal;"><a name="Concurrent read and write">Concurrent read and write</a></h4> + +<div class="warning"> +<p><strong>Important difference in behavior from the old cache:</strong> the cache now supports reading a cache entry data while it is still being written by the first consumer - the <em>writer</em>.</p> +</div> + +<p>This can only be engaged for resumable responses that (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960902#c17">bug 960902</a>) don't need revalidation. Reason is that when the writer is interrupted (by e.g. external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content.</p> + +<div class="note"> +<p>This could be improved by keeping the network load running and being stored to the cache entry even after the writing channel has been canceled.</p> +</div> + +<p>When the <em>writer</em> is interrupted, the first concurrent <em>reader</em> in line does a range request for the rest of the data - and becomes that way a new <em>writer</em>. The rest of the <em>readers</em> are still concurrently reading the content since output stream for the cache entry is again open and kept by the current <em>writer</em>.</p> + +<h4 id="Lifetime_of_an_existing_entry_with_only_a_partial_content" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry with only a partial content</h4> + +<ul> + <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where it has to be checked for completeness.</li> + <li>In this case, the <code>Content-Length</code> (or different indicator) header doesn't equal to the data size reported by the cache entry.</li> + <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li> + <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li> + <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li> + <li>The consumer is then responsible to validate the partial content cache entry with the network server and attempt to load the rest of the data.</li> + <li>When the server responds positively (in case of an HTTP server with a 206 response code) the <em>writer </em>(in this order) opens the output stream on the cache entry and calls <code>setValid</code> to unblock other pending openers.</li> + <li>Concurrent read/write is engaged.</li> +</ul> + +<h4 id="Lifetime_of_an_existing_entry_that_doesnt_pass_server_revalidation" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry that doesn't pass server revalidation</h4> + +<ul> + <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where the consumer finds out it must be revalidated with the server before use.</li> + <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li> + <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li> + <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li> + <li>The consumer is then responsible to validate the partial content cache entry with the network server.</li> + <li>The server responses with a 200 response which means the cached content is no longer valid and a new version must be loaded from the network.</li> + <li>The <em>writer</em> then calls <code>recreate </code>on the cache entry. This returns a new empty entry to write the meta data and data to, the <em>writer</em> exchanges its cache entry by this new one and handles it as a new one.</li> + <li>The <em>writer</em> then (in this order) fills the necessary meta data of the cache entry, opens the output stream on it and calls <code>metaDataReady</code> on it.</li> + <li>Any other pending openers, if any, are now given this new entry to examine and read as an existing entry.</li> +</ul> + +<h3 id="Adding_a_new_storage" style="margin-bottom: 0in;">Adding a new storage</h3> + +<p>Should there be a need to add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways:</p> + +<ol> + <li><em>[preffered]</em> Add a new <code><Your>Storage</code> method on <code>nsICacheStorageService</code> and if needed give it any arguments to specify the storage scope even more. Implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - <code>nsICacheStorage</code> implementations to carry any additional information down to the cache service.</li> + <li><em>[<strong>not</strong> preferred]</em> Add a new argument to <a href="#nsILoadContextInfo"><code>nsILoadContextInfo</code></a>; <strong>be careful here</strong>, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems. Adding more distinction to <code>nsILoadContextInfo</code> also affects all existing storages which may not be always desirable.</li> +</ol> + +<p>See context keying details for more information.</p> + +<h3 id="Code_examples">Code examples</h3> + +<p>TBD</p> + +<h4 id="Opening_an_entry">Opening an entry</h4> + +<h4 id="Creating_a_new_entry">Creating a new entry</h4> + +<h4 id="Recreating_an_already_open_entry">Recreating an already open entry</h4> + +<h2 id="Implementation">Implementation</h2> + +<h3 id="Threading">Threading</h3> + +<p>The cache API is fully thread-safe.</p> + +<p>The cache is using a single background thread where any IO operations like opening, reading, writing and erasing happen. Also memory pool management, eviction, visiting loops happen on this thread.</p> + +<p>The thread supports several priority levels. Dispatching to a level with a lower number is executed sooner then dispatching to higher number layers; also any loop on lower levels yields to higher levels so that scheduled deletion of 1000 files will not block opening cache entries.</p> + +<ol> + <li><strong>OPEN_PRIORITY:</strong> except opening priority cache files also file dooming happens here to prevent races</li> + <li><strong>READ_PRIORITY:</strong> top level documents and head blocking script cache files are open and read as the first</li> + <li><strong>OPEN</strong></li> + <li><strong>READ:</strong> any normal priority content, such as images are open and read here</li> + <li><strong>WRITE:</strong> writes are processed as last, we cache data in memory in the mean time</li> + <li><strong>MANAGEMENT:</strong> level for the memory pool and CacheEntry background operations</li> + <li><strong>CLOSE:</strong> file closing level</li> + <li><strong>INDEX:</strong> index is being rebuild here</li> + <li><strong>EVICT:</strong> files overreaching the disk space consumption limit are being evicted here</li> +</ol> + +<p>NOTE: Special case for eviction - when an eviction is scheduled on the IO thread, all operations pending on the OPEN level are first merged to the OPEN_PRIORITY level. The eviction preparation operation - i.e. clearing of the internal IO state - is then put to the end of the OPEN_PRIORITY level. All this happens atomically. This functionality is currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=976866">bug 976866</a>.</p> + +<h3 id="Storage_and_entries_scopes">Storage and entries scopes</h3> + +<p>A <em>scope key</em> string used to map the storage scope is based on the arguments of <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code>. The form is following (currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968593">bug 968593</a>):</p> + +<pre class="bz_comment_text notranslate" id="comment_text_0">a,b,i1009,p,</pre> + +<ul> + <li>Regular expression: <code>(.([^,]+)?,)*</code></li> + <li>The first letter is an identifier, identifiers are to be alphabetically sorted and always terminate with ','</li> + <li>a - when present the scope is belonging to an <strong>anonymous</strong> load</li> + <li>b - when present the scope is <strong>in browser element</strong> load</li> + <li>i - when present must have a decimal integer value that represents an app ID the scope belongs to, otherwise there is no app (app ID is considered <code>0</code>)</li> + <li>p - when present the scope is of a <strong>private browsing </strong>load, this never persists</li> +</ul> + +<p><code><strong>CacheStorageService </strong></code>keeps a global hashtable mapped by the <em>scope key</em>. Elements in this global hashtable are hashtables of cache entries. The cache entries are mapped by concantation of Enhance ID and URI passed to <code>nsICacheStorage.asyncOpenURI</code>. So that when an entry is beeing looked up, first the global hashtable is searched using the <em>scope key</em>. An entries hashtable is found. Then this entries hashtable is searched using <enhance-id:><uri> string. The elemets in this hashtable are CacheEntry classes, see below.</p> + +<p>The hash tables keep a strong reference to <code>CacheEntry</code> objects. The only way to remove <code>CacheEntry</code> objects from memory is by exhausting a memory limit for <a href="##Intermediate_memory_caching">intermediate memory caching</a>, what triggers a background process of purging expired and then least used entries from memory. Another way is to directly call the <code>nsICacheStorageService.purge </code>method. That method is also called automatically on the <span style="color: #b22222;"><code>"memory-pressure"</code></span> indication.</p> + +<p>Access to the hashtables is protected by a global lock. We also - in a thread-safe manner - count the number of consumers keeping a reference on each entry. The open callback actually doesn't give the consumer directly the <code>CacheEntry</code> object but a small wrapper class that manages the 'consumer reference counter' on its cache entry. This both mechanisms ensure thread-safe access and also inability to have more then a single instance of a <code>CacheEntry</code> for a single <scope+enhanceID+URL> key.</p> + +<p><code><strong>CacheStorage</strong></code>, implementing the <code><a href="#nsICacheStorage">nsICacheStorage</a></code> interface, is forwarding all calls to internal methods of <code>CacheStorageService</code> passing itself as an argument. <code>CacheStorageService</code> then generates the <em>scope key</em> using the <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code> of the storage. <span style="color: #696969;">Note: CacheStorage keeps a thread-safe copy of <code>nsILoadContextInfo</code> passed to a <code>*Storage</code> method on <code>nsICacheStorageService</code>.</span></p> + +<h3 id="Invoking_open_callbacks">Invoking open callbacks</h3> + +<p><code><strong>CacheEntry</strong></code>, implementing the <code><a href="#nsICacheEntry">nsICacheEntry</a></code> interface, is responsible for managing the cache entry internal state and to properly invoke <code>onCacheEntryCheck</code> and <code>onCacheEntryAvaiable</code> callbacks to all callers of <code>nsICacheStorage.asyncOpenURI</code>.</p> + +<ul> + <li>Keeps a FIFO of all openers.</li> + <li>Keeps its internal state like NOTLOADED, LOADING, EMPTY, WRITING, READY, REVALIDATING.</li> + <li>Keeps the number of consumers keeping a reference to it.</li> + <li>Refers a <code>CacheFile</code> object that holds actual data and meta data and, when told to, persists it to the disk.</li> +</ul> + +<p>The openers FIFO is an array of <code>CacheEntry::Callback</code> objects. <code>CacheEntry::Callback</code> keeps a strong reference to the opener plus the opening flags. <code>nsICacheStorage.asyncOpenURI</code> forwards to <code>CacheEntry::AsyncOpen</code> and triggers the following pseudo-code:</p> + +<p><a name="CacheStorage::AsyncOpenURI"><strong>CacheStorage::AsyncOpenURI - the API entry point</strong></a>:</p> + +<ul> + <li>globally atomic: + <ul> + <li>look a given <code>CacheEntry</code> in <code>CacheStorageService</code> hash tables up</li> + <li>if not found: create a new one, add it to the proper hash table and set its state to NOTLOADED</li> + <li>consumer reference ++</li> + </ul> + </li> + <li>call to <a href="#CacheEntry::AsyncOpen">CacheEntry::AsyncOpen</a></li> + <li>consumer reference --</li> +</ul> + +<p><a name="CacheEntry::AsyncOpen"><strong>CacheEntry::AsyncOpen</strong> (entry atomic)</a>:</p> + +<ul> + <li>the opener is added to FIFO, consumer reference ++ (dropped back after an opener is removed from the FIFO)</li> + <li>state == NOTLOADED: + <ul> + <li>state = LOADING</li> + <li>when OPEN_TRUNCATE flag was used: + <ul> + <li><code>CacheFile</code> is created as 'new', state = EMPTY</li> + </ul> + </li> + <li>otherwise: + <ul> + <li><code>CacheFile</code> is created and load on it started</li> + <li><code><a href="#CacheEntry::OnFileReady">CacheEntry::OnFileReady</a></code> notification is now expected</li> + </ul> + </li> + </ul> + </li> + <li>state == LOADING: just do nothing and exit</li> + <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li> +</ul> + +<p><a name="CacheEntry::InvokeCallbacks"><strong>CacheEntry::InvokeCallbacks</strong> (entry atomic):</a></p> + +<ul> + <li>called on: + <ul> + <li>a new opener has been added to the FIFO via an <code><strong><a href="#CacheEntry::AsyncOpen">AsyncOpen</a></strong></code> call</li> + <li>asynchronous result of <a href="#CacheEntry::OnFileReady"><strong><code>CacheFile</code> open</strong></a></li> + <li>the <a href="#CacheEntry::OnHandleClosed"><strong><em>writer</em> throws the entry away</strong></a></li> + <li>the <strong>output stream </strong>of the entry has been <strong>opened </strong>or <strong>closed</strong></li> + <li><code><strong>metaDataReady </strong></code>or <code><strong>setValid </strong></code>on the entry has been called</li> + <li>the entry has been <strong>doomed</strong></li> + </ul> + </li> + <li>state == EMPTY: + <ul> + <li>on OPER_READONLY flag use: onCacheEntryAvailable with <code>null </code>for the cache entry</li> + <li>otherwise: + <ul> + <li>state = WRITING</li> + <li>opener is removed from the FIFO and remembered as the current '<em>writer</em>'</li> + <li>onCacheEntryAvailable with <code>aNew = true </code>and this entry is invoked (on the caller thread) for the <em>writer</em></li> + </ul> + </li> + </ul> + </li> + <li>state == READY: + <ul> + <li>onCacheEntryCheck with the entry is invoked on the first opener in FIFO - on the caller thread if demanded</li> + <li>result == RECHECK_AFTER_WRITE_FINISHED: + <ul> + <li>opener is left in the FIFO with a flag <code>RecheckAfterWrite</code></li> + <li>such openers are skipped until the output stream on the entry is closed, then <code>onCacheEntryCheck</code> is re-invoked on them</li> + <li><span style="color: #696969;">Note: here is a potential for endless looping when RECHECK_AFTER_WRITE_FINISHED is abused</span></li> + </ul> + </li> + <li>result == ENTRY_NEEDS_REVALIDATION: + <ul> + <li>state = REVALIDATING, this prevents invocation of any callback until <code>CacheEntry::SetValid</code> is called</li> + <li>continue as in state ENTRY_WANTED (just bellow)</li> + </ul> + </li> + <li>result == ENTRY_WANTED: + <ul> + <li>consumer reference ++ (dropped back when the consumer releases the entry)</li> + <li>onCacheEntryAvailable is invoked on the opener with <code>aNew = false </code>and the entry</li> + <li>opener is removed from the FIFO</li> + </ul> + </li> + <li>result == ENTRY_NOT_WANTED: + <ul> + <li><code>onCacheEntryAvailable</code> is invoked on the opener with <code>null </code>for the entry</li> + <li>opener is removed from the FIFO</li> + </ul> + </li> + </ul> + </li> + <li>state == WRITING or REVALIDATING: + <ul> + <li>do nothing and exit</li> + </ul> + </li> + <li>any other value of state is unexpected here (assertion failure)</li> + <li>loop this process while there are openers in the FIFO</li> +</ul> + +<p><a name="CacheEntry::OnFileReady"><strong>CacheEntry::OnFileReady</strong> (entry atomic):</a></p> + +<ul> + <li>load result == failure or the file has not been found on disk (is new): state = EMPTY</li> + <li>otherwise: state = READY since the cache file has been found and is usable containing meta data and data of the entry</li> + <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li> +</ul> + +<p><a name="CacheEntry::OnHandleClosed"><strong>CacheEntry::OnHandleClosed</strong> (entry atomic):</a></p> + +<ul> + <li>Called when any consumer throws the cache entry away</li> + <li>If the handle is not the handle given to the current <em>writer</em>, then exit</li> + <li>state == WRITING: the writer failed to call <code>metaDataReady</code> on the entry - state = EMPTY</li> + <li>state == REVALIDATING: the writer failed the re-validation process and failed to call <code>setValid</code> on the entry - state = READY</li> + <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li> +</ul> + +<p><strong><a name="All consumers release the reference">All consumers release the reference</a>:</strong></p> + +<ul> + <li>the entry may now be purged (removed) from memory when found expired or least used on overrun of the <a href="#Intermediate_memory_caching">memory pool</a> limit</li> + <li>when this is a disk cache entry, its cached data chunks are released from memory and only meta data is kept</li> +</ul> + +<h3 id="Intermediate_memory_caching_of_frequently_used_metadata_a.k.a._disk_cache_memory_pool"><a name="Intermediate_memory_caching">Intermediate memory caching </a>of frequently used metadata (a.k.a. disk cache memory pool)</h3> + +<div class="note"> +<p>This is a description of this feature status that is currently only a patch in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986179">bug 986179</a>. Current behavior is simpler and causes a serious memory consumption regression (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975367">bug 975367</a>).</p> +</div> + +<p>For the disk cache entries we keep some of the most recent and most used cache entries' meta data in memory for immediate zero-thread-loop opening. The default size of this meta data memory pool is only 250kB and is controlled by a new <code>browser.cache.disk.metadata_memory_limit</code> preference. When the limit is exceeded, we purge (throw away) first <strong>expired</strong> and then <strong>least used </strong>entries to free up memory again. </p> + +<p>Only <code>CacheEntry</code> objects that are already loaded and filled with data and having the 'consumer reference == 0' (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=942835#c3">bug 942835</a>) can be purged.</p> + +<p>The 'least used' entries are recognized by the lowest value of <a href="https://wiki.mozilla.org/User:Jesse/NewFrecency?title=User:Jesse/NewFrecency">frecency</a> we re-compute for each entry on its every access. The decay time is controlled by the <code>browser.cache.frecency_half_life_hours</code> preference and defaults to 6 hours. The best decay time will be based on results of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986728">an experiment</a>.</p> + +<p>The memory pool is represented by two lists (strong refering ordered arrays) of <code>CacheEntry</code> objects:</p> + +<ol> + <li>Sorted by expiration time (that default to 0xFFFFFFFF)</li> + <li>Sorted by frecency (defaults to 0)</li> +</ol> + +<p>We have two such pools, one for memory-only entries actually representing the memory-only cache and one for disk cache entries for which we only keep the meta data. Each pool has a different limit checking - the memory cache pool is controlled by <code>browser.cache.memory.capacity</code>, the disk entries pool is already described above. The pool can be accessed and modified only on the cache background thread.</p> + +<div id="cke_pastebin" style="">"@mozilla.org/netwerk/cache-storage-service;1"</div> diff --git a/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html b/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html new file mode 100644 index 0000000000..174403bdd8 --- /dev/null +++ b/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html @@ -0,0 +1,76 @@ +--- +title: Implementando Pontoon en un proyecto de Mozilla +slug: Mozilla/Implementing_Pontoon_in_a_Mozilla_website +tags: + - Localización +translation_of: Mozilla/Implementing_Pontoon_in_a_Mozilla_website +--- +<p><a class="external external-icon" href="https://pontoon.mozilla.org">Pontoon</a> Pontoon es una herramienta basada en web, WYSIWYG (localización de lo que se obtiene) y localización (l10n). En Mozilla, actualmente usamos Pontoon para localizar varios proyectos de Mozilla y la interfaz de la aplicación Firefox OS, conocida como Gaia. Pontoon es una herramienta muy simple e intuitiva que requiere poca o ninguna habilidad técnica para el uso de los localizadores, lo que disminuirá el tiempo de publicación de las versiones localizadas de su proyecto. Aquí discutiremos cómo puedes agregar Pontoon a tu proyecto de Mozilla.</p> + +<div class="note"> +<p><strong>¿Te gustaría mejorar Pontoon? </strong>Aprende cómo involucrarte en <a href="https://github.com/mozilla/pontoon">GitHub</a>.</p> +</div> + +<div class="note"> +<p><strong>¿Empezando con tu proyecto l10n?</strong> Mira la wiki en <a href="https://wiki.mozilla.org/L10n:NewProjects">haciendo que tu proyecto sea localizado.</a></p> +</div> + +<h2 id="A._Haz_tu_proyecto_localizable">A. Haz tu proyecto localizable</h2> + +<p>Nos damos cuenta de que estos ya se consideran estándar <a class="external external-icon" href="https://mozweb.readthedocs.org/en/latest/reference/l10n.html">buenas practicas</a> para localizar proyectos en Mozilla, pero creemos que es bueno agregarlos aquí como un pequeño recordatorio.</p> + +<ol> + <li>Asegurate de que tu proyecto sea compatible con uno de los frameworks l10n (<a class="external external-icon" href="https://www.gnu.org/software/gettext/">gettext</a>, <a class="external external-icon" href="https://docs.oasis-open.org/xliff/xliff-core/v2.0/xliff-core-v2.0.html">XLIFF</a>, <a class="external external-icon" href="https://projectfluent.org/">L20n</a>, <a class="external external-icon" href="https://github.com/mozilla-l10n/langchecker/wiki/.lang-files-format">lang</a>, <a class="external external-icon" href="https://en.wikipedia.org/wiki/.properties">properties</a>, etc.).</li> + <li>Extrae cadenas localizables en archivos de recursos.</li> + <li>Envia archivos de recursos a un repositorio (SVN, HG, Git). + <ul> + <li>Las carpetas locales individuales deben ubicarse en el mismo nivel de anidamiento del árbol de directorios. La fuente de la fuente necesita ser llamada<code>templates</code>, <code>en-US</code>, <code>en-us</code> o <code>en</code>. Si existen varias carpetas con ese nombre en el repositorio y contienen archivos en un formato de archivo admitido, se usará el primero. Es posible que desees colocar todas las carpetas de configuración regional de forma dedicada <code>locales</code> carpeta para este propósito. El código de configuración regional no debe ser parte del nombre del archivo.</li> + <li>Patrón correcto: + <pre>/locales/{locale_code}/path/to/file.extension</pre> + </li> + <li>Patrón incorrecto: + <pre>/locales/{locale_code}/path/to/file.{locale_code}.extension</pre> + </li> + </ul> + </li> + <li>Asegúrate de que Pontoon tenga acceso de escritura al repositorio. + <ul> + <li>Si usas GitHub, agrega <a class="external external-icon" href="https://github.com/mozilla-pontoon">mozilla-pontoon</a> o <a href="https://github.com/orgs/mozilla/teams/pontoon-l10n-robots">pontoon-l10n-robots</a> como colaborador de tu proyecto.</li> + </ul> + </li> +</ol> + +<h2 id="B._opcional_Habilita_la_localización_in-page_de_tu_proyecto_web">B. (opcional) Habilita la localización in-page de tu proyecto web</h2> + +<ol> + <li>Enlaza un script desde el elemento HTML <code><body></code> , por lo que Pontoon puede comunicarce con tu sitio, pueda detectar contenido y hacerlo localizable en su lugar. Solo necesitas hacer esto en el entorno que se usará para la localización in-page, <span class="short_text" id="result_box" lang="es"><span>p.ej.</span> <span>servidor de puesta en escena:</span></span> + + <ul> + <li> + <pre id="line1"><span> </span><span><<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">https://pontoon.mozilla.org/pontoon.js</a>"</span><span>></<span class="end-tag">script</span>></span></pre> + </li> + </ul> + </li> + <li>Si tu sitio usa <a href="/es/docs/Web/HTTP/CSP">CSP</a>, por favor, asegurate de que lo siguiente está permitido para el dominio <code>pontoon.mozilla.org</code>: + <ol> + <li>cargar dentro de iframe</li> + <li>cargar a distancia CSS</li> + <li>cargar imágenes remotas</li> + </ol> + </li> + <li>Si tu sitio usa el <a href="/es/docs/Web/HTTP/Headers/X-Frame-Options">X-Frame-Options</a> Encabezado, asegurate que la carga dentro del iframe esté permitida para el dominio <code>pontoon.mozilla.org</code>.</li> + <li>Asegurate de que tu sitio sea compatible con HTTPS. Es gratis, automatizado y abierto. <a href="https://letsencrypt.org/">Vamos a encriptar</a>!</li> +</ol> + +<h2 id="C._Agrega_tu_proyecto_a_Pontoon">C. Agrega tu proyecto a Pontoon</h2> + +<p>Tu proyecto ahora está listo para ser configurado en Pontoon. Por favor presenta un error en <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Localization%20Infrastructure%20and%20Tools&component=Administration%20%2F%20Setup">Infraestructura de localización y herramientas :: Administración / Configuración</a> y proporciona la siguiente información:</p> + +<ul> + <li>Nombre del proyecto</li> + <li>URL de repositorio</li> + <li>Lista de configuraciones regionales solicitadas</li> + <li>URL del sitio web, incluidas todas las URL de las subpáginas (solo si se usa la localización in-page)</li> +</ul> + +<p>Para más detalles, por favor ponte en contacto con el <a href="mailto:pontoon-team@mozilla.com">Equipo de gestión de proyectos.</a></p> diff --git a/files/es/mozilla/index.html b/files/es/mozilla/index.html new file mode 100644 index 0000000000..01b354fbc0 --- /dev/null +++ b/files/es/mozilla/index.html @@ -0,0 +1,6 @@ +--- +title: Mozilla +slug: Mozilla +translation_of: Mozilla +--- +<p>Esta página fue auto-generada ya que un usuario creó una sub-página a esta página.</p> diff --git a/files/es/mozilla/instantbird/index.html b/files/es/mozilla/instantbird/index.html new file mode 100644 index 0000000000..2a3d2a931d --- /dev/null +++ b/files/es/mozilla/instantbird/index.html @@ -0,0 +1,58 @@ +--- +title: Instantbird +slug: Mozilla/Instantbird +translation_of: Mozilla/Instantbird +--- +<p><span class="seoSummary"><strong>Instantbird</strong> es una aplicación de mensajería con un estrecho vinculo con Mozilla. Estas páginas sirven como documentación de Instantbird y también proveen enlaces a la documentación acerca del backend <a href="/en-US/docs/Chat_Core">Chat Core</a> que es utilizado también por <a href="/es/docs/Mozilla/Thunderbird">Thunderbird</a>.</span></p> + +<p>Instabirs está construido sobre la misma plataforma técnica que <a href="/es/docs/Mozilla/Firefox">Firefox</a>. Originalmente propuesto como un porjecto del Google Summer of Code para crear una interfaz XUL al rededor de libpurple (el backend de Pidgin). Instabird no fue aceptado, pero inicio de cualquier modo en 2007, desde entonces ha crecido más allá de ser un simple frontend para libpurple hasta tener protocolos propios.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentación</h2> + + <dl> + <dt><a href="/en-US/docs/Simple_Instantbird_build" title="Simple Thunderbird build">Construyendo Instabird</a></dt> + <dd>Información acerca de cómo construir Instabird a partir del repositorio <a href="/en-US/docs/comm-central" title="comm-central">comm-central</a>.</dd> + <dt><span class="seoSummary"><a href="/en-US/docs/Chat_Core">Chat Core</a></span></dt> + <dd><span class="seoSummary">El código backend, incluyendo amplia documentación sobre </span><a href="/en-US/docs/Chat_Core/Protocols" title="MailNews_Protocols">protocolos de chat</a> ({{ Interface("prplIProtocol") }} y amigos).</dd> + <dt><a href="/en-US/docs/Chat_Core/Message_Styles" title="DB_Views_(message_lists)">Estilos de mensajes</a></dt> + <dd>Información acerca de aplicar temas a los mensajes mostrados.</dd> + <dt><a href="/en-US/docs/Chat_core/Keyboard_shortcuts">Atajos de teclado</a></dt> + <dd>Lista de atajos de teclado</dd> + <dt> + <h2 id="Links_útiles">Links útiles</h2> + </dt> + <dt><a href="http://ftp.instantbird.com/instantbird/nightly/latest-trunk/">Nightly builds más recientes</a></dt> + <dd>Estos son generalmente estables, pero espere que algo se rompa de vez en cuando y ocasione <a href="https://bugzilla.mozilla.org/" title="Instantbird:Bugzilla">bugs</a>.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/Instantbird" title="tag/Thunderbird">Ver todos...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Comunidad</h2> + + <ul> + <li><a class="link-irc" href="irc://irc.mozilla.org/instantbird">#instantbird en irc.mozilla.org</a> (para usuarios y desarrolladores)</li> + <li>El soporte es manejado por la lista de correo support-instabird o en IRC: {{ DiscussionList("support-instantbird", "mozilla.support.instantbird") }}</li> + <li>Las preguntas sobre extensiones pueden ser comentadas en el grupo dev-chat o en IRC: {{ DiscussionList("dev-chat", "mozilla.dev.chat") }}</li> + <li>una lista de todos los <a class="external external-icon" href="https://wiki.mozilla.org/Instantbird/CommunicationChannels" title="Thunderbird communication channels">Instantbird communication channels</a></li> + </ul> + + <h2 class="Tools" id="Tools" name="Tools">Herramientas</h2> + + <ul> + <li><a href="/es/docs/DOM_Inspector" title="DOM_Inspector">Inspector de DOM</a></li> + </ul> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Temas relacionados</h2> + + <ul> + <li><a href="/es/docs/Extensions" title="Extensions">Extensiones</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/es/mozilla/javascript_code_modules/index.html b/files/es/mozilla/javascript_code_modules/index.html new file mode 100644 index 0000000000..2099b4ca62 --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/index.html @@ -0,0 +1,146 @@ +--- +title: JavaScript code modules +slug: Mozilla/JavaScript_code_modules +tags: + - Add-ons + - Extensions + - JavaScript + - Modules + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/JavaScript_code_modules +--- +<div> + {{gecko_minversion_header("1.9")}}</div> +<p>JavaScript code modules let multiple privileged JavaScript scopes share code. For example, a module could be used by Firefox itself as well as by extensions, in order to avoid code duplication.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="General_topics">General topics</h2> + <dl> + <dt> + <a href="/en-US/docs/JavaScript_code_modules/Using" title="./Using">Using JavaScript code modules</a></dt> + <dd> + An introduction to how to use JavaScript code modules.</dd> + <dt> + <a href="/en-US/docs/Components.utils.import" title="Components.utils.import">Component.utils.import</a></dt> + <dd> + How to import a JavaScript code module.</dd> + <dt> + <a href="/en-US/docs/Components.utils.unload" title="Components.utils.unload">Component.utils.unload</a> {{gecko_minversion_inline("7.0")}}</dt> + <dd> + How to unload a JavaScript code module.</dd> + <dt> + <a href="/en-US/docs/Code_snippets/Modules" title="Code_snippets/Modules">Code snippets: Modules</a></dt> + <dd> + Examples of how to use code modules.</dd> + <dt> + <a class="external" href="http://wiki.mozilla.org/Labs/JS_Modules">Mozilla Labs JS Modules</a></dt> + <dd> + This page features a list of JS modules, along with download links and documentation, that extension developers can use in their code.</dd> + </dl> + <dl> + </dl> + </td> + <td> + <h2 id="Standard_code_modules">Standard code modules</h2> + <dl> + <dt> + <a href="/en-US/docs/Addons/Add-on_Manager" title="Addons/Add-on_Manager">AddonManager.jsm</a> {{gecko_minversion_inline("2.0")}}</dt> + <dd> + Interface to install, manage, and uninstall add-ons.</dd> + <dt> + <a href="/en-US/docs/Addons/Add-on_Repository" title="Addons/Add-on Repository">AddonRepository.jsm</a> {{gecko_minversion_inline("2.0")}}</dt> + <dd> + Allows searching of the add-ons repository.</dd> + <dt> + <a href="/en-US/docs/Mozilla/js-ctypes" title="./ctypes.jsm">ctypes.jsm</a> {{fx_minversion_inline("3.6")}}</dt> + <dd> + Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/DeferredTask.jsm" title="./DeferredTask.jsm">DeferredTask.jsm</a> {{gecko_minversion_inline("18.0")}}</dt> + <dd> + Run a task after a delay.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Dict.jsm" title="./Dict.jsm">Dict.jsm</a> {{gecko_minversion_inline("5.0")}}</dt> + <dd> + Provides an API for key/value pair dictionaries.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/DownloadLastDir.jsm" title="./DownloadLastDir.jsm">DownloadLastDir.jsm</a> {{gecko_minversion_inline("2.0")}}</dt> + <dd> + Provides the path to the directory into which the last download occurred.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Downloads.jsm" title="./Downloads.jsm">Downloads.jsm</a> {{gecko_minversion_inline("23.0")}}</dt> + <dd> + Provides a single entry point to interact with the downloading capabilities of the platform.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/FileUtils.jsm" title="./FileUtils.jsm"><span style="font-weight: bold;">FileUtils.jsm</span></a> {{gecko_minversion_inline("1.9.2")}}</dt> + <dd> + Provides helpers for dealing with files.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Geometry.jsm" title="./Geometry.jsm">Geometry.jsm</a> {{gecko_minversion_inline("2.0")}}</dt> + <dd> + Provides routines for performing basic geometric operations on points and rectangles.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/ISO8601DateUtils.jsm" title="./ISO8601DateUtils.jsm">ISO8601DateUtils.jsm</a></dt> + <dd> + Provides routines to convert between JavaScript <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/ Reference/Global Objects/Date"><code>Date</code></a> objects and ISO 8601 date strings.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/NetUtil.jsm" title="./NetUtil.jsm"><span style="font-weight: bold;">NetUtil.jsm</span></a></dt> + <dd> + Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/openLocationLastURL.jsm" title="./openLocationLastURL.jsm">openLocationLastURL.jsm</a> {{gecko_minversion_inline("1.9.1.4")}}</dt> + <dd> + Provides access to the last URL opened using the "Open Location" option in the File menu.</dd> + <dt> + <a href="/en-US/docs/JavaScript_OS.File" title="/en-US/docs/JavaScript_OS.File">osfile.jsm</a> {{gecko_minversion_inline("16.0")}}</dt> + <dd> + JavaScript module <code>OS.File</code> contains primitives for manipulating files</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/PerfMeasurement.jsm" title="./PerfMeasurement.jsm">PerfMeasurement.jsm</a> {{fx_minversion_inline("4.0")}}</dt> + <dd> + Provides access to low-level hardware and OS performance measurement tools.</dd> + <dt> + <a href="/en-US/docs/Localization_and_Plurals" title="Localization and Plurals">PluralForm.jsm</a></dt> + <dd> + Provides an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/PopupNotifications.jsm" title="./PopupNotifications.jsm">PopupNotifications.jsm</a> {{gecko_minversion_inline("2.0")}}</dt> + <dd> + Provides an easy way to present non-modal notifications to users.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm" title="./Promise.jsm">Promise.jsm</a> {{gecko_minversion_inline("25.0")}}</dt> + <dd> + Implements the <a class="external" href="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md" title="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md">Promises/A+</a> proposal as known in April 2013.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm" title="./Services.jsm">Services.jsm</a> {{gecko_minversion_inline("2.0")}}</dt> + <dd> + Provides getters for conveniently obtaining access to commonly-used services.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/source-editor.jsm" title="./source-editor.jsm">source-editor.jsm</a> {{fx_minversion_inline("11.0")}}</dt> + <dd> + The Source Editor is used by developer tools such as the Style Editor; this interface implements the editor and lets you interact with it.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Sqlite.jsm" title="./Sqlite.jsm">Sqlite.jsm</a> {{gecko_minversion_inline("20.0")}}</dt> + <dd> + A Promise-based API to {{ interface("mozIStorage") }}/SQLite.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Task.jsm" title="./Task.jsm">Task.jsm</a> {{gecko_minversion_inline("17.0")}}</dt> + <dd> + Implements a subset of <a class="external" href="http://taskjs.org/" title="http://taskjs.org/">Task.js</a> to make sequential, asynchronous operations simple, using the power of JavaScript's <code>yield</code> operator.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm </a>{{gecko_minversion_inline("22.0")}}</dt> + <dd> + A pure JS implementation of <code>window.setTimeout</code>.</dd> + <dt> + <a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm" title="./XPCOMUtils.jsm">XPCOMUtils.jsm</a></dt> + <dd> + Contains utilities for JavaScript components loaded by the JS component loader.</dd> + </dl> + </td> + </tr> + </tbody> +</table> diff --git a/files/es/mozilla/javascript_code_modules/promise.jsm/index.html b/files/es/mozilla/javascript_code_modules/promise.jsm/index.html new file mode 100644 index 0000000000..58806c841b --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/promise.jsm/index.html @@ -0,0 +1,134 @@ +--- +title: Promise.jsm +slug: Mozilla/JavaScript_code_modules/Promise.jsm +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/JavaScript_code_modules/Promise.jsm +--- +<p>{{ gecko_minversion_header("25") }}</p> + +<p>The <code>Promise.jsm</code> JavaScript code module implements the <a href="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md" title="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md">Promises/A+</a> proposal as known in April 2013. To use it, you first need to import the code module into your JavaScript scope:</p> + +<pre>Components.utils.import("resource://gre/modules/Promise.jsm"); +</pre> + +<div class="note"> +<p><strong>Note:</strong> A preliminary promise module is also available starting from Gecko 17, though it didn't conform to the Promises/A+ proposal until Gecko 25:</p> + +<pre>Components.utils.import("<strike>resource://gre/modules/commonjs/promise/core.js</strike>"); // Gecko 17 to 20 +Components.utils.import("<strike>resource://gre/modules/commonjs/sdk/core/promise.js</strike>"); // Gecko 21 to 24 +</pre> + +<p>This implementation also includes helper functions that are specific to the Add-on SDK. While you may still import this module from the above paths, the recommended way for loading it is through the <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/toolkit/loader.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/toolkit/loader.html">Add-on SDK loader</a>.</p> +</div> + +<h2 id="Introduction">Introduction</h2> + +<p>For an introduction to promises, you may start from the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/core_promise">Add-on SDK documentation</a>, keeping in mind that only the core subset is implemented in this module.</p> + +<p><u>A promise is an object representing a value that may not be available yet</u>. Internally, a promise can be in one of three states:</p> + +<ul> + <li><strong>Pending</strong>, when the final value is not available yet. This is the only state that may transition to one of the other two states.</li> + <li><strong>Fulfilled</strong>, when and if the final value becomes available. A <em>fulfillment value</em> becomes permanently associated with the promise. This may be any value, including <code>undefined</code>.</li> + <li><strong>Rejected</strong>, if an error prevented the final value from being determined. A <em>rejection reason</em> becomes permanently associated with the promise. This may be any value, including <code>undefined</code>, though it is generally an <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> object, like in exception handling.</li> +</ul> + +<p>A reference to an existing promise may be received by different means, for example as the return value of a call into an asynchronous API. In this case, the state of the promise can be observed but not directly controlled.</p> + +<p>To observe the state of a promise, its <code>then</code> method must be used. This method registers callback functions that are called as soon as the promise is either fulfilled or rejected. The method returns a new promise, that in turn is fulfilled or rejected depending on the state of the original promise and on the behavior of the callbacks. For example, unhandled exceptions in the callbacks cause the new promise to be rejected, even if the original promise is fulfilled. See the documentation of the <code>then</code> method for details.</p> + +<p>Promises may also be created using the <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor" title="/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor"><code>new Promise()</code></a> constructor.</p> + +<h2 id="Method_overview">Method overview</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred">Deferred</a> <a href="#defer()">defer</a>();</code> {{ obsolete_inline("30") }}</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise">Promise</a> <a href="#resolve()">resolve</a>([optional] aValue);</code></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise">Promise</a> <a href="#reject()">reject</a>([optional] aReason);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Methods">Methods</h2> + +<h3 id="defer()">defer()</h3> + +<p>Creates a new pending promise and provides methods to resolve or reject it.</p> + +<pre>Deferred defer(); {{ obsolete_inline("30") }} +</pre> + +<h6 id="Parameters">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value">Return value</h6> + +<p>A new object, containing the new promise in the <code>promise</code> property, and the methods to change its state in the <code>resolve</code> and <code>reject</code> properties. See the <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred"><code>Deferred</code></a> documentation for details.</p> + +<h3 id="resolve()">resolve()</h3> + +<p>Creates a new promise fulfilled with the specified value, or propagates the state of an existing promise.</p> + +<pre>Promise resolve( + aValue +); +</pre> + +<h6 id="Parameters_2">Parameters</h6> + +<dl> + <dt><code>aValue</code> {{ optional_inline() }}</dt> + <dd>If this value is not a promise, including <code>undefined</code>, it becomes the fulfillment value of the returned promise. If this value is a promise, then the returned promise will be resolved with the value, i.e. it will eventually assume the same state as the provided promise.</dd> +</dl> + +<h6 id="Return_value_2">Return value</h6> + +<p>A promise that can be pending, fulfilled, or rejected.</p> + +<h3 id="reject()">reject()</h3> + +<p>Creates a new promise rejected with the specified reason.</p> + +<pre>Promise reject( + aReason +); +</pre> + +<h6 id="Parameters_3">Parameters</h6> + +<dl> + <dt><code>aReason</code> {{ optional_inline() }}</dt> + <dd> + <p>The rejection reason for the returned promise. Although the reason can be <code>undefined</code>, it is generally an <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> object, like in exception handling.</p> + + <div class="note"><strong>Note:</strong> This argument should not be a promise. Specifying a rejected promise would make the rejection reason equal to the rejected promise itself, and not its rejection reason.</div> + </dd> +</dl> + +<h6 id="Return_value_3">Return value</h6> + +<p>A rejected promise.</p> + +<h2 id="Examples">Examples</h2> + +<p>See the <a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">examples</a> page.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise">Promise</a></li> + <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred">Deferred</a></li> + <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">Examples</a></li> + <li><a class="internal" href="/en-US/docs/JavaScript_code_modules/Using" title="en-US/docs/JavaScript code modules/Using JavaScript code modules">Using JavaScript code modules</a></li> + <li><a class="internal" href="/en-US/docs/Mozilla/JavaScript_code_modules" title="en-US/docs/Mozilla/JavaScript code modules">JavaScript code modules</a></li> + <li><a class="internal" href="/en-US/docs/Components.utils.import" title="en-US/docs/Components.utils.import"><code>Components.utils.import</code></a></li> +</ul> diff --git a/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html b/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html new file mode 100644 index 0000000000..d92d392972 --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html @@ -0,0 +1,218 @@ +--- +title: Promise +slug: Mozilla/JavaScript_code_modules/Promise.jsm/Promise +tags: + - Firefox + - Módulos + - Promise + - Promise.jsm + - Referencia +translation_of: Mozilla/JavaScript_code_modules/Promise.jsm/Promise +--- +<p><strong>Un objeto <code>Promise</code> representa un valor que puede no estar disponible aún.</strong></p> + +<p>Una referencia a un <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> existente puede ser recibida por diferentes medios, por ejemplo como el valor de retorno de una llamada a una API asíncrona. Una vez que tenga una referencia al objeto <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, puede llamar a su método <a href="#then" title="#then()"><code>then()</code></a> para ejecutar una acción cuando el valor esté disponible o cuando ocurra un error.</p> + +<p>Los objetos <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> también pueden ser creados usando el constructor <a href="#constructor" title="#Constructor"><code>new Promise()</code></a>. No necesita importar el módulo <code>Promise.jsm</code> para usar un objeto <code>Promise</code> del que ya se tiene una referencia.</p> + +<p>Internamente, <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> puede encontrarse en uno de tres estados:</p> + +<ul> + <li><strong>Pending</strong>, cuando el valor final no está disponible aún. Este es el único estado que puede cambiar a uno de los otros dos estados.</li> + <li><strong>Fulfilled</strong>, cuando y si el valor final esté disponible. Un valor <em>fulfillment</em> viene asociado permanentemente con <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>. Este puede ser cualquiera, incluyendo <code>undefined</code>.</li> + <li><strong>Rejected</strong>, si un error impidió que el valor final se determine. Una valor <em>rejection</em> viene asociado permanentemente con <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>. Este puede ser cualquier valor, incluyendo <code style="font-style: normal;">undefined</code>, aunque por lo general es un objeto <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a>, como en el manejo de excepciones.</li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> siempre debería controlar, enviar o reportar errores (rejection reasons). Si ve el mensaje "<strong>A promise chain failed to handle a rejection</strong>", es posible que haya algo que corregir en el código. Vea <a href="#gestion-errores" title="#Handling_errors_and_common_pitfalls">manejo de errores y problemas comunes</a> a continuación.</p> +</div> + +<h2 id="Convenciones_de_la_documentación" style="line-height: 30px; font-size: 2.14285714285714rem;">Convenciones de la documentación</h2> + +<p>En la documentación, el tipo de valor <em>fulfillment</em> es especificado normalmente entre corchetes angulados. Por ejemplo, la función <code><a href="/en-US/docs/JavaScript_OS.File/OS.File_for_the_main_thread#OS.File.exists()" title="/en-US/docs/JavaScript_OS.File/OS.File_for_the_main_thread#OS.File.exists()">OS.File.exists</a></code> retorna un objeto <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> que eventualmente cumpla con un boolean:</p> + +<pre style="font-size: 14px;">Promise<boolean> exists(string path); +</pre> + +<p>El motivo de rechazo (<em>rejection reason</em>) podrá especificarse por separado en la documentación de la función, y se considera que es un objeto <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error">Error</a></code> a menos que se especifique lo contrario.</p> + +<h2 id="Resumen_del_método" style="line-height: 30px; font-size: 2.14285714285714rem;">Resumen del método</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>Promise <a href="#then">then</a>([opcional] <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a> onFulfill, [</code><span style="font-family: consolas,monaco,andale mono,monospace;">opcional</span><code>] <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a> onReject</code><code>);</code></td> + </tr> + <tr> + <td><code>Promise <a href="#catch">catch</a>([</code><span style="font-family: consolas,monaco,andale mono,monospace;">opcional</span><code>] <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a> onReject);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Constructor" style="line-height: 30px; font-size: 2.14285714285714rem;"><a id="constructor" name="constructor">Constructor</a></h2> + +<p>Crea un nuevo objeto <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, inicialmente con estado pendiente (<em>pending</em>) y proporciona referencias a las funciones de resolución que se puedan utilizar para cambiar su estado.</p> + +<pre style="font-size: 14px;">new Promise(executor); +</pre> + +<h3 id="Parámetros" style="line-height: 24px; font-size: 1.71428571428571rem;">Parámetros</h3> + +<dl> + <dt><code>executor</code></dt> + <dd> + <p>Esta función se invoca inmediatamente con la resolución de funciones como sus dos argumentos:</p> + + <pre>executor(resolve, reject); +</pre> + + <p>El constructor no retornará valor hasta que el <code>executor</code> haya terminado. Las funciones de resolución pueden ser usadas en cualquier momento, antes o despues que <code>executor</code> haya terminado, para controlar el estado final de P<code>romise</code>. Si <span style="font-family: consolas,monaco,andale mono,monospace;">executor </span>lanza una excepción, su valor será pasado a la función de resolución <code>reject</code> .</p> + </dd> +</dl> + +<h3 id="Funciones_de_resolución">Funciones de resolución</h3> + +<h4 id="resolve()">resolve()</h4> + +<p>Cumple con el <code>Promise</code> asociado con el valor especificado, o propaga el estado de un objeto <code>Promise</code> existente. Si el <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> asociado ya ha sido resuelto, ya sea a un valor, un rechazo, o de otro <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, este método no hace nada.</p> + +<div class="note"><strong>Nota:</strong> llamar a este método con un Promise pendiente con el argumento <code>aValue</code>, y luego llamándolo con otro valor antes de que Promise se haya cumplido (fulfilled) o rechazado (rejected), no tendrá efecto la segunda vez, ya que el objeto Promise asociado ya está resuelto al objeto Promise pendiente.</div> + +<pre>void resolve( + aValue +); +</pre> + +<h6 id="Parameters">Parameters</h6> + +<dl> + <dt><code>aValue</code> <span class="inlineIndicator optional optionalInline">Opcional</span></dt> + <dd>Si este valor no es un <code>Promise</code>, incluyendo <code>undefined</code>, se convierte en el valor de cumplimiento del <code>Promise</code> asociado. Si este valor es un objeto <code>Promise</code>, el Promise asociado será resuelto con el promise pasado, y seguirá el estado como la promesa proporcionada (incluyendo cualquier transición futura).</dd> +</dl> + +<h4 id="reject()">reject()</h4> + +<p>Rechaza el <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> asociada con la razón especificada. Si el <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span> ya se ha resuelto, ya sea a un valor, un rechazo, o de otro <span style="font-family: consolas,monaco,andale mono,monospace;">Promise</span>, este método no hace nada.</p> + +<pre>void reject( + aReason +); +</pre> + +<h6 id="Parameters_2">Parameters</h6> + +<dl> + <dt><code>aReason</code> <span class="inlineIndicator optional optionalInline">Opcional</span></dt> + <dd> + <p>El motivo de rechazo de la promesa asociada. Aunque la razón puede ser <code>undefined</code>, por lo general es un objeto de <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Error" title="/en-US/docs/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a>, como en el manejo de excepciones.</p> + + <div class="note"><strong>Nota:</strong> este argumento no debería ser un Promise. Especificar un Promise rechazado haría el motivo de rechazo igual al Promise rechazado en sí, y no a su razón de rechazo.</div> + </dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<h3 id="then()"><a id="then" name="then">then()</a></h3> + +<p>Llama a una de las funciones previstas tan pronto como esta Promise se haya, bien cumplido, o bien rechazado. Se retorna un nuevo promise, cuyo estado evoluciona dependiendo del promise y la funcion de devolución de llamada <em>(callbacks)</em> proporcionados.</p> + +<p>La devolución de llamada apropiada siempre se invoca después de devolver este método, incluso si esta Promise se ha cumplido o rechazado. Pude lamar al método <code>then()</code> muchas veces para el mismo Promise, y las funciones de devolución de llamada <em>(callbacks)</em> serán invocadas en el mismo orden en el cual fueron registradas.</p> + +<div class="warning"> +<p><strong>Advertencia: </strong>si la funcion de llamada <code>onFulfill</code> lanza una axcepción, <code>onReject</code> no se invocará y la excepción no será capturada, se muestra en la consola (verá una error de cadena promesa fallida). Puede registrar una función de llamada de rechazo en el promise retornado en su lugar (usando catch() o then()), para procesar cualquier excepción ocurrida en cualquiera de las devoluciones de llamada registradas para este promise.</p> +</div> + +<div class="note"><strong>Nota:</strong> cuando llama al método <code>then()</code> multiples veces para el mismo promise, las funciones de devolución de llamada (callbacks) son siempre ejecutadas inmediatamente. Por ejemplo, si una acepción ocurre en un callback, no afecta al callback posterior. El comportamiento del callback sólo afecta al promise retornado por el método <code>then()</code> con el cual el callback fue registrado, esto es en realidad un promise diferente para cada invocación del método.</div> + +<pre>Promise then( + Function onFulfill, + Function onReject +); +</pre> + +<h6 id="Parámetros_2">Parámetros</h6> + +<dl> + <dt><code>onFulfill</code> {{optional_inline()}}</dt> + <dd>Si el promise está cumplido <em>(fulfilled)</em>, esta funciń es invokada con el valor de cumplimiento del promise como su único argumento, y elo resultado de la función determina el estado del nuevo promise retornado por el método <code>then()</code>. En caso este parámetro (usualmente <code>null</code>), el nuevo promise retornado por el método <code>then()</code> es cumplido <em>(fulfilled)</em> con el mismo valor del promise original.</dd> + <dt><code>onReject</code> {{optional_inline()}}</dt> + <dd> + <p>Si el promise es rechazado <em>(rejected)</em>, esta función es invocada con con el motivo de rechazo del promise como su único argumento, y el resultado del la función determina el nuevo estado del promise retornado por el método<a href="#then"> then()</a>. En caso este parametro no es un función (Por lo general <code>undefined</code>), el nuevo promise retornado por el método <a href="#then">then()</a> es rechazado <em>(rejected)</em> con la misma razón que el promise original.</p> + </dd> +</dl> + +<h6 id="Valor_de_retorno">Valor de retorno</h6> + +<p>Un nuevo promise que es initialmente pendiente, luego asume un estado que depende del resultado de la función de devolución de llamada <em>(callback)</em>:</p> + +<ul> + <li>Si el callback retorna un valor que nos es un promise, incluyendo <code>undefined</code>, el nuevo promise es cumplido <em>(fulfilled)</em> con este valor de cumplimiento, incluso si el promise original fue rechazado <em>(rejected)</em>.</li> + <li>Si el callback lanza una excepción, el nuevo promise es rechazado <em>(rejected) </em>con la excepción como motivo de rechazo, incluso si el promise original fue cumplida <em>(fulfilled)</em>.</li> + <li>Si el callback retorna un promise, el nuevo promise eventualmente asumirá el mismo estado del promise retornado.</li> +</ul> + +<h3 id="catch()"><a id="catch" name="catch">catch()</a></h3> + +<p>Equivalente a <a href="#then">then()</a> con un valor <code>undefined</code> para el parámetro <code>onFulfill</code>. Si encadena <code>then( onFulfill ).catch( onReject )</code>, las excepciones lanzadas en <code>onFulfill</code> serán capturadas y pasadas a <code>onReject</code>, que no es el caso cuando pasa <code>onReject</code> a <a href="#then">then()</a>.</p> + +<pre>Promise catch( + Function onReject +); +</pre> + +<p>Las siguientes llamadas son por lo tanto idénticas:</p> + +<pre>p.then(undefined, logError); +p.catch(logError); +</pre> + +<h2 id="Depuración">Depuración</h2> + +<p>Por diseño, el estado instantáneo y el valor de un Promise no pueden ser inspeccionados de forma sincrónica, sin llamar al método <code><a href="#then" title="#then()">then()</a></code>.</p> + +<p>PAra ayudar con la depuración, sólo cuando inspeccione un objeto <code>Promise</code> manualmente, puede ver información con propiedades especialesque son accesibles desde código (esto, actualmente, está implementado se implementa mediante la aleatorización del nombre de la propiedad, por la falta de un lenguaje más sofisticado o soporte depurador).</p> + +<p>Estas propiedades inspeccionables de código inaccesible son:</p> + +<ul> + <li><code><strong><span>{</span>{privado:status}}</strong></code>: <strong>0</strong> para pendiente, <strong>1</strong> para cumplido, o <strong>2</strong> para rechazado.</li> + <li><code><strong><span>{</span>{</strong></code><strong style="font-family: consolas,monaco,andale mono,monospace;">privado</strong><code><strong>:value}}</strong></code>: Valor de cumplimiento o razon de rechazo, sólo para Promises cumplidos o rechazados.</li> + <li><code><strong><span>{</span>{</strong></code><strong style="font-family: consolas,monaco,andale mono,monospace;">privado</strong><code><strong>:handlers}}</strong></code>: Array de objetos de las referencias a funciones registradas por el método <code><a href="#then" title="#then()">then()</a></code>, sólo para Promises pendientes.</li> +</ul> + +<p style="text-align: center;"><img alt="Promise properties are visible in the debugger." src="https://mdn.mozillademos.org/files/6471/Promise-Debug-1.png" style="border-style: solid; border-width: 2px; height: 482px; margin-bottom: 15px; margin-top: 15px; width: 403px;"><img alt="Promise handlers can be watched from the Console." src="https://mdn.mozillademos.org/files/6473/Promise-Debug-2.png" style="border-style: solid; border-width: 2px; height: 161px; width: 977px;"></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ver la página de <a href="/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">ejemplos</a>.</p> + +<h2 id="Gestión_de_errores_y_problemas_comunes"><a name="gestion-errores">Gestión de errores y problemas comunes</a></h2> + +<p>Debe reportar errores no controlados, a menos que de el relevo de Promise a una función de llamada u otra ruta de código que controlará el error.</p> + +<pre class="brush: js">// ###### ERROR: Silenciando cualquier rechazo notificado por "OS.File.Exists". +OS.File.exists(path).then(exists => { if (exists) myRead(path); }); + +// ###### ERROR: Silenciando cualquier excepción planteado por "myRead". +OS.File.exists(path).then(exists => { if (exists) myRead(path); }, Components.utils.reportError); + +// CORRECTO (por ejemplo, podria reportar la excepción "myRead ino está definido") +OS.File.exists(path).then(exists => { if (exists) myRead(path); }) + .catch(Components.utils.reportError); + +// CORRECTO (La función retorna un Promise, y el caller se encargará del rechazo) +function myReadIfExists(path) +{ + return OS.File.exists(path).then(exists => { if (exists) myRead(path); }); +}</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm">Promise.jsm</a></li> + <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred" title="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred">Deferred</a></li> + <li><a href="/Mozilla/JavaScript_code_modules/Promise.jsm/Examples">Examples</a></li> + <li><a href="/en-US/docs/JavaScript_OS.File" title="/en-US/docs/JavaScript_OS.File">JavaScript OS.File</a></li> + <li><a href="http://kryogenix.org/days/2013/12/12/promises-promises">Promises, Promises</a>: a useful simple explanation by Stuart Langridge</li> + <li><a href="http://dom.spec.whatwg.org/#promises">WHATWG Living Standard</a></li> +</ul> diff --git a/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html b/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html new file mode 100644 index 0000000000..1ec7e5477f --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html @@ -0,0 +1,1549 @@ +--- +title: source-editor.jsm +slug: Mozilla/JavaScript_code_modules/source-editor.jsm +translation_of: Mozilla/JavaScript_code_modules/source-editor.jsm +--- +<div class="warning"> +<p>This component has been removed from the platform in Firefox 28.</p> +</div> + +<p>{{ fx_minversion_header("11.0") }}</p> + +<p>The <code>source-editor.jsm</code> JavaScript code module implements an editor specifically tailored for editing source code; its primary purpose is to provide support for web developer tools to display and edit web site code. The editor provided is <a class="external" href="http://www.eclipse.org/orion" title="http://www.eclipse.org/orion">Eclipse Orion</a>.</p> + +<p>To use it, you first need to import the code module into your JavaScript scope:</p> + +<pre class="eval"><span class="nowiki">Components.utils.import("resource:///modules/source-editor.jsm");</span> +</pre> + +<div class="warning"><strong>Warning:</strong> Much of the functionality of the source editor is implemented by a secondary code module (by default, <code>source-editor-orion.jsm</code>). You <strong>must not</strong> directly import that code module; it is essentially an implementation detail. Its functionality is all exposed through <code>source-editor.jsm</code>.</div> + +<h2 id="Method_overview">Method overview</h2> + +<h3 id="Initialization_and_destruction">Initialization and destruction</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#destroy()" title="en/JavaScript_code_modules/source-editor.jsm#destroy()">destroy</a>();</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#init()" title="en/JavaScript_code_modules/source-editor.jsm#init()">init</a>({{ domxref("Element") }} aElement, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a> aConfig, <a href="/en/JavaScript/Reference/Global_Objects/Function" title="/en/JavaScript/Reference/Global_Objects/Function">Function</a> aCallback);</code></td> + </tr> + </tbody> +</table> + +<h3 id="Search_operations">Search operations</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#find()" title="en/JavaScript_code_modules/source-editor.jsm#find()">find</a>(<a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a> aString, [optional] <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a> options);</code> {{ fx_minversion_inline("12.0") }}</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#findNext()" title="en/JavaScript_code_modules/source-editor.jsm#findNext()">findNext</a>(Boolean aWrap);</code> {{ fx_minversion_inline("12.0") }}</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#findPrevious()" title="en/JavaScript_code_modules/source-editor.jsm#findPrevious()">findPrevious</a>(Boolean aWrap);</code> {{ fx_minversion_inline("12.0") }}</td> + </tr> + </tbody> +</table> + +<h3 id="Event_management">Event management</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#addEventListener()" title="en/JavaScript_code_modules/source-editor.jsm#addEventListener()">addEventListener</a>(<a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a> aEventType, <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global_Objects/Function">Function</a> aCallback);</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#removeEventListener()" title="en/JavaScript_code_modules/source-editor.jsm#removeEventListener()">removeEventListener</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> aEventType, </code><code><a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global_Objects/Function">Function</a></code><code> aCallback);</code></td> + </tr> + </tbody> +</table> + +<h3 id="Undo_stack_operations">Undo stack operations</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#canRedo()" title="en/JavaScript_code_modules/source-editor.jsm#canRedo()">canRedo</a>();</code></td> + </tr> + <tr> + <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#canUndo()" title="en/JavaScript_code_modules/source-editor.jsm#canUndo()">canUndo</a>();</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#endCompoundChange()" title="en/JavaScript_code_modules/source-editor.jsm#endCompoundChange()">endCompoundChange</a>();</code></td> + </tr> + <tr> + <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#redo()" title="en/JavaScript_code_modules/source-editor.jsm#redo()">redo</a>();</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#resetUndo()" title="en/JavaScript_code_modules/source-editor.jsm#resetUndo()">resetUndo</a>();</code> {{ gecko_minversion_inline("12.0") }}</td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#startCompoundChange()" title="en/JavaScript_code_modules/source-editor.jsm#startCompoundChange()">startCompoundChange</a>();</code></td> + </tr> + <tr> + <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#undo()" title="en/JavaScript_code_modules/source-editor.jsm#undo()">undo</a>();</code></td> + </tr> + </tbody> +</table> + +<h3 id="Display_management_operations">Display management operations</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#focus()" title="en/JavaScript_code_modules/source-editor.jsm#focus()">focus</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getTopIndex()" title="en/JavaScript_code_modules/source-editor.jsm#getTopIndex()">getTopIndex</a>();</code></td> + </tr> + <tr> + <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#hasFocus()" title="en/JavaScript_code_modules/source-editor.jsm#hasFocus()">hasFocus</a>();</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setTopIndex()" title="en/JavaScript_code_modules/source-editor.jsm#setTopIndex()">setTopIndex</a>(<a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a> aTopIndex);</code></td> + </tr> + </tbody> +</table> + +<h3 id="Content_management_operations">Content management operations</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getCharCount()" title="en/JavaScript_code_modules/source-editor.jsm#getCharCount()">getCharCount</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getIndentationString()" title="en/JavaScript_code_modules/source-editor.jsm#getIndentationString()">getIndentationString</a>();</code> {{ fx_minversion_inline("13") }}</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineDelimiter()" title="en/JavaScript_code_modules/source-editor.jsm#getLineDelimiter()">getLineDelimiter</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineCount()" title="en/JavaScript_code_modules/source-editor.jsm#getLineCount()">getLineCount</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineEnd()" title="en/JavaScript_code_modules/source-editor.jsm#getLineEnd()">getLineEnd</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> </code><code>aLineIndex</code><code>, Boolean aIncludeDelimiter</code><code>);</code> {{ fx_minversion_inline("14") }}</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getLineStart()" title="en/JavaScript_code_modules/source-editor.jsm#getLineStart()">getLineStart</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> </code><code>aLineIndex);</code> {{ fx_minversion_inline("14") }}</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getMode()" title="en/JavaScript_code_modules/source-editor.jsm#getMode()">getMode</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getText()" title="en/JavaScript_code_modules/source-editor.jsm#getText()">getText</a>([optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aStart, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aEnd);</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getSelectedText()" title="en/JavaScript_code_modules/source-editor.jsm#getSelectedText()">getSelectedText</a>();</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setMode()" title="en/JavaScript_code_modules/source-editor.jsm#setMode()">setMode</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> aMode);</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setText()" title="en/JavaScript_code_modules/source-editor.jsm#setText()">setText</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a> </code><code>aText, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aStart, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aEnd);</code></td> + </tr> + </tbody> +</table> + +<h3 id="Selection_operations">Selection operations</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#dropSelection()" title="en/JavaScript_code_modules/source-editor.jsm#dropSelection()">dropSelection</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getCaretOffset()" title="en/JavaScript_code_modules/source-editor.jsm#getCaretOffset()">getCaretOffset</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getCaretPosition()" title="en/JavaScript_code_modules/source-editor.jsm#getCaretPosition()">getCaretPosition</a>();</code></td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code><code> <a href="/en/JavaScript_code_modules/source-editor.jsm#getSelection()" title="document.getSelection">getSelection</a>();</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setCaretOffset()" title="IA2 Interfaces">setCaretOffset</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aOffset);</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setCaretPosition()" title="en/JavaScript_code_modules/source-editor.jsm#setCaretPosition()">setCaretPosition</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aLine, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aColumn, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aAlign);</code></td> + </tr> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#setSelection()" title="en/JavaScript_code_modules/source-editor.jsm#setSelection()">setSelection</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aStart, </code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aEnd);</code></td> + </tr> + </tbody> +</table> + +<h3 id="Breakpoint_management">Breakpoint management</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="/en/JavaScript_code_modules/source-editor.jsm#addBreakpoint()" title="en/JavaScript_code_modules/source-editor.jsm#addBreakpoint()">addBreakpoint</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aLineIndex, [optional] </code><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code><code> aCondition);</code> {{ fx_minversion_inline("13") }}</td> + </tr> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a> <a href="/en/JavaScript_code_modules/source-editor.jsm#getBreakpoints()" title="en/JavaScript_code_modules/source-editor.jsm#getBreakpoints()">getBreakpoints</a>();</code> {{ fx_minversion_inline("13") }}</td> + </tr> + <tr> + <td><code>Boolean <a href="/en/JavaScript_code_modules/source-editor.jsm#removeBreakpoint()" title="en/JavaScript_code_modules/source-editor.jsm#removeBreakpoint()">removeBreakpoint</a>(</code><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code><code> aLineIndex)</code><code>;</code> {{ fx_minversion_inline("13") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Attribute</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>dirty</code></td> + <td><code>Boolean</code></td> + <td>Set this value to <code>false</code> whenever you save the text; the editor will update it to <code>true</code> when the content is changed. You can then use this value to detect when the contents of the text are different from your most recent save. In addition, when this value changes, the "{{ anch("DirtyChanged") }}" event is sent. {{ gecko_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>editorElement</code></td> + <td>{{ domxref("Element") }}</td> + <td>The element containing the editor. When using the default Orion editor, this is a XUL {{ XULElem("iframe") }} element. <strong>Read only.</strong></td> + </tr> + <tr> + <td><code>lastFind</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a></td> + <td> + <p>An object describing the result of the last find operation performed using the {{ manch("find") }}, {{ manch("findNext") }}, or {{ manch("findPrevious") }} method. <strong>Read only.</strong></p> + + <p>This object has the following properties:</p> + + <table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>str</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code></td> + <td>The last string that was searched for.</td> + </tr> + <tr> + <td><code>index</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>An integer value indicating the result of the most recent find operation; this is the index into the text at which <code>str</code> was found, or -1 if the string wasn't found.</td> + </tr> + <tr> + <td><code>lastFound</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The index of the previous location at which <code>str</code> was found, for multiple find operations (such as {{ manch("find") }} followed by {{ manch("findNext") }}). This can be -1 if the string was never found.</td> + </tr> + <tr> + <td><code>ignoreCase</code></td> + <td><code>Boolean</code></td> + <td><code>true</code> if the search was case sensitive; otherwise <code>false</code>.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>readOnly</code></td> + <td><code>Boolean</code></td> + <td>Set this value to <code>true</code> to make the editor read only, thereby preventing the user from making changes. Set it to <code>false</code> to allow editing.</td> + </tr> + </tbody> +</table> + +<h2 id="Constants">Constants</h2> + +<h3 id="Preference_name_constants">Preference name constants</h3> + +<p>These constants define the names of preferences used by the source editor.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>SourceEditor.PREFS.COMPONENT</code></td> + <td>"devtools.editor.component"</td> + <td>A string indicating the name of the source editor engine to use; this is "orion" by default. The source editor code module loads a module by the name "source-editor-<component>.jsm" and exposes its API as part of the <code>SourceEditor</code> object.</td> + </tr> + <tr> + <td><code>SourceEditor.PREFS.EXPAND_TAB</code></td> + <td>"devtools.editor.expandtab"</td> + <td>A Boolean value that indicates whether or not to automatically expand tabs out to a series of spaces.</td> + </tr> + <tr> + <td><code>SourceEditor.PREFS.TAB_SIZE</code></td> + <td>"devtools.editor.tabsize"</td> + <td>An integer value that specifies the number of spaces per tab.</td> + </tr> + </tbody> +</table> + +<h3 id="Editor_mode_constants">Editor mode constants</h3> + +<p>These constants are used to set the syntax highlighting mode for the editor by calling its {{ manch("setMode") }} method, or in the configuration object when first initializing the editor using its {{ manch("init") }} method.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>SourceEditor.MODES.CSS</code></td> + <td>"css"</td> + <td>Cascading Style Sheet.</td> + </tr> + <tr> + <td><code>SourceEditor.MODES.HTML</code></td> + <td>"html"</td> + <td>HTML document.</td> + </tr> + <tr> + <td><code>SourceEditor.MODES.JAVASCRIPT</code></td> + <td>"js"</td> + <td>JavaScript source code.</td> + </tr> + <tr> + <td><code>SourceEditor.MODES.TEXT</code></td> + <td>"text"</td> + <td>UTF-8 text document.</td> + </tr> + <tr> + <td><code>SourceEditor.MODES.XML</code></td> + <td>"xml"</td> + <td>XML document.</td> + </tr> + </tbody> +</table> + +<h3 id="Theme_constants">Theme constants</h3> + +<p>These constants are used to identify the available themes that can be used by the syntax highlighter. Only one is provided by default at this time.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>SourceEditor.THEMES.MOZILLA</code></td> + <td>"mozilla"</td> + <td>The default Mozilla syntax highlighter theme.</td> + </tr> + </tbody> +</table> + +<h3 id="Configuration_defaults_constants">Configuration defaults constants</h3> + +<p>These constants represent the default values for each of the available configuration options. See {{ anch("The editor configuration object") }} for details on configuring the editor.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.contextMenu</code></td> + <td>"sourceEditorContextMenu"</td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.expandTab</code></td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.highlightCurrentLine</code></td> + <td><code>true</code> {{ fx_minversion_inline("13") }}</td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.initialText</code></td> + <td>""</td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.keys</code></td> + <td><code>null</code></td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.mode</code></td> + <td><code>SourceEditor.MODES.TEXT</code></td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.readOnly</code></td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.showAnnotationRuler</code></td> + <td><code>false</code> {{ fx_minversion_inline("13") }}</td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.showLineNumbers</code></td> + <td><code>false</code> {{ fx_minversion_inline("13") }}</td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.showOverviewRuler</code></td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.tabSize</code></td> + <td>4</td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.theme</code></td> + <td><code>SourceEditor.THEMES.MOZILLA</code></td> + </tr> + <tr> + <td><code>SourceEditor.DEFAULTS.undoLimit</code></td> + <td>200</td> + </tr> + </tbody> +</table> + +<h3 id="Event_name_constants">Event name constants</h3> + +<p>These constants provide the names of the editor events for which you can listen.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.BLUR</code></td> + <td>"{{ anch("Blur") }}"</td> + <td>Fired when the editor loses focus. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.BREAKPOINT_CHANGE</code></td> + <td>"{{ anch("BreakpointChange") }}"</td> + <td>Fired when a new breakpoint is added, or when an existing breakpoint is removed. This happens both when the API is used to make the change or when the UI is used to do it. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.CONTEXT_MENU</code></td> + <td>"{{ anch("ContextMenu") }}"</td> + <td>Fired when the editor's context menu is invoked, but before it's opened.</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.DIRTY_CHANGED</code></td> + <td>"{{ anch("DirtyChanged") }}"</td> + <td>Fired when the dirty state of the editor is changed. The dirty state indicates whether or not there are unsaved changes to the text. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.FOCUS</code></td> + <td>"{{ anch("Focus") }}"</td> + <td>Fired when the editor gains focus. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.MOUSE_MOVE</code></td> + <td>"{{ anch("MouseMove") }}"</td> + <td>Fired when the user moves the mouse over a line annotation. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.MOUSE_OUT</code></td> + <td>"{{ anch("MouseOut") }}"</td> + <td>Fired when the mouse pointer leaves a line annotation. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.MOUSE_OVER</code></td> + <td>"{{ anch("MouseOver") }}"</td> + <td>Fired when the mouse pointer enters a line annotation. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.SELECTION</code></td> + <td>"{{ anch("Selection") }}"</td> + <td>Fired when the current selection in the editor changes.</td> + </tr> + <tr> + <td><code>SourceEditor.EVENTS.TEXT_CHANGED</code></td> + <td>"{{ anch("TextChanged") }}"</td> + <td>Fired when the editor's content changes.</td> + </tr> + </tbody> +</table> + +<h2 id="Methods">Methods</h2> + +<h3 id="addBreakpoint">addBreakpoint</h3> + +<p>Adds a breakpoint to be triggered at a certain line in the code, under an optional condition.</p> + +<div class="note"><strong>Note:</strong> Implementing actual support for debugger features such as breakpoints is up to you. The editor simply tracks their existence and marks them with annotations in the editor.</div> + +<pre>void addBreakpoint( + Number aLineIndex, + [optional] String aCondition +); +</pre> + +<h6 id="Parameters">Parameters</h6> + +<dl> + <dt><code>aLineIndex</code></dt> + <dd>The 0-based line number at which to place the breakpoint.</dd> + <dt><code>aCondition</code> {{ optional_inline() }}</dt> + <dd>A string describing the condition under which the breakpoint should be triggered. This information is simply recorded as part of the breakpoint annotation. <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">NEED LINK TO TEXT ABOUT HANDLING BREAKPOINT CONDITIONS HERE.</span></strong></span></dd> +</dl> + +<h3 id="addEventListener()">addEventListener()</h3> + +<p>Adds a new event listener to the editor. You can listen for any of the events listed in {{ anch("Event name constants") }}. To stop listening for the event, call {{ manch("removeEventListener") }}.</p> + +<pre>void addEventListener( + String aEventType, + Function aCallback +); +</pre> + +<h6 id="Parameters_2">Parameters</h6> + +<dl> + <dt><code>aEventType</code></dt> + <dd>The name of the event type to listen for; see {{ anch("Event name constants") }} for possible values.</dd> + <dt><code>aCallback</code></dt> + <dd>The function to call when the specified event occurs.</dd> +</dl> + +<h3 id="canRedo()">canRedo()</h3> + +<p>Determines whether or not there are changes that can be redone.</p> + +<pre>Boolean canRedo(); +</pre> + +<h6 id="Parameters_3">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value">Return value</h6> + +<p><code>true</code> if there are changes that can be redone, otherwise <code>false</code>.</p> + +<h3 id="canUndo()">canUndo()</h3> + +<p>Determines whether or not there are changes that can be undone.</p> + +<pre>Boolean canUndo(); +</pre> + +<h6 id="Parameters_4">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_2">Return value</h6> + +<p><code>true</code> if there are changes that can be undone, otherwise <code>false</code>.</p> + +<h3 id="destroy()">destroy()</h3> + +<p>Destroys the editor, releasing resource it's allocated and removing event handlers it's installed. You should call this method when you're done using the editor object.</p> + +<pre>void destroy(); +</pre> + +<h6 id="Parameters_5">Parameters</h6> + +<p>None.</p> + +<h3 id="dropSelection()">dropSelection()</h3> + +<p>Deselects the currently selected text.</p> + +<pre>void dropSelection(); +</pre> + +<h6 id="Parameters_6">Parameters</h6> + +<p>None.</p> + +<h3 id="endCompoundChange()">endCompoundChange()</h3> + +<p>Ends a compound change that was previously started by calling {{ manch("startCompoundChange") }}. All changes made to the text between the two calls is considered to be a single edit for the purposes of undo operations.</p> + +<pre>void endCompoundChange(); +</pre> + +<h6 id="Parameters_7">Parameters</h6> + +<p>None.</p> + +<h3 id="find()">find()</h3> + +<p>Finds a string in the editor's text.</p> + +<pre>Number find( + [optional] String aString + [optional] Object aOptions +); +</pre> + +<h6 id="Parameters_8">Parameters</h6> + +<dl> + <dt><code>aString</code> {{ optional_inline() }}</dt> + <dd>The string for which to search. If not specified, the currently selected text in the editor is used as the search string.</dd> + <dt><code>aOptions</code> {{ optional_inline() }}</dt> + <dd>An optional object containing properties customizing the search operation. See {{ anch("Find options") }} for details.</dd> +</dl> + +<h6 id="Return_value_3">Return value</h6> + +<p>Returns an integer indicating the offset into the text at which the first character of the found string is located, or -1 if the string wasn't found.</p> + +<h6 id="Find_options">Find options</h6> + +<p>The <code>aOptions</code> object can customize the search operation. It may have the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>backwards</code></td> + <td><code>Boolean</code></td> + <td>If <code>true</code>, the search begins at <code>start</code> (or the end of the text, if <code>start</code> is not specified) and progresses toward the beginning of the text. Otherwise the search progresses forward. The default is <code>false</code>.</td> + </tr> + <tr> + <td><code>ignoreCase</code></td> + <td><code>Boolean</code></td> + <td>If <code>true</code>, the search is performed in a case-insensitive manner; otherwise case is considered. The default is <code>false</code>.</td> + </tr> + <tr> + <td><code>start</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>An integer value indicating the offset into the text at which to begin the find operation. The default is 0 if <code>backwards</code> is <code>false</code>, or <code>text.length</code> if <code>backwards</code> is true.</td> + </tr> + </tbody> +</table> + +<h3 id="findNext()">findNext()</h3> + +<p>Finds the next occurrence of the search operation started by the last call to {{ manch("find") }}.</p> + +<div class="note"><strong>Note:</strong> This ignores the value you specified for <code>backwards</code> in the original search; it always searches forward.</div> + +<pre>Number findNext( + Boolean aWrap +}; +</pre> + +<h6 id="Parameters_9">Parameters</h6> + +<dl> + <dt><code>aWrap</code></dt> + <dd>If <code>true</code>, the search operation will wrap around to the beginning of the text. Otherwise, the search stops if the end of the text is reached.</dd> +</dl> + +<h6 id="Return_value_4">Return value</h6> + +<p>The offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found.</p> + +<h3 id="findPrevious()">findPrevious()</h3> + +<p>Finds the previous occurrence of the search operation started by the last call to {{ manch("find") }}.</p> + +<div class="note"><strong>Note:</strong> This ignores the value you specified for <code>backwards</code> in the original search; it always searches backward.</div> + +<pre>Number findNext( + Boolean aWrap +}; +</pre> + +<h6 id="Parameters_10">Parameters</h6> + +<dl> + <dt><code>aWrap</code></dt> + <dd>If <code>true</code>, the search operation will wrap around to the end of the text. Otherwise, the search stops if the beginning of the text is reached.</dd> +</dl> + +<h6 id="Return_value_5">Return value</h6> + +<p>The offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found.</p> + +<h3 id="focus()">focus()</h3> + +<p>Makes the editor the focus for user input.</p> + +<pre>void focus(); +</pre> + +<h6 id="Parameters_11">Parameters</h6> + +<p>None.</p> + +<h3 id="getBreakpoints">getBreakpoints</h3> + +<p>Returns an array of all of the breakpoints currently set on the code in the editor instance.</p> + +<pre>Array getBreakpoints(); +</pre> + +<h6 id="Parameters_12">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_6">Return value</h6> + +<p>An <code><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></code> of all of the breakpoints in the editor instance. Each breakpoint is an <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> with the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>line</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The 0-based line number on which the breakpoint is set.</td> + </tr> + <tr> + <td><code>condition</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/String" title="String">String</a></code></td> + <td>The condition string that was specified when the breakpoint was set.</td> + </tr> + </tbody> +</table> + +<h3 id="getCaretOffset()">getCaretOffset()</h3> + +<p>Returns the current caret position (insertion point) as an offset into the text.</p> + +<pre>Number getCaretOffset(); +</pre> + +<h6 id="Parameters_13">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_7">Return value</h6> + +<p>The 0-based offset into the text at which newly-typed characters will be inserted.</p> + +<h3 id="getCaretPosition()">getCaretPosition()</h3> + +<p>Returns an object describing the position of the caret (insertion point) in terms of its line number and column.</p> + +<pre>Object getCaretPosition(); +</pre> + +<h6 id="Parameters_14">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_8">Return value</h6> + +<p>The returned object describes the caret position:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>line</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The 0-based line number on which the caret is located.</td> + </tr> + <tr> + <td><code>col</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The 0-based column number on which the caret is located.</td> + </tr> + </tbody> +</table> + +<h3 id="getCharCount()">getCharCount()</h3> + +<p>Returns the number of characters in the editor's content.</p> + +<pre>Number getCharCount(); +</pre> + +<h6 id="Parameters_15">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_9">Return value</h6> + +<p>The number of characters in the editor's text.</p> + +<h3 id="getIndentationString">getIndentationString</h3> + +<p>Returns a string containing the character or characters that are inserted when the user presses the tab key.</p> + +<pre>String getIndentationString(); +</pre> + +<h6 id="Parameters_16">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_10">Return value</h6> + +<p>If tabs are configured to be expanded into spaces (that is, the <code>expandTab</code> property is <code>true</code>), the returned string is comprised of the number of spaces specified by the <code>tabSize</code> property when the editor was initialized by calling {{ manch("init") }}. Otherwise, the returned string is simply "\t".</p> + +<h3 id="getLineCount()">getLineCount()</h3> + +<p>Returns the number of lines of text in the editor.</p> + +<pre>Number getLineCount(); +</pre> + +<h6 id="Parameters_17">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_11">Return value</h6> + +<p>The number of lines of text in the document being edited.</p> + +<h3 id="getLineDelimiter()">getLineDelimiter()</h3> + +<p>Returns a string containing the character or characters that are used as the end of each line of text. This may be, for example, "\n", "\r", or "\r\n".</p> + +<pre>String getLineDelimiter(); +</pre> + +<h6 id="Parameters_18">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_12">Return value</h6> + +<p>A string containing the character or characters that delineate lines of text.</p> + +<h3 id="getLineEnd">getLineEnd</h3> + +<p>Returns the character offset of the character after the specified line number in the text.</p> + +<pre>Number getLineEnd( + Number aLineIndex, + [optional] Boolean aIncludeDelimiter +); +</pre> + +<h6 id="Parameters_19">Parameters</h6> + +<dl> + <dt><code>aLineIndex</code></dt> + <dd>Zero-based offset to the line number to which to return the end offset.</dd> + <dt><code>aIncludeDelimiter</code> {{ optional_inline() }}</dt> + <dd>If <code>false</code>, the returned offset is to the first character of the end-of-line delimiter if the specified line (this is the default). If <code>true</code>, the returned offset is the offset to the first character of the following line.</dd> +</dl> + +<h6 id="Return_value_13">Return value</h6> + +<p>The offset to the last character in the specified line, or -1 if the specified line number is out of range.</p> + +<h3 id="getLineStart">getLineStart</h3> + +<p>Returns the character offset of the first character of the specified line in the text.</p> + +<pre>Number getLineStart( + Number aLineIndex +); +</pre> + +<h6 id="Parameters_20">Parameters</h6> + +<dl> + <dt><code>aLineIndex</code></dt> + <dd>Zero-based offset to the line number to which to return the end offset.</dd> +</dl> + +<h6 id="Return_value_14">Return value</h6> + +<p>The offset to the first character in the specified line, or -1 if the specified line number is out of range.</p> + +<h3 id="getMode()">getMode()</h3> + +<p>Returns the current syntax highlighting mode for the document's contents.</p> + +<pre>String getMode(); +</pre> + +<h6 id="Parameters_21">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_15">Return value</h6> + +<p>A string indicating the type of file being edited, as previously set using either the <code>mode</code> property when configuring the editor, or by a call to {{ manch("setMode") }}. See {{ anch("Editor mode constants") }} for possible values.</p> + +<h3 id="getSelectedText()">getSelectedText()</h3> + +<p>Returns the currently-selected text.</p> + +<pre>String getSelectedText(); +</pre> + +<h6 id="Parameters_22">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_16">Return value</h6> + +<p>The currently-selected text in the editor.</p> + +<h3 id="getSelection()">getSelection()</h3> + +<p>Returns an object indicating the offsets to the first and last characters that are currently selected.</p> + +<pre>Object getSelection(); +</pre> + +<h6 id="Parameters_23">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_17">Return value</h6> + +<p>An object describing the currently selected range of text in the editor:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>start</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>0-based offset to the first character in the current selection.</td> + </tr> + <tr> + <td><code>end</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>0-based offset to the end of the current selection. The character at this offset is <strong>not</strong> included in the selection; it's essentially the first character after the selection.</td> + </tr> + </tbody> +</table> + +<p>If there's no selection, the current caret position is returned for both <code>start</code> and <code>end</code>.</p> + +<h3 id="getText()">getText()</h3> + +<p>Returns the text in the specified range within the editor, or all of the editor's text if no range is given.</p> + +<pre>String getText( + [optional] Number aStart, + [optional] Number aEnd +); +</pre> + +<h6 id="Parameters_24">Parameters</h6> + +<dl> + <dt><code>aStart</code> {{ optional_inline() }}</dt> + <dd>The offset to the first character to retrieve.</dd> + <dt><code>aEnd</code> {{ optional_inline() }}</dt> + <dd>The offset to the last character to retrieve. If this isn't provided, all text from <code>aStart</code> (or the beginning of the document, if that wasn't provided either) to the end of the text is returned.</dd> +</dl> + +<h6 id="Return_value_18">Return value</h6> + +<p>A string containing the specified range of text (or all of the text, if a range wasn't provided).</p> + +<h3 id="getTopIndex()">getTopIndex()</h3> + +<p>Returns the line number of the first line currently visible in the editor, based on the current scroll position of the editor.</p> + +<pre>Number getTopIndex(); +</pre> + +<h6 id="Parameters_25">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_19">Return value</h6> + +<p>The line number of the first visible line; this is a 0-based value, so the first line of the document is line number 0.</p> + +<h3 id="init()">init()</h3> + +<p>Initializes the editor. You must call this, and wait until your callback is called, before calling any other Source Editor methods.</p> + +<pre>void init( + Element aElement, + Object aConfig + Function aCallback +); +</pre> + +<h6 id="Parameters_26">Parameters</h6> + +<dl> + <dt><code>aElement</code></dt> + <dd>The DOM {{ domxref("element") }} in which to place the editor.</dd> + <dt><code>aConfig</code></dt> + <dd>An object containing a set of properties used to configure the editor. See {{ anch("The editor configuration object") }} for details.</dd> + <dt><code>aCallback</code></dt> + <dd>A function that will be called when the editor has been fully loaded and initialized.</dd> +</dl> + +<h3 id="hasFocus()">hasFocus()</h3> + +<p>Determines whether or not the editor is currently focused.</p> + +<pre>Boolean hasFocus(); +</pre> + +<h6 id="Parameters_27">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_20">Return value</h6> + +<p><code>true</code> if the editor is currently focused, otherwise <code>false</code>.</p> + +<h3 id="redo()">redo()</h3> + +<p>Redoes the most recently undone change in the editor.</p> + +<pre>Boolean redo(); +</pre> + +<h6 id="Parameters_28">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_21">Return value</h6> + +<p><code>true</code> if a change was redone, otherwise <code>false</code>.</p> + +<h3 id="removeBreakpoint">removeBreakpoint</h3> + +<p>Removes the breakpoint from the specified line of code.</p> + +<pre>Boolean removeBreakpoint( + Number aLineIndex +); +</pre> + +<h6 id="Parameters_29">Parameters</h6> + +<dl> + <dt>aLineIndex</dt> + <dd>The 0-based line number from which to remove the breakpoint.</dd> +</dl> + +<h6 id="Return_value_22">Return value</h6> + +<p><code>true</code> if a breakpoint was removed, otherwise <code>false</code>.</p> + +<h3 id="removeEventListener()">removeEventListener()</h3> + +<p>Removes an event listener (previously established by calling {{ manch("addEventListener") }} from the editor.</p> + +<pre>void removeEventListener( + String aEventType, + Function aCallback +); +</pre> + +<h6 id="Parameters_30">Parameters</h6> + +<dl> + <dt><code>aEventType</code></dt> + <dd>The name of the event type to stop listening for; see {{ anch("Event name constants") }} for possible values.</dd> + <dt><code>aCallback</code></dt> + <dd>The function to stop calling when the specified event occurs.</dd> +</dl> + +<h3 id="resetUndo">resetUndo</h3> + +<p>Resets the undo stack, removing all possible undo and redo operations from the stack.</p> + +<pre>void resetUndo(); +</pre> + +<h6 id="Parameters_31">Parameters</h6> + +<p>None.</p> + +<h3 id="setCaretOffset()">setCaretOffset()</h3> + +<p>Sets the current caret position (insertion point) for newly-entered text.</p> + +<pre>void setCaretOffset( + Number aOffset +); +</pre> + +<h6 id="Parameters_32">Parameters</h6> + +<dl> + <dt><code>aOffset</code></dt> + <dd>The 0-based offset into the text at which to place the caret.</dd> +</dl> + +<h3 id="setCaretPosition()">setCaretPosition()</h3> + +<p>Sets the current caret position given a line number and column number.</p> + +<pre>void setCaretPosition( + Number aLine, + [optional] Number aColumn, + [optional] Number aAlign +); +</pre> + +<h6 id="Parameters_33">Parameters</h6> + +<dl> + <dt><code>aLine</code></dt> + <dd>The 0-based line number on which to place the caret.</dd> + <dt><code>aColumn</code> {{ optional_inline() }}</dt> + <dd>The 0-based column number at which to place the caret; if you don't provide this parameter, the caret is placed at the beginning of the line specified by <code>aLine</code>.</dd> + <dt><code>aAlign</code> {{ optional_inline() }}</dt> + <dd>How to position the line with respect to the viewport when scrolling the line into view. This may be one of <code>SourceEditor.VERTICAL_ALIGN.TOP</code>, <code>SourceEditor.VERTICAL_ALIGN.CENTER</code>, and <code>SourceEditor.VERTICAL_ALIGN_BOTTOM</code>. See {{ anch("Alignment constants") }} for details. The default is <code>SourceEditor.VERTICAL_ALIGN.TOP</code>.</dd> +</dl> + +<h3 id="setMode()">setMode()</h3> + +<p>Sets the current syntax highlighting mode for the text being edited.</p> + +<pre>void setMode( + String aMode +); +</pre> + +<h6 id="Parameters_34">Parameters</h6> + +<dl> + <dt><code>aMode</code></dt> + <dd>A string indicating the file type being edited. See {{ anch("Editor mode constants") }} for possible values.</dd> +</dl> + +<h3 id="setSelection()">setSelection()</h3> + +<p>Selects the specified range of text.</p> + +<pre>void setSelection( + Number aStart, + Number aEnd +); +</pre> + +<h6 id="Parameters_35">Parameters</h6> + +<dl> + <dt><code>aStart</code></dt> + <dd>The 0-based offset to the first character to select in the text.</dd> + <dt><code>aEnd</code></dt> + <dd>The offset to the first character after the range you wish to select.</dd> +</dl> + +<h6 id="Remarks">Remarks</h6> + +<p>It's important to note that the character at offset <code>aEnd</code> is <strong>not</strong> included in the selection.</p> + +<h3 id="setText()">setText()</h3> + +<p>Replaces a range of text in the editor with the specified string. If you don't specify a range, the entire text is replaced.</p> + +<pre>void setText( + String aString, + [optional] Number aStart, + [optional] Number aEnd +); +</pre> + +<h6 id="Parameters_36">Parameters</h6> + +<dl> + <dt><code>aString</code></dt> + <dd>The text to put into the editor.</dd> + <dt><code>aStart</code> {{ optional_inline() }}</dt> + <dd>The 0-based offset to the first character in the text to replace.</dd> + <dt><code>aEnd</code> {{ optional_inline() }}</dt> + <dd>The offset to the last character to replace. If you don't specify this value, the entire string from <code>aStart</code> (or the first character in the text, if you don't specify <code>aStart</code>) to the end of the text is replaced.</dd> +</dl> + +<h3 id="setTopIndex()">setTopIndex()</h3> + +<p>Scrolls the text as necessary to place the specified line number at the top of the view.</p> + +<pre>void setTopIndex( + Number aTopIndex +); +</pre> + +<h6 id="Parameters_37">Parameters</h6> + +<dl> + <dt><code>aTopIndex</code></dt> + <dd>The 0-based line number to place at the top of the editor's view.</dd> +</dl> + +<h3 id="startCompoundChange()">startCompoundChange()</h3> + +<p>Begins a compound change in the editor. All changes made between a call to <code>startCompoundChange()</code> and its corresponding call to {{ manch("endCompoundChange") }} are considered to be a single operation on the undo stack.</p> + +<pre>void startCompoundChange(); +</pre> + +<h6 id="Parameters_38">Parameters</h6> + +<p>None.</p> + +<h3 id="undo()">undo()</h3> + +<p>Undoes the most recent change made in the editor.</p> + +<pre>Boolean undo(); +</pre> + +<h6 id="Parameters_39">Parameters</h6> + +<p>None.</p> + +<h6 id="Return_value_23">Return value</h6> + +<p><code>true</code> if a change was undone or <code>false</code> if there were no changes to undo.</p> + +<h2 id="The_editor_configuration_object">The editor configuration object</h2> + +<p>When you call {{ manch("init") }} to initialize the editor, you pass in an object that contains properties configuring the editor's features. That object may contain any combination of the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>contextMenu</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a> | {{ domxref("Element") }}</td> + <td>A reference to the context menu to display when the user right-clicks in the editor. This may be either a string providing the ID of a XUL {{ XULElem("menupopup") }} or an {{ domxref("Element") }} object of type {{ XULElem("menupopup") }}. See <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">XXXXX</span></strong></span> for details on how to work with the context menu. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>expandTab</code></td> + <td><code>Boolean</code></td> + <td>A Boolean value indicating whether or not tab characters should be expanded out to spaces. This value is overridden by the user preference named by <code>SourceEditor.PREFS.EXPAND_TAB</code>.</td> + </tr> + <tr> + <td><code>highlightCurrentLine</code></td> + <td><code>Boolean</code></td> + <td>A Boolean value indicating whether or not to highlight the line on which the text caret is currently located. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>initialText</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td> + <td>The default initial text to be in the editor when it's created. By default, this is the empty string, indicating there should be no text on startup. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>keys</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a></td> + <td>An array of objects defining custom keyboard bindings. See <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">XXXXX</span></strong></span> for details. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>mode</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td> + <td>A string indicating the default syntax highlighting mode; by default, the content is assumed to be plain text. See {{ anch("Editor mode constants") }} for permitted values.</td> + </tr> + <tr> + <td><code>placeholderText</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td> + <td>The default initial text to be in the editor when it's created; by default, an empty string. This is deprecated starting in Firefox 13; use <code>initialText</code> instead. {{ deprecated_inline("13.0") }}</td> + </tr> + <tr> + <td><code>readOnly</code></td> + <td><code>Boolean</code></td> + <td>A Boolean value indicating whether or not the source editor should be read only. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>showAnnotationRuler</code></td> + <td><code>Boolean</code></td> + <td>A Boolean value indicating whether or not to display the annotations gutter/ruler. See <span style="color: #ff0000;"><strong><span style="background-color: #ffff00;">XXXXX</span></strong></span> for details. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>showLineNumbers</code></td> + <td><code>Boolean</code></td> + <td>A Boolean value indicating whether or not the line numbers gutter should be displayed. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>showOverviewRuler</code></td> + <td><code>Boolean</code></td> + <td>A Boolean value indicating whether or not to show the overview gutter/ruler. This presents an overview of the current annotations in the editor, such as the breakpoints. {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td><code>tabSize</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>A number indicating how many spaces each tab character should occupy. This default can be overridden by the user preference named by <code>SourceEditor.PREFS.TAB_SIZE</code>.</td> + </tr> + <tr> + <td><code>theme</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/String" title="String"><code>String</code></a></td> + <td>A string indicating the default syntax highlighting theme to use; you may use one of the predefined values listed in {{ anch("Theme constants") }}, or you may provide your own CSS file reference.</td> + </tr> + <tr> + <td><code>undoLimit</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>A number indicating how many steps the undo stack should hold.</td> + </tr> + </tbody> +</table> + +<p>See {{ anch("Configuration defaults constants") }} for a list of the default values for these configuration options.</p> + +<h2 id="Events">Events</h2> + +<p>There are a number of events that can be sent by the source editor, as listed in {{ anch("Event name constants") }}. This section provides details on each of those events and their properties.</p> + +<h3 id="ContextMenu">ContextMenu</h3> + +<p>The "ContextMenu" event is sent when the editor's context menu is invoked, and has the following properties.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>x</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The X-coordinate at which the mouse cursor was located when the context menu was invoked. This value is relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position.</td> + </tr> + <tr> + <td><code>y</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The Y-coordinate at which the mouse cursor was located when the context menu was invoked. This value is relative to the document being edited; that is, 0 is the left edge of the document, regardless of horizontal scroll position.</td> + </tr> + <tr> + <td><code>screenX</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The X-coordinate at which the mouse cursor was located when the context menu was invoked, relative to the screen. This value comes from the DOM contextmenu's <code>event.screenX</code> property.</td> + </tr> + <tr> + <td><code>screenY</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The Y-coordinate at which the mouse cursor was located when the context menu was invoked, relative to the screen. This value comes from the DOM contextmenu's <code>event.screenY</code> property.</td> + </tr> + </tbody> +</table> + +<h3 id="TextChanged">TextChanged</h3> + +<p>The "TextChanged" event is sent when the contents of the editor change. It has the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>start</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The character offset into the document at which the change occurred.</td> + </tr> + <tr> + <td><code>removedCharCount</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The number of characters removed from the document.</td> + </tr> + <tr> + <td><code>addCharCount</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number">Number</a></code></td> + <td>The number of characters added to the document.</td> + </tr> + </tbody> +</table> + +<h3 id="Selection">Selection</h3> + +<p>The "Selection" element is sent when the selection within the editor changes. It has the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>oldValue</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code></td> + <td>The previously-selected range of text.</td> + </tr> + <tr> + <td><code>newValue</code></td> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global_Objects/Object">Object</a></code></td> + <td>The newly-selected range of text.</td> + </tr> + </tbody> +</table> + +<p>The objects used for <code>oldValue</code> and <code>newValue</code> each have two properties of type <a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a>: <code>start</code> and <code>end</code>, describing the start and end positions of the range of characters.</p> + +<p>The "Focus" event is sent when the editor is focused. It has no properties.</p> + +<p>The "Blur" event is sent when the editor loses focus. It has no properties.</p> + +<h3 id="MouseMove">MouseMove</h3> + +<p>The "MouseMove" event is sent when the user moves the mouse pointer over a line of text content. It has the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>event</code></td> + <td>{{ domxref("MouseEvent") }}</td> + <td>The DOM "mousemove" event.</td> + </tr> + <tr> + <td><code>x</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>The X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position..</td> + </tr> + <tr> + <td><code>y</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>The Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.</td> + </tr> + </tbody> +</table> + +<h3 id="MouseOver">MouseOver</h3> + +<p>The "MouseOver" event is sent when the user moves the mouse pointer enters a line of text content. It has the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>event</code></td> + <td>{{ domxref("MouseEvent") }}</td> + <td>The DOM "mouseover" event.</td> + </tr> + <tr> + <td><code>x</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>The X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position.</td> + </tr> + <tr> + <td><code>y</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>The Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.</td> + </tr> + </tbody> +</table> + +<h3 id="MouseOut">MouseOut</h3> + +<p>The "MouseOut" event is sent when the user moves the mouse pointer over a line of text content. It has the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>event</code></td> + <td>{{ domxref("MouseEvent") }}</td> + <td>The DOM "mouseout" event.</td> + </tr> + <tr> + <td><code>x</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>The X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position..</td> + </tr> + <tr> + <td><code>y</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Number" title="Number"><code>Number</code></a></td> + <td>The Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.</td> + </tr> + </tbody> +</table> + +<p>The "BreakpointChange" event is sent when a breakpoint is changed. This can be any of the following changes:</p> + +<ul> + <li>One or more new breakpoints were added, using either the API or editor user interface.</li> + <li>One or more breakpoints were removed, using either the API or editor user interface.</li> +</ul> + +<p>The event has the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>added</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a></td> + <td>An array of breakpoint objects representing all of the breakpoints that have been added; see {{ anch("Breakpoint objects") }} for details.</td> + </tr> + <tr> + <td><code>removed</code></td> + <td><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a></td> + <td>An array of breakpoint objects representing all of the breakpoints that have been removed; see {{ anch("Breakpoint objects") }} for details.</td> + </tr> + </tbody> +</table> + +<p>The "DirtyChanged" event is sent when the dirty state of the editor changes. This state indicates whether or not there have been changes to the text since the last time the content was saved. This event has the following properties:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Property</td> + <td class="header">Type</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>oldValue</code></td> + <td><code>Boolean</code></td> + <td>The previous state of the dirty flag.</td> + </tr> + <tr> + <td><code>newValue</code></td> + <td><code>Boolean</code></td> + <td>The new state of the dirty flag.</td> + </tr> + </tbody> +</table> + +<p>If the dirty flag is <code>true</code>, the document has not been saved since the last time its text was changed. You can set the dirty state of the document by setting the value of the <code>dirty</code> attribute.</p> diff --git a/files/es/mozilla/javascript_code_modules/timer.jsm/index.html b/files/es/mozilla/javascript_code_modules/timer.jsm/index.html new file mode 100644 index 0000000000..5b667e8c2b --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/timer.jsm/index.html @@ -0,0 +1,32 @@ +--- +title: Timer.jsm +slug: Mozilla/JavaScript_code_modules/Timer.jsm +tags: + - Add-ons + - JavaScript + - JavaScript temporizador + - modulo + - temporizador +translation_of: Mozilla/JavaScript_code_modules/Timer.jsm +--- +<p>{{ gecko_minversion_header("22") }}</p> + +<p>El modulo de código JavaScript <code>Timer.jsm</code> contiene implementaciones puras de Javascript de <a href="/en-US/docs/DOM/window.setTimeout" title="/en-US/docs/DOM/window.setTimeout"><code>setTimeout</code></a>, <a href="/en-US/docs/DOM/window.clearTimeout" title="/en-US/docs/DOM/window.clearTimeout"><code>clearTimeout</code></a>, <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval</a></code>, y <a href="/en-US/docs/Web/API/WindowTimers/clearInterval"><code>clearInterval</code> </a>Que son compatibles con las funciones de ventana DOM, pero que pueden ser usadas por código que no tiene acceso a la ventana DOM(por ejemplo, <a href="/en-US/docs/Mozilla/JavaScript_code_modules" title="/en-US/docs/Mozilla/JavaScript_code_modules">Los módulos de código de Javascript</a> o <a href="/en-US/docs/The_message_manager" title="/en-US/docs/The_message_manager">los scripts de contenido de frames</a>).</p> + +<p>Para usar <code>Timer.jsm</code>, primero impórtalo:</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/Timer.jsm"); +</pre> + +<p>Entonces llama a <code>setTimeout</code> y a <code>clearTimeout</code> como lo harías en una ventana DOM, por ejemplo:</p> + +<pre class="brush: js">let timeoutID = setTimeout(function() { console.log("¡Hola!"); }, 500); + +clearTimeout(timeoutID); +</pre> + +<p>De forma similar, puedes usar <code>setInterval</code> y <code>clearInterval</code> de la siguiente manera:</p> + +<pre class="brush: js">let intervalID = setInterval(function() { console.log("¡Sucederá cada 500ms!"); }, 500); + +clearInterval(intervalID);</pre> diff --git a/files/es/mozilla/localization/index.html b/files/es/mozilla/localization/index.html new file mode 100644 index 0000000000..1a5f47f30a --- /dev/null +++ b/files/es/mozilla/localization/index.html @@ -0,0 +1,24 @@ +--- +title: La Localización en Mozilla +slug: Mozilla/Localization +tags: + - Landing + - Localización + - Mozilla + - NeedsTranslation + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +<p><span class="seoSummary"><strong>Localizacíon </strong>(L10n) es el proceso por el cual se traduce la interfaz de usuario de un software desde un idioma a otro, realizando los cambios necesarios para que se adapte a la cultura de destino. Estos recursos están destinados a todos aquellos interesados en los aspectos técnicos de la Localización, ya sean programadores o contribuidores.</span></p> + + + +<h2 id="Vease_también">Vease también</h2> + +<p><strong><a href="/es/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localización de MDN</a> </strong>(Relacionado con la localización de documentos aquí en MDN)</p> + +<p><strong><a href="/es/Apps/Build/Localization">Localización de Apps</a></strong> Este conjunto de documentos aplica más específicamente a la localización de apps, incluyendo las apss de Firefox OS.</p> + +<p><strong><a href="/es/docs/Web/API/L10n">L10n</a> </strong>Documentos de referencia para el API de L10n que Mozilla usa para localizar Firefox OS.</p> diff --git a/files/es/mozilla/localization/l10n_style_guide/index.html b/files/es/mozilla/localization/l10n_style_guide/index.html new file mode 100644 index 0000000000..adde6a55af --- /dev/null +++ b/files/es/mozilla/localization/l10n_style_guide/index.html @@ -0,0 +1,363 @@ +--- +title: Mozilla L10n Style Guide +slug: Mozilla/Localization/L10n_Style_Guide +tags: + - Localization + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Localization/L10n_Style_Guide +--- +<h3 id="Intro"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Intro</span></h3> + +<div id="magicdomid8"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Style guides define the standard against which we determine a translation's quality. They contain rules that are both defined by Mozilla and by Mozilla's localization communities on how to best translate text in Mozilla products, websites, and other projects. Style guides are used to both translate and evaluate a translation's quality. By following these rules, a translator has a better chance of producing a high quality translation that represents Mozilla values and culture. Some examples of international style guides created by other organizations are:</span></div> + +<ul> + <li id="magicdomid9"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://help.apple.com/asg/mac/2013/ASG_2013.pdf">https://help.apple.com/asg/mac/2013/ASG_2013.pdf</a></span></li> + <li id="magicdomid10"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://www.microsoft.com/Language/en-US/StyleGuides.aspx">https://www.microsoft.com/Language/en-US/StyleGuides.aspx</a></span></li> + <li><a href="https://www.facebook.com/translations/style_guides">https://www.facebook.com/translations/style_guides</a></li> +</ul> + +<div><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">This style guide is broken up into two main parts: the first contains rules that are language-specific and must be defined by each Mozilla l10n community (covering language-specific style, terminology, and units); the second contains general rules that Mozilla has defined for translators of all languages that can help you translate well (covering principles of accuracy and fluency). Please adapt part one of this style guide to your l10n community's rules for style, terminology, and units. Wherever possible, refer to existing national standards for units, spelling, and grammar in your community's adaptation of the first part of this style guide.</span></div> + +<h3 id="sect1"></h3> + +<h2 id="Language-specific_Mozilla_style">Language-specific Mozilla style</h2> + +<ol style="margin-left: 80px;"> +</ol> + +<h3 id="Style">Style</h3> + +<div id="magicdomid16"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Your localization community's style is largely up to you to define. It is a part of your community's instructions and standards for translating strings within each project type. Style encompasses various elements, such as formality, tone, natural expression, handling cultural references, idioms, or slang, and maintaining consistency with Mozilla and 3rd party branding and style guides. Your localization community should define these style elements for localizing Mozilla projects into your language. Let's go through these main aspects of Style.</span></div> + +<div id="magicdomid17"></div> + +<h5 id="Formality_and_Tone">Formality and Tone</h5> + +<div id="magicdomid18"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">When determining the formality or tone of a Mozilla l10n project in your language, ask yourself these questions:</span></div> + +<ul> + <li>Who is the target user for this project and what is their background?</li> + <li>How would a target user for this project expect to interact with this project? For example, would they expect a friendly, casual interaction?</li> + <li>Is formal language appropriate for all of your language's Mozilla l10n projects, or only some of them? Which ones?</li> + <li>Is informal language appropriate for all of your language's Mozilla l10n projects, or only some of them? Which ones?</li> +</ul> + +<div><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">In fact, localization should not use a level of formality higher or lower than required by this community-defined style guideline. An example of this would be using "click here" (not formal) vs. "please click here" (more formal). Also, the tone employed throughout a l10n project(s) should stay consistent within itself. </span></div> + +<div></div> + +<h5 id="Natural_expression">Natural expression</h5> + +<div id="magicdomid22"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Using natural expressions make your localization sound natural to a native speaker. If your translation does not follow the community defined language guidelines for translating content that contains local or natural expressions, this results in a mediocre and/or awkward translation. Teams should be careful to address those and keep them in mind while translating, which is why it is an important section to address in a Style Guide. An example of a natural expression in a translation would be translating the Spanish phrase, "En ocho días." In English, one might translate this as, "in eight days" or "in a week." The latter is the more natural translation, although both could be considered correct. </span></div> + +<div></div> + +<div><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">In this section, form guidelines for how to perform a natural sounding localization. This might take some time and experience to find the right examples to include or create the right guidelines for your language.</span></div> + +<div></div> + +<h5 id="Handling_cultural_references_idioms_and_slang">Handling cultural references, idioms, and slang</h5> + +<p><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and target languages. An example of a cultural reference in English would be the phrase, "kick-off meeting." This is a reference that uses an American football term. It means a meeting to begin a project. To translate it, you can follow one of two approaches:</span></p> + +<ol> + <li><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Find an equivalent reference phrase in your language.</span></li> + <li><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Remove the cultural reference and translate the core meaning (e.g., "a commencement meeting") </span></li> +</ol> + +<p><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Define a policy for handling these cultural references, idioms, and slang that you can make standard across all projects. Consider resources you can refer back to in order to find cultural equivalents and list them in this section of your style guide (e.g., a slang dictionary in your language). </span></p> + +<h5 id="Style_consistency">Style consistency</h5> + +<div id="magicdomid22"><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">Finally, adherence to Mozilla and third-party branding and style guides should be respected throughout a localization project. More information on Mozilla-specific branding rules can be found here: </span><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z url"><a href="https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/">https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/</a></span><span class="author-a-nz76zz86zs2xc75rz78zz66zz80zxz85zz71z">. For example, some brand names should never be translated, such as "Firefox". For other brands that do not have any branding guidelines, your localization community must define whether to translate them. Be extra careful to check on branding rules before deciding to translate a name or not (whether for Mozilla or for a third-party) and to list them here in your community's l10n style guide.</span></div> + +<div></div> + +<div> +<h3 id="Terminology"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd b"><strong>Terminology</strong></span></h3> + +<div id="magicdomid29"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Here are a few existing term bases we approve of for software/internet terminology and definitions (though not limited to):</span></div> + +<ul> + <li id="magicdomid30"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Microsoft key terms and target languages </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://www.microsoft.com/Language/en-US/Default.aspx">https://www.microsoft.com/Language/en-US/Default.aspx</a></span></li> + <li id="magicdomid31"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Pootle's own term list: </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="https://mozilla.locamotion.org/xx/terminology/essential.po">https://mozilla.locamotion.org/xx/terminology/essential.po</a></span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> (replace *xx* with a locale code)</span></li> +</ul> + +<div id="magicdomid33"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">You should be consistent in the use of existing reliable appropriate term bases in your language. These term bases could be developed and approved by the community, or leveraged from another party that adhere to national, international or local standards</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> for software and internet terminology</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">. Avoid</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> the following:</span></div> + +<ul> + <li id="magicdomid34"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology within the project</span></li> + <li id="magicdomid35"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology with term base</span></li> + <li id="magicdomid36"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Inconsistent use of terminology across all of your projects</span></li> + <li id="magicdomid37"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">U</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">sing terminology from another subject matter (e.g., don't use medical terminology in Firefox)</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">.</span></li> +</ul> + +<h5 id="Tips_on_translating_difficult_concepts"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq b"><strong>Tips on translating difficult concepts</strong></span></h5> + +<div id="magicdomid40"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Translating terms representing difficult concepts is a tricky task. Here are some ideas to help you translate terms that do not have equivalents in your language:</span></div> + +<ul> + <li id="magicdomid41"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Understand the meaning of the term in English. Definitions of a few key terms </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq url"><a href="http://techterms.com/category/internet">http://techterms.com/category/internet</a></span></li> + <li id="magicdomid42"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Know your product and understand the function of the feature. </span></li> + <li id="magicdomid43"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Consider similar ideas for those functions in your culture.</span></li> + <li id="magicdomid44"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Associate a culturally specific image with the meaning and function of the term.</span></li> +</ul> + +<h5 id="Developing_new_term_bases"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq b"><strong>Developing new term base</strong></span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd b"><strong>s</strong></span></h5> + +<div id="magicdomid47"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">What is your </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">community's</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> process </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">for</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> identifying and creating a new t</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ermbase</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">? Here are a few things to keep in mind:</span></div> + +<ul> + <li id="magicdomid48"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Avoid </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">o</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">verly borrowing English expressions</span></li> + <li id="magicdomid49"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Referenc</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ing</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> another language f</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">rom</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> the same language </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">family</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> may inspire you to come up with your own terms</span></li> + <li id="magicdomid50"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">Consider the product target audience (age</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">,</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> level of literacy, education</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">,</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> social </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">and</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> economic status)</span></li> + <li id="magicdomid51"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Will you use l</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">oan words</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> from another language</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">or coin new terms in your language to maintain</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">language purity?</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> Is there government requirement or policy to encourage creating new terms for new concepts</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">, o</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">r </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">will </span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">loan words </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">be sufficient to</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> reach broader masses </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">and</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> expedite new technology adoption</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span></li> + <li id="magicdomid52"><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">If there are two acceptable scripts commonly used by the general public, what is the commonly used script on the web or government sites? What is the script used by major web technology companies?</span></li> +</ul> + +<h3 id="Units_and_Grammar"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Units</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and Grammar </span></h3> + +<div id="magicdomid57"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Many elements of unit or grammar do not exist or apply to all languages. If you find one of these elements that does not apply to your language, please remove it from your style guide.</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> For those definitions of units and grammar that apply document the reference used or how it will be applied to the translation.</span></div> + +<div id="magicdomid58"></div> + +<div id="magicdomid59"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">The translation should strive to achieve proper unit conversions for currency, measurements, etc. for the target audience.</span></div> + +<div id="magicdomid60"></div> + +<h4 id="Units_and_Unit_Conversion"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Units and Unit Conversion</span></h4> + +<h5 id="Date_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Date Format</span></h5> + +<div id="magicdomid64"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are the date formats for weeks and months expressed in the following forms: </span></div> + +<ul> + <li><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">1). Fully spelled out</span> 2).<span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> 2 or 3 letters </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">3). Single letter</span></li> + <li id="magicdomid65"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the order of Year, Month and Day? </span></li> +</ul> + +<div id="magicdomid66"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Reference material can be find here: </span>https://en.wikipedia.org/wiki/Date_format_by_country</div> + +<div></div> + +<h5 id="Calendar_view"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">C</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">alendar</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> view: </span></h5> + +<ul> + <li id="magicdomid68"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> Which date is considered the first day of the week, Sunday or Monday? </span></li> + <li id="magicdomid69"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> Is Lunar calendar observed? Other regional calendar observed?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></li> +</ul> + +<h5 id="Time_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Time Format</span></h5> + +<div id="magicdomid72"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How is time expressed in your language? </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">I</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ncluding 0-24 hr expression, hour, minute and second.</span></div> + +<div></div> + +<h5 id="Numerals"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Numerals </span></h5> + +<div id="magicdomid76"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are numerals an</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">d percentages</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> expressed in your language? </span></div> + +<div><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> Example: 1.23 (decimal separator) or 1,000 (thousand separator) using comma or period. </span></div> + +<div></div> + +<h5 id="Currency"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Currency </span></h5> + +<div><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What are other widely used currency and symbols used in your country/language for paid apps. </span></div> + +<div id="magicdomid79"></div> + +<h5 id="Units"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Units</span></h5> + +<div id="magicdomid81"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Do you use the imperial, metric or nautical system for measuring weight, distance, etc.? Source strings will use the imperial system (e.g., miles, pounds, feet, gallons, etc.). Target translations should convert imperial metrics to their measurement system.</span></div> + +<div id="magicdomid82"></div> + +<h5 id="Names"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Name</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">s</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></h5> + +<div id="magicdomid84">What are the order of family name and given name in your language? Do people use multiple family names? What about patronymics? (The W3C has an introduction to this topic <a href="https://www.w3.org/International/questions/qa-personal-names">here</a>.)</div> + +<div></div> + +<h5 id="Address_and_Postal_Code_Format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Address and Postal Code Format </span></h5> + +<div id="magicdomid87"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the format in your language? </span></div> + +<div id="magicdomid88"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> Example: most Asian countries start from big to small: [Country] [postal code][state/province][city][district][street number and name][building and suite numbers][addressee]</span></div> + +<div id="magicdomid89"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> Countries of European languages start from small to big: [addressee][street number and name][building and suite numbers][district][city][state/province][postal code][Country]</span></div> + +<div id="magicdomid90"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></div> + +<h5 id="Telephone_Number_format"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Telephone Number format</span></h5> + +<div id="magicdomid92"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Space separators between digits can be different for area codes such as State (Province) and City, </span></div> + +<div id="magicdomid94"></div> + +<h4 id="Spelling_And_Grammar_Checks"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Spelling And Grammar Checks</strong></span></h4> + +<div id="magicdomid96"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Many languages have national or international standards that define spelling and grammar rules. When defining these rules for your community, make reference to those standards wherever possible. </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Do you have automated tests for spell checking and grammar</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">List those tools and dictionaries here and how regularly they should be used.</span></div> + +<div id="magicdomid97"></div> + +<h5 id="Tense"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Tense</strong></span></h5> + +<div id="magicdomid99"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Do you have standards for verb forms that indicate or express the time, such as past, present, or future, of the action or state</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">? What is your policy on tense consistency for certain use cases? For example, for phrases that ask a user to make an action (like "Download Firefox"), do you use a future tense, a command tense, or a neutral tense? </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (See: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Grammatical_tense">https://en.wikipedia.org/wiki/Grammatical_tense</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></div> + +<div id="magicdomid100"></div> + +<h4 id="Word_Forms"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Word Forms</strong></span></h4> + +<h5 id="Pluralization"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Pluralization </span></h5> + +<div id="magicdomid106"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate form of expressing pluralization in your language? </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">L</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ist all forms of plural forms and examples if there is more than one. </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Additional discussions can be found Here. </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals">https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and here: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html">http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html</a></span></div> + +<div id="magicdomid107"></div> + +<h5 id="Abbreviations"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Abbreviations </span></h5> + +<p><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">How are abbreviations expressed in your language?</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> </span><br> + <span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> Example, in English, abbreviations are made by removing most vowels and only using the first 3-5 consonants followed by a period (e.g., abbreviation = abbr.).</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Abbreviation%29">https://en.wikipedia.org/wiki/Abbreviation)</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> </span></p> + +<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">If your language does not have a standard way of expressing abbreviations, do you simply leave them in English?</span></p> + +<h5 id="Acronyms"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Acronyms </span></h5> + +<div id="magicdomid113"> +<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Are there standard</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> translat</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">ions of</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> widely accepted acronyms such as CD, DVD, MB</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> in your language? If not, do they remain in English?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Acronym">https://en.wikipedia.org/wiki/Acronym</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></p> +</div> + +<h5 id="Punctuation"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>Punctuation</strong></span></h5> + +<div id="magicdomid117"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Do you use different punctuation rules in your Firefox localization than what your language standard defines? </span></div> + +<div><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> Example: do you use a period at the end of every user interface element translation or only some? </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">W</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">hat is the international/national standard for punctuation in your language</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">?</span></div> + +<div id="magicdomid118"></div> + +<h5 id="Emphasis"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Emphasis</span></h5> + +<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Is there an international/national standard for capitalization</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> in your language? </span></p> + +<ul> + <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">If so, do those standard rules apply in all product translations? </span></li> + <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">I</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">f this doe</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq">sn</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">'t apply, how </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">do you</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> indicate importance or name of a movie, book title, product UIs (</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq u"><u>S</u></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ave, </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj u"><u>F</u></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">ile...)</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd"> in your language?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></li> + <li><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">How does your language handle the use of bold, italic, or underline types to express emphasis?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> ( See: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Italic_type">https://en.wikipedia.org/wiki/Italic_type</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></li> +</ul> + +<h5 id="Hyphens_and_compounds"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Hyphens and compounds </span></h5> + +<div id="magicdomid123"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">way</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> of </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">using</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> hyphens and compounds in your language? ( </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Compound_%28linguistics%29">https://en.wikipedia.org/wiki/Compound_%28linguistics%29</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> ) </span></div> + +<div id="magicdomid124"></div> + +<h5 id="Prepositions_and_articles"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Prepositions and articles</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span></h5> + +<div id="magicdomid126"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">What is the appropriate form of expressing prepositions and articles in your language?</span></div> + +<div id="magicdomid127"></div> + +<h5 id="Diacritics_and_Special_characters"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Diacritics and </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Special characters</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></h5> + +<div id="magicdomid129"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language use</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> any special </span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">or accented characters</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> and will they be applied and preserved in sort orders, and other aspects of the translation</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">?</span><span class="author-a-z87zt8dz75zn14z76zz71z8z82zz86z2uq"> </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Diacritic">https://en.wikipedia.org/wiki/Diacritic</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></div> + +<div id="magicdomid130"></div> + +<h5 id="Quotes"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Quotes </span></h5> + +<div id="magicdomid132"> +<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language have a standard use for quotation marks, parenthesis, or brackets?</span></p> +</div> + +<h5 id="Whitespace"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Whitespace </span></h5> + +<div id="magicdomid135"> +<p><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Does your language require the</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> use of white space around words, sentences, paragraphs, etc</span><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">.? If so, in what ways?</span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> (see: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj url"><a href="https://en.wikipedia.org/wiki/Sentence_spacing_in_language_and_style_guides">https://en.wikipedia.org/wiki/Sentence_spacing_in_language_and_style_guides</a></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> )</span></p> +</div> + +<h5 id="User_Interface_Elements"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj b"><strong>User Interface Elements</strong></span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj"> </span></h5> + +<div id="magicdomid139"></div> + +<ul> + <li id="magicdomid140"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Titles : Should be brief and precise. Localizers can assume that source content reaches 2/3 of the total available line space. This allows localization text to expand and not be truncated or resolved through ellipsis. Title on the final page (meaning no more click through) should allow enough room to display full text. </span></li> + <li id="magicdomid142"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Buttons: Capitalize the first letter of each word. Limit to one or two words. Use verbs that precisely describe the button's action. For example, "Cancel", "Clear History", "Add Email", "Select All", etc. </span></li> + <li id="magicdomid144"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Value Selector Lists: Capitalize the first letter of the first word and the first letter of any proper nouns. Limit to one or two words. </span></li> + <li id="magicdomid147"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Articles: </span><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Avoid them where possible. Articles (such as the word "the" in English) should be avoided wherever possible. User interface elements have limited space available for text. Avoiding articles will help ensure that your translations will be accommodated within the user interface. </span></li> + <li id="magicdomid149"><span class="author-a-z66zuz70zqiz67zz73z3z90zhp4z68zz73zpj">Ellipsis: Ellipsis are often inserted automatically in the UI where strings are truncated. Ellipsis should only be used at high level of UI pages, but not be on the final page (after a series of click-through) where detailed instruction is given. Ellipsis should not be used as a way to solve truncation issue. Focus on making the UI short and precise. The sequence of the sentence structure in another language may not translate well, when a sentence is half finished as such. </span></li> +</ul> +</div> + +<h2 id="General_Mozilla_l10n_style">General Mozilla l10n style</h2> + +<h3 id="Accuracy">Accuracy</h3> + +<h4 id="Meaning-based_translation"><span class="author-p-1460 b"><strong>Meaning-based translation</strong></span></h4> + +<div id="magicdomid3"><span class="author-p-1460">When it comes to translation, meaning is everything. A translator needs to understand the source text's meaning exactly. You then find its most closely linked equivalent in your own language, without adding or subtracting meaning in your translation. Finding meaning-based equivalents between languages can be difficult. To help concentrate your thoughts, ask yourself questions like:</span></div> + +<ul> + <li><span class="author-p-1460">What does this word/sentence/string mean in English?</span></li> + <li><span class="author-p-1460">What is the message the author is trying to send?</span></li> + <li><span class="author-p-1460">How would I express that meaning in my own language?</span></li> +</ul> + +<p><span class="author-p-1460">Sometimes translation memory and machine translation tools can offer bad suggestions for a translation. If you use either as part of your translation workflow, make sure to correct the suggestions before submitting them. Avoid literal translation at all costs. Watch out for words that might sound or look the same between English and your language, but have a different meaning. </span></p> + +<h4 id="Should_not_be_translated">Should not be translated</h4> + +<h5 id="Shortcuts_and_accesskeys">Shortcuts and accesskeys</h5> + +<p>In Firefox and other software it's possible to use keyboard shortcuts to invoke a specific command. For example, to open a file in Firefox you can press the combination of keys <code>CTRL+O</code> (<code>Cmd+O</code> on Mac). The accelerator key depends on the operative system, but the letter itself is normally localizable. This is what is called a shortcut, or commandkey. For example, the <code>Open File…</code> menu item is stored as</p> + +<pre class="sourcelines stripes notranslate"><span id="l61"><span class="k"><!ENTITY</span> <span class="ni">openFileCmd.label</span> <span class="s2">"Open File…"</span><span class="k">></span></span> +<span id="l62"><span class="k"><!ENTITY</span> <span class="ni">openFileCmd.accesskey</span> <span class="s2">"O"</span><span class="k">></span></span> +<span id="l63"><span class="k"><!ENTITY</span> <span class="ni">openFileCmd.commandkey</span> <span class="s2">"o"</span><span class="k">></span></span></pre> + +<p>The commandkey is stored in <code>openFileCmd.commandkey</code> (sometimes the string has <code>.key</code> in the identifier). Normally you should not localize this key, since shortcuts are often common across the entire operative system (e.g. <code>CTRL+S</code> to Save) or similar products (<code>CTRL+T</code> to open a new tab in most browsers). But it needs to be localized if the letter is not available in your keyboard layout. For example, in Italian the character <code>[</code> can be accessed through <code>ALT+è</code>, a command key <code>[</code> would not work.</p> + +<p>In the code fragment above you see also an accesskey defined for <code>Open File…</code>. Accesskeys are used to access a UI element from the keyboard. Example: if File menu has an accesskey F, and the Open file… menu has O, you can press ALT+F to access the menu, and then O to open a file.</p> + +<p>If the label is File, and the accesskey is F, it will be displayed as "<u>F</u>ile" on Windows and Linux, with an underscored F. If the accesskey was "O", so a character not available in the original label, it will be displayed underlined between parenthesis: "File (<u>O</u>)".</p> + +<p>One important thing to determine is if, for your locale, it makes sense to have localized accesskeys: for example, if most users will use a keyboard with a different layout (English), it might make sense to keep the English original accesskey instead of using a letter available in your localization.</p> + +<p>Accesskeys, like commandkeys, have their own lines within .dtd and .properties files and are usually identified by .accesskey in the string ID.</p> + +<h5 id="Variables"><span class="author-p-1460">Variables</span></h5> + +<p><span class="author-p-1460">Variables should never be translated. You can recognize a variable within a string by its beginning with a specific character (e.g., <span class="author-p-1460">$, #, %, etc.)</span> followed by a combination of words without spacing. For example, $BrandShortName and %S are variables. </span>You can move a variable around within a string, if the translation of the string requires it.</p> + +<h5 id="Brands_copyright_and_trademark"><strong><span class="author-p-1460">Brands, copyright, and trademark</span></strong></h5> + +<p><span class="author-p-1460">Brand names, as well as copyright and trademarks should never be translated, nor transliterated into a non-Latin based script. See the <a href="https://www.mozilla.org/en-US/styleguide/communications/translation/">Mozilla branding guide</a> for more details.</span></p> + +<p><span style="">Translating c</span><span style="">ulture-specific references</span></p> + +<p>At times there will be English content included in Mozilla products or web projects (e.g., marketing campaigns) that makes references to American culture and concepts. When translating these, it is best to find an equivalent cultural reference within your own culture that accurately conveys the meaning of the English reference. For example, an American might say, "Good job, home run!" A home run is a baseball reference for a successful outcome. An appropriate translation would be an equivalent metaphor within your culture. Using soccer as an example, you might translate "Good job, home run!" into "Good job, nice goal!" in your language.</p> + +<p>[Add a note about Mozilla culture.]</p> + +<h4 id="Legal_content">Legal content</h4> + +<p>Mozilla projects will often contain legal content in the form of user agreements, privacy statements, etc. When reviewing the translation of legal content, Mozilla localizers should do so according to the criteria concerning accuracy, fluency, style, and terminology found within this style guide and according to Mozilla culture and values.</p> + +<h3 id="Fluency"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Fluency</span></h3> + +<div id="magicdomid153"></div> + +<div id="magicdomid154"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">To produce a fluent translation, not only should the translation follow the language's standard grammar, punctuation, and spelling rules, but it should avoid being ambiguous, incoherent, or inconsistent, and unintelligible.</span></div> + +<div id="magicdomid155"></div> + +<div id="magicdomid156"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">To avoid ambiguity, the translator must thoroughly understand the meaning behind the source text, including any references that text might include. For example, if the English source text uses the word, "it", the translator must know what "it" is to avoid an ambiguous translation. Clearly understanding the source text will also allow a translator to make the source text's logical connections in their own translation. This helps to keep the translation coherent.</span></div> + +<div id="magicdomid157"></div> + +<div id="magicdomid158"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Inconsistency can pop up in many forms. A translator must be consistent in their use of abbreviations, references, and links within each localization project. They must also be consistent with Mozilla and the localization communities' style guides and approved terminology. Abbreviations, like terminology, should come from either a standard reference (like a dictionary of abbreviations) or should follow your language's rules for creating abbreviations. Once used, the abbreviation must remain consistent every place that it is used in the translation. Cross-references (or links) must also be consistently used within a translation. If a text contains a hyperlink URL to a support article in English, the translation should also contain a hyperlink to a translation of that support article (if available) or the English version. Links should not redirect to other pages nor should they be broken and unusable.</span></div> + +<div id="magicdomid159"></div> + +<div id="magicdomid160"><span class="author-a-w6z79zlakz82zxz85zz65zz86zz78zz89zz122zz89zd">Finally, there are times that a translation simply doesn't make sense. It's hard to put your finger on what exactly is wrong with it, but you know it is unintelligible and not fluent. While this is uncommon, it's important to report these unintelligible translations and offer suggestions to correct them.</span></div> diff --git a/files/es/mozilla/localization/l10n_style_guide/your_language/index.html b/files/es/mozilla/localization/l10n_style_guide/your_language/index.html new file mode 100644 index 0000000000..29ee4fc4b7 --- /dev/null +++ b/files/es/mozilla/localization/l10n_style_guide/your_language/index.html @@ -0,0 +1,40 @@ +--- +title: Contenido de Mozilla localizado en tu idioma +slug: Mozilla/Localization/L10n_Style_Guide/Your_Language +tags: + - Guía de estilo +translation_of: Mozilla/Localization/L10n_Style_Guide/Your_Language +--- +<p>{{draft}}</p> + +<dl> + <dt id="magicdomid2"><span class="author-p-1460"> Abreviaturas</span></dt> + <dd id="magicdomid3"><span class="author-p-1460"> ¿Cómo se expresan las abreviaturas en tu idioma?</span></dd> + <dt id="magicdomid4"><span class="author-p-1460"> Numerales y métricas</span></dt> + <dd id="magicdomid5"><span class="author-p-1460">¿Cómo se expresan</span><span class="author-p-1460"> los numerales y métricas en tu idioma?</span></dd> + <dt id="magicdomid6"><span class="author-p-1460"> Porcentajes</span></dt> + <dd id="magicdomid7"><span class="author-p-1460"> ¿Cómo se expresan los porcentajes en tu idioma?</span></dd> + <dt id="magicdomid8"><span class="author-p-1460"> Grupos de dígitos</span></dt> + <dd id="magicdomid9"><span class="author-p-1460"> ¿Cómo se expresan los grupos de dígitos en tu idioma?</span></dd> + <dt id="magicdomid10"><span class="author-p-1460"> Acrónimos</span></dt> + <dd id="magicdomid11"><span class="author-p-1460"> Los acrónimos sólo deberían traducirse si existe un término oficial equivalente en tu idioma.</span></dd> + <dt id="magicdomid12"><span class="author-p-1460"> Género</span></dt> + <dd id="magicdomid13"><span class="author-p-1460"> ¿Cómo expresa el género tu idioma?</span></dd> + <dt id="magicdomid14"><span class="author-p-1460"> Tono/Registro</span></dt> + <dd id="magicdomid15"><span class="author-p-1460"> ¿cuál es el tono apropiado para tus traducciones? ¿Cambia según el producto y la audiencia objetivo? Si así fuera, ¿qué tonos deberían evitarse?</span></dd> + <dt id="magicdomid16"><span class="author-p-1460"> Pronombres</span></dt> + <dd id="magicdomid17"><span class="author-p-1460"> ¿Cuál es la forma apropiada de expresar pronombres en tu idioma?</span></dd> + <dt id="magicdomid18"><span class="author-p-1460"> Uso de mayúsculas</span></dt> + <dd id="magicdomid19"><span class="author-p-1460"> ¿Cuál es el uso de mayúsculas apropiado en tu idioma?</span></dd> + <dt id="magicdomid20"><span class="author-p-1460"> Guiones y palabras compuestas</span></dt> + <dd><span class="author-p-1460"> ¿Cuál es la forma apropiada de usar guiones y escribir palabras compuestas en tu idioma?</span></dd> + <dt id="magicdomid22"><span class="author-p-1460"> Preposiciones y artículos</span></dt> + <dd id="magicdomid23"><span class="author-p-1460"> ¿Cuál es la forma apropiada de expresar preposiciones y artículos en tu idioma?</span></dd> + <dt id="magicdomid24"><span class="author-p-1460"> Puntuación</span></dt> + <dd id="magicdomid25"><span class="author-p-1460"> ¿Cuál es la forma apropiada de expresar la puntuación en tu idioma?</span></dd> + <dt id="magicdomid26"><span class="author-p-1460"> Pluralización</span></dt> + <dd id="magicdomid27"><span class="author-p-1460"> ¿Cuál es la forma apropiada de expresar plurales en tu idioma?</span></dd> + <dt id="magicdomid28"><span class="author-p-1460"> Voz</span></dt> + <dd id="magicdomid29"><span class="author-p-1460"> ¿Cuál es la forma apropiada de expresar la voz en tu idioma?</span></dd> + <dt id="magicdomid30"></dt> +</dl> diff --git a/files/es/mozilla/localization/localizing_with_pontoon/index.html b/files/es/mozilla/localization/localizing_with_pontoon/index.html new file mode 100644 index 0000000000..3c0d6cb5b0 --- /dev/null +++ b/files/es/mozilla/localization/localizing_with_pontoon/index.html @@ -0,0 +1,139 @@ +--- +title: Localizando con Pontoon +slug: Mozilla/Localization/Localizing_with_Pontoon +tags: + - Localization +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon</a> es una herramienta de localización (l10n) basada en la web, del tipo "lo que ves es lo que obtienes" usada para localizar contenido web. En Mozilla, usamos Pontoon para localizar los sitios web de Mozilla y la interfaz de aplicación de Firefox OS, conocida como Gaia. Pontoon es una herramienta muy simple e intuitiva que requiere muy poco o nada de habilidades técnicas para el proceso de localización. Aquí discutiremos cómo usar Pontoon para localizar proyectos, desde el primer inicio de sesión hasta finalizar tus contribuciones. En el camino, señalaremos algunas agradables funciones que te harán más eficiente y facilitarán tus contribuciones de localización.</p> + +<div class="note"> +<p><strong>¿Eres un desarrollador?</strong> Lee sobre<a href="/en-US/docs/Implementing_Pontoon_Mozilla"> cómo implementar Pontoon en tu sitio web (en inglés)</a> o aprende sobre cómo involucrarte en <a href="https://github.com/mozilla/pontoon">GitHub</a>.</p> +</div> + +<h2 id="Primeros_pasos">Primeros pasos</h2> + +<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">La página de inicio de Pontoon</a> es muy fácil de usar. Para empezar a localizar el proyecto, haz clic en el ícono de Persona y conéctate. A continuación, simplemente selecciona el proyecto en el que deseas trabajar y tu localización en los menús desplegables. Pontoon abrirá automáticamente el proyecto de esa localización para que puedas comenzar. Nótese que para el propósito de este tutorial, usaremos el sitio web de <a href="https://affiliates.mozilla.org/">Firefox Affiliates</a> para demostrar la funcionalidad y forma de trabajo de Pontoon. Y ahí está, abierto dentro de Pontoon:</p> + +<p><em><img alt="Browser app and workspace" src="https://mdn.mozillademos.org/files/8323/affiliates.png" style="height: 558px;"></em></p> + +<h3 id="Barra_de_herramientas_principal">Barra de herramientas principal</h3> + +<p>Como puedes ver, la mayor parte de la interfaz es tomada por el sitio siendo traducido. Solo la barra de herramientas de la parte superior pertenece a Pontoon, conteniendo los siguientes elementos (de izquierda a derecha):</p> + +<p><img alt="Main toolbar" src="https://mdn.mozillademos.org/files/8325/toolbar.png"></p> + +<h4 id="List_of_strings">List of strings</h4> + +<p>Abre una barra lateral con una lista de todas las cadenas a localizar.</p> + +<h4 id="Project_selector_(Affiliates)"><span id="cke_bm_939S" style="display: none;"> </span>Project selector (Affiliates)</h4> + +<p>Cambia entre proyectos a localizar.</p> + +<h4 id="Resource_selector_(Homepage)"><span id="cke_bm_940S" style="display: none;"> </span>Resource selector (Homepage)</h4> + +<p>Cambia entre recursos del proyecto a localizar, como subpáginas o archivos de localización. Oculto si no hay recursos disponibles para el proyecto.</p> + +<h4 id="sect1"><span id="cke_bm_941S" style="display: none;"> </span></h4> + +<dl> +</dl> + +<h4 id="Locale_selector_(Slovenian)">Locale selector (Slovenian)</h4> + +<p>Cambia entre lenguajes a localizar.</p> + +<h4 id="Go">Go</h4> + +<p>Abre la selección de proyecto-recurso-localización realizara en los desplegables.</p> + +<h4 id="Progress_indicator">Progress indicator</h4> + +<p>Muestra tu progreso en el recurso siendo localizado. Más detalles están disponibles en el cuadro emergente.</p> + +<dl> +</dl> + +<h4 id="User_menu"><span id="cke_bm_943S" style="display: none;"> </span>User menu</h4> + +<p>Permite tareas específicas del usuario, como subir al repositorio, descargar archivos y desconectarse.</p> + +<h4 id="Info_menu">Info menu</h4> + +<p>Entega información importante, como la línea de tiempo anticipada del proyecto y una lista de atajos del teclado.</p> + +<p>Estamos listos, ¿te parece que hagamos algunas traducciones?</p> + +<dl> +</dl> + +<p>Alright, how about we do some translating now?<span id="cke_bm_608E" style="display: none;"> </span></p> + +<dl> +</dl> + +<h2 id="Traducir_cadenas">Traducir cadenas</h2> + +<p>Al usar Pontoon para localizar, tienes un par de opciones para traducir tus cadenas. Puedes traducir en contexto, fuera de contexto o usar una combinación de ambas. Empezaremos viendo la traducción en contexto.</p> + +<h3 id="En_contexto">En contexto</h3> + +<p>El modo de traducción en contexto de Pontoon es lo que le destaca sobre otros. Esto abre una página web (o app web) y permite la edición en tiempo real de esa página. Aquí tienes cómo traducir tu primera cadena:</p> + +<p><img alt="In-context localization" src="https://mdn.mozillademos.org/files/8331/in-context.png"></p> + +<ol> + <li>Colócate sobre el texto que deseas traducir con tu ratón.</li> + <li>Un botón de edición aparece sobre ese texto. Apriétalo para activar el modo de traducción.</li> + <li>Reemplaza el texto original con su traducción a tu lenguaje.</li> + <li>Apreta el botón guardar para dejar grabada tu traducción.</li> +</ol> + +<div> +<h3 id="Fuera_de_contexto">Fuera de contexto</h3> + +<p>Algunas cadenas son imposibles de traducir en contexto, como por ejemplo los contenidos de la etiqeuta <title> en sitios web y cadenas con ubicadores o diferentes formas plurales. Haciendo clic en el ícono de hamburguesa en la barra de herramientas principal, una lista de todas las cadenas y traducciones disponibles se abrirá en la barra lateral. También puedes usar la barra lateral para localización fuera de contexto:</p> + +<p><img alt="Out-of-context localization: list" src="https://mdn.mozillademos.org/files/8337/out-of-context-1.png"> <img alt="Out-of-context localization: translate" src="https://mdn.mozillademos.org/files/8335/out-of-context-2.png"></p> + +<ol> + <li>Aprieta en la cadena que deseas traducir.</li> + <li>El panel de traducción con la cadena original y sus detalles (por ejemplo con comentarios) se abre.</li> + <li>Traduce la cadena en el área de traducción de abajo.</li> + <li>Aprieta el botón "Save" para guardar tu traducción.</li> +</ol> + +<p>Mientras traduces cadenas fuera de contexto, las traducciones también aparecerán en el sitio web, si es que también pueden ser traducidas en contexto.</p> + +<h3 id="Ayudas_para_la_traducción">Ayudas para la traducción</h3> + +<p>Como puedes ver, sugerencias del historial, la memoria de traducción, traducciones de máquina y de otras localizaciones están disponibles en el panel de traducción fuera de contexto. Les llamamos Ayudas para la traducción y aquí tienes cómo cada una de ellas te ayudarán mientras traduces cadenas:</p> +</div> + +<p><img alt="Translation helpers: History" src="https://mdn.mozillademos.org/files/8339/helpers-history.png"> <img alt="Translation helpers: Machinery" src="https://mdn.mozillademos.org/files/8341/helpers-machinery.png"> <img alt="Translation helpers: Other locales" src="https://mdn.mozillademos.org/files/8343/helpers-locales.png"> <img alt="Translation helpers: Search" src="https://mdn.mozillademos.org/files/8345/helpers-menu.png"></p> + +<h4 id="History">History</h4> + +<p>Muestra traducciones sugeridas previamente, incluyendo las de otros usuarios.</p> + +<h4 id="Machinery">Machinery</h4> + +<p>Muestra coincidencias de varios servicios: memoria de traducción interna, <a href="http://transvision.mozfr.org/">Mozilla Transvision</a>, <a href="https://amagama-live.translatehouse.org/">memoria de traducción de código abierto</a>, <a href="http://www.microsoft.com/Language/">terminología de Microsoft</a> y <a href="http://www.bing.com/translator">traducción por máquina</a>.</p> + +<h4 id="Other_locales">Other locales</h4> + +<p>Muestra las traducciones coincidentes realizadas por otras localizaciones.</p> + +<h4 id="Search">Search</h4> + +<p>Casi como la opción "Máquina", pero utiliza la palabra clave proveída como parámetro de entrada en lugar de la cadena original.</p> + +<p>Al hacer clic en una sugerencia, esta es copiada al área de traducción.</p> + +<dl> +</dl> + +<h2 id="Publicando_tu_localización">Publicando tu localización</h2> + +<p>Supón que ahora deseas publicar tu trabajo de localización subiéndolo a un repositorio. ¡Pontoon también te permite hacer eso! De hecho, lo hace por tí sincronizando de forma automática con los repositorios a cada hora. ¡Ahora puedes darte una palmadita en la espalda, bailar un poco, ir a dormir o hacer algo más para celebrar tu trabajo!</p> diff --git a/files/es/mozilla/localization/notas_de_localizacion/index.html b/files/es/mozilla/localization/notas_de_localizacion/index.html new file mode 100644 index 0000000000..3c5936a2b9 --- /dev/null +++ b/files/es/mozilla/localization/notas_de_localizacion/index.html @@ -0,0 +1,25 @@ +--- +title: Notas de Localizacion +slug: Mozilla/Localization/Notas_de_Localizacion +tags: + - Guía + - Internacionalizacion + - Localización + - Mozilla +translation_of: Mozilla/Localization/Localization_notes +--- +<p><span class="seoSummary">Localizadores usualmente funcionan en el archivo localizable sin el contexto los archivos de fuente incluyendo las cadenas localizadas; es importante anadir comentarios en los archivos localizados, tambien. Generalmente, estos comentarios se conocen como <em>notas de localizacion</em>. Existe un formato especifico para estas notas, el cual es descrito en este documento.</span></p> + +<p>Es importante seguir el formato lo mas parecido posible. Existen muchas herramientas automaticas que analizan estos comentarios para acceso facil y son usados por los localizadores.</p> + +<h2 id="Archivos_DTD">Archivos DTD</h2> + +<pre class="eval"><!-- NOTA DE LOCALIZACION (nombre de entidad): comentario --> +</pre> + +<h2 id="Archivos_de_Propiedades">Archivos de Propiedades</h2> + +<pre class="eval"># NOTA DE LOCALIZACION (llave): comentario +</pre> + +<p>Comentarios atraves del archivo deben usar el mismo formato, al principio del archivo (pero despues de la informacion de licencia) y simplemente inserte la referencia <em>(nombre de entidad/llave)</em> .</p> diff --git a/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html b/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html new file mode 100644 index 0000000000..3475c95e53 --- /dev/null +++ b/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html @@ -0,0 +1,209 @@ +--- +title: Fase de PR +slug: Mozilla/Localization/Quick_start_guide/fase_QA +translation_of: Mozilla/Localization/Quick_start_guide/QA_phase +--- +<p>Después de todo ese duro esfuerzo de localización estamos seguros que no sólo deseas ver tu trabajo funcionando, sino que quieres asegurarte que sea exacto y fiel. Si no tienes mucha experiencia con código, podrías incluso estar preocupado de que no se haya roto algo (Uuuy!). Ahora te guiaremos a través de la realización de algunas pruebas de control de calidad en tu trabajo para que te asegures de ir por buen camino.</p> + +<p>Si estás localizando sitios web de Mozilla, tu trabajo se desplegará poco después de realizarlo sin necesidad de construir un paquete de idioma. Si ese fuera el caso, esta parte de la guía podría no ser completamente aplicable para tí. De cualquier forma, siéntete libre de saltar a la siguiente sección dando click en el vínculo "Siguiente", ubicado en la parte inferior de la página.</p> + +<p>Para ver tu trabajo en Firefox (u otra aplicación de Mozilla), necesitarás tener un paquete de idioma construído para instalarlo en tu 'instancia' local.</p> + +<h2 id="Construcción_manual_y_automatizada">Construcción manual y automatizada</h2> + +<p>Con sólo dar click en un botón, algunas herramientas de L10n (como Narro y Koala) automáticamente crearán paquetes de idiomas para tí. Si estás usando una de estas herramientas, no dudes en saltarte a la sección <a href="#Seeing_your_work" title="https://developer.mozilla.org/en/Localization_Quick_Start_Guide:_Part_3#Seeing_your_work">Probar tu L10n y ver tu trabajo</a>. Si no estás usando una de esas herramientas, déjanos guiarte a través de la construcción manual de tu propio paquete de idioma.</p> + +<div class="note"><strong>Nota</strong>: ¿Recuerdas todos esos requisitos previos de las herramientas que te preguntamos, y que eran necesarios para realizar la instalción en la <a href="/en/Localization_Quick_Start_Guide#Local_environment_tools" title="https://developer.mozilla.org/en/Localization_Quick_Start_Guide#Local_environment_tools">configuración inicial</a>? Pues bien, los necesitararemos casi todos ellos. Si aún no los has instalado, <em>este</em> es el momento de hacerlo.</div> + +<h3 id="Instrucciones_preliminares">Instrucciones preliminares</h3> + +<p>Vamos a usar los siguientes directorios de archivo para este ejemplo:</p> + +<pre style="margin-left: 40px;"> Tu directorio de trabajo <em>(root)/</em>mozilla-aurora <em>(fuente de en-US, tomado de <a class="external" href="http://hg.mozilla.org/releases/mozilla-aurora" rel="external" title="http://hg.mozilla.org/releases/mozilla-aurora">http://hg.mozilla.org/releases/mozilla-aurora</a></em><em>)</em>/ + l10n-central <em>(directorio de archivos de L10n, uno por cada L10n; a menudo denominado "l10n base")/</em> + tu-codigo-de-idioma <em>(un directorio con tus archivos de L10n, en este ejemplo usaremos prueba-x)</em> + +<strong> Ejemplo</strong>: <code>root/mozilla-aurora</code> y <code>root/l10n-central/prueba-x</code> +</pre> + +<p>Además, necesitarás copiar y traducir el archivo <code>toolkit/defines.inc </code>directamente de en-US, antes de que puedas construir. Esto se debe a un fallo en la lógica de construcción.</p> + +<p>Por favor sigue la estructura de arriba de cerca o ajusta los comandos siguientes de acuerdo con tu instalación personalizada.</p> + +<p>Para copiar este archivo en el directorio apropiado, haz lo siguiente:</p> + +<ol> + <li>Ve al directorio de trabajo desde tu terminal de linea de comandos (es decir, donde creaste la estructura de carpetas descrita anteriormente).</li> + <li>Ingresa los siguientes comandos:</li> +</ol> + +<pre style="margin-left: 40px;">mkdir -p l10n-central/prueba-x/toolkit/ + +cp mozilla-aurora/toolkit/locales/en-US/defines.inc l10n-central/prueba-x/toolkit/defines.inc +</pre> + +<p>Tarán! Copiados!</p> + +<p>Para finalizar, necesitarás un archivo llamado <code>.mozconfig</code> para proceder con el manual de construcción. Este archivo contiene las instrucciones de construcción necesarias.</p> + +<p>Para crear y configurar este archivo, sigue estas insctrucciones:</p> + +<div class="warning"> +<p>Hasta antes de la corrección del <a href="https://bugzil.la/1063880">fallo 1063880</a> en mozilla-aurora y mozilla-beta, al construir los paquetes de idioma en contra de estos dos árboles, usted debía:</p> + +<ol> + <li> + <p>retirar <code>ac_add_options --disable-compile-environment</code> de <code>.mozconfig</code> en el paso 3</p> + </li> + <li> + <p>usar <code>./mach build config</code> después del paso 4</p> + </li> +</ol> +</div> + +<ol> + <li>Actualiza el código de fuente de Mozilla:</li> +</ol> + +<p style="margin-left: 40px;"><code>$ cd mozilla-aurora<br> + $ hg pull -u</code></p> + +<ol start="2" style="list-style-type: decimal;"> + <li>Inserta el siguiente comando para crear el archivo <code>.mozconfig</code> : <code>$ nano -w .mozconfig</code></li> + <li>Inserta las siguientes líneas en tu archivo <code>.mozconfig</code> :</li> +</ol> + +<pre style="margin-left: 40px;">mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../firefox-build +ac_add_options --disable-compile-environment +ac_add_options --with-l10n-base=../l10n-central # path relative to MOZ_OBJDIR +ac_add_options --enable-application=[<em>browser or mail</em>] +</pre> + +<p style="margin-left: 40px;">Necesitarás especificar qué aplicación estás localizando en la cuarta línea (por ej. para Firefox sería <code>browser</code>, Thunderbird debería ser <code>mail</code>, etc).</p> + +<ol start="4" style="list-style-type: decimal;"> + <li>Inserta el siguiente comando para realizar la configuración: <code>$ ./mach configure</code></li> + <li>Una vez tu línea de comandos finalice devolviendo la salida del 'comando de configuración', ve al directorio recientemente creado: <code>$ cd ../firefox-build/browser/locales</code></li> +</ol> + +<p>Ahora estás listo para construir! En este punto puedes seleccionar entre dos opciones de construcción:</p> + +<ul> + <li><a href="/en/Creating_a_Language_Pack#Creating_a_langpack" title="https://developer.mozilla.org/en/Creating_a_Language_Pack#Creating_a_langpack">Crear un paquete-de-idioma</a>, que es el que está instalado <em>en la parte superior</em> de tu aplicación de Mozilla.</li> + <li><a href="/en/Creating_a_Language_Pack#L10n_binary_repack" title="https://developer.mozilla.org/en/Creating_a_Language_Pack#L10n_binary_repack">Re-empaquetar la aplicación 'binaria'</a> (también conocido como una L10n 're-empaquetada'), que te permirá instalar tu aplicación <em>al lado</em> de la instalación de la aplicación de Mozilla existente y usarla por separado.</li> +</ul> + +<p>Visita los enlaces de arriba para aprender cómo hacer estas pruebas de construcción.</p> + +<h2 id="Probar_tu_L10n_y_observar_tu_trabajo"><a id="Seeing_your_work" name="Seeing_your_work"></a>Probar tu L10n y observar tu trabajo</h2> + +<p>Ahora que tienes tu paquete-de-idioma o L10n re-empaquetada, vamos a hablar de cómo ver tu trabajo y probarlo en tu aplicación.</p> + +<p>Al probar el paquete-de-idioma estarás un paso más cerca de tener tu L10n añadida a los lanzamientos oficiales. Sigue los pasos siguientes para probar tu localización</p> + +<ol> + <li>Instala Aurora en tu lenguaje preferido.</li> + <li>Instala el paquete-de-idioma .xpi que acabas de crear (o exportar)</li> + <li>Selecciona tu lenguaje usando el Interruptor de Localización Rápida o la add-ons del Interruptor de Localización, yendo a Herramientas->Lenguaje->Tu código de localización del lenguaje.</li> + <li>Reinicia el navegador y comienza tus pruebas.</li> +</ol> + +<p>En este punto deberías estar en la capacidad de ver todo tu trabajo funcionando. Da click <a class="link-https" href="https://wiki.mozilla.org/MozillaQualityAssurance:l10n_checklist" title="https://wiki.mozilla.org/MozillaQualityAssurance:l10n_checklist">aquí</a> para consultar las guías de cómo realizar pruebas para tu localización.</p> + +<h2 id="¡No_pierdas_tu_trabajo!">¡No pierdas tu trabajo!</h2> + +<p>¡Tu trabajo es MUY importante! Realmente odiaríamos ver que perdieras algo de él. Después de probar tu localización, debes enviarlo a un repositorio remoto, que servirá como una copia de seguridad de tu trabajo y permitirá a otros seguir tu progreso. which will serve as a backup for your work and will let others follow your progress. Vamos a ir por el proceso más abajo.</p> + +<p>Los equipos oficiales de localización usan repositorios que se encuentran en <a class="external" href="http://hg.mozilla.org/" rel="external" title="http://hg.mozilla.org/">hg.mozilla.org</a>. Antes que un equipo se vuelva oficial, nos gusta hacer que los localizadores se sientan cómodos con los comangos Hg que permiten realizar el trabajo de <em>cloning</em>, <em>pulling</em>, <em>committing</em>, y <em>pushing</em> hacia un repositorio experimental. Usamos un servicio web llamado <a class="external" href="http://www.bitbucket.org/" rel="external" title="http://www.bitbucket.org/">Bit Bucket</a> para empezar el proceso de aprendizaje.</p> + +<div class="note"><strong>Nota</strong>: Debes tener Mercurial configurado antes de que comiences. Ese paso se encuentra en la página de instalación inicial. Si no la has completado aún, no te preocupes, ¡te experaremos!</div> + +<h3 class="note" id="Haciendo_push_a_tu_repositorio">Haciendo <em>push</em> a tu repositorio</h3> + +<p>Hay un par de cosas que debes tomar en cuenta antes de hacer <em>push</em> a tu repositorio:</p> + +<ul> + <li>Asegúrate de que tus archivos han sido codificados en el formato Unicode sin BOM (marca de orden de bytes).</li> + <li>Recuerda que aquí estás haciendo el <em>push</em> de un directorio completo, no un archivo <code>.zip</code> o un paquete de idioma <code>.xpi</code>.</li> +</ul> + +<p>Las siguientes instrucciones te ayudarán a aprender cómo usar tu repositorio Hg.</p> + +<ol> + <li><span style="color: #daa520;">Después de que tu repositorio sea creado por los drivers l10n</span>, por favor visita la URL para tu repositorio. We'll use x-testing here for our example. You can do this by entering the following URL into your browser: <code><a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li> + <li>Now, navigate to your locale's directory on your local machine.</li> +</ol> + +<p style="margin-left: 40px;">If you're using Koala, this should be located at <code>/path/to/your/koala.project/locale/3.6/x-testing</code>, otherwise, it should be located at <code>/path/to/your/working_dir/l10n_base/x-testing</code>.</p> + +<p style="margin-left: 40px;">In this directory, you should have an hg repository. You might have created it yourself by running <code>hg init</code> or <code>hg clone</code> or you might have had it created by Koala when you were setting up a new localization project. Also at this point, you shouldn't have any uncommitted changes (i.e., running the <code>hg status </code>command should show nothing). Let's see what the last revision in this repository is.</p> + +<ol start="3" style="list-style-type: decimal;"> + <li>Enter the following command: <code>$ hg log -l 1</code></li> +</ol> + +<p style="margin-left: 40px;">You should see an output similar to the one below:</p> + +<pre style="margin-left: 40px;">changeset: 0:7c543e8f3a6a +tag: tip +user: Your Name <email@example.com> +date: Mon Nov 23 18:08:25 2009 +0100 +summary: Added search bar strings +</pre> + +<ol start="4" style="list-style-type: decimal;"> + <li>Now compare the local repository on your machine with the remote Hg repository by entering this command: <code>$ hg outgoing <a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li> +</ol> + +<p style="margin-left: 40px;">The <code>hg outgoing</code> command compares the two repositories and lists all changesets that are present locally, but not in the remote repository. These changesets will need to be "pushed" to the remote repository. You can expect to see output like this:</p> + +<pre style="margin-left: 40px;">comparing with http://hg.mozilla.org/l10n-central/x-testing +searching for changes + +changeset: 0:7c543e8f3a6a +tag: tip +user: Your Name <email@example.com> +date: Mon Nov 23 18:08:25 2009 +0100 +summary: Added search bar strings +</pre> + +<ol start="5" style="list-style-type: decimal;"> + <li>Let's now push this changeset. Enter the following command:<code> hg push <a class="external" href="http://hg.mozilla.org/l10n-central/x-testing" rel="freelink">http://hg.mozilla.org/l10n-central/x-testing</a></code></li> + <li>Mercurial will connect to your repo and ask you to provide your account information (i.e., the username and the password).</li> +</ol> + +<pre style="margin-left: 40px;">real URL is http://hg.mozilla.org/l10n-central/x-testing +pushing to http://hg.mozilla.org/l10n-central/x-testing +searching for changes +http authorization required +realm: hg.mozilla.org HTTP +user: your_id +password: +</pre> + +<p style="margin-left: 40px;">After you enter your account information, the changeset will be pushed.</p> + +<pre style="margin-left: 40px;">adding changesets +adding manifests +adding file changes +added 1 changesets with 2 changes to 2 files +bb/acl: your_id is allowed. accepted payload. +quota: 979.7 KB in use, 150.0 MB available (0.64% used) +</pre> + +<p>Your changeset has been successfully pushed to your repository!</p> + +<p>As you begin to move through your translations, you should <code>commit</code> the changes locally and <code>push</code> your work to this experimental repository. For instance, if you have finished translating all the <code>.dtd</code> and <code>.properties</code> files in your <code>x-testing/browser/chrome/browser/</code> directory, then you should run these commands:</p> + +<pre>$ hg status +$ hg commit -m "Translated browser/chrome/browser/" +$ hg outgoing +$ hg push http://hg.mozilla.org/l10n-central/x-testing</pre> + +<p>Note that due to the distributed nature of Hg, <code>hg commit</code> saves the changes locally (i.e., in your computer's Hg repository). You can see the history of commits with <code>hg log</code>. After doing <code>hg commit</code>, you still need to send the changes to the remote repository. This is where <code>hg push</code> comes in. This sends your commits to the remote repository.</p> + +<p>Now you're ready to proceed to the release phase!</p> + +<p> </p> + +<p>{{ PreviousNext("Localization_Quick_Start_Guide/Translation_phase", "Localization_Quick_Start_Guide/Release_phase") }}</p> diff --git a/files/es/mozilla/localization/quick_start_guide/index.html b/files/es/mozilla/localization/quick_start_guide/index.html new file mode 100644 index 0000000000..d437983005 --- /dev/null +++ b/files/es/mozilla/localization/quick_start_guide/index.html @@ -0,0 +1,55 @@ +--- +title: Guía de inicio rápido a la Localización +slug: Mozilla/Localization/Quick_start_guide +tags: + - Localización +translation_of: Mozilla/Localization/Quick_start_guide +--- +<p>Bienvenido a la Localización de Mozilla (abreviado l10n)!</p> + +<p>Ya sea que estés aquí para poner en marcha tu propia Localización en el proyecto Mozilla o para unirte al proyecto de una Localización existente, has venido al lugar correcto. Esta guía está repleta con toda la información básica y técnica que necesitas para poder comprometerte con el programa Mozilla l10n. Te llevaremos a través una serie de pasos para introducirte, desde la organización del entorno inicial hasta incluso probar y lanzar tu propia localización. A lo largo de esta guía, conocerás los temas referidos a la variedad de proyectos en los que puedas contribuir y a las herramientas que necesitas para poder localizarlos.</p> + +<p><span style="line-height: 1.5;">Cuando lleguemos a ejemplos específicos, los llevaremos del proyecto Firefox, ya que es el proyecto l</span>ocalizado<span style="line-height: 1.5;"> más amplio dentro de Mozilla. Mientras más te acerques al final de esta guía, más apto estarás para poder cambiar Firefox en tu entorno local y después ver esos cambios en la interface del mismo. Por último, cuando termines esta guía, tendrás las herramientas necesarias para empezar a contribuir al proyecto.</span></p> + +<p>Recuerda que esta guía solo te enseñará los aspectos técnicos de Mozilla l10n. Visita la página <a class="link-https" href="https://wiki.mozilla.org/L10n:Localization_Process" title="https://wiki.mozilla.org/L10n:Overview">L10n Process</a> para conocer todo el proceso.</p> + +<div style="width: 25%; background-color: #4AA02C; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="sect1"> </h2> + +<h2 id="Organización_inicial"><strong><span style="background-clip: initial; font-family: arial,sans-serif; font-size: 18pt; line-height: 115%;"><a href="https://developer.mozilla.org/es/docs/Mozilla/Localization/Quick_start_guide/Initial_setup">Organización inicial</a></span></strong></h2> +Trabajo de preparación técnica antes de localizar.</div> + +<div style="width: 25%; background-color: #A2BFF4; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="sect2"> </h2> + +<h2 id="Fase_de_traducción"><strong><span style="font-family: arial,sans-serif; font-size: 18pt; letter-spacing: -0.85pt; line-height: 115%;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/Translation_phase">Fase de traducción</a></span></strong></h2> +Tutorial de herramientas l10n para la traducción</div> + +<div style="width: 25%; background-color: orange; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="sect3"> </h2> + +<h2 id="Fase_QA"><strong><a href="https://developer.mozilla.org/es/docs/Mozilla/Localization/Quick_start_guide/QA_phase">Fase QA</a></strong></h2> + +<p>Tutoriales para comprobar l10n.</p> +</div> + +<div style="width: 92%; background-color: #C0C0C0; float: left; display: block; margin: 1.5%; border: 1px solid #C4C295; text-align: center; padding: 2.5%; padding-top: 0px;"> +<h2 id="sect4"> </h2> + +<h2 id="Etapa_de_lanzamiento"><strong style="font-size: 2.14285714285714rem;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/Release_phase">Etapa de</a></strong><span style="font-size: 2.14285714285714rem;"> </span><strong style="font-size: 2.14285714285714rem;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Quick_start_guide/Release_phase">lanzamiento</a></strong></h2> + +<p align="center"><span style="line-height: 1.5;">Pasos para enviar tu trabajo de localización</span></p> +</div> + +<div style="background-color: white; border: 3px solid; display: block; padding: 20px; margin-top: 20px;"> +<p> </p> + +<p><br> + <span style="line-height: 1.5;">Estas cuatro etapas constituyen el lado técnico del programa l10n. Para conocer más sobre alguna de estas, haga clic en cualquiera de los links de arriba. Antes de llegar al cuadro grande (Etapa de lanzamiento), sugerimos que empiece por la fase verde (Organización inicial) y de ahí hacia su derecha.</span></p> + +<p> </p> +</div> + +<p class="note"><strong>Nota: </strong>Esta guía está escrita para dos clases de colaboradores: Aquellos que se incorporan en una nueva localización y aquellos que comparten una localización existente. Es importante conocer qué información aplica a cada tipo de colaborador. Para ayudarte a conocer cuál es la información más relevante, presta atención al color de las fuentes utilizadas en el texto. Toda la información proveniente de aquellos que empiezan una nueva localización tendrá como fuente de letra el <span style="color: #daa520;">color naranja</span>, y toda la información proveniente de aquellos que se incorporan con una localización existente tendrá como fuente de letra el <span style="color: #0000ff;">color azul</span>.</p> + +<p>{{ Next("Localization_Quick_Start_Guide/Initial_setup") }}</p> diff --git a/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html b/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html new file mode 100644 index 0000000000..3f8a4874a7 --- /dev/null +++ b/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html @@ -0,0 +1,99 @@ +--- +title: Configuración inicial +slug: Mozilla/Localization/Quick_start_guide/Initial_setup +tags: + - Localización +translation_of: Mozilla/Localization/Quick_start_guide/Initial_setup +--- +<p>Como pre-requisito para contribuir al programa de L10n, necesitas tener acceso a códigos, herramientas y un entorno local apropiadamente configurado (es decir, tu computadora personal). También necesitas determinar si ya existe en tu zona otro proyecto de localización. Aquí abordaremos temas relacionados con las cuentas necesarias, así como las herramientas y las respectivas configuraciones que necesitas montar antes de contribuir.</p> + +<h3 id="Nuevo_o_existente">Nuevo o existente</h3> + +<p>Antes que nada, necesitas saber si crearás una nueva localización o si te unirás a una existente. Esto determinará qué información es más relevante para ti a lo largo de esta guía.</p> + +<p>Esto es lo que tendrás que hacer:</p> + +<p>Revisa el siguiente enlace para ver si ya existe una localización en tu zona: <a href="https://wiki.mozilla.org/L10n:Teams">Directorio de la comunidad de localizacion</a>.</p> + +<p> a. <span style="color: #0000cd;">Si la comunidad ya existe, contáctalos y pregúntales cómo puedes ayudar.</span></p> + +<p> b. <span style="color: #ff8c00;">Si la comunidad no existe, envía un correo-e al <a href="https://groups.google.com/forum/?fromgroups#!forum/mozilla.dev.l10n.new-locales" title="https://groups.google.com/forum/?fromgroups#!forum/mozilla.dev.l10n.new-locales">new-locales newsgroup</a> para recibir información adicional.</span></p> + +<h3 id="Cuentas">Cuentas</h3> + +<p>Hay un puñado de cuentas que necesitas tener en mente mientras empiezas. Estas no son necesarias para empezar a contribuir, pero las necesitarás cuando te estés preparando para producir un lanzamiento oficial. Por ahora, solamente ten en cuenta que estas serán importantes cuando tus esfuerzos progresen. Estas cuentas almacenarán tus códigos, contribuciones y te ayudarán a producir una localización oficial.</p> + +<p style="margin-left: 33.5pt;"><strong>Hg (Mercurial)</strong></p> + +<p style="margin-left: 33.5pt;"><span style="line-height: 1.5;">Mercurial es el entorno de control de revisión que aloja el principal código fuente de Mozilla, así como el código localizado para cada localización oficial de Mozilla. Necesitarás esto para localizar las aplicaciones de Mozilla. El acceso de confirmación a Hg </span><u>no</u><span style="line-height: 1.5;"> es necesario para empezar a localizar. Después de tener un poco de experiencia con Hg, es posible que quieras tener el acceso de confirmación. En ese punto, tienes que visitar la página </span><a href="http://www.mozilla.org/hacking/committer/">Mozilla Commiter</a><span style="line-height: 1.5;"> y seguir el proceso descrito allí. </span><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=741305" style="line-height: 1.5;">Aquí hay un ejemplo de fallo</a><span style="line-height: 1.5;"> que ilustra bien el proceso. Usa esta </span><a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&component=Repository%20Account%20Requests&rep_platform=All&op_sys=All&cc=l10n%40mozilla.com&short_desc=l10n%20hg%20account%20for%20John%20Doe%20(ab-CD)" style="line-height: 1.5;">plantilla de fallo</a><span style="line-height: 1.5;"> cuando se presente un</span><span style="line-height: 1.5;"> fallo de registro en tu cuenta de Hg. Envía a </span><a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" style="line-height: 1.5;" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a><span style="line-height: 1.5;"> una solicitud sobre crear tu repositorio de la zona.</span></p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">SVN</strong></p> + +<p style="margin-left: 36.0pt;">SVN es un entorno de control de revisión que Mozilla utiliza para alojar las páginas web de la fuente de Mozilla y sus ubicaciones para cada localización oficial de Mozilla. Observa esta página <a href="https://wiki.mozilla.org/SVN#SVN_account_for_localizers">wiki</a> referida a cómo tener acceso a la SVN. La <a href="https://developer.mozilla.org/en-US/docs/SVN_guide_for_localizers">guía</a> <a href="https://developer.mozilla.org/en-US/docs/SVN_guide_for_localizers">de localizadores para SVN</a>, te ayudará a aprender los comandos de SVN más importantes para l10n. Envía a <a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a> una solicitud sobre crear tu repositorio de la zona.</p> + +<p style="margin-left: 33.5pt;"><strong style="line-height: 1.5;">Herramientas l10n basadas en la web</strong></p> + +<p style="margin-left: 33.5pt;"> Hablaremos sobre esto más adelante. Por ahora, solo ten en cuenta que si decides usarlos, tal vez necesites crearte una cuenta personal.</p> + +<p style="margin-left: 33.5pt;"><strong style="line-height: 1.5;">Mozilla LDAP</strong></p> + +<p style="margin-left: 36.0pt;">Una vez que estés preparado para tener tu localización registrada en los repositorios principales de Mozilla, necesitarás una cuenta Mozilla LDAP. Envía a <a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a> una solicitud sobre crear tu cuenta LDAP.</p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Componente Bugzilla de una zona especifica</strong><br> + Tener un componente Bugzilla específico para tu zona nos ayudará a seguir tu progreso en la localización desde los primeros pasos hasta su lanzamiento oficial. Además, nos notificará cuando estés teniendo problemas únicos de tus trabajos de equipo de localización. Envía a <a href="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics" title="http://groups.google.com/group/mozilla.dev.l10n.new-locales/topics">new locales newsgroup</a> una solicitud sobre crear tu componente Bugzilla de la zona.</p> + +<h3 id="Herramientas_de_entorno_local">Herramientas de entorno local</h3> + +<p><span style="line-height: 1.5;">Al igual que las cuentas, hay algunas herramientas de entorno que deberías instalar en tu computadora. Estas herramientas te ayudarán a almacenar tus contribuciones, aplicaciones de Mozilla, paquetes de lenguaje y a probar tu trabajo.</span></p> + +<p style="margin-left: 35.45pt;"><strong>Hg (Mercurial)</strong></p> + +<p style="margin-left: 35.45pt;">Como notaste arriba, nosotros usamos Mercurial para mantener el código fuente de Mozilla y el código localizado. No solo necesitarás un repositorio de localización para almacenar tus localizaciones, sino también que lo tendrás que tener instalado y configurado en tu computadora. Puedes encontrar todo lo que necesites saber sobre instalar y configurar Mercurial para tu localización <a href="https://developer.mozilla.org/en/Localizing_with_Mercurial#Install_Mercurial">Aquí</a>.</p> + +<p style="margin-left: 33.5pt;"><strong style="line-height: 1.5;">compare-locales</strong></p> + +<p style="margin-left: 36.0pt;">compare-locales es un script de Python que te ayuda a probar tu trabajo sin necesidad de ejecutar Firefox u otra aplicación. Las instrucciones de instalación se encuentran <a href="https://developer.mozilla.org/en/Compare-locales">Aquí</a>.</p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">L10n checks</strong></p> + +<p style="margin-left: 36.0pt;"><span style="line-height: 1.5;">L10n checks es otro script de Python que te ayuda a probar tu trabajo sin necesidad de ejecutar una aplicación. Las instrucciones de instalación las puedes encontrar </span><a href="https://developer.mozilla.org/en/L10n_Checks" style="line-height: 1.5;">Aquí</a><span style="line-height: 1.5;">.</span></p> + +<p><strong style="line-height: 1.5;"> autoconf 2.13 </strong></p> + +<p style="margin-left: 36.0pt;">autoconf es una utilidad fundamental para crear aplicaciones de Mozilla y paquetes de lenguaje. Para estos, usamos la versión 2.13 o una mayor. Puedes encontrar los archivos fuente y las instrucciones de instalación <a href="http://www.gnu.org/software/autoconf/">Aquí</a>.</p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">wget</strong></p> + +<p style="margin-left: 36.0pt;">wget es una utilidad de línea de comando que te permite recuperar archives usando protocolos de internet. Nosotros lo usamos para recuperar los datos de los repositorios. Puedes encontrar los archives fuente e instrucciones de instalación <a href="http://www.gnu.org/s/wget/">Aquí</a>.</p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Perl</strong></p> + +<p style="margin-left: 36.0pt;">Perl es un lenguaje de programación que te ayudará a crear paquetes de lenguaje y aplicaciones de Mozilla. Puedes encontrar los archivos fuente y las instrucciones de instalación <a href="http://www.perl.org/">Aquí</a>.</p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Python</strong></p> + +<p style="margin-left: 36.0pt;">Python es un lenguaje de programación en el cual muchos de nuestros script de pruebas l10n son escritos. Puedes encontrar los archivos fuente y las instrucciones de instalación <a href="http://python.org/">Aquí</a>.</p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Locale Switcher o Quick Locale Switcher</strong></p> + +<p style="margin-left: 36.0pt;">Ambos, tanto Locale Switcher como Quick Locale Switcher son add-ons para las aplicaciones de Mozilla. Cada uno es necesario para permitirte a ti ver tu trabajo dentro de la aplicación de Mozilla. Puedes instalar estos add-ons buscándolos en el administrador de add-ons de Firefox o siguiendo estos links: <a href="https://addons.mozilla.org/en-US/firefox/addon/locale-switcher/">Locale Switcher</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/quick-locale-switcher/">Quick Locale Switcher</a>.</p> + +<p style="margin-left: 36.0pt;"><strong style="line-height: 1.5;">Un sólido editor de texto basado en unicode</strong></p> + +<p style="margin-left: 36.0pt;">Aquí hay algunas sugerencias:</p> + +<p style="margin-left: 69.5pt;">· Windows: <a href="http://notepad-plus.sourceforge.net/uk/site.htm" title="http://notepad-plus.sourceforge.net/uk/site.htm">Notepad++</a> o <a href="http://www.flos-freeware.ch/notepad2.html" title="http://www.flos-freeware.ch/notepad2.html">Notepad2</a></p> + +<p style="margin-left: 69.5pt;">· GNU/Linux: <a href="http://en.wikipedia.org/wiki/Vim_%28text_editor%29" title="http://en.wikipedia.org/wiki/Vim_(text_editor)">vim</a>, <a href="http://projects.gnome.org/gedit/" title="http://projects.gnome.org/gedit/">gedit</a> o <a href="http://www.kate-editor.org/kate" title="http://www.kate-editor.org/kate">Kate</a></p> + +<p style="margin-left: 69.5pt;">· Mac OS X: <a href="http://www.barebones.com/products/TextWrangler/" title="http://www.barebones.com/products/TextWrangler/">TextWrangler</a> </p> + +<p><strong> GNU make</strong></p> + +<p style="margin-left: 36.0pt;">Make es una herramienta que controla la generación de ejecutables. Puedes encontrar la versión 3.79.1 o una mayor <a href="http://www.gnu.org/software/make/" title="http://www.gnu.org/software/make/">aquí</a>. Desafortunadamente, otras variedades de Make no lo harán.</p> + +<h2 id="Fin_de_la_organización_inicial"><strong>Fin de la organización inicial</strong></h2> + +<p>Ahora que has finalizado tu organización inicial, es momento de la mejor parte: ¡Traducir!</p> + +<p>{{ PreviousNext("Localization_Quick_Start_Guide", "Localization_Quick_Start_Guide/Translation_phase") }}</p> diff --git a/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html b/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html new file mode 100644 index 0000000000..0b0c7402a8 --- /dev/null +++ b/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html @@ -0,0 +1,58 @@ +--- +title: Creating localizable web content +slug: Mozilla/Localization/Web_Localizability/Creating_localizable_web_content +tags: + - Desarrollo web + - Internacionalizacón + - Localizabilidad + - Localización +translation_of: Mozilla/Localization/Web_Localizability/Creating_localizable_web_content +--- +<h3 id="Contenido_del_texto">Contenido del texto</h3> + +<ul> + <li>Revise que el texto es objetivamente correcto para una audiencia internacional (es decir, menciones a productos específicos de Estados Unidos como motores de búsqueda o diccionarios deberían ser adaptados).</li> + <li>Busque cadenas que sean difíciles de traducir debido a que sea confusa, use juegos de palabras o use colonialismos. Dependiendo del contexto, encontrar una cadena alternativa o documente una explicación de la cadena para los localizadores.</li> + <li>Compruebe que en páginas nuevas no se enlaza a subpáginas con anclas. Es decir: una página nueva es anunciada con solo 100 palabras pero realmente es contenido adicional de una página existente en inglés. Sucede en cosas como la sección de preguntas frecuentes (FAQs) o páginas de video, por ejemplo. Para vídeo, utilice el código para mostrar el vídeo en un reproductor de vídeo superpuesto en la página en lugar de enlazar con una sección de vídeo en inglés.</li> +</ul> + +<h3 id="Customizaciones_por_local">Customizaciones por local</h3> + +<ul> + <li>Compruebe si hay enlaces alternativos para páginas localizadas (por ejemplo, enlaces a MDN, <a href="https://addons.mozilla.org">Addons.mozilla.org</a>, u otros recursos externos, si existen equivalentes traducidos que podamos utilizar). Si hay alternativas, utilicelas añadiendo el parametro $lang; en las urls</li> + <li>Evalue el impacto de las nuevas páginas en todas nuestras propiedades web, especialmente enlaces a sitios de la comunidad y redirecciones. En ocasiones se puede dejar cierta libertad de modificación a un bloque de texto para que los localizadores enlacen a recursos locales relevantes.</li> +</ul> + +<h3 id="Imágenes">Imágenes</h3> + +<ul> + <li>Revise que las imágenes no vayan a ser un problema para la audiencia (referencias culturales, posicionamiento, reflejar para rtl, texto en imágenes,...) e identifiqué que tamaños y margenes pueden ser ajustados con CSS o se tienen que arreglar para todos los locales excepto Inglés</li> + <li> + <p>No use texto en íconos</p> + + <p><strong>Imágenes 1&2. Mal:</strong> <img alt="do-64.png" class="default internal" src="/@api/deki/files/3802/=do-64.png"><img alt="donot-64.png" class="default internal" src="/@api/deki/files/3803/=donot-64.png"></p> + + <p><strong>Imagen 3. Bien:</strong> <img alt="error-64.png" class="default internal" src="/@api/deki/files/3804/=error-64.png"></p> + + <p><strong>Imagen 4. Bien:</strong> <img alt="information-64.png" class="default internal" src="/@api/deki/files/3805/=information-64.png"></p> + + <p>Este icono es reconocido como el símbolo internacional para información. Puede quedarse así.</p> + </li> + <li> + <p>Use capturas de pantalla localizadas si es posible</p> + + <p>Capturas de pantalla son gráficos informativos importantes, a menudo explicando como lograr algo en una aplicación de escritorio o Web. Como tal, deben ser percibidas como una parte esencial del contenido y deben ser localizado.</p> + + <p><strong>Imagen 1. Mal.</strong></p> + + <p><img alt="tut_custom_1.jpg" class="default internal" src="/@api/deki/files/3812/=tut_custom_1.jpg"></p> + + <p>Si la captura de pantalla muestra la aplicación con la que el sitio web se relaciona directamente (Firefox en mozilla.com/firefox), intente usar capturas de pantalla de la versión localizada.</p> + + <p><strong>Image 2. Aceptable.</strong></p> + + <p><img alt="tut_PSpalette.jpg" class="default internal" src="/@api/deki/files/3814/=tut_PSpalette.jpg"></p> + + <p>Sin embargo, si la captura de pantalla muestra una aplicación o sitio web de terceros, es aceptable utilizar la versión inglés si no hay una versión con el idioma a localizar disponible.</p> + </li> +</ul> diff --git a/files/es/mozilla/marketplace/apis/index.html b/files/es/mozilla/marketplace/apis/index.html new file mode 100644 index 0000000000..4736fa334f --- /dev/null +++ b/files/es/mozilla/marketplace/apis/index.html @@ -0,0 +1,42 @@ +--- +title: Bibliotecas de utilidad y APIs +slug: Mozilla/Marketplace/APIs +tags: + - Apps + - Firefox OS + - Guía + - Marketplace + - Principiante +translation_of: Archive/Mozilla/Marketplace/APIs +--- +<div class="summary"> +<p class="summary">Cuando se trata de la codificación de funcionalidad para Firefox Marketplace en tus aplicaciones y páginas web, tendrás que usar las bibliotecas de utilidad del Marketplace, APIs de la web y APIs del Marketplace. Esta página presenta estas dos opciones, describe cuando las puedes usar y ofrece enlaces para obtener más información acerca de ellas.</p> +</div> + +<h2 id="Bibliotecas_de_utilidad_del_Marketplace">Bibliotecas de utilidad del Marketplace</h2> + +<p>Las bibliotecas de utilidad del Marketplace están diseñadas para facilitar tus necesidades diarias de codificación protegiéndote de las complejidades de la APIs de la web y el Marketplace. Actualmente solo existe una biblioteca, pero otras estarán disponibles a medida que las propiedades del Marketplace se expandan.</p> + +<ul> + <li><code><a href="https://github.com/mozilla/receiptverifier">receiptverifier</a></code> — esta biblioteca es usada para verificar recibos de pagos. Su uso se describe en el siguiente enlace <a href="/en-US/Marketplace/Monetization/Validating_a_receipt">Validar recibos de pagos</a>.</li> +</ul> + +<h2 id="APIs_de_la_web">APIs de la web</h2> + +<p>Tus aplicaciones del Marketplace necesitarán usar APIs de la web para ciertas funciones:</p> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.mozPay">navigator.mozPay</a></code> y la relacionada <a class="external external-icon" href="https://wiki.mozilla.org/WebAPI/WebPaymentProvider"> Proveedor de pagos web.</a> Esta API y su proveedor son usados para el manejo de pagos dentro de las aplicaciones. Su uso se describe en <a href="/en-US/Marketplace/Monetization/In-app_payments">Pagos dentro de las aplicaciones</a>.</li> +</ul> + +<h2 id="APIs_del_Marketplace">APIs del Marketplace</h2> + +<p>Para los requisitos más comunes de codificación de aplicaciones no deberías necesitar de las APIs del Marketplace. Algunas actividades, como <a href="/en-US/Marketplace/Options/Creating_a_store">crear tu propia tienda</a>, si necesitan de su uso; pero donde tus requerimientos sean soportados, una biblioteca de utilidad del Marketplace probablemente sea mejor opción.</p> + +<p>La documentación para las APIs del Marketplace se encuentra en readthedocs.org <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html">aquí</a>. Si necesitas de información mas detalla sobre estas APIs, por favor únete a la lista de correos de <a href="https://lists.mozilla.org/listinfo/dev-marketplace">dev-marketplace</a></p> + +<div class="note"> +<p>La documentación de las APIs del Marketplace es usada para identificar las APIs del Marketplace que están en desarrollo. Por lo tanto, puede que incluya detalles de APIs que no están disponibles para el Marketplace público.</p> +</div> + +<p> </p> diff --git a/files/es/mozilla/marketplace/faq/index.html b/files/es/mozilla/marketplace/faq/index.html new file mode 100644 index 0000000000..fa4c4a91cc --- /dev/null +++ b/files/es/mozilla/marketplace/faq/index.html @@ -0,0 +1,30 @@ +--- +title: Preguntas frecuentes del Marketplace de Firefox OS +slug: Mozilla/Marketplace/FAQ +translation_of: Archive/Mozilla/Marketplace/FAQ +--- +<dl> + <dt> + ¿Cómo puedo enviar una nueva aplicación?</dt> + <dd> + Ver <a href="/es/docs/Aplicaciones/Enviar_una_aplicacion">Enviar una aplicación</a>.</dd> + + <dt> + ¿Cuál es el proceso de aprobación?</dt> + <dd> + Para el Developer Preview, todas las aplicaciones con un manifiesto válido son aprobadas automáticamente.</dd> + <dt> + ¿Necesitan mis aplicaciones cumplir con una política de contenido?</dt> + <dd> + Las restricciones de conenido primarias del Marketplace de Firefox OS están para prevenir la actividad maliciosa o ilegal. La política será similar a la <a class="link-https" href="https://addons.mozilla.org/es/developers/docs/policies/reviews#section-prohibited">política de contenido para complementos de Firefox</a>. Las políticas serán finalizadas antes de llegar al lanzamiento de la beta del Marketplace.</dd> + <dt> + ¿Cómo venderá mi aplicación el Marketplace de Firefox OS?</dt> + <dd> + <div class="note"> + <strong>Nota:</strong> Las aplicaciones pagas y los pagos dentro de las aplicaciones están actualmente deshabilitados en el Marketplace de Firefox OS (agosto de<time datetime="2012-08"> 2012</time>). Se espera que estén disponibles nuevamente en un futuro cercano.</div> + </dd> + <dt> + ¿Quién aloja la aplicación?</dt> + <dd> + Usted aloja todos los archivos de su aplicación en su propio servidor. Cuando envía una aplicación al Marketplace de Firefox OS, usted provee la URL del archivo de manifiesto de su aplicación, que el Marketplace lee y verifica. Puede subir íconos, capturas de pantalla, etc. para promover la aplicación en el Marketplace de Firefox OS.</dd> +</dl> diff --git a/files/es/mozilla/marketplace/index.html b/files/es/mozilla/marketplace/index.html new file mode 100644 index 0000000000..1bb3d078b0 --- /dev/null +++ b/files/es/mozilla/marketplace/index.html @@ -0,0 +1,114 @@ +--- +title: Firefox Marketplace +slug: Mozilla/Marketplace +tags: + - Apps + - B2G + - Firefox OS + - Marketplace + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace +--- +<div class="summary"> +<p>El Firefox Marketplace es una tienda online, abierta y no-propietaria para aplicaciones web. En esta zona encontrarás toda la información necesaria para crear y publicar aplicaciones web en el Firefox Marketplace. Encuentra información acerca de cómo hacer aplicaciones exitosas, opciones de entrega, monetización, publicación y actualización de aplicaciones, y las librerías y APIs necesarias para aprovechar todas las características del Marketplace.</p> +</div> + +<div class="column-container"> +<p><span class="seoSummary"><span class="short_text" id="result_box" lang="es"><span class="hps">Mozilla</span> <span class="hps">está trayendo</span> <span class="hps">sus valores fundamentales</span></span> — <span class="short_text" id="result_box" lang="es"><span class="hps">la apertura, la</span> <span class="hps">libertad,</span> <span class="hps">la elección del usuario</span></span> — al mundo de las apps.</span></p> + +<p><span class="seoSummary">Usando tecnología estándar web, lenguajes y herramientas del <a href="https://marketplace.firefox.com">Firefox Marketplace</a> puedes publicar <a href="/en-US/Apps">Open Web Apps</a> (Aplicaciones de Web Abierta), de manera gratuita o de pago. Estas aplicaciones pueden ser empaquetadas, ejecutadas dentro de Firefox, o almacenadas en tu propio servidor web. Las aplicaciones publicadas están disponibles para los usuarios de Firefox en computadoras, dispositivos Android y teléfonos con sistema operativo Firefox donde sea que estén en el globo. Los usuarios descubren tus aplicaciones con facilidad en el Marketplace de Firefox usando la sección de aplicaciones destacadas, las diferentes categorías de aplicaciones y un poderoso motor de búsqueda. Los usuarios pueden acceder de manera instantánea a aplicaciones gratis, o comprar aplicaciones de pago mediante tarjeta de crédito o facturación por operadora. </span></p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Community" id="Community" name="Community">Publicación de tu app</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Publish">Publicando en el Firefox Marketplace</a></dt> + <dd> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Documentos</span> <span class="hps">particulares</span> <span class="hps">para</span> <span class="hps">publicar</span> <span class="hps">una aplicación en</span> <span class="hps">el</span> <span class="hps">Firefox </span></span><span id="result_box" lang="es">Marketplace</span><span id="result_box" lang="es"><span>.</span></span></div> + </div> + </dd> + <dt><a href="/en-US/Marketplace/Publish_options">Opciones de publicación de tu app</a></dt> + <dd>Una vez que hayas construido una Open Web App (Aplicación Web Abierta), hay difererentes opciones disponibles para publicar y que tu app salga al mundo. En este artículo se explica lo que está disponible.</dd> + <dt><a href="/en-US/Apps/Publishing/General_app_publishing_topics">Temas generales para la publicación de Aplicaciones</a></dt> + <dd> + <p>Información general y tips útiles para la publicación de aplicaciones de web abierta.</p> + </dd> + <dt><a href="/en-US/Marketplace/Marketplace_APIs">APIs del Firefox Marketplace</a></dt> + <dd>Enlace a la principal referencia de guías que cubren las APIs del Firefox Marketplace, las cuales puedes usar para configurar los métodos de pago de una aplicación, automatizar la presentación de aplicaciones, y mucho más.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">Monetización</h2> + +<dl> + <dt><a href="/en-US/docs/Mozilla/Marketplace/Monetization">Haciendo dinero con tu app</a></dt> + <dd>Has trabajado muy duro haciendo funcionar el código de tu última app pero, ¿cómo puedes obtener algo a cambio cuando la publicas?. Esta sección avanza a través de toda la información que necesitarás para implementar los pagos en tu aplicación, ya sean pagos en el Marketplace o dentro de tu aplicación.</dd> +</dl> + +<h2 class="Tools" id="Tools" name="Tools">Herramientas para desarrolladores de apps</h2> + +<ul> + <li><a href="/en-US/Apps/App_developer_tools">Simulador de Firefox OS </a></li> + <li><a href="/en-US/Apps/App_developer_tools">Herramientas de desarrollo de Aplicaciones</a></li> +</ul> + +<h2 id="Creando_tu_propia_tienda">Creando tu propia tienda</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Creating_a_store">Creando una tienda</a></dt> + <dd>No es necesario que utilices el Marketplace de Firefox para lanzar o distribuir tu aplicación.</dd> +</dl> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="/es/Marketplace/Submission">Presentación y revisión de la aplicación</a> + + <ol> + <li><a href="/es/Marketplace/Submission/Submitting_an_app" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Enviar una aplicación al Firefox Marketplace</a></li> + <li><a href="/es/Marketplace/Submission/Rating_Your_Content">Obtener una clasificación para tu aplicación</a></li> + <li><a href="/es/Marketplace/Submission/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">Criterios de revisión de Marketplace</a></li> + <li><a href="/es/Marketplace/Publishing/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">Captura de pantalla para la revisión de la aplicación en Marketplace</a></li> + <li><a href="/es/Marketplace/Publishing/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">Política de privacidad</a></li> + <li><a href="/es/Marketplace/Submission/Testing_and_troubleshooting">Pruebas de aplicación y resolución de problemas</a></li> + </ol> + </li> + <li><a href="/es/Marketplace/Publishing">Publicación de aplicaciones</a> + <ol> + <li><a href="/es/Marketplace/Publishing/Publish_options" title="If you don't want to go the Firefox Marketplace route, here is some useful information on self-publishing apps.">Opciones para la publicación</a></li> + <li><a href="/es/Marketplace/Publishing/Packaged_apps" title="A detailed description of packaged apps, what the different types entail, and what they are used for in the context of the Firefox Marketplace, and self-published apps.">Aplicaciones empaquetadas</a></li> + <li><a href="/es/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">Actualización de aplicaciones</a></li> + <li><a href="/es/Marketplace/Publishing/Open_web_apps_for_android">Aplicaciones Web Abiertas para Android</a></li> + <li><a href="/es/Marketplace/Publishing/Open_web_apps_for_desktop">Aplicaciones Web Abiertas para Escritorio</a></li> + <li><a href="/es/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">Añadiendo un subdominio para la aplicación</a></li> + <li><a href="/es/Marketplace/Publishing/Creating_a_store" title="Information that may be helpful to you if you want to build your own store for selling and distributing Open Web Apps.">Creación de una tienda</a></li> + </ol> + </li> + <li><a href="/es/Marketplace/Monetization">Monetización</a> + <ol> + <li><a href="/es/Marketplace/Monetization/Profiting_from_your_app" title="This guide contains introductory materials on how to monetize your apps, including tools needed, and a monetization calculator.">Sacando beneficio de tu aplicación</a></li> + <li><a href="/es/Marketplace/Monetization/App_payments_guide">Guía de pagos de aplicaciones</a></li> + <li><a href="/es/Marketplace/Monetization/In-app_payments" title="A guide to implementing support for in-app payments in your Web app.">Pagos en aplicación</a></li> + <li><a href="/es/Marketplace/Monetization/validating_a_receipt" title="A guide to when—and how—to validate your app's purchase receipt.">Validando un recibo</a></li> + <li><a href="/es/Marketplace/Monetization/App_pricing" title="A round up of fixed price points you can choose for your paid apps, and how these vary across different currencies, along with useful supporting information on dealing with app payments.">Lista de precios de aplicación</a></li> + <li><a href="/es/Marketplace/Monetization/Payments_Status" title="An at-a-glance summary of what countries have got our app payment services set up in them — where paid apps can be distributed">Estado del pago</a></li> + </ol> + </li> + <li><a href="/es/Marketplace/APIs">APIs del Marketplace</a> + <ol> + <li><a href="/es/Marketplace/APIs/Marketplace_utility_library" title="To help you work with the Firefox Marketplace, we provide a JavaScript library you can use in your apps to make it easier to handle in-app payments and verify payment receipts.">Biblioteca de utilidades del Marketplace</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="The Submission API lets you validate your app, update your app, and fetch information about the apps available to be installed.">API de presentación</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="The Payment API lets you get information about and process in-app purchases as well as to simply get information about what pricing tiers are available.">API de pago</a></li> + <li><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="All Marketplace-related documentation is centered here.">API del Marketplace</a></li> + </ol> + </li> + <li><a href="/es/Marketplace/FAQ">Preguntas frecuentes del Firefox Marketplace</a></li> +</ol> diff --git a/files/es/mozilla/marketplace/marketplace_apis/index.html b/files/es/mozilla/marketplace/marketplace_apis/index.html new file mode 100644 index 0000000000..fc8b78e53e --- /dev/null +++ b/files/es/mozilla/marketplace/marketplace_apis/index.html @@ -0,0 +1,56 @@ +--- +title: Firefox Marketplace APIs +slug: Mozilla/Marketplace/Marketplace_APIs +translation_of: Archive/Mozilla/Marketplace/Marketplace_APIs +--- +<p>Enlaces a las principales referencias que cubren las APIs de Marketplace de Mozilla Firefox, con las cuales usted puede manejar presentaciones de apps, configurar una cuenta de pago para una app, y más.</p> + +<dl> + <dt><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_utility_library">Biblioteca de utilidades del Marketplace</a></dt> + <dd>Para ayudarle a trabajar con el Marketplace Firefox, proporcionamos una biblioteca JavaScript que usted puede usar en sus apps para hacer más fácil el manejo de pagos dentro de la aplicación y verficar la recepción de pagos.</dd> + <dt><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/submission.html">API de Presentación</a></dt> + <dd>La API de Presentación le permite validar su app, actualizar su app, y dar información acerca de las apps que están disponibles para ser instaladas.</dd> + <dt><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html">API de Pago</a></dt> + <dd>La API de Pago le permite hacer cosas tales como obtener información acerca de compras dentro de la aplicación y obtener información acerca de los níveles de precios de varios países.</dd> + <dt><a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html" title="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/overview.html">Otras APIs de Marketplace</a></dt> + <dd>La documentación completa para las APIs de Marketplace de Firefox.</dd> +</dl> + +<h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5> +<ul> + <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li> + <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li> +</ul> +<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5> +<div class="twocolumns"> + <ul> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/DOM">DOM</a></li> + <li><a href="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/WebAPI">WebAPI</a></li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> + <li><a href="/en-US/docs/SVG">SVG</a></li> + <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li> + <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li> + </ul> +</div> +<h5 class="Community" id="Community" name="Community">Getting help from the community</h5> +<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p> +<ul> + <li>Consult the webapps forum: <ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li> +</ul> + <ul> + <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li> + </ul> + </li> +</ul> +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p> + +<p> </p> diff --git a/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html b/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html new file mode 100644 index 0000000000..b9e56c49e1 --- /dev/null +++ b/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html @@ -0,0 +1,32 @@ +--- +title: Estatus de pagos +slug: Mozilla/Marketplace/Monetization/Estatus_de_pagos +tags: + - Pagos Web +translation_of: Archive/Marketplace/Monetization/App_pricing +--- +<div class="summary"> + <p><span class="seoSummary">Los pagos del <span class="seoSummary"><a href="https://marketplace.firefox.com/">Firefox Marketplace</a> son procesados país por país según una base, con diferentes precios y metodos de pagos disponibles en cada país.</span> <span id="result_box" lang="es"><span class="hps">Este</span> <span class="hps">artículo detalla</span> <span class="hps">qué países están</span> <span class="hps">apoyados por</span> <span class="hps">los pagos</span> <span class="hps">del mercado,</span> <span class="hps">y proporciona vínculos a</span> <span class="hps">información más específica sobre</span> <span class="hps">cada país.</span></span></span></p> +</div> +<div class="note"> + <p><strong>Nota</strong>: <span id="result_box" lang="es"><span class="hps">Una lista de los</span> <span class="hps">puntos de precio</span> <span class="hps">se documenta</span> <span class="hps">en nuestra</span> <a href="/en-US/docs/Mozilla/Marketplace/App_pricing">página de precios de App</a> <span class="hps">y</span> <a href="http://firefox-marketplace-api.readthedocs.org/en/latest/topics/payment.html#pay-tiers">esta disponible en la API</a></span>.</p> +</div> +<h2 id="Soporte_de_pagos_por_país">Soporte de pagos por país</h2> +<p>Estos son los paises que el Marketplace soporta para hacer pagos. Estamos trabajando en agregar soporte para mas paises todo el tiempo. Para una lista de los paises soportados, por favor ve la<a href="/en-US/docs/Mozilla/Marketplace/App_pricing"> página de precios de App</a>.</p> +<h2 id="App_payouts">App payouts</h2> +<p>Mira las páginas siguients para mas detalles sobre el pago según tu país. Ten en cuenta, si bien tomamos en cuenta la moneda local de facturación, los pagos de tarjeta de credito solo pueden ser manejados en libras esterlinas, dólares estadounidences y euros.</p> +<ul> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Brazil">Brasil</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Colombia">Colombia</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Germany">Alemania</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Hungary">Hungría</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Mexico">México</a></li> + <li><a href="/Marketplace/Monetization/App_pricing/Payout_Poland">Polonia</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Spain">España</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_UK">Reino Unido</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_US">Estados Unidos</a></li> + <li><a href="/en-US/Marketplace/Monetization/App_pricing/Payout_Venezuela">Venezuela</a></li> +</ul> +<h2 id="Más_información_sobre_tasas">Más información sobre tasas</h2> +<p>Para obtener más información sobre tasas, ve al Firefox Marketplace y ve la pagina de tu app. Clikea en <em>Compatibilidad y Pagos</em>, luego <em>Añadir manejar o ver transacciones de su cuenta de pago.</em> A continuación haz click en el link <em>Ver transacciones</em>, como se muestra a continuación.</p> +<p><img alt="Transactions link" src="https://mdn.mozillademos.org/files/6567/transactions.png" style="width: 600px; height: 104px;"></p> diff --git a/files/es/mozilla/marketplace/monetization/index.html b/files/es/mozilla/marketplace/monetization/index.html new file mode 100644 index 0000000000..47dd53a78b --- /dev/null +++ b/files/es/mozilla/marketplace/monetization/index.html @@ -0,0 +1,80 @@ +--- +title: Monetización +slug: Mozilla/Marketplace/Monetization +tags: + - Apps + - Marketplace +translation_of: Archive/Marketplace/Monetization +--- +<div class="summary"> + <p>Has trabajado duro programando tu ultima app, pero, ¿cómo puedes obtener algo de vuelta cuando la publiques? Esta sección muestra toda la informacion que necesitas para implementar los pagos de aplicaciones, si se trata de pagos del Marketplace o de pagos dentro de la aplicacion.</p> +</div> +<div class="row topicpage-table"> + <div class="section"> + <dl> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/Apps/Tutorials/General/Profiting_from_your_app">Beneficiate de tu app</a></dt> + <dd> + Esta guía detallada contiene discusiones introductorias acerca de como monetizar tus apps, incluyendo apps de pago, precios y manejo de pagos.</dd> + <dt> + <a href="/en-US/Marketplace/Monetization/App_payments_guide">Guía de pagos de aplicaciones</a></dt> + <dd> + Este articulo cubre los tecnicismos de las apps de pago.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/In-app_payments">Pagos dentro de las apps</a></dt> + <dd> + Una guía detallada de como implementar soporte para pagos dentro de las apps en tu Web app.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validar un recibo</a></dt> + <dd> + Una guía de cuando (y como) validar el recibo de compra de tu app, sí quieres implementar la validación tu mismo, o usar una libreria preexistente.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/App_pricing" title="/en-US/docs/Web/Apps/Publishing/App_pricing">Lista de precios de aplicaciones</a></dt> + <dd> + Una serie de puntos de precios fijos que puedes escoger para tus apps de pago y como estos varian a traves de diferentes monedas, junto con informacion útil de apoyo acerca de como ocuparse de los pagos de las apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/Payments_Status" title="/en-US/docs/Web/Apps/Publishing/Payments_Status">Estado de los pagos</a></dt> + <dd> + Un resumen rápido de que paises tienen nuestos servicios de pagos de apps configurados (básicamente, donde pueden ser distribuidas las apps de pago).</dd> + </dl> + </div> + <div class="section"> + <h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5> +<ul> + <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li> + <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li> +</ul> +<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5> +<div class="twocolumns"> + <ul> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/DOM">DOM</a></li> + <li><a href="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/WebAPI">WebAPI</a></li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> + <li><a href="/en-US/docs/SVG">SVG</a></li> + <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li> + <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li> + </ul> +</div> +<h5 class="Community" id="Community" name="Community">Getting help from the community</h5> +<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p> +<ul> + <li>Consult the webapps forum: <ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li> +</ul> + <ul> + <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li> + </ul> + </li> +</ul> +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p> + </div> +</div> +<p> </p> diff --git a/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html b/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html new file mode 100644 index 0000000000..e8a4733c9c --- /dev/null +++ b/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html @@ -0,0 +1,83 @@ +--- +title: Introducción — Monetizacion +slug: Mozilla/Marketplace/Monetization/Introduccion_Monetizacion +tags: + - Apps + - Firefox OS + - Marketplace + - Principiantes + - introducción +translation_of: Archive/Marketplace/Monetization/Introduction_Monetization +--- +<div class="summary"> + <p>Has trabajado duro programando tu última app, pero, ¿cómo puedes obtener algo de vuelta cuando la publiques? Esta sección muestra toda la informacion que necesitas para implementar los pagos de aplicaciones, sí se trata de pagos del Marketplace o de pagos dentro de la aplicacion.</p> +</div> +<div class="row topicpage-table"> + <div class="section"> + <dl> + <dt> + <a href="https://developer.mozilla.org/en-US/docs/Apps/Tutorials/General/Profiting_from_your_app">Beneficiate de tu app</a></dt> + <dd> + Esta guía detallada contiene discusiones introductorias acerca de como monetizar tus apps, incluyendo apps de pago, precios y manejo de pagos.</dd> + <dt> + <a href="/en-US/Marketplace/Monetization/App_payments_guide">Guía de pagos de aplicaciones</a></dt> + <dd> + Este articulo cubre los tecnicismos de las apps de pago.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/In-app_payments">Pagos dentro de las apps</a></dt> + <dd> + Una guía detallada de como implementar soporte para pagos dentro de las apps en tu Web app.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/Validating_a_receipt">Validar un recibo</a></dt> + <dd> + Una guía de cuando (y como) validar el recibo de compra de tu app, sí quieres implementar la validación tu mismo, o usar una libreria preexistente.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/App_pricing" title="/en-US/docs/Web/Apps/Publishing/App_pricing">Lista de precios de apps</a></dt> + <dd> + Una serie de puntos de precios fijos que puedes escoger para tus apps de pago y como estos varian a traves de diferentes monedas, junto con informacion útil de apoyo acerca de como ocuparse de los pagos de las apps.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/Payments_Status" title="/en-US/docs/Web/Apps/Publishing/Payments_Status">Estado de los pagos</a></dt> + <dd> + Un resumen rápido de que paises tienen nuestos servicios de pagos de apps configurados (básicamente, donde pueden ser distribuidas las apps de pago).</dd> + </dl> + </div> + <div class="section"> + <h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5> +<ul> + <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li> + <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li> +</ul> +<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5> +<div class="twocolumns"> + <ul> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/DOM">DOM</a></li> + <li><a href="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/WebAPI">WebAPI</a></li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> + <li><a href="/en-US/docs/SVG">SVG</a></li> + <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li> + <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li> + </ul> +</div> +<h5 class="Community" id="Community" name="Community">Getting help from the community</h5> +<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p> +<ul> + <li>Consult the webapps forum: <ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li> +</ul> + <ul> + <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li> + </ul> + </li> +</ul> +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p> + </div> +</div> +<p> </p> diff --git a/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html b/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html new file mode 100644 index 0000000000..c8dc291d92 --- /dev/null +++ b/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html @@ -0,0 +1,92 @@ +--- +title: Normas de valoración de usuario +slug: Mozilla/Marketplace/normas_valoracion_usuario +tags: + - Marketplace + - moderación de valoraciones + - normas de valoración + - valoraciones de usuario +translation_of: Archive/Mozilla/Marketplace/User_Review_Guidelines +--- +<p dir="ltr" id="docs-internal-guid-bb5c2526-70a8-0ad5-cf5e-0739de96a6ea" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">La valoración de aplicaciones es una manera de que compartas tu opinión acerca de las aplicaciones que has instalado y usado. Nuestro <a href="https://wiki.mozilla.org/Marketplace/Reviewers/Apps/Guide/ReviewModeration">equipo de moderación</a> se reserva el derecho de borrar cualquier valoración que no cumpla con estas normas.</span></p> + +<h2 dir="ltr" id="Algunos_consejos_para_escribir_una_buena_valoración" style="line-height: 1.38; margin-top: 18pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 23px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Algunos consejos para escribir una buena valoración</strong></h2> + +<h3 dir="ltr" id="Cosas_que_hacer" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Cosas que hacer:</strong></h3> + +<ul style="margin-top: 0pt; margin-bottom: 0pt;"> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Escribe como si le hablaras a un amigo sobre tu experiencia con la aplicación.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Da detalles específicos y útiles. Por ejemplo: </span></p> + + <ul style="margin-top: 0pt; margin-bottom: 0pt;"> + <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿La aplicación funcionó como lo esperabas?</span></p> + </li> + <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Qué características te gustaron y cuáles no te gustaron? </span></p> + </li> + <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Te pareció útil?</span></p> + </li> + <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Te pareció fácil de usar?</span></p> + </li> + <li dir="ltr" style="list-style-type: circle; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">¿Seguirás usando esta aplicación?</span></p> + </li> + </ul> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Tómate un momento para leer tu valoración antes de enviarla para evitar los errores ortográficos.</span></p> + </li> +</ul> + +<h3 dir="ltr" id="Cosas_que_no_hacer" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Cosas que no hacer:</strong></h3> + +<ul style="margin-top: 0pt; margin-bottom: 0pt;"> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Escribir valoraciones para aplicaciones que no has usado personalmente.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Usar un lenguaje vulgar, sexual, o que pueda ser interpretado como de odio.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Incluir HTML, vínculos, código fuente, o fragmentos de código. Las valoraciones deben estar compuestas de solo texto.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Declarar falsedades, hablar mal de los derarrolladores o insultarlos personalmente.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Incluir tu correo electrónico, número telefónico, u otros detalles personales.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Publicar valoraciones para una aplicación que tú o tu organización crearon o representan.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Criticar una aplicación por algo que hace intencionalmente. Por ejemplo, dejar una valoración negativa de una aplicación por mostrar anuncios o requerir la recopilación de datos, cuando es el propósito de la aplicación, o la aplicación necesita recopilar datos para funcionar.</span></p> + </li> + <li dir="ltr" style="list-style-type: disc; font-size: 15px; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> + <p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Dar una valoración negativa a una aplicación por no funcionar en una versión de FirefoxOS con la que explícitamente </span>dice que no es compatible.</p> + </li> +</ul> + +<h2 dir="ltr" id="Preguntas_frecuentes_sobre_las_Valoraciones" style="line-height: 1.38; margin-top: 18pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 23px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Preguntas frecuentes sobre las Valoraciones</strong></h2> + +<h3 dir="ltr" id="¿Cómo_puedo_reportar_una_valoración_problemática" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">¿Cómo puedo reportar una valoración problemática?</strong></h3> + +<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Por favor reporta o marca cualquier valoración cuestionable haciendo clic en "Reportar esta valoración" y será enviada al sitio para moderación. Nuestro equipo de moderación utilizará las Normas de valoración para evaluar si borrar o no la valoración o restaurarla en el sitio web.</span></p> + +<h3 dir="ltr" id="¿Qué_debo_hacer_si_tengo_problemas_con_una_aplicación" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">¿Qué debo hacer si tengo problemas con una aplicación?</strong></h3> + +<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Deberías contactar al desarrollador usando los botones "Correo de ayuda" o "Sitio de ayuda" para la aplicación en su página de listado en Marketplace. </span></p> + +<h3 dir="ltr" id="Soy_un_desarrollador_de_aplicaciones_¿cómo_puedo_responder_a_una_valoración" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Soy un desarrollador de aplicaciones, ¿cómo puedo responder a una valoración?</strong></h3> + +<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">Actualmente, esto no es posible.</span></p> + +<h3 dir="ltr" id="Soy_un_desarrollador_de_aplicaciones_¿puedo_borrar_valoraciones_o_puntuaciones_no_favorables" style="line-height: 1.38; margin-top: 14pt; margin-bottom: 4pt;"><strong style="background-color: transparent; color: #000000; font-family: arial; font-size: 17px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline;">Soy un desarrollador de aplicaciones, ¿puedo borrar valoraciones o puntuaciones no favorables?</strong></h3> + +<p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">En general, no. Pero si la valoración no cumplió con las normas de valoración delineadas arriba, puedes hacer clic en "Reportar esta valoración" y hacer que la moderen. Si una valoración incluía una queja que ya no es válida por una nueva versión de tu aplicación, podemos considerar borrar la valoración. Envía tu solicitud detallada a</span> <a href="https://groups.google.com/forum/#!forum/mozilla.appreview" title="appreview@lists.mozilla.org">mozilla.appreview</a><span style="background-color: transparent; color: #000000; font-family: arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline;">.</span></p> diff --git a/files/es/mozilla/marketplace/options/introducción/index.html b/files/es/mozilla/marketplace/options/introducción/index.html new file mode 100644 index 0000000000..d1ab1399f5 --- /dev/null +++ b/files/es/mozilla/marketplace/options/introducción/index.html @@ -0,0 +1,37 @@ +--- +title: Introducción — Opciones de Publicación +slug: Mozilla/Marketplace/Options/Introducción +tags: + - Apps + - Firefox OS + - Marketplace + - Principiantes + - introducción +translation_of: Archive/Mozilla/Marketplace/Options/Introduction +--- +<div class="summary"> +<p>Firefox Marketplace proporciona un canal a través del cual usted puede publicar sus aplicaciones y hacerlas fácilmente descubiertas por los usuarios de Firefox OS, Firefox para Android y Firefox para escritorio. Sin embargo, no es la única opción que tiene para hacer sus aplicaciones disponibles. En esta sección, usted descubrirá los formatos en los que se pueden entregar sus aplicaciones, los mecanimos que hay en los navegadores Firefox para habilitad sus aplicaciones para dispositivos Android y PC de escritorio, como también las opciones para la publicación de sus propias apps y las formas en que usted puede crear su propio Marketplace.</p> +</div> + +<h2 id="Opciones_de_publicación">Opciones de publicación</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Options/Packaged_apps">Aplicaciones Empaquetadas</a></dt> + <dd>Infórmese sobre el método predilecto para subir sus aplicaciones - el que le ofrece acceso privilegiado y APIs seguras.</dd> + <dt><a href="/en-US/Marketplace/Options/Hosted_apps">Aplicaciones alojada</a></dt> + <dd>Descubra cómo hacer que sus aplicaciones estén disponibles desde un servidor, mientras que le proporciona a los usuarios los beneficios de una aplicación instalada.</dd> + <dt><a href="/en-US/Marketplace/Options/Packaged_or_hosted_">¿Empaquetada o Alojada?</a></dt> + <dd>Utilice este checklist para determinar qué formato de entrega se adapta mejor a sus aplicaciones.</dd> + <dt><a href="/en-US/Marketplace/Options/Open_web_apps_for_android">Aplicaciones Web abiertas para Android</a></dt> + <dd>Tus aplicaciones del Marketplace están habilitadas para ser instaladas en Android como un APK. Permitiendo ser instaladas y utilizadas como los haría con cualquier otra Android ap. Descubre como se hace.</dd> + <dt><a href="/en-US/Marketplace/Options/Open_web_apps_for_desktop">Aplicaciones Web abiertas para Desktop</a></dt> + <dd>Tus aplicaciones web abiertas ahora pueden ser instaladas en Windows, Mac y Linux PC desde Firefox, para escritorio. Permitiéndote utilizarlas como cualquier otra aplicación del Escritorio. Descubre como se hace.</dd> + <dt><a href="/en-US/Marketplace/Options/Self_publishing">Publicando tus propias apps</a></dt> + <dd>En ocaciones es posible que desees publicar tus aplicaciones fuera del Firefox Marketplace, tal vez para que estén disponibles para las pruebas o la distribución en su empresa. Infórmate sobre las opciones que tiene y la forma de ponerlas en práctica.</dd> + <dt><a href="/en-US/Marketplace/Options/Creating_a_store">Creación de su propio Marketplace</a></dt> + <dd>Ya sea que usted publique sus aplicaciones en Firefox Marketplace, o puede publicarlas usted mismo, tiene un número de opciones para su presentación en una tienda. Esta sección examina las opciones y cómo ponerlas en práctica.</dd> + <dt> </dt> + <dd> </dd> +</dl> + +<p> </p> diff --git a/files/es/mozilla/marketplace/publish/index.html b/files/es/mozilla/marketplace/publish/index.html new file mode 100644 index 0000000000..95c6ab34f7 --- /dev/null +++ b/files/es/mozilla/marketplace/publish/index.html @@ -0,0 +1,69 @@ +--- +title: Publicando en el Firefox Marketplace +slug: Mozilla/Marketplace/Publish +translation_of: Archive/Mozilla/Marketplace/Publish +--- +<div class="summary"> + <p>Documentos relacionados a la publicación de una aplicación en el Marketplace de Firefox.</p> +</div> +<div class="row topicpage-table"> + <div class="section"> + <dl> + <dt> + <a href="/en-US/Marketplace/Submission/Testing_and_troubleshooting">Prueba de aplicaciones y resolución de problemas</a></dt> + <dd> + Una ligera guía sobre pruebas y resolución de problemas que seguir antes de enviar tu aplicación al Marketplace de Firefox.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Enviando una aplicación al Marketplace de Firefox</a></dt> + <dd> + Esta guía paso a paso te ayudará a enviar tu aplicación con éxito al Marketplace de Firefox.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Normas de revisión del Marketplace</a></dt> + <dd> + Una explicación de los criterios que una aplicación debe reunir a fin de ser publicada en el Marketplace de Firefox; siguiendo las normas expuestas en este artículo, puedes facilitar el proceso y conseguir que tu aplicación sea publicada.</dd> + <dt> + <a href="/en-US/docs/Web/Apps/Publishing/Marketplace_screenshot_criteria">Normas de capturas de pantalla en el Marketplace</a></dt> + <dd> + Normas para enviar capturas de pantalla junto a tu aplicación y maximizar su calidad e impacto en el Marketplace.</dd> + </dl> + </div> + <div class="section"> + <h5 class="Tools" id="Tools" name="Tools">Tools for app developers</h5> +<ul> + <li><a href="https://marketplace.firefox.com/developers/">Visit Firefox Marketplace Developer Hub</a></li> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">Firefox OS Simulator</a></li> + <li><a href="/en-US/docs/Apps/App_developer_tools">App developer tools</a></li> +</ul> +<h5 class="Documentation" id="Documentation" name="Documentation">Technology reference documentation</h5> +<div class="twocolumns"> + <ul> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/DOM">DOM</a></li> + <li><a href="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/WebAPI">WebAPI</a></li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> + <li><a href="/en-US/docs/SVG">SVG</a></li> + <li><a href="https://www.mozilla.org/en-US/apps/">Open Web Apps overview site</a></li> + <li><a href="https://wiki.mozilla.org/Apps">Apps project wiki page</a></li> + </ul> +</div> +<h5 class="Community" id="Community" name="Community">Getting help from the community</h5> +<p>If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!</p> +<ul> + <li>Consult the webapps forum: <ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-webapps"> como lista de correo</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.webapps"> como grupo de noticias</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.webapps/feeds"> como RSS</a></li> +</ul> + <ul> + <li>Ask your question on the Open Web Apps IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li> + </ul> + </li> +</ul> +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" rel="external">Don't forget about the <em>netiquette</em>...</a></span></p> + </div> +</div> +<p> </p> diff --git a/files/es/mozilla/marketplace/publishing/index.html b/files/es/mozilla/marketplace/publishing/index.html new file mode 100644 index 0000000000..e2b172a388 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/index.html @@ -0,0 +1,9 @@ +--- +title: Publishing +slug: Mozilla/Marketplace/Publishing +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +<p>Marketplace publishing</p> diff --git a/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html b/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html new file mode 100644 index 0000000000..59d3e0ac04 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html @@ -0,0 +1,78 @@ +--- +title: Marketplace screenshot criteria +slug: Mozilla/Marketplace/Publishing/Marketplace_screenshot_criteria +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria +--- +<div class="summary"> + <p><span class="seoSummary">Cuando submitting an app to the Firefox Marketplace, you will be asked to provide one or more screenshots as part of the submission process. The Marketplace has some basic criteria for such screenshots which, while not strictly enforced, should serve as a guideline.</span> Apps which provide no screenshots that meet the criteria in this document may be asked to submit new screenshots.</p> +</div> +<h2 id="Screenshot_Overview">Screenshot Overview</h2> +<ul> + <li>Screenshots that you upload will appear on + <ul> + <li>Individual app pages</li> + <li>Featured app areas, when your app is promoted by an editor or curator</li> + <li>Various lists and feeds within the Marketplace</li> + </ul> + </li> + <li>The Marketplace accepts between 1 and 6 screenshots for 3 different form factors: + <ul> + <li>Phone (portrait or landscape)</li> + <li>Tablet</li> + <li>Desktop (usually 1024x768 or larger)</li> + </ul> + </li> + <li>For each form factor that your app supports, a minimum of 1 screenshot should be provided.</li> +</ul> +<h2 id="Quality_Guidelines">Quality Guidelines</h2> +<ul> + <li>Show your app in the best possible light: demonstrate its capabilities</li> + <li>Always remove the status bar, if possible</li> + <li>Screenshots from a device are preferred to screenshots from a simulator or emulator</li> + <li>Avoid placing the app inside the image of a device or a desktop + <ul> + <li>Doing this forces the app interface to scale down, making it more difficult to see</li> + <li>The device or desktop interfaces that you show may not match what a user has</li> + </ul> + </li> + <li>Avoid "hands-on" photographs of phones, tablets, or monitors</li> + <li>Apps in the Marketplace will not be used inside a browser, so avoid showing browser chrome (toolbars, back/forward, address bar, etc.)</li> + <li>Use text minimally to explain the interface, not to advertise</li> + <li>Avoid graphic elements other than the app itself</li> + <li>Avoid borders or "filters"</li> + <li>Screenshots are displayed in the order that they're uploaded; put your best screenshots first</li> +</ul> +<p>In general, you should show the app, not its surroundings.</p> +<h2 id="Sizes_and_Formats">Sizes and Formats</h2> +<p>Screenshots are accepted in JPG and PNG format, though PNG-24 is preferred because of its lossless properties. If JPG is used, the screenshot should use minimal compression and use the highest quality settings.</p> +<h3 id="Suggested_Sizes">Suggested Sizes</h3> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Form Factor</th> + <th scope="col">Suggested Resolutions</th> + </tr> + </thead> + <tbody> + <tr> + <td>Phone</td> + <td>multiples of 320x480, 720x1280, inverse/landscape ratios</td> + </tr> + <tr> + <td>Tablet</td> + <td>multiples of 1024x768, 1280x800</td> + </tr> + <tr> + <td>Desktop</td> + <td>multiples of 1280x800, 1440x900</td> + </tr> + </tbody> +</table> +<h2 id="Examples">Examples</h2> +<p>Do not include grahical elements other than the app itself, including ads or logos.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/6313/no-ads.png" style="width: 640px; height: 360px;"></p> +<p>Do not submit "hands-on" photos, or edit the screenshot onto a physical device.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/6315/no-hand.png" style="width: 640px; height: 360px;"></p> +<p>Do not submit screenshots that use simulated device borders, unnecessary text, or other unnecessary features.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/6317/no-simulated-device.png" style="width: 640px; height: 360px;"></p> diff --git a/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html b/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html new file mode 100644 index 0000000000..c624a48e12 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html @@ -0,0 +1,133 @@ +--- +title: 'Open Web Apps for Android: Synthetic APKs' +slug: Mozilla/Marketplace/Publishing/Open_web_apps_for_android +translation_of: Archive/Marketplace/Options/Open_web_apps_for_android +--- +<div class="summary"> + <p>Los usuarios pueden instalar sus aplicaciones de Marketplace en el navegador de Firefox o Firefox OS, obteniendo el beneficio potentes funciones de web abierta. Sin embargo, para los usuarios de Android puede resultar más cómodo instalar sus aplicaciones como aplicaciones de Android 'normales'. Ahora eres capaz de ofrecer esta característica a los usuarios usando Synthetic APKs (también conocido como tiempo de ejecución de Web para Android), una solución disponible en <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> que crea APKs nativas para la instalación en dispositivos Android.</p> +</div> +<h2 id="¿Qué_es_una_Synthetic_APK">¿Qué es una Synthetic APK?</h2> +<p>Una Synthetic APK es una Open Web App contenida en un paquete de instalación de Android, que puede ser instalado y ejecutado del mismo modo que cualquier otra aplicación Android. El paquete APK consiste en contenido web (en el caso de aplicaciones empaquetadas) o un puntero a contenido web (en el caso de aplicaciones organizadas). Este contenido es después encerrado en una fina envoltura Java/Android que proporciona de integración en el Sistema Operativo nativo.</p> +<p>Estos paquetes son creados por el <a href="https://github.com/mozilla/apk-factory-service">APK Factory Service</a> que es ejecutado como un servicio web por Marketplace. El APK Factory Service hace uso del <a href="https://github.com/mozilla/apk-factory-library">APK Factory Library</a> para crear el paquete real y del <a href="https://github.com/mozilla/apk-signer">APK Signer</a> para firmar digitalmente el APK. Este servicio está disponible para <a href="/en-US/Marketplace/Publishing/Creating_a_store">su propio Marketplace</a>, si decide crear uno.</p> +<p>Usted no necesita ningún conocimiento de desarrolo Android, o adoptar medidas de desarrollo adicionales, para usar Synthetic APK: usted simplemente selecciona la opción APK al enviar sus aplicaciones al Marketplace.</p> +<div class="note"> + <p><strong>Nota</strong>: Synthetic APKs son soportadas por los dispositivos Android con Firefox 29 o superior instalado.</p> +</div> +<p>El tiempo de ejecución de Open Web App en Android sostiene 12 APIs para accedes a capacidades del dispositivo tales como vibración, geolocalización, estado de la batería, y más. Puede verse una<a href="https://wiki.mozilla.org/WebAPI#APIs"> lista completa de APIs soportadas aquí</a>: las APIs que muestran una "A" bajo "Availability" son aquellas APIs disponibles en Android, con elementos verdes indicando que la API está disponible en su totalidad. Usted puede colocar el puntero del ratón sobre los elementos individuales para obtener mensajes con más información.</p> +<p>El tiempo de ejecución en Android continuará añadiendo soporte para otras APIs en futuras versiones. Algunas de las APIs planeadas son:</p> +<ul> + <li>API de Alarma</li> + <li>SimplePush API</li> + <li>Actividades Web</li> +</ul> +<div class="note"> + <p><strong>Nota</strong>: Los usuarios de Android pueden estar usando dispositivos con mayores resoluciones (DPI) y mayores tamaños de pantalla que aquellos encontrados en los dispositivos con Firefox OS. Las aplicaciones que no han usado un diseño de respuesta puede que por ello proporcionen una experiencia pobre, y puede que usted quiera diseñar sus aplicaciones teniendo esto en mente.</p> +</div> +<h2 id="Uso_de_synthetic_APKs">Uso de synthetic APKs</h2> +<p>Esta sección proporciona detalles en el modo en que usted elija para hacer uso de synthetic APKs, cómo afectan a la experiencia de Marketplace, e información sobre actualizaciones de las aplicaciones. </p> +<h3 id="Activación_de_la_opción_synthetic_APK">Activación de la opción synthetic APK </h3> +<p>Cuando usted <a href="/en-US/Marketplace/Submission/Submitting_an_app">envía una aplicación al Firefox Marketplace</a>, usted tiene la opción de hacer que su aplicación esté disponible como una aplicación "nativa" para dispositivos Android usando una synthetic APK.</p> +<h3 id="Envío_una_aplicación">Envío una aplicación</h3> +<p>Cuando usted envía una aplicación al al Marketplace el APK Factory Service es invocado para crear una synthetic APK firmada en modo de depuración de Android. Esta versión de la APK entonces se hace disponible para que los críticos de la aplicación completen el proceso normal de revisión. Una vez que la aplicación ha sido revisada y aprobada el APK Factory service es invocado de nuevo, esta vez para firmar la synthetic APK con una APK Signing Key única. La Synthetic APK firmada resultante es entonces almacenada en caché para la entrega cuando un usuario decide instalar la aplicación.</p> +<h3 id="Instalación_de_una_synthetic_APK">Instalación de una synthetic APK</h3> +<p>Una vez que su aplicación ha sido aprobada, cuando un usuario selecciona su aplicación en el Marketplace en su dispositivo Android la instalación se diferencia ligeramente del proceso habitual, como sigue:</p> +<ol> + <li><a href="https://marketplace.firefox.com/">Firefox Marketplace</a> muestra la información de la aplicación y el botón de instalación como normalmente.</li> + <li>Cuando el usuatio selecciona instalar se muestra el diálogo de confirmación de instalación estándar de Marketplace. El diálogo lista los permisos requeridos por aplicaciones privilegiadas e información acerca de la necesidad de habilitar la opción de instalar aplicaciones de "fuentes desconocidas"; el Marketplace incluirá redacción para explicar cualquien duda que los usuarios puedan tener.</li> + <li>Cuando el usuario confirma que quiere continuar con la instalación, {{ domxref("Apps.install") }} / {{ domxref("Apps.installPackage") }} son invocados como usted esperaría (dependiendo de si se trata de una aplicación alojada o empaquetada), sin embargo en vez del proceso normal por el cual la versión Open Web APP es instalada, se realiza una llamada al APK Factory Service para solicitar la APK almacenada en caché. La synthetic APK es entonces descargada al dispositivo Android y el proceso de instalación de aplicación estándar de Android es invocado.</li> +</ol> +<p>Una vez que la synthetic APK ha sido instalada, el usuario encontrará la aplicación en su menú de aplicaciones y el proceso para usar y eliminar las aplicaciones será el mismo que esperaría de otras aplicaciones Android.</p> +<h3 id="Mantener_las_aplicaciones_actualizadas">Mantener las aplicaciones actualizadas</h3> +<p>El Marketplace y la APK Factory también proporcionan un mecanismo para actualizar su aplicación e informar a los usuarios de que la actualización está disponible.</p> +<p>Si su aplicación está alojada, siempre que usted haga un cambio en su servidor los usuarios se enterarán de esos cambios la siguiente vez que ejecuten su aplicación. Si usted realiza un cambio visible en su aplicación. tal como realizar un cambio en el icono de la aplicación, tras detectar el número de versión actualizada en el manifiesto de la aplicación la APK Factory creará una APK actualizada y notificará a los usuarios de que una actualización está disponible.</p> +<p>Para aplicaciones empaquetadas usted actualiza el contenido de la aplicación y envía un nuevo archivo empaquetado en zip y el manifiesto actualizado. La APK Factory recogerá esos cambios e informará a sus usuarios de que una aplicación actualizada se encuentra disponible.</p> +<h2 id="Como_funciona_la_APK_Factory">Como funciona la APK Factory </h2> +<p>Esta sección describe como la APK Factory crea synthetic APKs.</p> +<ol> + <li>Cuando la APK factory es invocada, como se ha descrito anteriormente, detecta si la aplicación está alojada o empaquetada, entonces pide el archivo de manifiesto de la aplicación del servidor donde se halla alojada (el Firefox Marketplace, o cualquier otro lugar donde la aplicación está alojada): + <ul> + <li>El manifiesto principal en el caso de aplicaciones alojadas.</li> + <li>El manifiesto mini en el caso de aplicaciones empaquetadas.</li> + </ul> + </li> + <li>La APK factory ahora tiene la información que necesita acerca de la aplicación, y solicita: + <ul> + <li>La URL de almacenamiento de aplicaciones en el caso de aplicaciones alojadas.</li> + <li>El archivo zip de la aplicación del marketplace en el caso de aplicaciones empaquetadas.</li> + </ul> + </li> + <li>Ahora el APK Factory service crea la synthetic APK mediante la realización de la transcodificación de algunos metadatos para elementos tales como iconos y requerimientos de seguridad, entonces: + <ul> + <li>envolviendo la URL de alojamiento en un contenedor Android Java para aplicaciones alojadas.</li> + <li>envolviendo el contenido de la aplicación en un contenedor Android Java para aplicaciones empaquetadas.</li> + </ul> + </li> + <li>Una vez creada, la synthetic APK es firmada por un servicio <strong><a href="https://github.com/mozilla/apk-signer">APK Signer</a></strong> seguro: + <ul> + <li>Para "revisión" las APKs son firmadas en modo de depuración de Android.</li> + <li>For "lanzamiento" las APKs son firmadas con una <strong>APK signing key</strong>.</li> + </ul> + </li> + <li>Finalmente, la APK firmada es almacenada en caché para enviar a: + <ul> + <li>el proceso de revisión de aplicación.</li> + <li>un dispositivo Android cuando el usuario solicite su instalación desde Marketplace.</li> + </ul> + </li> +</ol> +<p>Los siguientes diagramas ofrecen una representación alternativa del flujo de trabajo de la APK Factory. Primero, una aplicación empaquetada:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7315/synthapkflow-packaged.png" style="width: 540px; height: 522px; display: block; margin: 0px auto;"></p> +<p>Ahora, para una aplicación alojada:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7313/synthapkflow-hosted.png" style="width: 678px; height: 525px; margin: 0px auto; display: block;"></p> +<h2 id="Nombramiento_de_paquetes_y_claves_de_firma_de_APK">Nombramiento de paquetes y claves de firma de APK</h2> +<p>En la instalación de una synthetic APK el dispositivo Android comprueba el nombre y la firma del paquete Java. Verifica la firma la primera vez que una aplicación es instalada (no exixte una autoridad central con la que lo comprueba) y actualizaciones futuras deberán tener el mismo nombre y firma del paquete. Si el nombre y la firma del paquete no son los mismos el dispositivo Android no actualizará la instalación.</p> +<h3 id="Nombramiento_de_paquetes">Nombramiento de paquetes</h3> +<p>El nombre de paquete para una synthetic APK consiste en el sitio de alojamiento y un número de serie único, por ejemplo:</p> +<ul> + <li>para una aplicación alojada: org.mykzilla.p362b12c70d0556c124908a3c125d3d02:</li> + <li>para una aplicación empaquetada: com.firefox.marketplace.p0604c71abc0d4091829d19be9a50453c</li> +</ul> +<h3 id="Claves_de_firma_de_APK">Claves de firma de APK</h3> +<p>Cada APK necesita ser identificada por una clave de firma de APK antes de poder ser instalada en un dispositivo Android. Las claves de firma APK son creadas y son propiedad del servicio <strong><a href="https://github.com/mozilla/apk-signer">APK Signer</a></strong>. Estas claves de firma son inestables en sistema, y almacenadas de manera segura en el APK Signer, que es por lo que se considera "seguro".</p> +<p>Este servicio crea una clave única para cada aplicación, aplicándola a la publicación inicial y a las actualizaciones subsiguientes. La reutilización de la clave en aplicaciones APK actualizadas es importante ya que sin una igualdad en el nombre del paquete y la clave Android no instalará una actualización sobre una versión anterior de la aplicación. Si usted crea su propia versión del Marketplace la APK conservará el mismo nombre y claves, por lo que cualquier versión podrá actualizar la otra.</p> +<div class="note"> + <p><strong>Nota</strong>: Mozilla no asume ninguna responsabilidad acerca de la credibilidad de las claves de firma de APK, refiriéndose a que las claves no proporcionen ninguna información acerca de la autenticidad de la aplicación o el desarrollador más allá de que han sido aprobados para su lanzamiento en Marketplace. El servicio no está vinculado a Google o alguna otra autoridad central.</p> +</div> +<h2 id="FAQ">FAQ</h2> +<p>Aquí se encuentran las respuestas a algunas preguntas relizadas frecuentemente acerca de Synthetic APKs.</p> +<h3 id="¿Qué_pasa_con_la_reinstalación_de_aplicaciones_instaladas_como_favoritas">¿Qué pasa con la reinstalación de aplicaciones instaladas como favoritas?</h3> +<p>Esto no ha sido aún realizado totalmente, pero el comportamiento esperado es que el marcado de aplicaciones como favoritas dejará de funcionar cuando el usuario actualice a una versión de Firefox para Android con la implementación Synthetic APK (versión 29 o posterior). El usuario entonces tendrá que reinstalar sus aplicaciones para usarlas de nuevo.</p> +<h3 id="¿Cómo_funcionarán_las_compras_in-app">¿Cómo funcionarán las compras in-app?</h3> +<p>La APK tiene acceso a la interfaz de usuario de confianza, <a href="/en-US/docs/Web/API/Navigator.mozPay">mozPay</a>, y todos los procesos de pago para compras in-app, por lo que los pagos in-app funcionarán de manera normal.</p> +<h3 id="¿Cómo_puedo_descargar_una_copia_de_la_APK_de_mi_aplicación">¿Cómo puedo descargar una copia de la APK de mi aplicación?</h3> +<p>Usted puede descargar una copia de su aplicación usando using wget y el siguiente comando:</p> +<p><code>https://controller.apk.firefox.com/application.apk?manifestUrl=ESCAPED_URL_TO_MANIFEST</code></p> +<p>donde ESCAPED_URL_TO_MANIFEST es una URL escapada el manifiesto de la aplicación o mini-manifiesto. Esta URL hace que la APK Factory devuelve la copia almacenada en caché de la APK, o crea una nueva si la aplicación no ha sido enviada al Marketplace. Si la aplicación no ha sido enviada al Marketplace la APK es firmada en modo de depuración.</p> +<h4 id="Ejemplos">Ejemplos</h4> +<p>Para una aplicación alojada:</p> +<p><code>> wget https://controller.apk.firefox.com/application.apk?manifestUrl=http%3A%2F%2Fmykzilla.org%2Fapp%2Fmanifest.webapp -O mykzilla.apk<br> + > aapt dump --values badging mykzilla.apk<br> + package: name='org.mykzilla.p362b12c70d0556c124908a3c125d3d02' versionCode='1395692586' versionName=''</code></p> +<p>Para una aplicación empaquetada:</p> +<p><code>> wget https://controller.apk.firefox.com/application.apk?manifestUrl=https%3A%2F%2Fmarketplace.firefox.com%2Fapp%2Fa22e0277-35bc-434d-9371-1568c75fc726%2Fmanifest.webapp -O cuttherope.apk<br> + > aapt dump --values badging cuttherope.apk<br> + package: name='com.firefox.marketplace.p0604c71abc0d4091829d19be9a50453c' versionCode='1394154656' versionName='1.3'</code></p> +<h3 id="¿Puedo_generar_una_synthetic_APK_manualmente_desde_una_URL_diferente">¿Puedo generar una synthetic APK manualmente desde una URL diferente?</h3> +<p>Sí puede, proporcionando la URL de cualquier ubicación de sus archivos de manifiesto o mini-manifiesto. No obstante, tenga cuidado con esto porque si la synthetic APK es generada desde una URL diferente el nombre de paquete será distinto del creado cuando usted envió la aplicación al Marketplace, por lo que la versión del Marketplace será instalada como una aplicación separada.</p> +<h3 id="Si_configuro_mi_propia_versión_de_APK_Factory_¿puedo_usar_la_synthetic_APK_que_genera">Si configuro mi propia versión de APK Factory ¿puedo usar la synthetic APK que genera?</h3> +<p>Usted puede, pero tenga cuidado porque las claves de firma serán diferentes de las asignadas a una versión de la synthetic APK generada por el Marketplace. Como resultado Android rechazará instalar la versión que el usuario intente instalar en segundo lugar. <span style="line-height: 1.5;">(Ver </span><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Open_web_apps_for_android#If_I_also_have_an_Android_native_version_of_my_app.2C_can_both_be_installed_on_an_Android_device.3F" style="line-height: 1.5;">Si también tengo una versión nativa de Android de mi aplicación, ¿pueden ambas ser instaladas en un dispositivo Android?</a><span style="line-height: 1.5;"> para más información.)</span></p> +<h3 id="¿Puedo_enviar_una_synthetic_APK_a_Google_Play_o_a_otra_tienda_de_Android">¿Puedo enviar una synthetic APK a Google Play o a otra tienda de Android? </h3> +<p>Usted puede enviar una synthetic APK a Google Play o a una tienda alternativa de Android. Sin embargo, es su responsabilidad:</p> +<ul> + <li>Confirmar que su aplicación cumple las políticas de la tienda a la que usted la está enviando. La aprobación para distribución en Marketplace no implica una aprobación para Google Play u otro Marketplace Android.</li> + <li>Cuando usted actualice su Open Web App usted tendrá que actualizar la synthetic APK en todas las tiendas a las que usted haya enviado la APK, no hay un proceso automático para enviar APKs actualizadas a tiendas de Android.</li> +</ul> +<h3 id="¿Puedo_emplear_mis_claves_de_firma_Android_para_firmar_la_synthetic_APK_y_elegir_el_nombre_del_paquete">¿Puedo emplear mis claves de firma Android para firmar la synthetic APK y elegir el nombre del paquete?</h3> +<p>Actualmente usted no puede usar sus propias clavez de firma para firmar una synthetic APK o elegir el nombre del paquete. Esta opción está siendo considerada. Si esto es de su interés, únase a la discusión en el <a href="https://lists.mozilla.org/listinfo/dev-marketplace">dev-marketplace mailing list</a>, o el <a href="irc://irc.mozilla.org/marketplace">Marketplace IRC channel</a>.</p> +<h3 id="Si_también_tengo_una_versión_nativa_de_Android_de_mi_aplicación_¿pueden_ambas_ser_instaladas_en_un_dispositivo_Android">Si también tengo una versión nativa de Android de mi aplicación, ¿pueden ambas ser instaladas en un dispositivo Android?</h3> +<p>A menos que usted elija usar el nombre de paquete de synthetic APK de su aplicación Android nativa, ambas pueden ser instaladas en un dispositivo Android. Si usted elige usar el mismo nombre de paquete para su aplicación Android nativa (la cual usted firmará con su propia clave) Android rechazará instalar la versión que el usuario intente instalar en segundo lugar. Esto es debido a que los nombres de paquete son iguales pero las claves de firma son diferentes, por lo que Android considera que las aplicaciones son la misma, pero de distintas fuentes. Por lo tanto Android rechazará actualizar una aplicación con la otra, ya que eso permitiría a un desarrollador anular la aplicación de otro. El usuario acabará con la primera versión instalada en su dispositivo.</p> +<div class="warning"> + <p>Debido a los problemas que puede causar a los usuarios, es altamente recomendado que usted no reutilice el nombre de paquete que la APK Factory asigna a su aplicación para una versión Android nativa de su aplicación.</p> +</div> +<h3 id="¿Cómo_puedo_testeardepurar_APKs">¿Cómo puedo testear/depurar APKs?</h3> +<p>Estamos trabajando en una serie de herramientas para testear y depurar una aplicación en un dispositivo Adnroid. La versión inicial incluirá una herramienta de línea de comandos basada en ndos para generar una APK que usted pueda instalar en el dispositivo y depurar usando Firefox's Remote Developer Tools.</p> diff --git a/files/es/mozilla/marketplace/publishing/packaged_apps/index.html b/files/es/mozilla/marketplace/publishing/packaged_apps/index.html new file mode 100644 index 0000000000..7a76aa8d98 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/packaged_apps/index.html @@ -0,0 +1,190 @@ +--- +title: Aplicaciones empaquetadas +slug: Mozilla/Marketplace/Publishing/Packaged_apps +translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps +--- +<p>Una <strong>aplicación empaquetada</strong> es una <em>Open Web App</em> que tiene todos sus recursos (HTML, CSS, JavaScript, manifiesto y demás) empaquetados en un archivo zip, en lugar de tenerlos en un servidor web. Una aplicación empaquetada es simplemente un archivo zip con el <a href="/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicacion </a>en su directorio raíz. El manifiesto debe ser llamado <code>manifest.webapp</code>.</p> + +<p>Una direferencia de una aplicación alojada es que una aplicación empaquetada, es que debe especificar una ruta de arranque en el manifiesto en tanto que se trata de un campo opcional en una aplicación alojada.</p> + +<div class="note"> +<p><strong>Nota:</strong> Actualmente (Enero 2013) Firefox Marketplace solamente soporta aplicaciones empaquetadas para Firefox OS.</p> +</div> + +<h2 id="Propósito_de_las_aplicaciones_empaquetadas.">Propósito de las aplicaciones empaquetadas.</h2> + +<p>El propósito de una aplicación empaquetada, es tener una forma viable de proveer aplicaciones que tengan acceso a APIs sensibles en el dispositivo. Las aplicaciones deben ser verificadas por la tienda donde es distribuida (como Firefox Markerplace). La tienda revisa la aplicación y si la encuentra aceptable, firma el archivo zip de la aplicación con su llave privada. Esto da a los usuarios de la aplicación más seguridad de que han sido revisados problemas potenciales de seguridad, privacidad y capacidad.</p> + +<h2 id="Tipos_de_aplicaciones_empaquetadas.">Tipos de aplicaciones empaquetadas.</h2> + +<p>Aplicaciones privilegiadas</p> + +<dl> + <dd>Una <em>aplicación privilegiada</em> es aprobada por la Firefox Marketplace usando un proceso especial. Esto significa que provee más seguridad a los usuarios cuando la aplicación quiere accesar a ciertas APIs sensibles del dispositivo. Esto equivale a las aplicaciones nativas en plataformas como iOS o Android. Para especificar que se trata de una aplicación privilegiada agregue el campo <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> a su archivo <code>manifest.webapp</code> y establezca el valor de <code>privileged</code>.</dd> + <dd>Una aplicación privilegiada tiene las siguientes características : + <ul> + <li>Es aprobada por una tienda de aplicaciones después de la revisión de código o equivalente.</li> + <li>Los recursos de la aplicación son firmados por la tienda de aplicaciones.</li> + <li>Permite usar ciertas APIs Web sensibles a las que contenido no confiable no puede accesar.</li> + <li>Aplica <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Politicas de seguridad de contenido</a> (CSP). Una aplicacion con privilegios utiliza estas CSP: + <pre>"default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"</pre> + </li> + <li>Implementa otros requisitos relacionados con la seguridad. Vea <a href="https://wiki.mozilla.org/Apps/Security">Seguridad</a> para mas informacion.</li> + </ul> + </dd> + <dt>Aplicación certificada</dt> + <dd>Una aplicacion certificada está destinada a una función crítica del sistema como el marcado por defecto o la configuración del sistema en un teléfono inteligente. Este tipo de aplicación podría ser usada para funciones críticas en un teléfono con Firefox OS. No está destinada para aplicaciones de terceros por lo que la mayoría de desarrolladores no pueden utilizarlas. Una aplicación certificada es una aplicación empaquetada similar a una con privilegios, excepto que todos los permisos del dispositivos son implícitos, lo que significa que son habilitados sin la aprobación explícita del usuario. A Una aplicación certificada debe ser aprovada por el fabricante (OEM) o compañía (carrier) para tener la aprobación implícta para usar APIs críticas. Para especificar que una aplicación es certificada, agregue el campo <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> a su archivo <code>manifest.webapp</code> y establecer su valor a <code>certified</code>.</dd> + <dd>Las siguientes son las CSP de una aplicación certificada, las cuales, son lígeramente direfentes de las de una con privilegios: + <pre>"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"</pre> + Esto hace parecer que las reglas en las CSP son ligeramente más flexibles para las aplicaciones con privilegios que en las aplicaciones certificadas. Si quiere saber las razones de esto, vea <a href="https://wiki.mozilla.org/Apps/Security#Default_CSP_policy">las Políticas CSP por defecto </a>y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=768029">Bug 768029</a>.</dd> + <dt>Aplicaciones empaquetadas planas</dt> + <dd>Usted también puede hacer una simple aplicación empaquetada en un archivo zip. La tienda la firma, pero no implementa el proceso especial de autenticación como en las aplicaciones certificadas o con privilegios. Estas aplicaciones no pueden usar ciertas Web APIs sensibles. Tampoco está sujeta a las CSP como las aplicaciones certificadas o con privilegios. Este tipo de aplicación puede ser útil si quiere que todos los recursos de su aplicación estén disponibles cuando el usuario la usa por primera vez sin descargarlos. Este tipo de aplicación empaquetada no requiere el campo <code>type</code> en su archivo <code>manifest.webapp</code> por que el valor por defecto para <code>type</code> (<code>web</code>) es correcto.</dd> +</dl> + +<h2 id="Diferencias_con_las_aplicaciones_hospedadas">Diferencias con las aplicaciones hospedadas</h2> + +<p>Las aplicaciones empaquetadas tienen las mismas capacidades que las aplicaciones web de código abierto normales (aplicaciones "alojadas"), pero las aplicaciones empaquetadas tienen algunas diferencias:</p> + +<ul> + <li>No tienen origen en Internet. La política de una aplicación por origen (<em>one-app-per-origin</em>) que gobierna a las aplicaciones hospedadas no aplica para las aplicaciones empaquetadas.</li> + <li>Las aplicaciones empaquetadas usan un protocolo interno especial en el archivo zip: <code>app://<uuid></code>. Ejemplo: Cuando usted carga el contenido de <code>/index.html</code> en una aplicacion empaquetada, en realidad esta cargando algo como lo siguiente: (el UUID sera diferente): + <pre>app://550e8400-e29b-41d4-a716-446655440000/index.html</pre> + + <p>El UUID es generado al azar en el momento de la instalacion, lo cual significa que es único en cada dispositivo en la que es instalada la aplicación. El protocolo <code>app://</code> será útil en futuras versiones en tiempo de ejecución, pagos y flujos de OAuth.</p> + </li> + <li>El archivo del manifiesto debe ser llamado <code>manifest.webapp</code>.</li> + <li>Los recursos son accedidos desde un archivo zip, el cual es almacenado en el dispositivo donde son instalados.</li> + <li>Son instalados con una funcion API <code>mozApps</code> diferente: <code>installPackage()</code>.</li> + <li>Aplican una <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">CSP</a> para todo el contenido de la aplicación (una aplicación también puede usar una CPS, pero no la requiere).</li> + <li>También pueden incrustar contenido remoto en <code>iframes</code>, pero dicho contenido no tendrá acceso a APIs privilegiadas ni las CSP por defecto le serán aplicadas.</li> + <li>Tienen un proceso de actualizacion para obtener las nuevas versiones para los usuarios; las aplicaciones hospedades no lo necesitan de este proceso.</li> +</ul> + +<p>Las aplicaciones empaquetadas también pueden hacer cosas como acceder a bases de datos en un servidor web como una aplicación hospedada.</p> + +<h2 id="Usando_APIs_Web_sensibles">Usando APIs Web sensibles</h2> + +<p>Hay Web APIs que pueden ser usadas maliciosamente por lo que el acceso a estas debe ser controlado. Para cada API sensible a la que se quiera acceder, ustede debe agregar una entrada al campo <code>permissions</code> en el <a href="/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicación</a>.</p> + +<p>Algunas APIs sensibles pueden ser accedidas por aplicaciones hospedadas normales, pero otras APIs requieren que usted use una aplicación empaquetada (con privilegios o certificada). Vea <a href="/en-US/docs/Web/Apps/App_permissions">Permisos de aplicaciones</a> para una tabla que describe los requisitos..</p> + +<h2 id="Aplicaciones_empaquetadas_de_la_tienda_de_Firefox_(Firefox_Marketplace).">Aplicaciones empaquetadas de la tienda de Firefox (Firefox Marketplace).</h2> + +<p>La tienda de Firefox (Firefox Marketplace) maneja a las aplicaciones empaquetadas de forma diferente que las aplicaciones hospedadas. Cuando usted manda una aplicación empaquetada, su archivo zip es almacenado en los servidores de la Tienda y genera un nuevo manifiesto llamado el "mini-manifiesto" que está basado en el manifiesto de la aplicación que se encuentra en el archivo zip. Cuando un usuario installa su aplicación, el mini-manifiesto es pasado a la función <code>installPackage()</code> en la aplicación instalada. El mini-manifiesto existe para propósitos de instalación y actualización y no es usado cuando la aplicación se ejecuta.</p> + +<h2 id="Prueba_de_instalación_de_una_aplicación_empaquetada_(con_Simulador)">Prueba de instalación de una aplicación empaquetada (con Simulador)</h2> + +<p>Para instalar una aplicación empaquetada en un dispositivo Firefox OS usando el simulador, vea la <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Push_to_device">sección "Push to Device" en la guía del Simulador</a>.</p> + +<h2 id="Prueba_de_instalación_de_una_aplicación_empaquetada_(sin_Simulador)">Prueba de instalación de una aplicación empaquetada (sin Simulador)</h2> + +<p>Si quieres probar localmente la instalación de tu aplicación empaquetada, aquí hay otra forma de hacerlo. Usa los siguietnes pasos para instalar una aplicación empaquetada en un teléfono usando un servidor Web que está en tu red local. Puede ser un servidor local que se ejecute en la computadora en la que estás desarrollandol. Esto también de dará una idea de cómo funciona la instalación de aplicaciones empaquetadas.</p> + +<h3 id="Requisitos">Requisitos</h3> + +<ul> + <li>El servidor Web debe estar en la misma red que el teléfono y debe de estar habilitado para recibir peticiones de la red local.</li> + <li>El teléfono debe ejecutar Firefox OS y tener el Wi-fi encendido.</li> + <li>Modifique las rutas usadas en el siguiente código de ejemplo para que coincidan con su servidor..</li> + <li>Obtenga la dirección IP de su servidor y úsela en lugar de <strong><code><server-ip></code></strong> en los siguientes ejemplos. Si el servidor no utiliza un puerto estándar, use este también. Ejemplo de una dirección IP sin un puerto estándar: + <pre>10.10.12.1:8080</pre> + </li> +</ul> + +<h3 id="Pasos">Pasos</h3> + +<ol> + <li>Tenga su aplicación empaquetada disponible y dele el nombre de <code>package.zip</code>. Este archivo tiene todos los recursos, incluyendo el archivo del manifiesto.</li> + <li>Cree un archivo llamado <code>package.manifest</code> y agregue el siguiente contenido. Este es un mini-manifiesto usado por aplicaciones empaquetadas dentro del archivo zip. Vea <a href="#Mini-manifest_fields">Campos del mini-manifiesto</a> si quiere más información acerca de los mini-manifiestos. + <pre class="brush: js">{ + "name": "My App", + "package_path": "http://<strong><server-ip></strong>/package.zip", + "version": "1.0" +}</pre> + </li> + <li>Cree un archivo llamado <code>install.html</code> con el siguiente contenido . Este contiene el código JavaScript que llama a la aplicación empaquetada (<a href="/en-US/docs/Web/API/Apps.installPackage"><code>installPackage()</code></a>) y a las funciones <em>callbacks</em> para las notificaciones de éxito o falla. + <pre class="brush: html"><html> + <body> + <p>Packaged app installation page</p> + <script> + // This URL must be a full url. + var manifestUrl = 'http://<strong><server-ip></strong>/package.manifest'; + var req = navigator.mozApps.installPackage(manifestUrl); + req.onsuccess = function() { + alert(this.result.origin); + }; + req.onerror = function() { + alert(this.error.name); + }; + </script> + </body> +</html></pre> + </li> + <li>Copie el archivo <code>package.zip</code>, <code>package.manifest</code>, e <code>install.html</code> dentro de la carpeta raíz del documento en el servidor.</li> + <li>Utilice el navegador en el teléfono para abrir <code>http://<strong><server-ip></strong>/install.html</code> y confirme la entrada para instalar la aplicación. El script le dará una la indicación de que la instalación fue exitosa o falló.</li> +</ol> + +<div class="note"> +<p><strong>Nota:</strong> Si usted quiere probar aplicaciones certificadas (descritas anteriormente) encienda el "modo de desarrolador" ("developer mode") en el dispositivo que quiera instalar la aplicación (con Firefox OS) y asegúrese de especificar el <a href="/en-US/docs/Web/Apps/Manifest#type"><code>type</code></a> correcto en su archivo <code>manifest.webapp</code>.</p> +</div> + +<h2 id="Campos_del_mini-manifiesto">Campos del mini-manifiesto</h2> + +<p>Aqui hay un ejemplo de los campos del mini-manifiesto (mini-manifest):</p> + +<pre class="brush: js">{ + "name": "My app", + "package_path": "http://thisdomaindoesnotexist.org/myapp.zip", + "version": "1.0", + "size": 172496, + "release_notes": "First release", + "developer": { + "name": "Developer Name", + "url": "http://thisdomaindoesnotexist.org/" + }, + "locales": { + "fr_FR": { + "name": "Mon application" + }, + "se_SE": { + "name": "Min balla app" + } + }, + "icons": { + "16": "/icons/16.png", + "32": "/icons/32.png", + "256": "/icons/256.png" + } +} +</pre> + +<p>Cuando el Firefox Marketplace genera un mini-manifiesto para tu aplicacion, extrae informacion desde tu manifiesto de la aplicacion para algunos campos. Usted puede encontrar documentación para estos campos en el <a href="/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicación</a>. Los campos únicos del mini-manifiesto son <code>package_path</code>, <code>release_notes</code>, y <code>size</code>. Los campos <code>name</code>, <code>version</code>, <code>developer</code>, y <code>locales</code> en su manifiesto de la aplicación deben ser exactamente los mismos que en su mini-manifiesto.</p> + +<p>Aquí hay información sobre el mini-manifiesto que se relaciona con su uso a nivel local para sus propias pruebas::</p> + +<dl> + <dt><code>name</code></dt> + <dd>(requerido) El nombre de la aplicación. La longitud máxima es de 128 caracteres.</dd> + <dt><code>package_path</code></dt> + <dd>(Requerido) Una URL completa donde el zip de la aplicación puede ser encontrado.</dd> + <dt><code>version</code></dt> + <dd>La versión de la aplicación.</dd> + <dt><code>size</code></dt> + <dd>El tamaño del zip de la aplicación en bytes. No es necesario para las pruebas locales pero se utiliza para mostrar una barra de progreso durante la instalación.</dd> + <dt><code>release_notes</code></dt> + <dd>Información acerca del lanzamiento de la aplicación. En el Marketplace esta información proviene de la página web que es parte del proceso de envío..</dd> + <dt><code>developer</code></dt> + <dd>Información acerca del desarrolador, contiene los campos <code>name</code> y <code>url</code>.</dd> + <dt><code>locales</code></dt> + <dd>Información de localización.</dd> + <dt><code>icons</code></dt> + <dd>Iconos usados por la aplicación.</dd> +</dl> + +<h2 id="Actualizando_aplicaciones_empaquetadas">Actualizando aplicaciones empaquetadas</h2> + +<p>Para información sobre actualizar aplicaciones, vea <a href="/en-US/docs/Web/Apps/Updating_apps">Actualizando aplicaciones</a>.</p> + +<h2 id="Ejemplo_de_aplicación_empaquetada">Ejemplo de aplicación empaquetada</h2> + +<p><a href="https://github.com/robnyman/Firefox-OS-Boilerplate-App" title="https://github.com/robnyman/Firefox-OS-Boilerplate-App">Firefox OS Boilerplate App</a></p> diff --git a/files/es/mozilla/marketplace/publishing/publish_options/index.html b/files/es/mozilla/marketplace/publishing/publish_options/index.html new file mode 100644 index 0000000000..fbe32dff00 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/publish_options/index.html @@ -0,0 +1,70 @@ +--- +title: Opciones para la publicación de aplicaciones +slug: Mozilla/Marketplace/Publishing/Publish_options +tags: + - Apps + - Marketplace +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +<div class="summary"> + <p>Una vez usted ha finalizado su aplicación es necesario publicarla para que este disponible para el usuario final (sin importar que se utilice como una página Web desde el navegador o sea descargada y utilizada en un dispositivo como un teléfono con Firefox OS), suministrando información de soporte como instrucciones de uso y otros recursos. Este articulo muestra brevemente las diferentes opciones disponibles para usted.</p> +</div> +<h2 id="Publicando_en_el_Marketplace_de_Firefox">Publicando en el Marketplace de Firefox</h2> +<p>El <a href="https://marketplace.firefox.com/" title="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Marketplace de Firefox</a> es nuestra tienda para distribuir aplicaciones tanto gratuitas como de pago. <a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Enviar una aplicación al Marketplace de Firefox</a> es un proceso simple, la carga a la tienda implica la subida de la aplicación conjuntamente con su información complementaria, luego espere mientras su aplicación pasa a través del proceso de revisión para segurar su calidad y que no contenga código malicioso. El envió al Marketplace de Firefox también confiere una serie de ventajas como el incremento de publicidad, tampoco es necesario implementar APIs especiales en su sitio Web, y la posibilidad de publicar aplicaciones de pago. Usted puede enviar tanto aplicaciones empaquetadas como aplicaciones hosteadas al Marketplace de Firefox.</p> +<h3 id="Aplicaciones_hosteadas">Aplicaciones hosteadas</h3> +<p>Una aplicación hosteada es básicamente una página almacenada en un servidor Web que puede utilizarse como una aplicación (el termino hosteada viene del ingles hosting). Si usted quiere permitir a las personas instalar su aplicación directamente desde su Web, usted debe implementar <a href="/en-US/Apps/Developing/JavaScript_API"> algo de código JavaScript</a> en su sitio Web para administrar la instalación y/o actualización de la aplicación en el navegador de los usuarios, asegúrese también que el código de su aplicación incluya un archivo de manifiesto válido. Por favor vea nuestros <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Manifest">archivos de manifiesto</a> y nuestras <a href="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality" title="/en-US/docs/Web/Apps/Introduction_to_open_web_apps#Install_API_functionality">APIs de instalación</a> para ver los pasos para implementar estas funciones.</p> +<p>El lugar que usted escoja para almacenar su aplicación queda enteramente a su conveniencia, pero las dos opciones que mostraremos a continuación son las mas comunes y convenientes.</p> +<h4 id="GitHub">GitHub</h4> +<p>Si tu aplicación Web es puramente estática (HTML/CSS/JavaScript, pero sin procesamiento del lado del servidor), <a href="http://pages.github.com" rel="external">GitHub Pages</a> es una opción bastante confiable. si usted usa una extensión <code>.webapp </code>esta plataforma entregara su manifiesto con <a href="/en-US/Apps/Developing/Manifest#Serving_from_GitHub">correspondiente tipo de MIME</a>.</p> +<h4 id="Soluciones_genéricas_de_hosting">Soluciones genéricas de hosting</h4> +<p>Para sitios Web dinámicos use la opción de hosting genérico (como un servidor Web de su propiedad o uno al que tenga acceso) con las capacidades necesarias o un proveedor de hosting específicamente adaptado a las necesidades de su aplicación, como por ejemplo <a href="http://www.heroku.com" rel="external">Heroku</a> o <a href="http://code.google.com/appengine" rel="external">Google App Engine</a>.</p> +<div class="note"> + <p><strong>Nota</strong>: Las aplicaciones Web instalables tienen una política de seguridad llamada "una aplicación por origen" ; básicamente usted no puede almacenar mas de una aplicación por origen. Esto hace el proceso de pruebas un poco mas difícil, pero siempre podrá crear un sub-dominio para cada aplicación y utilizar el simulador de Firefox OS o Firefox Aurora (que permites instalar aplicaciones Web el en escritorio) para probarlas. Vea las <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs acerca del manifiesto de aplicaciones</a> para mas información sobre los orígenes.</p> +</div> +<h3 id="Aplicaciones_empaquetadas">Aplicaciones empaquetadas</h3> +<p>Una aplicación empaquetada es una Web que tiene todos sus recursos (HTML, CSS, JavaScript, manifiesto, etc.) contenidos en un archivo zip en lugar de tener esos recursos alojados en un servidor Web. Una aplicación empaquetada es simplemente un archivo zip con el <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest">manifiesto de la aplicación</a> en su directorio raíz. El manifiesto debe llamarse <code>manifest.webapp</code>.</p> +<p>Una diferencia con las aplicaciones hosteadas es que usted debe especificar un <code><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest#launch_path">launch_path</a></code> en el manifiesto, y en las aplicaciones hosteadas esto es un campo opcional. Para mayor información vea nuestro articulo sobre <a href="/en-US/docs/Web/Apps/Publishing/Packaged_Apps" title="/en-US/docs/Web/Apps/Publishing/Packaged_Apps">Aplicaciones empaquetadas</a>.</p> +<h2 id="Aplicaciones_auto-publicadas">Aplicaciones auto-publicadas</h2> +<p>Usted además puede elegir la opción de auto-publicar. Para aplicaciones hosteadas, esto solo involucra colocarla en un hosting como se indica a continuación.</p> +<p>Usted puede auto-publicar una aplicación empaquetada solo colocándola en un servidor conjuntamente con un mini manifiesto en el mismo directorio donde se encuentra y que será usado al instalar la aplicación. Veamos este proceso:</p> +<ol> + <li>Tener el zip de la aplicación empaquetada con el nombre <code>package.zip</code>. Este archivo contiene todos los recursos de la aplicación así como también su manifiesto.</li> + <li>Cree un archivo llamado <code>package.manifest</code> con el siguiente contenido. Este es un mini manifiesto usado para la instalación de aplicaciones empaquetadas. No es el manifiesto principal, el cual se encuentra dentro del archivo zip.<br> + <pre class="brush: js">{ + "name": "My sample app", + "package_path" : "http://my-server.com/my-app-directory/my-app.zip", + "version": "1", + "developer": { + "name": "Chris Mills", + "url": "http://my-server.com" + } +}</pre> + </li> + <li>Cree un archivo llamado <code>index.html</code> con el siguiente contenido. Este contiene un ejemplo del JavaScript que llama a la aplicación empaquetada (<a href="/en-US/docs/Web/API/Apps.installPackage"><code>installPackage()</code></a>) y devuelve la llamada en caso de éxito y notificación de errores. + <pre class="brush: html"><html> + <body> + <p>Packaged app installation page</p> + <script> + // This URL must be a full url. + var manifestUrl = 'http://my-server.com/my-app-directory/package.manifest'; + var req = navigator.mozApps.installPackage(manifestUrl); + req.onsuccess = function() { + alert(this.result.origin); + }; + req.onerror = function() { + alert(this.error.name); + }; + </script> + </body> +</html></pre> + </li> + <li>Copie <code>package.zip</code>, <code>package.manifest</code>, y <code>index.html</code> en la raíz del directorio de su aplicación (<code>my-app-directory</code> en este ejemplo).</li> + <li>Utilizando un dispositivo compatible (como un teléfono con Firefox OS), navegue hasta la localización en su servidor donde usted coloco los archivos de ejemplo y confirme cuando se le pregunte para completar la instalación. El script le dará una indicación en caso de completarse exitosamente o de una falla.</li> +</ol> +<div class="note"> + <p><strong>Nota:</strong> Usted no puede instalar aplicaciones privilegiadas o certificadas desde paquetes auto-publicados ya que ellas necesitan ser firmadas durante el proceso de publicación del Marketplace de Firefox.</p> +</div> +<div class="note"> + <p><strong>Nota</strong>: Usted incluso puede <a href="/en-US/docs/Web/Apps/Creating_a_store" title="/en-US/docs/Web/Apps/Creating_a_store">crear su propia tienda de aplicaciones</a>, ya que dispone de una serie de opciones para hacerlo.</p> +</div> +<p> </p> diff --git a/files/es/mozilla/marketplace/publishing/submit/index.html b/files/es/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..265a1ad776 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +<p>This section describes the process for submitting an app to Firefox Marketplace</p> +<p>Residual details: <a href="/en-US/Marketplace/Publishing/Submit/Submitting_an_app">https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app</a></p> diff --git a/files/es/mozilla/marketplace/publishing/submit/overview/index.html b/files/es/mozilla/marketplace/publishing/submit/overview/index.html new file mode 100644 index 0000000000..5c2877d8f6 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/submit/overview/index.html @@ -0,0 +1,122 @@ +--- +title: Overview +slug: Mozilla/Marketplace/Publishing/Submit/Overview +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Overview +--- +<div class="summary"> +<p>To make your apps available on Firefox Marketplace, each one needs to be submitted to Marketplace and reviewed before it's published. <span class="seoSummary">This page provides an overview to the processes involved in submitting an app to Firefox Marketplace.</span> Subsequent pages provide additional detail on each step.</p> +</div> + +<div class="note"> +<p>For more details on each step of the process, please follow the links on the step heading or start the process from step 1. A diagrammatic representation of the steps is offered at the bottom of this page.</p> +</div> + +<p>You can also follow the submission process in this video: <a class="video-item" href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">http://vid.ly/8k2n4w</a></p> + +<h2 id="The_process">The process</h2> + +<p>So you want to submit your app to Firefox Marketplace, let's get started:</p> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account">Step 1 - Sign in to your Developer account</a></dt> + <dd> + <ul> + <li>Go to the <a class="external external-icon" href="https://marketplace.firefox.com/developers/">Firefox Marketplace Developer Hub.</a></li> + <li>Click <a class="button" href="https://marketplace.firefox.com/developers/submit/">Submit your app to the Marketplace </a></li> + <li>Sign in to your developer account: + <ul> + <li>If you aren't registered you'll be asked to register.</li> + <li>If you haven't done so already, you'll be asked to agree to the Firefox Marketplace Developer Agreement.</li> + </ul> + </li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2 - Load your app</a></dt> + <dd>On the <strong>Submit an app</strong> page: + <ul> + <li>Select whether the app is free or paid.</li> + <li>Select the platforms the app will be available on.</li> + <li>Select whether the app is hosted or packaged then: + <ul> + <li>For a hosted app, provide the link to its manifest file.</li> + <li>For a packaged app, upload the <code>package.zip</code> file, and once it has been validated, identify the minimum API requirements.</li> + </ul> + </li> + <li>Click <strong>Continue</strong>.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3 - Enter your app's details</a></dt> + <dd> + <p>On the <strong>Edit App Details</strong> page:</p> + + <ul> + <li>Modify the app URL if you wish.</li> + <li>Modify the description (provided in the manifest) if you wish.</li> + <li>Select one or two categories.</li> + <li>Provide a Privacy Policy.</li> + <li>Defined a home page and support website if you have them.</li> + <li>Provide a support email address.</li> + <li>Indicate whether the app requires Flash support.</li> + <li>Add at least one screenshot or video.</li> + <li>Provide additional comments for the app reviewer (such as sign in details if the app requires them) - note you'll only be able to modify these notes by submitting a new version of the app.</li> + <li>Select whether the app will be published as soon as approved - note you'll only be able to modify this setting by submitting a new version of the app.</li> + <li>Click <strong>Continue</strong>.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4 - See details of the next steps</a></dt> + <dd>On the <strong>Next Steps</strong> page click <strong>Continue</strong>.</dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5 - Obtain a content rating</a></dt> + <dd>On the <strong>Content Ratings</strong> page: + <ul> + <li>to obtain a new rating click <strong>Create an IARC Ratings Certificate</strong> and on the IARC Web site, complete the ratings questionnaire.</li> + <li>to enter a rating you've already obtained provide its <strong>Submission ID</strong> and <strong>Security Code</strong>.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Pricing/Introduction">Step 6 - Update availability and payment details</a></dt> + <dt style="margin-left: 40px;">Step 6a - If the app is free (and doesn't include in-app purchases):</dt> + <dd style="margin-left: 40px;">On the left hand menu, click <strong>Compatibility</strong>. Change the countries the app will be available in if you wish.</dd> + <dt style="margin-left: 40px;">Step 6b - If the app is paid (or free, but includes in app payments):</dt> + <dd style="margin-left: 40px;">On the left hand menu, click <strong>Compatibility & Payments</strong> + <ul> + <li>Setup your payment provider accounts, such as Bango and Boku.</li> + <li>Set the price, identify whether the app includes in-app products and select the countries the app will be available in.</li> + <li>If the app is being offered as a premium upgrade to a free app, identify the free app.</li> + </ul> + </dd> + <dt style="margin-left: 40px;">Step 6c - If the app includes in-app products:</dt> + <dd style="margin-left: 40px;"> + <ul> + <li>On the left hand menu click <strong>In-App Payments</strong> and obtain your API key and secret. (Note that you'll have to <a href="/en-US/Marketplace/Publishing/Updating_apps">submit an update</a> to your app once the API key and secret have been added to it, for more details see <a href="/en-US/Marketplace/Monetization/In-app_payments">In-app payments</a>.)</li> + <li>If you're using <a href="/en-US/Marketplace/Monetization/In-app_payments_section/fxPay_iap">fxPay</a>, on the left hand menu click <strong>In-App Products</strong> and define each of your in-app products.</li> + </ul> + </dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 7 - Setup team member (optional)</a></dt> + <dd>On the left hand menu, click <strong>Team Members</strong> and add any additional team member if you wish.</dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 8 - View the listing (optional)</a></dt> + <dd>On the left hand menu, click <strong>View Listing</strong> and view your app's Marketplace listing if you wish.</dd> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 9 - Edit other localization listings (optional)</a></dt> + <dd>On the left hand menu click <strong>Edit Listing</strong> and modify the app URL, description, and categories for any of the app's localizations or add details for any other locale supported by Firefox Marketplace.</dd> +</dl> + +<p>Your app is now in the review queue. You can monitor its progress through the review process by clicking <strong>Status and Version</strong> on the left hand menu. Remember that if your app makes use of in-app payments you will need to code in the API Key and submit an update before the app can be published.</p> + +<h2 id="Flow_chart">Flow chart</h2> + +<p><img alt="Flow chart showing the app submission process" src="https://mdn.mozillademos.org/files/8137/Submission%20Process%20v4.png" style="height: 2834px; width: 1260px;"></p> + +<h2 id="What_next">What next?</h2> + +<p>Having completed your app submission your might want to:</p> + +<ul> + <li><a href="https://marketplace.firefox.com/developers/support">get support</a></li> + <li>get news and updates from: + <ul> + <li><a href="https://hacks.mozilla.org/">the Hacks blog</a></li> + <li><a href="https://www.youtube.com/user/mozhacks">the Hacks video channel on YouTube</a></li> + <li><a href="https://twitter.com/mozhacks">the Hacks twitter feed</a></li> + <li><a class="external external-icon" href="https://marketplace.firefox.com/developers/#newsletter-signup">the Apps & Hacks newsletter</a></li> + </ul> + </li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">get involved with Marketplace</a></li> +</ul> diff --git a/files/es/mozilla/marketplace/publishing/updating_apps/index.html b/files/es/mozilla/marketplace/publishing/updating_apps/index.html new file mode 100644 index 0000000000..f75be357b6 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/updating_apps/index.html @@ -0,0 +1,24 @@ +--- +title: Actualización de aplicaciones +slug: Mozilla/Marketplace/Publishing/Updating_apps +translation_of: Archive/Mozilla/Marketplace/Publishing/Updating_apps +--- +<div class="note"> + <p><strong>Nota:</strong> Si cambias el nombre de tu aplicacion despues de que haya sido aprobada por el Marketplace, tendrás que volver a enviarla para que sea aprobada.</p> +</div> +<h2 id="Actualización_de_aplicaciones_alojadas">Actualización de aplicaciones alojadas</h2> +<p>Una aplicación respeta las reglas habituales de almacenamiento en caché y, tal vez en ocasiones, utilice mecanismos más avanzados para una mejora en el inicio, como <a href="/es/docs/Recursos_offline_en_firefox">HTML5 AppCache</a>. Una vez dicho esto, no hay nada especial a tener en cuenta cuando actualicemos los recursos normales que utiliza una aplicación.</p> +<p>Sin embargo, las aplicaciones de código abierto son diferentes por el modo de manejar el manifiesto (<em>manifest</em>). Podría ser que ciertos cambios en el manifiesto requieran aprobación del usuario. Dependiendo de la implementación del tiempo de ejecución de la Web, puede resultar confuso si ha habido alguna actualización o no.</p> +<p>Una forma sencilla de manejar este asunto consiste en añadir un campo <code>version</code> en el manifiesto de la aplicación. Más adelante podrás comprobar la versión examinando el valor de retorno de la función <a href="/en-US/docs/Web/API/Apps.getInstalled"><code>navigator.mozApps.getInstalled()</code></a>. Si la versión que el usuario tiene instalada no está actualizada, podrás lanzar una actualización utilizando <a href="/en-US/docs/Web/API/Apps.install"><code>navigator.mozApps.install()</code></a>.</p> +<p>El tiempo de ejecución de la Web no utiliza el valor <code>version</code>, de modo que puedes utilizar cualquier esquema de versión que desees.</p> +<p>Ten también en cuenta que se detectarán los cambios que hagas a un manifest que provoquen errores u otros daños si subes el manifest a Firefox Marketplace. Aquellos errores graves provocarán que se la aplicación desaparezca del listado. Los errores menos graves marcarán la aplicación para que sea revisada de nuevo.</p> +<h2 id="Actualización_de_aplicaciones_empaquetadas">Actualización de aplicaciones empaquetadas</h2> +<p>Las <a href="/es/docs/Web/Apps/Developing/Packaged_apps/Packaged_apps">aplicaciones empaquetadas</a> tienen un proceso de actualización diferente al de las aplicaciones alojadas. Para actualizar una aplicación empaquetada, debes subir una nueva versión del archivo zip de la aplicación a Firefox Marketplace. Entonces, la aplicación actualizada se revisa y se publica en Marketplace. Este proceso lanza una actualización en el teléfono Firefox OS. El usario del teléfono también puede solicitar una actualización utilizando la aplicación de Configuración.</p> +<p>Si quieres más detalles sobre el proceso de actualización de una aplicación empaquetada, continúa leyendo.</p> +<h3 id="Más_detalles_sobre_la_actualización_de_aplicaciones_empaquetadas">Más detalles sobre la actualización de aplicaciones empaquetadas</h3> +<p>Aquí tienes más detalles sobre el proceso de actualización de las aplicaciones empaquetadas. Puede que necesites esta información si vas a implementar un mercado de aplicaciones.</p> +<ul> + <li>Cuando la aplicación empaquetada actualizada se publica, el <a href="/es/docs/Web/Apps/Developing/Packaged_apps/Packaged_apps#Aplicaciones_empaquetadas_de_la_tienda_de_Firefox_(Firefox_Marketplace).">mini-manifiesto</a> <em>(mini-manifest</em>) se actualiza para conducir al archivo zip actualizado (el mini-manifiesto no forma parte del manifiesto principal de la aplicación). El encabezamiento <code>ETag</code> header se modifica, y esto lanza una actualización en el teléfono Firefox OS.</li> + <li>En el teléfono, Firefox OS hace, una vez al día, una comprobación buscando cambios en una aplicación. Para esto, comprueba la URL del mini-manifiesto. Luego, comprueba la URL en el campo <code>package_path</code> en el mini-manifiesto. Este proceso se realiza utilizando el método <code>checkForUpdate()</code> en el objeto <a href="/en-US/docs/Web/API/App"><code>App</code></a>. Cuando la cabecera <code>ETag</code> se modifica, sabe que la aplicación ha sido actualizada. Después comprueba si el archivo zip ha cambiado.</li> + <li>Firefox OS busca actualizaciones de aplicaciones por tandas.</li> +</ul> diff --git a/files/es/mozilla/marketplace/submission/index.html b/files/es/mozilla/marketplace/submission/index.html new file mode 100644 index 0000000000..1c01f1e00d --- /dev/null +++ b/files/es/mozilla/marketplace/submission/index.html @@ -0,0 +1,9 @@ +--- +title: Submission +slug: Mozilla/Marketplace/Submission +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Submission +--- +<p>Marketplace submission</p> diff --git a/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html b/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html new file mode 100644 index 0000000000..f33f1e743a --- /dev/null +++ b/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html @@ -0,0 +1,82 @@ +--- +title: Marketplace review criteria +slug: Mozilla/Marketplace/Submission/Marketplace_review_criteria +tags: + - test +translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria +--- +<div class="summary"> + <p>Este artículo describe el conjunto de requerimientos que una aplicación debe cumplir para ser distribuida a través de Firefox Marketplace. Los requerimientos están diseñados para equilibrar las necesidades entre desarrolladores y usuarios de aplicaciones de Firefox Marketplace. Los desarrolladores persiguen requerimientos equitativos, consistentes y no draconianos que puedan ser confiables para así construir un negocio sobre ello. Por otro lado, los usuarios necesitan asegurarse que las aplicaciones sean seguras, que funcionarán en su dispositivo, y que harán lo que indica que harán. <span style="line-height: 1.5;">Los requerimientos que se mencionan a continuación, aspiran un equilibro entre estas necesidades.</span></p> +</div> +<p>Aquí se mencionan las expectativas de Mozilla sobre lo que una reseña de aplicación es y no es:</p> +<ul> + <li>Criterios serán aplicados de una manera justa, compasiva y consistente. El proceso de revisión de una aplicación no tiene la intencionalidad de ser una barrera sino, por el contrario, ser un punto de confianza que provea retroalimentación para ayudar a los desarrolladores a ser más exitosos.</li> + <li>¡Los revisores no son el equipo de aseguramiento de la calidad! Durante el proceso de revisión, alguien observará el manifiesto de la aplicación y se detendrá unos minutos probando la aplicación, tal como lo haría cualquier usuario corriente.</li> + <li>Si la revisión de una aplicación falla, se le entregará al desarrollador una explicación detallada de los problemas encontrados, pasos para reproducirlos, y si fuese posible, el revisor podría orientar al desarrollador en la dirección correcta al proporcionar enlaces a documentación técnica relevante o hacer recomendaciones sobre qué cambios necesitan ser hechos.</li> + <li>Los revisores no juzgan sobre cómo una aplicación luce, solo lo harán en cómo una aplicación trabaja. Por ejemplo, una aplicación con un párrafo de letras rojas sobre un fondo naranja no sería rechazado solo por es feo, pero podría ser rechazado si no es legible.</li> + <li>Nosotros siempre le damos a los desarrolladores el beneficio de la duda. Si existiese la inseguridad sobre si una aplicación será rechazada, los revisores realizarán preguntas <em>antes</em> de registrar el rechazo. Las aplicaciones no serán (con conocimiento de causa) rechazadas solo por problemas en la plataforma que están fuera del control de los desarrolladores; sin embargo, podremos retener la aprobación hasta hacer correr la aplicación.</li> +</ul> +<h2 id="Seguridad">Seguridad</h2> +<p>Todos los detalles sobre la arquitectura de seguridad de las aplicaciones está disponible aquí: <a href="https://wiki.mozilla.org/Apps/Security">https://wiki.mozilla.org/Apps/Security</a></p> +<ul> + <li>El manifiesto de la aplicación debe encontrarse en el mismo sitio donde está la aplicación.</li> + <li>El manifiesto de la aplicación cumplir con el encabezado <code>Content-Type</code> de <code>application/x-web-app-manifest+json</code>.</li> + <li>Las aplicaciones no deberían usar redireccionamientos o iframes para cargar contenido que el desarrollador no está autorizado a usar.</li> + <li>Requerimientos de privilegios deberán estar especificados en el manifiesto de la aplicación con una descripción del por qué los privilegios son necesarios.</li> +</ul> +<h2 id="Privacidad">Privacidad</h2> +<ul> + <li>El desarrollador debe incluir un enlace a las políticas de privacidad durante su aplicación, pero no hay requisitos sobre el formato y contenido de la misma. Siéntase libre en usar nuestra <a href="https://github.com/flamsmark/privacy-policy-template">plantilla de políticas de privacidad</a>. Además, eche un vistazo a nuestra <a href="/en-US/docs/Privacy_policies">pautas de políticas de privacidad</a>.</li> +</ul> +<h2 id="Contenido">Contenido</h2> +<ul> + <li>Cualquier aplicación que viole nuestras Pautas de Contenido siguientes, no está permitida. Si usted piensa que tiene una excepción, por favor pregunte al equipo revisor para mayor clarificación, aún si la aplicación no está lista para subirla. Nosotros queremos ayudarle a estar en el camino correcto, más que invertir tiempo en contenido que será rechazado.</li> + <li>Comenzando en enero de 2014, todas las aplicaciones deberán recibir una clasificación del International Age Rating Coalition (IARC). Para obtener esta clasificación, nosotros le dirigiremos a un breve cuestionario durante el proceso de admisión, y usted recibirá la clasificación de forma inmediata. Más información acerca de este proceso de clasificación, está disponible <a href="https://developer.mozilla.org/en-US/Marketplace/Submission/Rating_Your_Content">aquí</a>.</li> + <li>Pantallas y descripciones presentadas a Firefox Marketplace deben representar con exactitud la aplicación.</li> + <li>En el manifiesto de la aplicación, el <a href="/en-US/docs/Web/Apps/Manifest#locales"><code>locale</code> keys</a> debe coincidir con la localización que su aplicación soporta. Al proveer una llave <code>locale</code> en polaco, los usuarios esperarán que su aplicación esté disponible en ese idioma.</li> +</ul> +<h3 id="Pautas_de_contenido"><strong>Pautas de contenido</strong></h3> +<p>Esta lista describe los tipos de contenidos que son inapropiados para Firefox Marketplace. Esta lista es ilustrativa, no definitiva, y puede ser actualizada. Si una aplicación se encuentra que está violando el contenido de estas pautas, Mozilla tiene el derecho de remover inmediatamente la aplicación del Firefox Marketplace.</p> +<ul> + <li>Ningún material pornográfico obsceno, o imágenes que representen sexualidad o violencia.</li> + <li>Ningún contenido que infrinja los derechos de cualquier persona, incluida la propiedad intelectual, derecho de propiedad u otros derechos de privacidad o publicidad.</li> + <li>Ningún contenido que esté diseñado para dañar a Mozilla o a los usuarios (como código malicioso, virus, spyware o malware).</li> + <li>Ningún contenido que sea ilegal o promueva actividades ilegales.</li> + <li>Ningún contenido que sea falso, engañoso, fraudulento o esté diseñado para realizar phishing o robo de identidad.</li> + <li>Ningún contenido que promueva la adicción por el juego y las apuestas.</li> + <li>Ningún contenido que se dedique a la publicidad de productos o servicios ilegales.</li> + <li>Ningún contenido que explote niños.</li> + <li>Ningún contenido que degrade, intimide e incite a la violencia, o aliente a la acción perjudicial en contra de alguien o grupo basado en la edad, género, raza o etnia, nacionalidad, religión, orientación sexual, discapacidad, religión, ubicación geográfica u otra categoría protegida o que constituya al discurso del odio.</li> + <li>Ningún contenido que engañe a un usuario para hacer una compra sin su consentimiento.</li> +</ul> +<h2 id="Funcionalidad">Funcionalidad</h2> +<ul> + <li>El revisor debe ser capaz de ejecutar las características principales de la aplicación. Defectos estéticos y menores serán reportados al desarrollador, pero no impedirán de que la aplicación sea aprobada.</li> + <li>La aplicación no debe comprometer el rendimiento del sistema o su estabilidad.</li> +</ul> +<h2 id="Usabilidad">Usabilidad</h2> +<ul> + <li>El desarrollador debe hacer un intento razonable de optimizar el diseño de la aplicación para la plataforma a la que está destinada. El intento de este requerimiento es para detectar fallos, tales como: + <ul> + <li>Una aplicación presentada para plataformas móviles que está obviamente en un sitio de escritorio.</li> + <li>Una aplicación que muy claramente no se ajusta a todo el espacio de pantalla disponible (imagine una aplicación con una resolución de 320x480 que solo cubre la esquina superior en una tableta, con el resto de la pantalla en blanco. ¡Esta seguramente no es la intención original del desarrollador!)</li> + </ul> + </li> + <li>La aplicación debe implementar su propio método de navegación y no depender del menú del navegador o los botones de retroceso del hardware mismo, que no están presentes en todos los dispositivos. + <ul> + <li>Por ejemplo, si los revisores navegan por algún lado con la aplicación y ésta no tiene la capacidad de retroceder. Esto no significa que una aplicación debe implementar una barra de botones a las aplicaciones nativas.</li> + <li>Nota: un “contenedor” Gaia para contenido web obsoleto está en desarrollo: <a href="https://github.com/mozilla-b2g/gaia/issues/2557">https://github.com/mozilla-b2g/gaia/issues/2557</a></li> + </ul> + </li> + <li>Elementos de navegación, tales como botones y enlaces, deben ser fáciles de hacer clic o presionar.</li> +</ul> +<h2 id="Políticas_para_listas_de_bloqueo">Políticas para listas de bloqueo</h2> +<p>Esperamos que nunca tengamos que usarlas, pero nos reservamos el derecho de remover ("blocklist") cualquier aplicación publicada que posteriormente se encuentre que viola cualquier requerimiento de seguridad, privacidad o contenido, o aplicaciones que seriamente degraden el sistema o el rendimiento de la red. Desarrolladores serán informados de la situación antes de que su aplicación esté en la lista de bloqueo, se asumirá que es un buen ciudadano a menos que encontremos evidencias que demuestren lo contrario y recibirá completa asistencia del equipo revisor de aplicaciones para comunicar lo que está pasando y sea así resulto el problema. Ejemplos específicos de situaciones donde listas de bloqueo se justifican, incluyen:</p> +<ul> + <li>Phishing</li> + <li>Spamming</li> + <li>Cambiar el contenido de Puppy Pictures v1.0 a Brutal Violence v1.0 (sin actualizar la clasificación, cuando esta característica es implementada)</li> + <li>Mal comportamiento de una aplicación para un gran porcentaje de usuarios — disminuyendo el rendimiento del teléfono, causando reinicios, causando perdida de información, etc. donde usuarios no puedan indicar que es debido a la aplicación y donde éste no sea resuelto al reiniciar el dispositivo.</li> + <li>Una aplicación siendo usada para ataques a la red, tales como denegación de servicio (DDOS) distribuido.</li> + <li>(inserte una trama de película aquí)</li> +</ul> diff --git a/files/es/mozilla/marketplace/submission/rating_your_content/index.html b/files/es/mozilla/marketplace/submission/rating_your_content/index.html new file mode 100644 index 0000000000..ad57d6ee06 --- /dev/null +++ b/files/es/mozilla/marketplace/submission/rating_your_content/index.html @@ -0,0 +1,118 @@ +--- +title: Obtener una clasificación para tu aplicación +slug: Mozilla/Marketplace/Submission/Rating_Your_Content +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Rating_Your_Content +--- +<div class="summary"> +<p>Mozilla se ha aliado con la <a href="http://globalratings.com">International Age Rating Coalition</a> (IARC) para incluir la clasificación de contenido por edades en todas las aplicaciones. Porque Mozilla se preocupa por los usuarios y cree que deberían tener la oportunidad de decidir qué contenido es apropiado para ellos, desde el 15 de Abril de 2014, todas las aplicaciones del Firefox Marketplace tendrán que tener una clasificación IARC. Aunque amamos todas nuestras aplicaciones, nuestro compromiso con esta iniciativa requiere que cualquier aplicación o juego que no tenga esta clasificación, sea eliminado después de la fecha límite del 15 de Abril de 2014. La IARC dispone de una herramienta gratuita para crear tu clasificación.</p> +</div> + +<h2 id="Sobre_la_herramienta_de_clasificación_de_la_IARC">Sobre la herramienta de clasificación de la IARC</h2> + +<p>IARC, un esfuerzo colaborativo entre varias plataformas internacionales de clasificación, ha introducido una herramienta de de clasificación como solución para asignar clasificación de contenido de manera global a juegos y aplicaciones.<br> + Rellenando un simple formulario, puedes recibir una clasificación instantánea para todas las plataformas participantes. Esto no solo ayuda a educar a los usuarios acerca del contenido, sino que reduce dramáticamente los costes y complicaciones de obtener la clasificación en varias plataformas de manera individual.</p> + +<h2 id="Sistemas_de_clasificación_internacionales_soportados">Sistemas de clasificación internacionales soportados</h2> + +<p>Usando un asistente de clasificacion, se generan las clasificaciones para multiples sistemas, países y regiones.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Sistema de clasificación</th> + <th scope="col">Países soportados</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://culturadigital.br/classind/">Classificação Indicativa </a></td> + <td>Brasil</td> + </tr> + <tr> + <td><a href="http://www.esrb.org/">ESRB</a></td> + <td>Canada, México, Estados Unidos</td> + </tr> + <tr> + <td><a href="http://www.pegi.info">PEGI</a></td> + <td>Austria, Dinamarca, Hungría, Letonia, Noruega, Eslovenia, Bélgica, Estonia, Islandia, Lituania, Polonia, España, Bulgaria, Finlandia, Irlanda, Luxemburgo, Portugal, Suecia, Chipre, Francia, Israel, Malta, Rumania, Suiza, República Checa, Grecia, Italia, Holanda, Eslovaquia, Reino Unido.</td> + </tr> + <tr> + <td><a href="http://usk.de/">USK</a></td> + <td>Alemania</td> + </tr> + <tr> + <td><a href="https://www.globalratings.com/ratings_guide.aspx">Generic</a></td> + <td>Usado para todos los demás paises</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_hay_en_una_clasificación_de_contenido">¿Qué hay en una clasificación de contenido?</h2> + +<p>El sistema de clasificación le proporciona a los usuarios tres tipos de información:</p> + +<ul> + <li>La edad mínima recomendada — esto puede variar por país y cultura.</li> + <li>Descriptores de contenido — muestra información sobre cualquier contenido que contenga la aplicación que pueda ser de importancia para algunos usuarios. Esto puede incluir información sobre violencia, referencias al uso de alcohol o drogas, elementos de terror, apuestas reales o simuladas, entre otras.</li> + <li>Elementos interactivos — muestra información sobre cualquier característica de interacción que contenga la aplicación, tales como compartir información personal, compartir la ubicación, compras en la aplicación, contenido descargable o facilidades para trabajar en red.</li> +</ul> + +<p>El proceso de clasificación es gratuito para los usuarios, solo lleva unos minutos y está integrado con el proceso de envío del Firefox Marketplace y el escritorio de desarrollador. Antes de que se revise una aplicación, debe estar clasificada. Los usuarios ven la clasificación de una aplicación según su región en la página de detalles de la aplicación y pueden ver más información si desean saber más.</p> + +<h2 id="Obtener_una_clasificación_de_contenido_para_tu_aplicación">Obtener una clasificación de contenido para tu aplicación</h2> + +<p>IARC proporciona una herramienta de clasificación muy sencilla y que para la mayoría de las aplicaciones, debería llevar menos de cinco minutos. En esta sección, vamos a repasar el proceso.</p> + +<div class="note"> +<p><strong>Nota</strong>: Desafortunadamente, no podemos aceptar clasificaciones de otros sistemas; si tu aplicación tiene una clasificación de otro sistema, sigues necesitando pasar por el proceso de certificación de IARC.</p> +</div> + +<ol> + <li>Ingresa en el sitio de desarrolladores de Firefox Marketplace; la herramienta de clasificación solo está visible si accedes como desarrollador.</li> + <li> + <p>Accede a la herramienta de clasificación IARC durante el proceso de envío:</p> + + <p><img alt="Demonstrates where in the app submission flow where ratings can be entered." src="https://mdn.mozillademos.org/files/6579/submission_flow.png" style="width: 200px; height: 239px; border-width: 1px; border-style: solid;"></p> + + <p>o desde el Escritorio de desarrolladores:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6623/from_nav_bar.png" style="border-width: 1px; border-style: solid; height: 199px; width: 200px;"></p> + </li> + <li> + <p>Comienza el proceso de clasificación:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6583/start_the_rating_process.png" style="width: 600px; height: 242px; border-width: 1px; border-style: solid;"></p> + + <p>o introduce la información para una clasificación existente:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6585/enter_existing_rating_info.png" style="width: 600px; height: 276px; border-width: 1px; border-style: solid;"></p> + </li> + <li> + <p>Rellena el breve cuestionario:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6587/questions.png" style="width: 600px; border-width: 1px; border-style: solid; height: 725px;"></p> + </li> + <li> + <p>Añade información adicional sobre tu aplicación:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6589/additional_info.png" style="width: 589px; height: 637px;"></p> + </li> + <li> + <p>Previsualiza y confirma la información de tu clasificación:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/6591/confirm_info.png" style="width: 400px; height: 865px; border-width: 1px; border-style: solid;"></p> + </li> + <li> + <p>Vuelve al escritorio de desarrollador y deberías ver tu información de clasificación. ¡Y ya estás listo!</p> + </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Recibirás un correo electrónico con tu certificado de clasificación y código de seguridad. Por favor, conserva una copia para tus archivos.</p> +</div> + +<h2 id="Más_información">Más información</h2> + +<p>Si tienes preguntas sobre el proceso de clasificación, cómo responder el cuestionario, o si piensas que tu clasificación es incorrecta, por favor escribe un correo electrónico al equipo de IARC, a <a href="mailto:dev-questions@globalratings.com">dev-questions@globalratings.com</a>. También hay información adicional en la <a href="http://www.globalratings.com">página web de clasificaciones globales.</a></p> + +<p>Si tienes alguna otra pregunta, puedes ponerte en contacto con el equipo de revisión de aplicaciones de Mozilla en <a href="https://groups.google.com/forum/#%21forum/mozilla.appreview" title="appreview@lists.mozilla.org">mozilla.appreview</a>.</p> diff --git a/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html b/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html new file mode 100644 index 0000000000..5b3d7bf716 --- /dev/null +++ b/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html @@ -0,0 +1,36 @@ +--- +title: 'Apps, pruebas y solución de problemas' +slug: Mozilla/Marketplace/Submission/Testing_and_troubleshooting +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting +--- +<div class="summary"> + <p>Este articulo engloba todo lo que se necesita para probar y solucionar los problemas de las apps.</p> +</div> +<h2 id="Configura_tu_entorno_de_pruebas">Configura tu entorno de pruebas</h2> +<p>Hay un número de herramientas que puedes instalar que realizan pruebas de funciones útiles para Firefox OS/open web apps. Te recomendamos al menos instalar las siguientes.</p> +<ul> + <li>Firefox para escritorio. Te recomendamos utilizar una version de pre-lanzamiento para tus pruebas, como lo es <a href="http://aurora.mozilla.org/">Aurora</a> o <a href="http://nightly.mozilla.org/">Nightly</a>.</li> + <li>Firefox para Android. Te recomendamos utilizar una version de pre-lanzamiento para tus pruebas, como lo es <a href="http://aurora.mozilla.org/">Aurora</a> o <a href="http://nightly.mozilla.org/">Nightly</a>. Si no tienes un dispositivo Android en físico, puedes usar el <a href="http://developer.android.com/sdk/">emulador Android</a>.</li> + <li>El <a href="/en-US/Firefox_OS/Using_the_App_Manager">Firefox OS App Manager</a>. Está construído en una version de escritorio de Firefox 26+ y provée muchas herramientas útiles como depuración de apps y su instalación en emuladores y dispositivos físicos.</li> + <li><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS simulator</a>; este debe ser usado si quieres específicamente hacer pruebas de tus apps en una versión antigua de Firefox OS. Para versiones 1.2 y posteriores, usa el App Manager. Puedes usar el panel de control de simulador para instalar tu aplicación en el simulador.</li> +</ul> +<p>Idelamente deberás también tener algún dispositivo para propósitos de pruebas. Para más detalles, mira nuestra <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide">guía de desarrollo para celulares</a>.</p> +<h2 id="Pruebas">Pruebas</h2> +<p>Incluso a través de las Open Web Apps se usa la misma tecnología métodos de entrega como las páginas web, la experiencia de usuario para las aplicaciónes is diferente dado que el entorno de la aplicación no contiene un navegador ni tampoco una barra de direcciones o un botón de retroceso, y lo celulares con Firefox OS no tendran un botón físico en su hardware como los celulares Android tienen. Estos pasos te ayudarán a asegurarte que te aplicación provée una gran experiencia de usuario.</p> +<ol> + <li>Instala la aplicación. Asegúrate que los íconos se muestran en la ventana de inicio y el nombre de la aplicación no tiene palabras cortadas o escondidas.</li> + <li>Inicia la aplicación. Asegúrate que el tamaño de la pantalla y la orientacion son detectadas apropiadamente.</li> + <li>Asegúrate de que el usuario vea rápidamente tu aplicación, no tu pantalla de inicio. Recuerda, los usuarios que instalan tu app mediante el Firefox Marketplace ya han estado enterados en las características que ofrece tu aplicación. No hay necesidad de hacerlos brincar a otra pantalla envíandolos a una página de lanzamiento que enlista las características de tu aplicación otra vez. La primer experiencia ideal empieza un una página de inicio o de entrada.</li> + <li>Enfócate en las principales caracterísitcas que ofrece tu app. Específicamente presta atención a las opciones de navegación que no tengan opciones para regresar a otra pantalla y contenidos con posibles problemas ascendentes.</li> + <li>Asegúrate que los enlaces a contenido exterior a tu aplicación, como los enlaces a otras páginas web o Twitter, se abran en una nueva ventana o marco que le de la opción al usuario la posibilidad de volver a tu aplicación fácilmente.</li> + <li>En el navegador de escritorio, usa la <a href="/en-US/docs/Tools/Responsive_Design_View">Vista de Diseño Responsivo</a> para poder utilizar tu aplicación en diferentes tamaños de pantalla. Te recomendamos utilizar resoluciones desde 320x480 a 1260x800.</li> +</ol> +<h2 id="Resolución_de_problemas">Resolución de problemas</h2> +<ul> + <li>Si necesitas ayuda con el desarrollo de app's, el <a href="/en-US/Apps">App Center</a> tiene gran cantidad de información, incluyendo técnicas de desarrollo y diseño, instalación de la app, APIs soportadas, y más.</li> + <li>La <a href="/en-US/Firefox_OS">Firefox OS zone</a> tiene gran cantidad de información sobre la plataforma Firefox OS, por ejemplo la construcción OS ( sistema operativo ), y hacking ( mecanismo de seguridad y vulnerabilidades ) por defecto de las apps.</li> + <li>Los detalles de cómo enviar la app al Firefox Marketplace, todo lo que necesitas lo puedes ver en nuestra guía <a href="/en-US/Marketplace/Submission/Submitting_an_app">Submitting an app to the Firefox Marketplace</a>.</li> + <li>El <a href="/en-US/docs/Mozilla/Marketplace/FAQ">Marketplace FAQ</a> tiene una gran variedad de preguntas y respuestas frecuentes de como publicar en el Firefox Marketplace.</li> + <li>Para cuestiones específicas, no generales, hay disponible una serie de Mozilla <a href="http://www.mozilla.org/about/forums/">Forums</a>, incluyendo grupo de noticias, listas de correos e IRC. Ver los detalles al pie del <a href="/en-US/Apps">App Center</a>, <a href="/en-US/Firefox_OS">Firefox OS zone</a>, <a href="/en-US/Marketplace">Marketplace zone</a> y landing pages con los sitios más relevantes de este contexto.</li> +</ul> diff --git a/files/es/mozilla/mathml_project/basics/index.html b/files/es/mozilla/mathml_project/basics/index.html new file mode 100644 index 0000000000..2a9031c69d --- /dev/null +++ b/files/es/mozilla/mathml_project/basics/index.html @@ -0,0 +1,821 @@ +--- +title: Bases de MathML +slug: Mozilla/MathML_Project/Basics +translation_of: Mozilla/MathML_Project/Basics +--- +<h2 id="Bases_de_MathML">Bases de MathML</h2> +<p>Este documento muestra algunas de las construcciones básicas de MathML. Está confeccionado para mostrarse correctamente con la tipografía/fuente Symbol. Puedes ver su fuente. No obstante, los documentos de MathML tienden a ser verborrágicos y puede ser que te extravíes intentando localizar fragmentos de MathML con la vista usual de código fuente. Se ha hecho esta demo con el fin de ilustrar los siguientes aspectos. Puedes hacer un clic derecho sobre cualquier fragmento matemático de interés a lo largo de este documento. El menú contextual no aparecerá. En realidad, el fragmento matemático hará zoom y, si haces clic una segunda vez, verás el <em>WYSIWYG</em> de lenguaje de marcado de MathML; y, si tu haces clic por tercera vez, el fragmento regresará a su estado original. Este modo de tres estados busca limitar los conflictos con otros agentes que compitan por el mouse.</p> +<p>Con MathML se puede construir conjuntos tales como (procede a hacer clic sobre cualquiera de estas ecuaciones para probar el zoom) <math> <mrow> <mo>{</mo> <mrow> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo>,</mo> <mn>2</mn> <mo>,</mo> <mn>3</mn> <mo>,</mo> <mn>4</mn> </mrow> <mo>}</mo> </mrow> </math> o <math> <mrow> <mo>{</mo> <mrow> <mrow> <mo>⌊</mo> <mfrac> <mi>a</mi> <mi>b</mi> </mfrac> <mo>⌋</mo> </mrow> <mo stretchy="true">|</mo> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>≤</mo> <mn>3</mn> </mrow> </mrow> <mo>}</mo> </mrow> </math>, escribir el cálculo <math> <mrow> <mfrac> <mrow> <mi>d</mi> <mi>y</mi> </mrow> <mrow> <mi>d</mi> <mi>x</mi> </mrow> </mfrac> <mo>=</mo> <mfrac> <mn>1</mn> <msup> <mi>y</mi> <mn>2</mn> </msup> </mfrac> </mrow> </math>, formar expresiones complejas <math> <mrow> <mrow> <munder> <mo movablelimits="false">lim</mo> <mrow> <mi>n</mi> <mo>→</mo> <mi>N</mi> </mrow> </munder> <msup> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>+</mo> <mfrac> <mn>1</mn> <mi>n</mi> </mfrac> </mrow> <mo>)</mo> </mrow> <mi>n</mi> </msup> </mrow> <mo>−</mo> <msup> <mi>e</mi> <mi>N</mi> </msup> </mrow> </math>, <math> <mrow> <mi>k</mi> <mo>=</mo> <mfrac> <mrow> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>x</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mo>-</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <msup> <mo>∂</mo> <mn>2</mn> </msup> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>x</mi> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> </mrow> <mrow> <msup> <mrow> <mo>(</mo> <mn>1</mn> <mo>+</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>∂</mo> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>x</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>+</mo> <msup> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>∂</mo> <mi>z</mi> </mrow> <mrow> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>)</mo> </mrow> <mn>2</mn> </msup> </mrow> </mfrac> </mrow> </math>, escribir ecuaciones de vectores <math mathvariant="bold"> <mrow> <mi>Y</mi> <mo>=</mo> <mrow> <mrow> <mi>a</mi> <mo></mo> <mi>X</mi> </mrow> <mo>+</mo> <mi>b</mi> </mrow> </mrow> </math>, etcétera.</p> +<p>Nota cómo las anotaciones matemáticas aparecen en el flujo de texto principal y responden a medida de que reajustas la ventana. También puedes escribir ecuaciones representadas como la siguiente</p> +<p><math display="block"> <mrow> <mrow> <mi>x</mi> <mover> <mo>→</mo> <mtext>mapea a</mtext> </mover> <mi>y</mi> <mo>=</mo> <msub> <mi>f</mi> <mi>n</mi> </msub> <mo></mo> <mrow> <mo>(</mo> <mi>x</mi> <mo>)</mo> </mrow> </mrow> <mo>=</mo> <msup> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>+</mo> <mfrac> <mn>1</mn> <msup> <mi>x</mi> <mi>n</mi> </msup> </mfrac> </mrow> <mo>)</mo> </mrow> <mi>n</mi> </msup> </mrow> </math> <math display="block"> <mrow> <msubsup> <mo>∫</mo> <mi>a</mi> <mi>b</mi> </msubsup> <mi>f</mi> <mrow> <mo>(</mo> <mi>x</mi> <mo>)</mo> </mrow> <mi>d</mi> <mi>x</mi> </mrow> <mrow> <mo>=</mo> <mfrac> <mrow> <mi>b</mi> <mo>-</mo> <mi>a</mi> </mrow> <mn>6</mn> </mfrac> <mrow> <mo>[</mo> <mi>f</mi> <mrow> <mo>(</mo> <mi>a</mi> <mo>)</mo> </mrow> <mo>+</mo> <mn>4</mn> <mi>f</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mrow> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> <mo>+</mo> <mi>f</mi> <mrow> <mo>(</mo> <mi>b</mi> <mo>)</mo> </mrow> <mo>]</mo> </mrow> <mo>-</mo> <mfrac> <msup> <mrow> <mo>(</mo> <mi>b</mi> <mo>-</mo> <mi>a</mi> <mo>)</mo> </mrow> <mn>5</mn> </msup> <mrow> <mn>4</mn> <mo>!</mo> <mn>5</mn> <mo>!</mo> </mrow> </mfrac> <msup> <mi>f</mi> <mrow> <mo>(</mo> <mn>4</mn> <mo>)</mo> </mrow> </msup> <mrow> <mo>(</mo> <mi>η</mi> <mo>)</mo> </mrow> <mo>,</mo> <mspace width="1em"></mspace> <mi>a</mi> <mo>≤</mo> <mi>η</mi> <mo>≤</mo> <mi>b</mi> </mrow> </math> <math display="block"> <mrow> <mrow> <mo>|</mo> <mi>x</mi> <mo>|</mo> </mrow> <mo>=</mo> <mo>{</mo> <mtable> <mtr> <mtd columnalign="right"> <mrow> <mo>-</mo> <mi>x</mi> </mrow></mtd><mtd columnalign="left">si <mspace width="thinmathspace"></mspace><mi>x</mi> <mo><</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd columnalign="right"> <mi>x</mi> </mtd><mtd columnalign="left"><mtext>de lo contrario</mtext> </mtd></mtr></mtable></mrow></math>Tambien puedes escribir construcciones matemáticas bidimensionales [2D] como las matrices. El ejemplo siguiente muestra el + <i> + paso i</i> + -th de la multiplicación de una matriz + <i> + A</i> + por un a vector + <i> + x</i> + (nota cómo <math> <msub> <mi>a</mi><mrow><mi>i</mi><mn>1</mn></mrow> </msub> <mo>,</mo> <mo>...</mo> <mo>,</mo> <msub> <mi>a</mi><mrow><mi>i</mi><mi>n</mi></mrow> </msub> <mo>,</mo> <msub><mi>x</mi><mn>1</mn></msub> </math>están en la misma línea de base, otros alineamientos son posibles): <math display="block"> <mrow> <mi>i</mi><mtext>-th row</mtext> <mrow> <mo>[</mo> <mtable align="baseline3" rowlines="none solid solid none"> <mtr> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi><mrow><mn>1</mn><mi>n</mi></mrow> </msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>i</mi><mi>n</mi></mrow> </msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> <mo>:</mo> </mtd> <mtd> </mtd> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>1</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>2</mn></mrow> </msub> </mtd> <mtd> <msub> <mi>a</mi><mrow><mi>n</mi><mn>3</mn></mrow> </msub> </mtd> <mtd> <mo>...</mo> </mtd> <mtd> <msub> <mi>a</mi> <mrow> <mi>n</mi> <mi>n</mi> </mrow> </msub> </mtd> </mtr> </mtable> <mo>]</mo> </mrow> <mrow> <mo symmetric="false">[</mo> <mtable align="baseline1"> <mtr> <mtd> <msub><mi>x</mi><mn>1</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mn>3</mn></msub> </mtd> </mtr> <mtr> <mtd> <mo>:</mo> </mtd> </mtr> <mtr> <mtd> <msub><mi>x</mi><mi>n</mi></msub> </mtd> </mtr> </mtable> <mo symmetric="false">]</mo> </mrow> </mrow> </math></p> +<p>En Mozilla, MathML corre dentro del navegador principal por lo tanto responde a otras operaciones del navegador tales como el zoom (intenta Ver -> Ampliación/Zoom de texto), y puedes hacer hiperenlaces <math href="http://en.wikipedia.org/wiki/Pythagorean_theorem"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math>, aplicar estilos con <span style="">effectos <math> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mrow> <mo>+</mo> </mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mo>=</mo> </mrow> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </span>, o usar colores <math> <mrow> <mrow> <msup mathcolor="red"> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup mathcolor="green"> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo mathbackground="yellow">=</mo> <msup mathcolor="purple"> <mi>c</mi> <mn>2</mn> </msup></mrow></math>en formas variadas.<math display="block"> <mrow mathcolor="red"> <mfrac> <mrow> <mi>p</mi><mo>(</mo><mi>x</mi><mo>)</mo> </mrow> <mrow> <mi>q</mi><mo>(</mo><mi>x</mi><mo>)</mo> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow mathcolor="blue"> <msub><mi>a</mi><mn>0</mn></msub> <mo>+</mo> <msub><mi>a</mi><mn>1</mn></msub><mi>x</mi> <mo>+</mo> <msub><mi>a</mi><mn>2</mn></msub> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub><mi>a</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msub> <msup><mi>x</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msup> </mrow> <mrow mathcolor="green"> <msub><mi>b</mi><mn>0</mn></msub> <mo>+</mo> <msub><mi>b</mi><mn>1</mn></msub><mi>x</mi> <mo>+</mo> <msub><mi>b</mi><mn>2</mn></msub> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub><mi>b</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msub> <msup><mi>x</mi><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow></msup> </mrow> </mfrac> <mo>.</mo> </mrow> </math></p> +<p>También puedes hacer otras cosas extrañas y riesgosas que no son adaptables, advierte Bongo, tales como mezclar MathML con otros <em>markups</em>.<math display="block"> <mrow><mi>Lagartija</mi> <mo>+</mo> <mi>Bongo</mi> <mo>=</mo> <mfrac> <mtext> <img alt="logo-star" height="200" src="http://www.mozilla.org/images/logo-star.gif" width="197"> </mtext> <mrow> <mo>∫</mo> <munderover> <mtext> <img alt="mozilla-16" height="16" src="http://www.mozilla.org/images/mozilla-16.png" width="16"> </mtext> <mi>a</mi> <mi>b</mi> </munderover> <mi>d</mi> <mi>x</mi> </mrow> </mfrac> <mo>+</mo> <mpadded depth="65px" voffset="-65px"> <mtext> <img alt="mathboard" height="137" src="https://developer.mozilla.org/@api/deki/files/4238/=mathboard.png" width="184"> </mtext> </mpadded> </mrow> </math></p> +<div style="display: none;"> + <h2 id="MathML_and_Javascript" name="MathML_and_Javascript">MathML and Javascript</h2> + <h3 id="HTML_Content">HTML Content</h3> + <pre class="brush: html"><p> +And you can turn to JavaScript and the DOM for dynamic operations. +</p> + +<div style="text-align:center"> +Fill the gaps in this matrix with resizable input fields. +</div> +<math class="inputmath" display="block"> +<mrow> +<mi>A</mi> +<mo>=</mo> +<mo>[</mo> +<mtable> +<mtr> +<mtd><mn>1</mn></mtd> +<mtd> +<mtext><input id="input12" value="?" size="1"/></mtext> +</mtd> +</mtr> +<mtr> +<mtd> +<mtext><input id="input21" value="?" size="1"/></mtext> +</mtd> +<mtd><mn>4</mn></mtd> +</mtr> +</mtable> +<mo>]</mo> +</mrow> +</math> +<div style="text-align:center"> +Left size: +<a class="control" href="javascript:incrementInput('input21', 1);" title="increase input">+</a> +<a class="control" href="javascript:incrementInput('input21',-1);" title="decrease input">-</a> + + &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + + Right size: +<a class="control" href="javascript:incrementInput('input12', 1);" title="increase input">+</a> +<a class="control" href="javascript:incrementInput('input12',-1);" title="decrease input">-</a> +<br/> + (click these control buttons to see their effects.) + </div> + +<p> +Each entry of the following matrix represents +<math> +<msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup> +</math> for some <i>n</i>. +When you left-click any individual entry, it should toggle between its expanded and +unexpanded forms. You can also <a href="javascript:unexpand();">unexpand all</a> or +<a href="javascript:expand();">expand all</a>. +</p> + +<div> +<math display="block"> +<mtable> +<mtr> +<mtd> +<mtable align="axis" columnalign="left left left"> +<mtr> +<mtd> +<maction id="a11" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>0</mn> +</msup> +<mn>1</mn> +</maction> +</mtd> +<mtd> +<maction id="a12" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>1</mn> +</msup> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +</maction> +</mtd> +<mtd> +<maction id="a13" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>2</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>2</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +</maction> +</mtd> +</mtr> +<mtr> +<mtd> +<maction id="a21" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>1</mn> +</msup> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +</maction> +</mtd> +<mtd> +<maction id="a22" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>2</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>2</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +</maction> +</mtd> +<mtd> +<maction id="a23" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>3</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>3</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>3</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<mrow> +<mn>3</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>3</mn> +</msup> +</mrow> +</maction> +</mtd> +</mtr> +<mtr> +<mtd> +<maction id="a31" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>2</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>2</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +</maction> +</mtd> +<mtd> +<maction id="a32" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>3</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>3</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>3</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<mrow> +<mn>3</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>3</mn> +</msup> +</mrow> +</maction> +</mtd> +<mtd> +<maction id="a33" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>4</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>4</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>4</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>3</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<mrow> +<mn>6</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +<mo>+</mo> +<mrow> +<mn>4</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>3</mn> +</msup> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>4</mn> +</msup> +</mrow> +</maction> +</mtd> +</mtr> +<mtr> +<mtd> +<maction id="a41" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>3</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>3</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>3</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<mrow> +<mn>3</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>3</mn> +</msup> +</mrow> +</maction> +</mtd> +<mtd> +<maction id="a42" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>4</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>4</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>4</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>3</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<mrow> +<mn>6</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +<mo>+</mo> +<mrow> +<mn>4</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>3</mn> +</msup> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>4</mn> +</msup> +</mrow> +</maction> +</mtd> +<mtd> +<maction id="a43" actiontype="toggle" selection="2"> +<msup> +<mrow> +<mo>(</mo> +<mrow> +<mi>x</mi> +<mo>+</mo> +<mi>y</mi> +</mrow> +<mo>)</mo> +</mrow> +<mn>5</mn> +</msup> +<mrow> +<msup> +<mi>x</mi> +<mn>5</mn> +</msup> +<mo>+</mo> +<mrow> +<mn>5</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>4</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<mi>y</mi> +</mrow> +<mo>+</mo> +<mrow> +<mn>10</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>3</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>2</mn> +</msup> +</mrow> +<mo>+</mo> +<mrow> +<mn>10</mn> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>x</mi> +<mn>2</mn> +</msup> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>3</mn> +</msup> +</mrow> +<mo>+</mo> +<mrow> +<mn>5</mn> +<mo>&InvisibleTimes;</mo> +<mi>x</mi> +<mo>&InvisibleTimes;</mo> +<msup> +<mi>y</mi> +<mn>4</mn> +</msup> +</mrow> +<mo>+</mo> +<msup> +<mi>y</mi> +<mn>5</mn> +</msup> +</mrow> +</maction> +</mtd> +</mtr> +</mtable> +</mtd> +</mtr> +</mtable> +</math> +</div> + +</pre> + <h3 id="CSS_Content">CSS Content</h3> + <pre class="brush: css">.control { +text-decoration: none; +font-weight: bold; +font-size: 200%; +} +input { +color: red; +} +[class="inputmath"] { +border: 1px dotted; +} +</pre> + <h3 id="JavaScript_Content">JavaScript Content</h3> + <pre class="brush: js">function setSelection(id,value) { +document.getElementById(id).setAttribute("selection",value); +} +function expand() +{ + setSelection("a11","2"); setSelection("a12","2"); setSelection("a13","2"); + setSelection("a21","2"); setSelection("a22","2"); setSelection("a23","2"); + setSelection("a31","2"); setSelection("a32","2"); setSelection("a33","2"); + setSelection("a41","2"); setSelection("a42","2"); setSelection("a43","2"); +} +function unexpand() +{ + setSelection("a11","1"); setSelection("a12","1"); setSelection("a13","1"); + setSelection("a21","1"); setSelection("a22","1"); setSelection("a23","1"); + setSelection("a31","1"); setSelection("a32","1"); setSelection("a33","1"); + setSelection("a41","1"); setSelection("a42","1"); setSelection("a43","1"); +} + +function incrementInput(inputID, increment) +{ + var inputElement = document.getElementById(inputID); + var size = parseInt(inputElement.size) + increment; + if (size <= 0) + size = 1 + inputElement.size = size; +}</pre> +</div> +<p>{{ EmbedLiveSample('MathML_and_Javascript', '100%', '400px') }}</p> +<p>Y podría haber más cosas...</p> +<div style="display: none;"> + <h2 id="MathML_Button" name="MathML_Button">MathML Button</h2> + <h3 id="HTML_Content_2">HTML Content</h3> + <pre class="brush: html"><div style="text-align: center"> + <button style="white-space: normal;"> + <span style="color: brown;"> + + For example, <b>click</b> this MathML continued fraction<br/> + inside this HTML button<br /> + </span> +<math> +<mrow> +<mfrac> +<mi>&pi;</mi> +<mn>4</mn> +</mfrac> +<mo>=</mo> +<mfrac numalign="left"> +<mstyle scriptlevel="0"> +<mn>1</mn> +</mstyle> +<mstyle scriptlevel="0"> +<mrow> +<mn>2</mn> +<mo>+</mo> +<mfrac numalign="left"> +<mstyle scriptlevel="0"> +<msup><mn>1</mn><mn>2</mn></msup> +</mstyle> +<mstyle scriptlevel="0"> +<mrow> +<mn>2</mn> +<mo>+</mo> +<mfrac numalign="left"> +<mstyle scriptlevel="0"> +<msup><mn>3</mn><mn>2</mn></msup> +</mstyle> +<mstyle scriptlevel="0"> +<mrow> +<mn>2</mn> +<mo>+</mo> +<mfrac numalign="left"> +<mstyle scriptlevel="0"> +<msup><mn>5</mn><mn>2</mn></msup> +</mstyle> +<mstyle scriptlevel="0"> +<mrow> +<mn>2</mn> +<mo>+</mo> +<mfrac numalign="left"> +<mstyle scriptlevel="0"> +<msup><mn>7</mn><mn>2</mn></msup> +</mstyle> +<mstyle scriptlevel="0"> +<mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo> +</mstyle> +</mfrac> +</mrow> +</mstyle> +</mfrac> +</mrow> +</mstyle> +</mfrac> +</mrow> +</mstyle> +</mfrac> +</mrow> +</mstyle> +</mfrac> +</mrow> +</math> + </button> +</div><span style="display: none;"> +</span></pre> +</div> +<p>{{ EmbedLiveSample('MathML_Button', '100%', '300px') }}</p> +<p>Para más información sobre MathML en Mozilla, mira la <a href="http://www.mozilla.org/projects/mathml/">página del Proyecto MathML</a>. Hay enlaces a más ejemplos, <a href="http://www.mozilla.org/projects/mathml/screenshots/">capturas de pantalla</a> e instrucciones sobre cómo <a href="http://www.mozilla.org/projects/mathml/fonts/">descargar fuentes tipográficas</a> para varias plataformas. Dichas fuentes son requeridas para visualizar otros ejemplos además de las construcciones básicas mostradas aquí.</p> +<div style="display: none;"> + <h2 id="MathML_Background_Image" name="MathML_Background_Image">MathML Background Image</h2> + <h3 id="HTML_Content_3">HTML Content</h3> + <pre class="brush: html"><div class="background"></div> +<math display="block"> +<mrow> +<msub> +<mi>Z</mi> +<mi>&alpha;</mi> +</msub> +<mrow> +<mo>(</mo> +<mi>f</mi> +<mo>)</mo> +</mrow> +<mo>=</mo> + +<mfrac> +<mn>1</mn> +<mrow> +<mn>2</mn> +<mi>i</mi> +<mo>&ThinSpace;</mo> +<mi>cos</mi> +<mo>(</mo> +<mfrac> +<mrow> +<mi>&alpha;</mi> +<mi>&pi;</mi> +</mrow> +<mn>2</mn> +</mfrac> +<mo>)</mo> +</mrow> +</mfrac> + +<mrow> +<msub> +<mo>&int;</mo> +<mi>C</mi> +</msub> +<mfrac> +<mrow> +<mi>f</mi> +<mo stretchy='false'>(</mo> +<mi>i</mi> +<mi>z</mi> +<mo stretchy='false'>)</mo> +<msup> +<mrow> +<mo>(</mo> +<mo>-</mo> +<mi>z</mi> +<mo>)</mo> +</mrow> +<mi>&alpha;</mi> +</msup> +</mrow> +<mrow> +<msup> +<mi>e</mi> +<mrow> +<mn>2</mn> +<mi>&pi;</mi> +<mi>z</mi> +</mrow> +</msup> +<mo>-</mo> +<mn>1</mn> +</mrow> +</mfrac> +</mrow> +<mi>d</mi> +<mi>z</mi> +</mrow> +</math></pre> + <h3 id="CSS_Content_2">CSS Content</h3> + <pre class="brush: css">[class="background"] { + background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); + opacity: 0.2; + position: absolute; + left: 0; + width: 100%; + height: 58px; +} +</pre> +</div> +<p>{{ EmbedLiveSample('MathML_Background_Image', '100%', '300px') }}</p> diff --git a/files/es/mozilla/mathml_project/extras/index.html b/files/es/mozilla/mathml_project/extras/index.html new file mode 100644 index 0000000000..39f1f13d7f --- /dev/null +++ b/files/es/mozilla/mathml_project/extras/index.html @@ -0,0 +1,307 @@ +--- +title: Extras +slug: Mozilla/MathML_Project/Extras +tags: + - MathML +translation_of: Mozilla/MathML_Project/Extras +--- +<h2 id="MathML_Extras">MathML Extras</h2> +<p>Esta es una demostración técnica de algunos extras de Mozilla que aun no han sido definidos en la especificación MathML, pero que no se impide su uso por parte de otra especificación. No son portables , solo fueron creados para mostrar algunas características interesantes de usar código nativo desde el entorno del navegador. Se espera que otros renderizadores ignoren los atributos que no pueden comprender mientras estos extras permanezcan indefinidos.</p> +<h2 id="MathML_Tooltip" name="MathML_Tooltip">El atributo + <i> + title</i> + como una descripción emergente (<a href="http://www.w3.org/TR/html4/struct/global.html#adef-title">desde XHTML</a>)</h2> +<div style="display: none;"> + <h3 id="HTML_Content">HTML Content</h3> + <pre class="brush: html"><p>Mouse over either log to see a tooltip showing the title + +<math display="block"> +<mrow> +<mrow> +<msub title="Base-a log"> +<mi>log</mi> +<mi>a</mi> +</msub> +<mo>&ApplyFunction;</mo> +<mi>x</mi> +</mrow> +<mo>=</mo> +<mfrac> +<mrow> +<mi title="Natural log">ln</mi> +<mo>&ApplyFunction;</mo> +<mi>x</mi> +</mrow> +<mrow> +<mi title="Natural log">ln</mi> +<mo>&ApplyFunction;</mo> +<mi>a</mi> +</mrow> +</mfrac> +</mrow> +</math> + +Rather than repeating the instructions, +some CSS might be used to provide a visual cue. For example +with the style rule: <code style="white-space: nowrap;">*[title] { color: blue; }</code> + +<math class="cue" display="block"> +<mrow> +<mrow> +<msub title="Base-a log"> +<mi>log</mi> +<mi>a</mi> +</msub> +<mo>&ApplyFunction;</mo> +<mi>x</mi> +</mrow> +<mo>=</mo> +<mfrac> +<mrow> +<mi title="Natural log">ln</mi> +<mo>&ApplyFunction;</mo> +<mi>x</mi> +</mrow> +<mrow> +<mi title="Natural log">ln</mi> +<mo>&ApplyFunction;</mo> +<mi>a</mi> +</mrow> +</mfrac> +</mrow> +</math> +</p> + +</pre> + <h3 id="CSS_Content">CSS Content</h3> + <pre class="brush: css">math.cue *[title] { color: blue; }</pre> +</div> +<p>{{ EmbedLiveSample('MathML_Tooltip', '100%', '250px') }}</p> +<h2 id="Mixing_with_other_markups" name="Mixing_with_other_markups">Mezclando con otras marcas</h2> +<div style="display: none;"> + <h3 id="HTML_Content_2">HTML Content</h3> + <pre class="brush: html"><math display="block"> +<mrow> +<mi>A</mi> +<mo>=</mo> +<mo>[</mo> +<mtable> +<mtr> +<mtd><mn>1</mn></mtd> +<mtd> +<mtext> +<img width="16" height="16" +src="http://www.mozilla.org/images/mozilla-16.png" +alt="mozilla-16" /> +</mtext> +</mtd> +</mtr> +<mtr> +<mtd> +<mtext><input value="type" size="4"/></mtext> +</mtd> +<mtd><mn>4</mn></mtd> +</mtr> +</mtable> +<mo>]</mo> +</mrow> +</math> + +<math display="block"> +<msqrt> +<mpadded width="30px" height="15px" depth="15px" voffset="-15px"> +<mtext> +<svg width="30px" height="30px"> +<defs> +<radialGradient id="radGrad1" cx="50%" cy="50%" r="50%" + fx="50%" fy="50%"> +<stop offset="0%" + style="stop-color:rgb(255,255,255); stop-opacity:1;"/> +<stop offset="100%" + style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> +</radialGradient> +</defs> +<g transform="translate(15,15)"> +<g> +<animateTransform attributeName="transform" + attributeType="XML" type="rotate" + from="360" to="0" + dur="15s" repeatCount="indefinite"/> +<g transform="translate(-15, -15)"> +<path fill="url(#radGrad1)" + d="M 15 0 L 20 10 L 30 15 L 20 20 L 15 30 + L 10 20 L 0 15 L 10 10"/> +</g> +</g> +</g> +</svg> +</mtext> +</mpadded> +</msqrt> +<mo>=</mo> +<msubsup> +<mo>∫</mo> +<mn>0</mn> +<mfrac> +<mi>π</mi> +<mn>2</mn> +</mfrac> +</msubsup> +<msup> +<mi>θ</mi> +<mtext> +<svg width="15px" height="15px"> +<defs> +<radialGradient id="radGrad2" cx="50%" cy="50%" r="50%" + fx="50%" fy="50%"> +<stop offset="0%" + style="stop-color:rgb(255,255,255); stop-opacity:1;"/> +<stop offset="100%" + style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> +</radialGradient> +</defs> +<g> +<animateMotion path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z" + begin="0s" dur="0.5s" repeatCount="indefinite"/> +<circle fill="url(#radGrad2)" r="5px" cx="5px" cy="5px"/> +</g> +</svg> +</mtext> +</msup> +<mrow> +<mo>ⅆ</mo> +<mi>θ</mi> +</mrow> +</math> + +<div style="width: 300px; margin-left: auto; margin-right: auto;"> +<svg width="300px" height="250px"> +<defs> +<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> +<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> +<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> +</linearGradient> + +<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> +<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> +<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> +</linearGradient> + +<radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> +<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> +<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> +</radialGradient> +</defs> + +<rect width="300" height="250" fill="url(#grad1)"/> + +<g transform="translate(150,125)"> +<g> +<animateTransform attributeName="transform" + attributeType="XML" type="rotate" from="0" to="360" + dur="6s" repeatCount="indefinite"/> + +<g transform="translate(-50,-35)"> +<rect width="100" height="70" fill="url(#grad2)"/> +<switch> +<foreignObject width="100" height="70" + requiredExtensions="http://www.w3.org/1998/Math/MathML"> +<math display="block"> +<mrow> +<mo>(</mo> +<mtable> +<mtr> +<mtd><mi>cos</mi><mi>θ</mi></mtd> +<mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd> +</mtr> +<mtr> +<mtd><mi>sin</mi><mi>θ</mi></mtd> +<mtd><mi>cos</mi><mi>θ</mi></mtd> +</mtr> +</mtable> +<mo>)</mo> +</mrow> +</math> +</foreignObject> +<text>rotation matrix</text> +</switch> +</g></g></g> +<g> +<animateMotion path="M 32,69 C 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" + begin="0s" dur="20s" repeatCount="indefinite"/> +<animateTransform attributeName="transform" + attributeType="XML" type="scale" + values="1;2;.5;1" keyTimes="0;.25;.75;1" dur="20s" + repeatCount="indefinite"/> +<circle fill="url(#grad3)" r="30"/> +<g transform="translate(-30,-30)"> +<switch> +<foreignObject width="60" height="60" +requiredExtensions="http://www.w3.org/1998/Math/MathML"> +<math display="block"> +<mrow> +<munderover> +<mo>∑</mo> +<mrow> +<mi>n</mi> +<mo>=</mo> +<mn>0</mn> +</mrow> +<mrow> +<mo>+</mo> +<mi>∞</mi> +</mrow> +</munderover> +<mfrac> +<msup> +<mi>α</mi> +<mi>n</mi> +</msup> +<mrow> +<mi>n</mi> +<mo>!</mo> +</mrow> +</mfrac> +</mrow> +</math> +</foreignObject> +<text>exp(α)</text> +</switch> +</g> +</g> +</svg> +</div> + +</pre> +</div> +<p>{{ EmbedLiveSample('Mixing_with_other_markups', '100%', '500px') }}</p> +<p> </p> +<h2 id="Inline_JavaScript" name="Inline_JavaScript">JavaScript Incorporado</h2> +<div style="display: none;"> + <h3 id="HTML_Content_3">HTML Content</h3> + <pre class="brush: html"><math display="block"> +<mfrac> +<mtext id="num">Mouse</mtext> +<mtext id="denum">Over</mtext> +</mfrac> +</math></pre> + <h3 id="JavaScript_Content">JavaScript Content</h3> + <pre class="brush: js">function whoIsThereAlert(evt) +{ + alert("Who is there?"); +} +function attachListener(id) +{ + document.getElementById(id).addEventListener("mouseover", whoIsThereAlert); +} +function init() +{ + attachListener("num"); + attachListener("denum"); +} + +window.addEventListener("load", init); +</pre> +</div> +<p>{{ EmbedLiveSample('Inline_JavaScript', '100%', '200px') }}</p> +<p> </p> diff --git a/files/es/mozilla/mathml_project/fonts/index.html b/files/es/mozilla/mathml_project/fonts/index.html new file mode 100644 index 0000000000..c1fb8a094e --- /dev/null +++ b/files/es/mozilla/mathml_project/fonts/index.html @@ -0,0 +1,60 @@ +--- +title: Fuentes para el motor Mozilla MathML +slug: Mozilla/MathML_Project/Fonts +translation_of: Mozilla/MathML_Project/Fonts +--- +<div class="note">Nota: Estas instrucciones son para Gecko 2.0 (Firefox 4) y posteriores. Para versiones anteriores ver<a href="/en/Mozilla_MathML_Project/FontsMozilla1.8" title="en/Mozilla MathML Project/FontsMozilla1.8"> Fonts for Mozilla 1.8</a>, <a href="/en/Mozilla_MathML_Project/Fonts_for_Mozilla_1.9's_MathML_engine" title="en/Mozilla_MathML_Project/FontsMozilla1.9">Fonts for Mozilla 1.9</a> o <a href="https://developer.mozilla.org/en/Mozilla/MathML_Project/FontsMozilla2.0" title="en/Mozilla MathML Project/FontsMozilla1.8">Fonts for Mozilla 2.0</a></div> + +<h2 id="Instrucciones_rápidas">Instrucciones rápidas</h2> + +<ul> + <li>Prueba esta <a href="https://developer.mozilla.org/en-US/docs/Mozilla_MathML_Project/Fonts/Test" title="http://www.maths-informatique-jeux.com/font-testing.html">página de prueba</a> para determinar rápidamente si necesitas o no instalar fuentes adicionales. También es posible que quieras probar el <a class="external" href="https://developer.mozilla.org/en-US/docs/Mozilla_MathML_Project/MathML_Torture_Test" title="http://www.mozilla.org/projects/mathml/demo/texvsmml.html">Mozilla MathML </a> para probar tu instalación con casos reales.</li> + <li>En windows: usar este <a href="https://developer.mozilla.org/@api/deki/files/6388/=MathML-fonts.msi" title="https://developer.mozilla.org/@api/deki/files/6388/=MathML-fonts.msi">instalador de fuentes de MathML</a>.</li> + <li>En Mac OS X Lion (10.7) y superiores, las funetes STIX fonts ya están instaladas, así que no necesitas hacer nada. También hay una fuente experimental en {{ Bug("770005") }}.</li> + <li>En la mayoría de distribuciones Linux, puedes instalar fuentes STIX y Asana fonts desde tu gestor de paquetes. Las fuentes MathJax también están disponibles en Debian testing y distribuciones derivadas como Ubuntu o Mint.</li> + <li>En Android, Gecko 15.0 {{ geckoRelease("15.0") }} o superior:instala el <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">complemento MathML-fonts</a>.</li> + <li>En otros casos, instala las fuentes contenidas en este <a href="/@api/deki/files/6182/=MathML-fonts.zip" title="MathML-fonts.zip">archivo zip</a>.</li> + <li>Si aun así no es posible y estás usando Gecko 15.0 {{ geckoRelease("15.0") }} o superior, considera instalar el <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">complemento de fuentes MathML-fonts</a>.</li> +</ul> + +<h2 id="Resumen">Resumen</h2> + +<p>Las fórmulas matemáticas hacen uso de numerosos símbolos representados por caracteres Unicode específicos. Mozilla puede mostrar cualquiera de estos símbolos si están instaladas las fuentes Unicode adecuadas. Además, de acuerdo con las <a class="external" href="http://www.w3.org/TR/REC-CSS2/fonts.html">recomendaciones de la W3C sobre funetes en CSS2 </a>, los autores pueden especificar una lista concreta de fuentes que prefieren (utilizando la propiedad <em>font-family</em> de CSS), con la seguridad de que el motor de fuentes de Mozilla's buscará una fuente alternativa cuando las especificadas no se encuentren en el sistema de un usario en particular. Si en último caso no se encontrase un fuente adecuada para un caracter en particular, Mozilla mostrará en su lugar una caja con la representación hexadecimal del código Unicode que apunta al caracter.</p> + +<p>Algunos operadores matemáticos se dibujan también usando glifos para variantes más largas del caracter ( e.j. el símbolo de la suma ) o montanto glifos para algunas partes del carcater ( e.j. llaves ). En general estas variantes o partes de glifos no tienen asignación Unicode y se necesita soporte soporte específico de la fuente para esos caracteres. Mozilla tiene soporte general para los delimitadores y flechas comunes que tienen las asignaciones Unicode necesarias. Para otros caracteres, Mozilla tiene soporte específico de fuentes. En general, si los glifos necesarios no están disponibles en el sistema, Mozilla intenta estirar los símbolos usando transformaciones de escalado, pero el resuntado del renderizado puede no resultar menos satisfactorio.</p> + +<p>Para ver MathML como se pretende, necesitas tener apoyo de fuentes suficiente, lo que puede significar tener que instalar algunas fuentes. En ese caso, verás el renderizado correcto si usas Geko 15.0 {{ geckoRelease("15.0") }}o superior.</p> + +<h2 id="Fuentes_principales">Fuentes principales</h2> + +<p>El <a class="external" href="http://www.stixfonts.org/">STIX Fonts Project</a> ha desarrollado un conjunto de fuentes comprensible que cubre todos los símbolos en MathML y también contiene glifos para estirar los operadores matemáticos. Están disponibles bajo licencia <a class="external" href="http://scripts.sil.org/OFL" rel="external" title="http://scripts.sil.org/OFL">SIL Open Font License</a> y se deberían instalar para un mejor renderizado de MathML. Ten en cuenta que actualmente, solo las fuente en <code>/Fonts/STIX-General/ </code>se utilizan para estirar operadores matemáticos con fuentes STIX. <a class="external" href="http://www.ctan.org/tex-archive/fonts/Asana-Math/" rel="external" title="http://www.ctan.org/tex-archive/fonts/Asana-Math/">Asana Math</a> también está disponible de manera gratuita bajo licencia <a class="external" href="http://scripts.sil.org/OFL" rel="external" title="http://scripts.sil.org/OFL">SIL Open Font License</a> y tiene buen soporte para caracteres matemáticos. Empezando en Geko 7.0 {{ geckoRelease("7.0") }}, Mozilla también puede usar glifos contenidos en esa fuente para operadores alargados. Desde Gecko 13.0 {{ geckoRelease("13.0") }}, <a class="external" href="http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/" title="http://cdn.mathjax.org/mathjax/latest/fonts/HTML-CSS/TeX/otf/">MathJax fonts</a> se utiliza como fuente por defecto para textos matemáticos y estirado de símbolos. Estas fuentes están disponibles gratuitamente bajo licencia <a class="external" href="http://cdn.mathjax.org/mathjax/latest/LICENSE" title="http://cdn.mathjax.org/mathjax/latest/LICENSE">Apache License</a>. Se asemejan al renderizado de LaTeX y deberían resultarle más familiares a los científicos. Las funetes MathJax también mejoran el soporte para el atributo <a href="/en/MathML/Element/mi#attr-mathvariant" title="https://developer.mozilla.org/en/MathML/Element/mi#attr-mathvariant">mathvariant</a> ( ej. <span id="result_box" lang="es"><span class="hps">para escribir</span> <span class="hps">el doble</span> <span class="hps">tachado</span><span>, el guión y</span> <span class="hps">el texto</span> <span class="hps">fraktur ).</span></span></p> + +<p>Todas las fuentes arriba mencionadas pueden estar ya instaladas por defecto en tu sistema o pueden ser instaladas fácilmente vía gestor de software. Por conveniencia, proporcionamos un <a href="https://developer.mozilla.org/@api/deki/files/6182/=MathML-fonts.zip" title="MathML-fonts.zip">archivo zip con la funtens de MathML.</a> Las fuentes pueden ser instaladas extrayendo los archivos ( que tienen la extensión <code>.otf</code> ) del archivo zip y siguiendo después las in<a class="external" href="http://www.microsoft.com/typography/ttfinst/ttfinst.htm"> instrucciones para Microsoft Windows</a> o copiando los archivos a <code>~/Library/Fonts</code> folder en Mac OS X, o a al directorio <code>~/.fonts/</code> (que puede no estar creado) en sistemas Unix/Linux. De manera alternativa, siga las instrucciones de <a class="external" href="http://www.dafont.com/faq.php">dafont's "How to install a font"</a>. Estas fuentes son OpenType PostScript, que son soportadas por la mayoría de sistemas operativos modernos. Sin embargo, algunos sistemas operativos puede que no las soporten. En esos sistemas, será necesario convertir esas fuentes a un formato que esté soportado. Por ejemplo Asana Math está disponible en <a class="external" href="http://mirrors.ctan.org/fonts/Asana-Math/Asana-Math.ttf" title="http://mirrors.ctan.org/fonts/Asana-Math/Asana-Math.ttf">formato TrueType</a> y hay una <a class="external" href="http://olegueret.googlepages.com/stixfonts-ttf">conversión no oficial TrueType</a> para fuentes STIX.</p> + +<h2 id="Otras_fuentes">Otras fuentes</h2> + +<p>Las siguientes fuentes no son necesarias si las fuentes de arriba están instaladas, pero cabe señalarlas por su soporte para Unicode para muchos caracteres matemáticos.</p> + +<p> </p> + +<p><a class="external" href="http://dejavu.sourceforge.net/">DejaVu Serif y DejaVu Sans</a> están <a class="external" href="http://dejavu.sourceforge.net/wiki/index.php/License">disponibles gratuitamente</a> e instalafas con muchas distribuciones Linux. Contienen soporte para muchos caracteres matemáticos y Mozilla mostrará MathML de manera razonable en sistemas con estas fuentes instaladas, incluso sin fuentes STIX. La copia de la fuente, contiene glifos para operadores elásticos con asignación Unicode.</p> + +<p>Cambira Math está preinstalada en Microsoft Windows Vista, y también viene con Microsoft Office 2007 o <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=048dc840-14e1-467d-8dca-19d2a8fd7485">Microsoft PowerPoint Viewer 2007</a>. La fuente tuene buen soporte para caracteres matemáticos y por tanto, con cualquiera de estos productos instalados, Mozilla será capaz de mostrar MathML razonablemente incluso sin fuentes STIX. La fuente contiene los glifos necesarios para operadores elásticos, pero Mozilla <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=372351">aun no</a> hace uso de todos ellos. La licencia permite que "uses esta según lo permitido por la EULA para el producto en el cual la fuente se incluye para mostrar e imprimir contenido", así que conviene una consulta legal si estás considerando instalarla en sistemas sin los productos asociados.</p> + +<h2 id="Futuro_trabajo_(¡Ayuda_por_favor!)">Futuro trabajo (¡Ayuda, por favor!)</h2> + +<p>Algunas fuentes OpenType incluyen una tabla MATH como un a extensión OpenType permitiría glifos para operadores flexibles en una manera "no tan específica para fuentes", pero Mozilla <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=407059">aun no</a> hace uso de esto. Esto incluye <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=372351" title="/en-US/docs/">Cambria Math</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=622576" title="/en-US/docs/">Neo Euler</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=693968" title="/en-US/docs/">STIX 1.1</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=736032" title="/en-US/docs/">LM Math</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=737788" title="/en-US/docs/">Lucida fonts</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=407439" title="/en-US/docs/">Asana Math</a> y probablemente más.<br> + Un instalador experimental para Mac OS X está disponible en {{ Bug("770005") }}.</p> + +<p>Implementar una UI para descargar automáticamente las fuentes. Están disponibles algunos parches en {{ Bug("295193") }}.</p> + +<p>Para distribuciones Linux, uno puede usar el PackageKit DBUS API ({{ Bug("467729") }}).<br> + Para plataformas móviles, ver {{ Bug("648548") }} y para Firefox OS {{ Bug("775060") }}</p> + +<p>Otros bugs relacionados: <s><a href="http://bugs.debian.org/cgi-bin/bugreport.cgi?bug=697277" title="/en-US/docs/">suggest MathJax/Asana on Debian</a>,</s> <a href="https://code.google.com/p/android/issues/detail?id=36011" title="/en-US/docs/">Math fonts on Android</a>.</p> + +<h2 id="Reajustar_viejas_preferencias">Reajustar viejas preferencias</h2> + +<p>Si los usuarios han cambiado previamente la preferencia "font.mathfont-family" en una versión previa de Mozilla, entonces es mejor resetearlo al valor por defecto. Para hacerlos, escribe la url "about:config", "Filter" para "mathfont", and "Reset" al valor por defecto a través del menú contextual en preferencias.</p> + +<div id="cke_pastebin" style="position: absolute; top: 56.8667px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div> diff --git a/files/es/mozilla/mathml_project/index.html b/files/es/mozilla/mathml_project/index.html new file mode 100644 index 0000000000..21b436807f --- /dev/null +++ b/files/es/mozilla/mathml_project/index.html @@ -0,0 +1,91 @@ +--- +title: Proyecto Mozilla MathML +slug: Mozilla/MathML_Project +tags: + - MathML + - MathML Project + - NeedsTranslation + - TopicStub +translation_of: Mozilla/MathML_Project +--- +<p>El proyecto Mozilla MathML es un proyecto de Mozilla para crear y mejorar el soporte de <a href="/es/docs/Web/MathML" title="/es/docs/Web/MathML">MathML</a> en Firefox y otras aplicaciones de Mozilla.</p> + +<h2 id="Actualizaciones">Actualizaciones</h2> + +<p><img alt="mathboard.png" class="default internal" src="/@api/deki/files/4238/=mathboard.png" style="float: right;"></p> + +<ul> + <li><a href="/docs/Mozilla/MathML_Project/Status" title="Mozilla MathML Project/Status">Estado de cada etiqueta</a></li> + <li><a href="/docs/Mozilla/MathML_Project/MathML3Testsuite" title="Mozilla MathML Project/MathML3Testsuite">Resultado de la MathML 3 Testsuite</a></li> + <li><a class="external" href="https://www.wg9s.com/mozilla/firefox/">Nightly builds no oficiales con parches de MathML aplicados</a> (mantenido por Bill Gianopoulos)</li> + <li><a href="/docs/Mozilla/MathML_Project/Student_Projects" title="Mozilla_MathML_Project/Student_Projects">Proyectos de estudiantes</a></li> + <li><a href="/docs/Mozilla/MathML_Project/Updates" title="Mozilla_MathML_Project/Updates">Todas las actualizaciones...</a></li> +</ul> + +<h3 id="3_de_Mayo_de_2013">3 de Mayo de 2013</h3> + +<p><a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2013/05/03/Firefox-Nightly-passes-the-Acid2-test">Firefox Nightly pasa el test MathML Acid2 </a>; <a href="http://news.slashdot.org/story/13/05/04/0015241/firefox-is-the-first-browser-to-pass-the-mathml-acid2-test" title="http://news.slashdot.org/story/13/05/04/0015241/firefox-is-the-first-browser-to-pass-the-mathml-acid2-test">Artículo en Slashdot </a>; <a href="http://www.ghacks.net/2013/05/04/firefox-first-browser-to-pass-mathml-acid-test-how-about-your-browser/" title="http://www.ghacks.net/2013/05/04/firefox-first-browser-to-pass-mathml-acid-test-how-about-your-browser/">Artículo en ghacks</a> .</p> + +<h3 id="10_de_Enero_de_2013">10 de Enero de 2013</h3> + +<p>Chrome 24 ha sido lanzado con soporte básico para MathML.</p> + +<p><ins>actualización: MathML deshabilitado de nuevo en Chrome 25 :-(</ins></p> + +<h3 id="1_de_Diciembre_de_2012">1 de Diciembre de 2012</h3> + +<p>¡Todas las páginas de Mozilla MathML Project han sido <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=585142#c2" title="https://bugzilla.mozilla.org/show_bug.cgi?id=585142#c2">migradas a MDN</a>!</p> + +<h3 id="26_de_Noviembre_de_2012">26 de Noviembre de 2012</h3> + +<p><a href="http://toc.oreilly.com/2012/11/math-typesetting.html" title="http://toc.oreilly.com/2012/11/math-typesetting.html">Math typesetting - ¿Por qué estamos dejando un asunto tan importante en manos de voluntarios con escasos recursos y pequeñas organizaciones?</a></p> + +<h2 id="Comunidad">Comunidad</h2> + +<ul> + <li>Ver en los foros de Mozilla... {{DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml")}}</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">canal IRC</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki utilizada por contribuyentes</a> - echa un vistazo a los últimos desarrollos y ayúdanos a mejorar MathML en Mozilla.</li> +</ul> + +<h2 id="Enlaces">Enlaces</h2> + +<ul> + <li>Instalación de <a href="/docs/Mozilla/MathML_Project/Fonts" title="Mozilla MathML Project/Fonts">fuentes para el motor Mozilla's MathML</a></li> + <li><a class="external" href="http://www.w3.org/TR/MathML3/">MathML Versión 3.0</a> - W3C Recommendación, 21 de Octubre de 2010</li> + <li><a class="external" href="http://www.w3.org/Math/testsuite/"><abbr>W3C</abbr> <abbr>MathML</abbr> Test Suite</a> - <span id="result_box" lang="es"><span class="hps">Diseñado</span> <span class="hps">para comprobar la aplicación</span> <span class="hps">de cada</span> <span class="hps">elemento de</span> <span class="hps">un atributo</span></span> (o rendimiento de cada comportamiento integrado) cada vez, de manera bastante exhaustiva.</li> + <li><a href="/docs/Web/MathML" title="MathML">MathML en Mozilla Developer Network</a></li> +</ul> + +<h3 id="Documentos_de_MathML">Documentos de <abbr>MathML</abbr></h3> + +<ul> + <li><a href="/es/docs/Mozilla/MathML_Project/Screenshots" title="Mozilla MathML Project/Screenshots">Capturas de pantalla</a></li> + <li><a href="/es/docs/Mozilla/MathML_Project/Start" title="Mozilla_MathML_Project/Start"><abbr>MathML</abbr> Paǵina de Inicio </a>- con traducciones a diferentes idiomas ( <a href="/ar/docs/Mozilla_MathML_Project/Start" title="/ar/Mozilla_MathML_Project/Start">Árabe</a>, <a href="/zh-CN/docs/Mozilla_MathML_Project/Start" title="/zh-CN/Mozilla_MathML_Project/Start">Chino</a>, <a href="/he/docs/Mozilla_MathML_Project/Start" title="/he/Mozilla_MathML_Project/Start">Hebreo</a>, <a href="/th/docs/Mozilla_MathML_Project/Start" title="/th/Mozilla_MathML_Project/Start">Tailandés</a>)</li> + <li><a class="external" href="/es/docs/Mozilla/MathML_Project/Basics">MathML básico</a> - Documento confeccionado para mostrarse correctamente solo con la fuente Symbol que está preinstalada por defecto en la mayoría de sistemas operativos.</li> + <li><a class="external" href="/docs/Mozilla/MathML_Project/MathML_Torture_Test">Test de tortura de MathML</a> - Test comparativo de renderizado de MathML contra TeX.</li> + <li>Demo de algunas etiquetas MathML: <a class="external" href="/docs/Mozilla/MathML_Project/mfrac">mfrac</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mo">mo</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mtable">mtable</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mspace">mspace</a>, <a class="external" href="/docs/Mozilla/MathML_Project/mmultiscripts">mmultiscripts</a>, <a class="external" href="/docs/Mozilla/MathML_Project/roots">msqrt-mroot</a>.</li> + <li><a class="external" href="/es/docs/Mozilla/MathML_Project/Extras">MathML Extras</a> - Demostración tecnológica de algunos interesantes resultados de construir de forma nativa en el navegador.</li> + <li><a href="/es/docs/Mozilla/MathML_Project/Various" title="Mozilla_MathML_Project/Various">Varios Test de MathML</a> - Estas páginas se importaron de <code>layout/mathml/tests/</code>.</li> + <li><a class="external" href="https://golem.ph.utexas.edu/~distler/blog/archives/000104.html">Blog</a> con comentarios que incluyen MathML.</li> +</ul> + +<h3 id="Crear_documentos_MathML">Crear documentos <abbr>MathML</abbr></h3> + +<ul> + <li><a href="/docs/Web/MathML/Authoring" title="Mozilla MathML Project/Authoring">Autoría de MathML</a></li> + <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_editors.html">Editores</a></li> + <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_converters.html">Conversores</a></li> + <li><a class="external" href="https://www.w3.org/Math/Software/mathml_software_cat_stylesheets.html">Hojas de estilo</a></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Información del documento original</h2> + +<ul> + <li>Autor(es): Roger B. Sidje</li> + <li>Otros contribuyentes: Frédéric Wang</li> + <li>Fecha de última actualización: 4 de Abril de 2010</li> + <li>Información de Copyright: Portions of this content are © 1999–2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> +</ul> +</div> diff --git a/files/es/mozilla/mathml_project/mathml3testsuite/index.html b/files/es/mozilla/mathml_project/mathml3testsuite/index.html new file mode 100644 index 0000000000..fd25091d3b --- /dev/null +++ b/files/es/mozilla/mathml_project/mathml3testsuite/index.html @@ -0,0 +1,64 @@ +--- +title: MathML3 Testsuite +slug: Mozilla/MathML_Project/MathML3Testsuite +tags: + - MathML + - MathML Testsuite +translation_of: Mozilla/MathML_Project/MathML3Testsuite +--- +<p>Las siguientes páginas contienen los resultados obtenidos al realizar el <a class="external" href="http://www.w3.org/Math/testsuite/build/main/overview.html">MathML 3 full testsuite</a> para la presentación de MathML. Las secciones están marcadas con <span style="background-color: #90ee90;">paso</span>, <span style="background-color: #fa8072;">fallo</span>, <span style="border: solid 1px #000000;">no-probado</span> o <span style="background-color: #ffd700;">probado-en-parte</span>, mostrando así el estado de las construcciones con la correspondiente fuente instalada. Cuando el marcador es intencionalmente erróneo, el comportamiento correcto no esta definido por la recomendación y por lo tanto la prueba se considera "pasada" sí, no hay errores fatales. Esta excepción también se cumple para funciones obsoletas (como por ejemplo macro, mode, etc.) o para otros comportamientos aun no definidos (attribute, href por ejemplo).</p> +<p>Note que en general comparando con el "ejemplo de renderizado" no es suficiente para concluir que una prueba fue aprobada o fallida. Así que por favor no edite estas páginas si usted no es capaz de explicar el proceso de renderizado de Gecko. Sin embargo, cualquier reporte es bienvenido en la web de <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=557086">Rastreo de bug para MathML testsuite</a>.</p> +<ul> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters" title="en/Mozilla MathML Project/MathML3Testsuite/Characters">Caracteres</a> + <ul> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#Blocks" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#Blocks">Bloques</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#Symbols" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#Symbols">Símbolos</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#Variants" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#Variants">Variantes</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#EntityNames" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#EntityNames">EntityNames</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#NumericRefs" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#NumericRefs">Referencias Numéricas</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Characters#UTF8" title="en/Mozilla MathML Project/MathML3Testsuite/Characters#UTF8">UTF8</a></li> + </ul> + </li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors">General </a> + <ul> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#Clipboard" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#Clipboard">Portapapeles</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#GenAttribs" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#GenAttribs">GenAttribs</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#Math" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#Math">Math</a></li> + </ul> + </li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation">Presentación</a> + <ul> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation/CSS" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation/CSS">CSS</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation#DynamicExpressions" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation#DynamicExpressions">Expresiones Dinámicas</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation#GeneralLayout" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation#GeneralLayout">Esquema General</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Presentation#ScriptsAndLimits" title="en/Mozilla MathML Project/MathML3Testsuite/Presentation#ScriptsAndLimits">Scripts y Limites</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/TablesTokens#TablesAndMatrices" title="en/Mozilla MathML Project/MathML3Testsuite/TablesTokens#TablesAndMatrices">Tablas y Matrices</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/TablesTokens#TokenElements" title="en/Mozilla MathML Project/MathML3Testsuite/TablesTokens#TokenElements">Elementos de Señalización </a></li> + </ul> + </li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics" title="en/Mozilla MathML Project/MathML3Testsuite/Topics">Topicos</a> + <ul> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/AccentsBiDi#Accents" title="en/Mozilla MathML Project/MathML3Testsuite/AccentsBiDi#Accents">Accents</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/AccentsBiDi#BiDi" title="en/Mozilla MathML Project/MathML3Testsuite/AccentsBiDi#BiDi">BiDI</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics/ElementaryMath" title="en/Mozilla MathML Project/MathML3Testsuite/Topics/ElementaryMath">Ejemplos Matematicos Basicos</a> </li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#EmbellishedOp" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#EmbellishedOp">EmbellishedOp</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#LargeOp" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#LargeOp">LargeOp</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#LineBreak" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#LineBreak">LineBreak</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#Nesting" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#Nesting">Anidamiento</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#StretchyChars" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#StretchyChars">StretchyChars</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/Topics#WhiteSpace" title="en/Mozilla MathML Project/MathML3Testsuite/Topics#WhiteSpace">WhiteSpace</a></li> + </ul> + </li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#TortureTests" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#TortureTests">Prueba de Resistencia</a></li> + <li><a href="/en/Mozilla_MathML_Project/MathML3Testsuite/GeneralTortureErrors#Error_Handling" title="en/Mozilla MathML Project/MathML3Testsuite/GeneralTortureErrors#Error Handling">Manejo de Errores</a></li> +</ul> +<div class="originaldocinfo"> + <h2 id="Original_Document_Information" name="Original_Document_Information">Información del Documento Original</h2> + <ul> + <li>Autor(es): Frédéric Wang</li> + <li>Otros Contribuidores:</li> + <li>Fecha de Ultima Actualización: Mayo 26, 2010</li> + <li>Información sobre Derechos de Autor: Porciones de este contenido están © 2010 por contribuidores individuales de mozilla.org; contenido disponible bajo licencia Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Detalles</a>.</li> + </ul> +</div> +<p> </p> diff --git a/files/es/mozilla/mathml_project/screenshots/index.html b/files/es/mozilla/mathml_project/screenshots/index.html new file mode 100644 index 0000000000..a6b868e20e --- /dev/null +++ b/files/es/mozilla/mathml_project/screenshots/index.html @@ -0,0 +1,14 @@ +--- +title: Pantallas MathML +slug: Mozilla/MathML_Project/Screenshots +translation_of: Mozilla/MathML_Project/Screenshots +--- +<ul> + <li><a href="/@api/deki/files/5690/=start.png" title="start.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/Start" title="http://www.mozilla.org/projects/mathml/start.xhtml">Start</a></li> + <li><a class="external" href="/@api/deki/files/5518/=basics.png" title="https://developer.mozilla.org/@api/deki/files/5518/=basics.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/Basics" title="http://www.mozilla.org/projects/mathml/demo/basics.xhtml">Basics</a>.</li> + <li><a href="/@api/deki/files/5509/=demo-mfrac.png" title="https://developer.mozilla.org/@api/deki/files/5509/=demo-mfrac.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/mfrac" title="http://www.mozilla.org/projects/mathml/demo/mfrac.xhtml">mfrac</a>. Esta página también nos muestra cómo MathML puede ser usado en combinación con otras características Web cómo lo es <em>background</em> <em>images</em> en una opacidad deseada.</li> + <li><a href="/@api/deki/files/5512/=demo-mtable-1.png" title="https://developer.mozilla.org/@api/deki/files/5512/=demo-mtable-1.png">Capturas de pantalla</a> de <a class="external" href="/docs/Mozilla/MathML_Project/mtable" title="http://www.mozilla.org/projects/mathml/demo/mtable.xhtml">mtable</a>, mostrando las construcciones de tipografía matemática en 2D.</li> + <li><a href="/@api/deki/files/5508/=roots-maxwell-einstein.png" title="https://developer.mozilla.org/@api/deki/files/5508/=roots-maxwell-einstein.png">Screenshot</a> de <a class="external" href="/docs/Mozilla/MathML_Project/roots" title="http://www.mozilla.org/projects/mathml/demo/roots.xhtml">roots</a> y <a class="external" href="/docs/Mozilla/MathML_Project/Various#Maxwell's_Equations" title="http://mxr.mozilla.org/mozilla-central/source/layout/mathml/tests/maxwell.xml?raw=1">physics equations</a> (Ecuación de Maxwell y campos de la ecuación de Einstein). Esta pantalla captura las demostraciones avanzadas de un <em>layout</em> con mtable y operadores flexibles.</li> + <li>Puedes obtener la fuente de MathML de <a href="/@api/deki/files/5510/=view_mathml_source.png" title="https://developer.mozilla.org/@api/deki/files/5510/=view_mathml_source.png">una formula</a> o una <a href="/@api/deki/files/5511/=view_selection_source.png" title="https://developer.mozilla.org/@api/deki/files/5511/=view_selection_source.png">expresión seleccionada</a>. ¡Es tu elección!</li> + <li>MathML en <a href="/@api/deki/files/4240/=mail_client_blog.png" title="https://developer.mozilla.org/@api/deki/files/4240/=mail_client_blog.png">blogs</a> y también <a class="external" href="/@api/deki/files/5519/=mathmail.png" title="https://developer.mozilla.org/@api/deki/files/5519/=mathmail.png">e-mails</a>.</li> +</ul> diff --git a/files/es/mozilla/mathml_project/start/index.html b/files/es/mozilla/mathml_project/start/index.html new file mode 100644 index 0000000000..78534ad6cd --- /dev/null +++ b/files/es/mozilla/mathml_project/start/index.html @@ -0,0 +1,96 @@ +--- +title: MathML en acción +slug: Mozilla/MathML_Project/Start +tags: + - MathML +translation_of: Mozilla/MathML_Project/Start +--- +<h2 id="MathML_en_acción">MathML en acción</h2> +<p>¿Ves elegantes ecuaciones a lo largo de esta página? ¿No? Que mal, aquí tienes una <a href="https://developer.mozilla.org/@api/deki/files/5690/=start.png">captura de pantalla</a> de lo que te estás perdiendo. <a href="./">Descarga </a>una versión de Mozilla habilitada para usar MathML para remediar esta situación.</p> +<p>¿Ahora ya tienes una versión de Mozilla habilitada para usar MathML pero lo que ves en las capturas de pantalla no es lo que obtienes? En ese caso, probablemente te faltan algunas <a href="fonts/">fuentes MathML </a>importantes.</p> +<p>Ahora que estas bien equipado, deberías poder ver esta ecuación incorporada con varios acentos: <math> <mrow> <mover> <mi>x</mi> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo></mo><mi>y</mi></mrow> <mo>^</mo> </mover> <mo>+</mo> <mover> <mrow><mi>x</mi><mo></mo><mi>y</mi><mo></mo><mi>z</mi></mrow> <mo>^</mo> </mover><mo></mo></mrow></math><math><mrow><mover><mi></mi><mo></mo></mover><mo></mo><mover><mrow><mi></mi><mo></mo><mi></mi></mrow><mo></mo></mover><mo></mo><mover><mrow><mi></mi><mo></mo><mi></mi><mo></mo><mi></mi></mrow><mo></mo></mover><mo>.</mo> </mrow> </math>Al lado de esta tienes esta pequeña fórmula, <math> <mrow> <mo>det</mo> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mfrac linethickness="0"> <mi>a</mi> <mi>c</mi> </mfrac> <mfrac linethickness="0"> <mi>b</mi> <mi>d</mi> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>,</mo> </mrow></math>la cual también puede ser compuesta en displaystyle como <math display="block"> <mrow> <mo>det</mo> <mo>|</mo> <mtable> <mtr> <mtd> <mi>a</mi> </mtd> <mtd> <mi>b</mi> </mtd> </mtr> <mtr> <mtd> <mi>c</mi> </mtd> <mtd> <mi>d</mi> </mtd> </mtr> </mtable> <mo>|</mo> <mo>=</mo> <mi>a</mi> <mi>d</mi> <mo>-</mo> <mi>b</mi> <mi>c</mi> <mo>.</mo> </mrow> </math></p> +<p>La composición matemática es difícil. <a href="./">MathML en Mozilla</a> busca cumplir con las <a href="http://www.w3.org/Math/">especificaciones MathML</a> de modo que + <i> + What</i> + <i> + You See Is What You Markup</i> + (Lo Que Ves Es Lo Que Marcas), o dicho de otra manera + <i> + What</i> + <i> + You See Is What You Made</i> + (Lo Que Ves Es Lo Que Haces), o de forma más corta "WYSIWYM". ¡La diferencia entre estas dos es el marcado! <math display="block"> <msup> <mrow> <mo minsize="3" symmetric="false">(</mo> <mo>...</mo> <msup> <mrow> <mo minsize="2" symmetric="false">(</mo> <msup> <mrow> <mo symmetric="false">(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo minsize="2" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo minsize="3" symmetric="false">)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math> <math display="block"> <msup> <mrow> <mo>(</mo> <mo>...</mo> <msup> <mrow> <mo>(</mo> <msup> <mrow> <mo>(</mo> <msub> <mi>a</mi> <mn>0</mn> </msub> <mo>+</mo> <msub> <mi>a</mi> <mn>1</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>1</mn> </msub> </msup> <mo>+</mo> <msub> <mi>a</mi> <mn>2</mn> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mn>2</mn> </msub> </msup> <mo>+</mo> <mo>...</mo> <mo>+</mo> <msub> <mi>a</mi> <mi>p</mi> </msub> <mo>)</mo> </mrow> <msub> <mi>n</mi> <mi>p</mi> </msub> </msup> </math></p> +<p>Las raíces de esta ecuación en negrita <math> <mstyle mathvariant="bold"> <msup> <mi>y</mi> <mn>3</mn> </msup> <mo>+</mo> <mi>p</mi> <mi>y</mi> <mo>+</mo> <mi>q</mi> <mo>=</mo> <mn>0</mn> </mstyle> </math> también están en negrita <math display="block"> <mstyle mathvariant="bold"> <mi>y</mi> <mo>=</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>+</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>+</mo> <mroot> <mrow> <mo>-</mo> <mfrac> <mi>q</mi> <mn>2</mn> </mfrac> <mo>-</mo> <mroot> <mrow> <mfrac> <msup> <mi>q</mi> <mn>2</mn> </msup> <mn>4</mn> </mfrac> <mo>+</mo> <mfrac> <msup> <mi>p</mi> <mn>3</mn> </msup> <mn>27</mn> </mfrac> </mrow> <mn>2</mn> </mroot> </mrow> <mn>3</mn> </mroot> <mo>.</mo> </mstyle> </math></p> +<p>Mientras que las raíces de la ecuación <math> <mrow> <mi>a</mi> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn> <mo>,</mo> </mrow> </math> haz clic en cualquier parte del área amarilla para acercar y alejar:</p> +<div style="display: none;"> + <h2 id="Zoomable_Math" name="Zoomable_Math">Zoomable Math</h2> + <h3 id="HTML_Content">HTML Content</h3> + <pre class="brush: html"> <p> + <math display="block"> + <mstyle id="zoomableMath" mathbackground="yellow"> + <mrow> + <mi>x</mi> + <mo>=</mo> + <mfrac> + <mrow> + <mrow> + <mo>-</mo> + <mi>b</mi> + </mrow> + <mo>&#xB1;</mo> + <msqrt> + <mrow> + <msup> + <mi>b</mi> + <mn>2</mn> + </msup> + <mo>-</mo> + <mrow> + <mn>4</mn> + <mi>a</mi> + <mi>c</mi> + </mrow> + </mrow> + </msqrt> + </mrow> + <mrow> + <mn>2</mn> + <mi>a</mi> + </mrow> + </mfrac> + </mrow> + </mstyle> + </math> + </p> + +</pre> + <h3 id="JavaScript_Content">JavaScript Content</h3> + <pre class="brush: js"> function zoomToggle() + { + if (this.hasAttribute("mathsize")) { + this.removeAttribute("mathsize"); + } else { + this.setAttribute("mathsize", "200%"); + } + } + + function load() + { + document.getElementById("zoomableMath"). + addEventListener("click", zoomToggle, false); + } + + window.addEventListener("load", load, false);</pre> +</div> +<p style="text-align: center;">{{ EmbedLiveSample('Zoomable_Math') }}</p> +<p>Considere un marcado interesante como este <math display="block"><mrow><mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msub> <mi>u</mi> <mi>t</mi> </msub> <mo>+</mo> <msub> <mrow> <mi>f</mi> <mo>(</mo> <mi>u</mi> <mo>)</mo> </mrow> <mi>x</mi> </msub> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mi>u</mi> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>-</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo><</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <msup> <mi>u</mi> <mo>+</mo> </msup> </mrow> </mtd> <mtd> <mrow> <mtext>if </mtext> <mi>x</mi> <mo>></mo> <mn>0</mn> </mrow></mtd></mtr></mtable></mrow></mrow></mtd></mtr></mtable></mrow></math>u otros marcados complejos como estos <math display="block"> <mrow> <msub> <mover> <mi>Ell</mi> <mo>^</mo> </mover> <mi>Y</mi> </msub> <mo stretchy="false">(</mo> <mi>Z</mi> <mo>;</mo> <mi>z</mi> <mo>,</mo> <mi>τ</mi> <mo stretchy="false">)</mo> <mo>:=</mo> <msub> <mo>∫</mo> <mi>Y</mi> </msub> <mo>(</mo> <munder> <mo>∏</mo> <mi>l</mi> </munder> <mfrac> <mrow> <mrow> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <msup> <mi>θ</mi> <mo>′</mo> </msup> <mo stretchy="false">(</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mrow> <mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>y</mi> <mi>l</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mfrac> <mo>)</mo> <mo>×</mo> <mo>(</mo> <munder> <mo>∏</mo> <mi>k</mi> </munder> <mfrac> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> <mrow> <mrow> <mi>θ</mi> <mo>(</mo> <mfrac> <msub> <mi>e</mi> <mi>k</mi> </msub> <mrow> <mn>2</mn> <mi>π</mi> <mi mathvariant="normal">i</mi> </mrow> </mfrac> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>θ</mi> <mo stretchy="false">(</mo> <mo>-</mo> <mo stretchy="false">(</mo> <msub> <mi>α</mi> <mi>k</mi> </msub> <mo>+</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mi>z</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> <mo>)</mo> </mrow> </math> <math display="block"> <mrow> <mi>π</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo stretchy="false">)</mo> <mo>=</mo> <munderover> <mo>∑</mo> <mrow> <mi>m</mi> <mo>=</mo> <mn>2</mn> </mrow> <mi>n</mi> </munderover> <mrow> <mo>⌊</mo> <msup> <mrow> <mo>(</mo> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mi>m</mi> <mo>-</mo> <mn>1</mn> </mrow> </munderover> <mrow> <mo minsize="1.5">⌊</mo> <mo>(</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>)</mo> <mo minsize="2">/</mo> <mo>⌈</mo> <mi>m</mi> <mo>/</mo> <mi>k</mi> <mo>⌉</mo> <mo minsize="1.5">⌋</mo> </mrow> </mrow> <mo>)</mo> </mrow> <mrow> <mo>-</mo> <mn>1</mn> </mrow> </msup> <mo>⌋</mo> </mrow> </mrow> </math> <math display="block"> <mrow> <msub> <mrow> <mo>‖</mo> <mi>ϕ</mi> <mo>‖</mo> </mrow> <mrow> <msubsup> <mi>W</mi> <mi>s</mi> <mi>k</mi> </msubsup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> </msub> <mo>≝</mo> <msup> <mrow> <mo>(</mo> <munder> <mo>∑</mo> <mrow> <mo>|</mo> <mi>α</mi> <mo>|</mo> <mo>≦</mo> <mi>k</mi> </mrow> </munder> <msubsup> <mfenced close="‖" open="‖"> <mfrac> <mrow> <msup> <mo>∂</mo> <mi>α</mi> </msup> <mi>ϕ</mi> </mrow> <mrow> <mo>∂</mo> <msup> <mi>ξ</mi> <mi>α</mi> </msup> </mrow> </mfrac> </mfenced> <mrow> <msup> <mi>L</mi> <mi>s</mi> </msup> <mo stretchy="false">(</mo> <msub> <mi>Ω</mi> <mi>g</mi> </msub> <mo stretchy="false">)</mo> </mrow> <mi>s</mi> </msubsup> <mo>)</mo> </mrow> <mrow> <mn>1</mn> <mo>/</mo> <mi>s</mi> </mrow> </msup> </mrow> </math></p> +<p>Para más ejemplos, ve a los enlaces en le página del <a href="./">Proyecto MathML</a>, y sí estás <a href="build.html">construyendo</a> tu propio binario de Mozilla, ve el directorio + <i> + mozilla</i> + <i> + /layout/mathml/tests</i> + .</p> +<p>Ahora, ¿Qué sigue? Mientras pruebas MathML en Mozilla, ¿Qué hacer con esas cosas que parecen no funcionar según la especificación MathML? ¿O con esas cosas que simplemente parecen molestas, y que desearías poder hacer un poco mejor? ¿O con esas cosas que antes funcionaban y ya no funcionan mas (regresiones)? En cualquiera de las casos, dirígete a <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a> para reportar las anomalías. Bugzilla tiene gran memoria para estas cosas, además, ¿cómo serían tus problemas solucionados si no son reportados?</p> +<p><a href="../../get-involved.html">Involucrarse</a> es parte de tu contribución al enriquecimiento de <a href="../../newlayout/">Gecko</a> con un procesador de MathML de estándares elegantes y obediente. Tu puedes dar tu opinión <a href="authoring.html">colocando contenido con MathML en la web</a>, reportando bugs en <a href="../../quality/bug-writing-guidelines.html">Bugzilla</a>, y, sí puedes ayudar con código, <a href="http://lxr.mozilla.org/seamonkey/source/layout/mathml/">inspeccionando o mejorando el código existente </a>y/o escogiendo un elemento en la lista de <a href="update.html">tareas pendientes</a>.</p> +<div id="cke_pastebin" style="position: absolute; top: 1775.63px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> + </div> diff --git a/files/es/mozilla/mathml_project/status/index.html b/files/es/mozilla/mathml_project/status/index.html new file mode 100644 index 0000000000..bee65af721 --- /dev/null +++ b/files/es/mozilla/mathml_project/status/index.html @@ -0,0 +1,325 @@ +--- +title: Estado de Mozilla MathML +slug: Mozilla/MathML_Project/Status +translation_of: Mozilla/MathML_Project/Status +--- +<p>Resumen de los elementos y/o atributos de <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3</a> (excluyendo elementos sin uso) y estado actual del soporte nativo. Se muestran referencias a MathML 3. Las secciones están marcadas con su correspondiente estado: <span style="background-color: lightgreen;">soportado</span>, <span style="background-color: gold;">en progreso</span>, y <span style="background-color: salmon;">no soportado actualmente</span>. Las secciones relacionadas a semántica/contenido, MathML o funciones irrelevantes se dejan en blanco o no se muestran en la lista. Si solo la función principal de un elemento esta implementado, esa sección sera marcada como soportado pero los detalles de los atributos no soportados se especifican después.</p> +<h2 id="Elementos_de_nivel_superior_de_Math">Elementos de nivel superior de Math</h2> +<p>Vea <a class="external" href="http://www.w3.org/TR/MathML3/chapter2.html#interf.toplevel">§ 2.2</a>.</p> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Atributo</th> + <th>Notas</th> + </tr> + <tr style="background-color: #90ee90;"> + <td>display</td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>maxwidth, overflow</td> + <td>No Implementado. Ver {{ Bug("534962") }}.</td> + </tr> + <tr> + <td>altimg, altimg-width, altimg-height, altimg-valign, alttext</td> + <td>MathML esta siempre activado, por lo que soportar estos atributos es irrelevante. Vea {{ Bug("660762") }}.</td> + </tr> + <tr> + <td>cdgroup</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Atributos_Compartidos_por_todos_los_elementos_MathML">Atributos Compartidos por todos los elementos MathML</h2> +<p>Vea <a class="external" href="http://www.w3.org/TR/MathML3/chapter2.html#fund.globatt">§ 2.1.6</a> y <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.presatt">§ 3.1.10</a>.</p> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Atributo</th> + <th>Notas</th> + </tr> + <tr style="background-color: #90ee90;"> + <td>id, class, style</td> + <td>Implementado.</td> + </tr> + <tr> + <td>xref</td> + <td> </td> + </tr> + <tr style="background-color: #90ee90;"> + <td>href</td> + <td>Implementado en Gecko. Nota: la interfaz de usuario funciona correctamente en Seamonkey pero no en Firefox. Ver {{ Bug("534968") }}.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td>mathcolor</td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td>mathbackground</td> + <td>Implementado.</td> + </tr> + </tbody> +</table> +<h2 id="Elementos_de_Señalización">Elementos de Señalización</h2> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Elemento [- atributo]</th> + <th>Notas</th> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mi">mi</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #ffd700;"> + <td>mi - mathvariant</td> + <td>Parcialmente Implementado. Ver {{ Bug("114365") }}.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mn">mn</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mo">mo</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mo - linebreaking attributes, indentation attributes</td> + <td>No Implementado. Ver {{ Bug("534962") }}.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtext">mtext</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mspace">mspace</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mspace - linebreak</td> + <td>No Implementado. Ver {{ Bug("380266") }}.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.ms">ms</a></td> + <td>Implementado.</td> + </tr> + </tbody> +</table> +<h2 id="Esquema_de_Diseño_General">Esquema de Diseño General</h2> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Elemento [- atributo]</th> + <th>Notas</th> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mrow">mrow</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mfrac">mfrac</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msqrt">msqrt</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mroot">mroot</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mstyle">mstyle</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mstyle - lquote, rquote</td> + <td>No Implementado. Ver {{ Bug("560100") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mstyle - infixlinebreakstyle</td> + <td>No Implementado. Ver {{ Bug("534962") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mstyle - decimalpoint</td> + <td>No Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.merror">merror</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mpadded">mpadded</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mphantom">mphantom</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mfenced">mfenced</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.menclose">menclose</a></td> + <td>Implementado.</td> + </tr> + </tbody> +</table> +<h2 id="Script_y_Limites_esquemáticos">Script y Limites esquemáticos</h2> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Elemento [- atributo]</th> + <th>Notas</th> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msub">msub</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msup">msup</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.subsup">msubsup</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.munder">munder</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mover">mover</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.munderover">munderover</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mmultiscripts">mmultiscripts</a></td> + <td>Implementado.</td> + </tr> + </tbody> +</table> +<h2 id="Cálculos_en_Tablas">Cálculos en Tablas</h2> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Elemento [- atributo]</th> + <th>Notas</th> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtable">mtable</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mtable - alignmentscope</td> + <td>No Implementado. Ver {{ Bug("122253") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mtable - columnspacing, rowspacing</td> + <td>No Implementado. Ver {{ Bug("330964") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mtable - columnwidth, framespacing, equalrows, equalcolumns</td> + <td>No Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>mtable - side, minlabelspacing</td> + <td>No Implementado. Ver {{ Bug("356870") }}.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtr">mtr</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mtd">mtd</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>* - groupalign.</td> + <td>No Implementado. Ver {{ Bug("122253") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.maligngroup">maligngroup</a></td> + <td>No Implementado. Ver {{ Bug("122253") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.malignmark">malignmark</a></td> + <td>No Implementado. Ver {{ Bug("122253") }}.</td> + </tr> + </tbody> +</table> +<h2 id="Cálculos_Elementales">Cálculos Elementales</h2> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Elemento [- atributo]</th> + <th>Notas</th> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mstack">mstack</a></td> + <td>No Implementado. Ver {{ Bug("534967") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mlongdiv">mlongdiv</a></td> + <td>No Implementado. Ver {{ Bug("534967") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msgroup">msgroup</a></td> + <td>No Implementado. Ver {{ Bug("534967") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msrow">msrow</a></td> + <td>No Implementado. Ver {{ Bug("534967") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mscarries">mscarries</a></td> + <td>No Implementado. Ver {{ Bug("534967") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mscarry">mscarry</a></td> + <td>No Implementado. Ver {{ Bug("534967") }}.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.msline">msline</a></td> + <td>No Implementado. Ver {{ Bug("534967") }}.</td> + </tr> + </tbody> +</table> +<h2 id="Otros_Elementos">Otros Elementos</h2> +<table style="width: 100%;"> + <tbody> + <tr> + <th>Elemento [- atributo]</th> + <th>Notas</th> + </tr> + <tr style="background-color: #fa8072;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.mglyph">mglyph</a></td> + <td>No Implementado. Ver {{ Bug("297465") }}.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.maction">maction</a></td> + <td>Implementado.</td> + </tr> + <tr style="background-color: #fa8072;"> + <td>maction - tooltip</td> + <td>No Implementado. Ver {{ Bug("544001") }}.</td> + </tr> + <tr style="background-color: #90ee90;"> + <td><a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#presm.semantics">semantics</a></td> + <td>Implementado en {{geckoRelease("23.0")}}.</td> + </tr> + </tbody> +</table> +<div class="originaldocinfo"> + <h2 id="Información_Original_del_Documento">Información Original del Documento</h2> + <ul> + <li>Autor(s): Frédéric Wang</li> + <li>Otros Contribuidores:</li> + <li>Información sobre Derechos de Autor: Algunas porciones de este documento poseen derechos de autor de sus respectivos contribuidores de mozilla.org © 2010; Contenido disponible bajo licencia Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Detalles</a>.</li> + </ul> +</div> +<p> </p> diff --git a/files/es/mozilla/mathml_project/student_projects/index.html b/files/es/mozilla/mathml_project/student_projects/index.html new file mode 100644 index 0000000000..bff715a243 --- /dev/null +++ b/files/es/mozilla/mathml_project/student_projects/index.html @@ -0,0 +1,49 @@ +--- +title: Proyectos Estudiantiles +slug: Mozilla/MathML_Project/Student_Projects +tags: + - MathML +translation_of: Mozilla/MathML_Project/Student_Projects +--- +<h2 id="Verano_2012">Verano 2012</h2> +<p>Ver "<a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/08/27/How-I-got-involved-with-Mozilla-and-try-to-bring-new-contributors" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/08/27/How-I-got-involved-with-Mozilla-and-try-to-bring-new-contributors">Como me involucre con Mozilla y mi intento de traer nuevos contribuidores</a>" en el blog de Frédéric para una revisión de contribuciones.</p> +<h3 id="MathML_Dinámico_(Andrii_Zui)">MathML Dinámico (Andrii Zui)</h3> +<p>Andrii ha sido aceptada para el "Google Summer of Code" de 2012.</p> +<ul> + <li><a class="external" href="http://www.google-melange.com/gsoc/project/google/gsoc2012/prazuber/19001" title="http://www.google-melange.com/gsoc/project/google/gsoc2012/prazuber/19001">Página del Proyecto</a></li> + <li><a class="link-https" href="https://wiki.mozilla.org/SummerOfCode/2012/DynamicMathML" title="https://wiki.mozilla.org/SummerOfCode/2012/DynamicMathML">Reporte de Estado Semanal</a></li> +</ul> +<h3 id="reconstrucción_de_mtable_(Quentin_Headen)">reconstrucción de mtable (Quentin Headen)</h3> +<ul> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=731667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=731667"><span id="summary_alias_container"><span id="short_desc_nonedit_display">Reescritura de la implementación de mtable para prevenir el uso de atributos _moz-*</span></span></a></li> + <li><a href="http://phaseshiftsoftware.com/blog/?p=538" title="http://phaseshiftsoftware.com/post/538">Verano de Mozilla</a> (Quentin's blog)</li> +</ul> +<h2 id="Verano_2011">Verano 2011</h2> +<h3 id="Implantación_de_nuevas_funciones_de_MathML_en_el_motor_de_Mozilla_(Jonathan_Hage)">Implantación de nuevas funciones de MathML en el motor de Mozilla (Jonathan Hage)</h3> +<p>Durante un internado de dos meses, Jonathan trabajó en los siguientes bugs</p> +<ul> + <li>Agregando soporte de nombres de espacio negativo {{ Bug("650530") }}</li> + <li>Actualizando mozilla/src/layout/mathml/tests/ {{ Bug("557084") }}</li> + <li>Agregando soporte para el atributo displaystyle en el elemento <math/> {{ Bug("669719") }}</li> +</ul> +<p>También agregó soporte para el atributo mpadded@voffset {{ Bug("557474") }} y trabajó también en los elementos munderover:</p> +<ul> + <li>soporte a nivel de script en munderover@accent="true" {{ Bug("669713") }}</li> + <li>fusionó los marcos de clases munderover/munder/mover {{ Bug("668204") }}</li> + <li>agregó soporte para el atributo align {{ Bug("557476") }}</li> +</ul> +<p>Finalmente empezó a trabajar en algunos</p> +<ul> + <li>Unificando el análisis de longitud y atributos mpadded {{ Bug("677036") }}</li> + <li>Removiendo la anulación de valor de namedspace {{ Bug("673759") }}</li> + <li>Default value for lspace/rspace should be thickmathspace {{ Bug("662756") }}</li> +</ul> +<p>Los parches Jonathan seran integrados en Firefox 7 u 8. El trabajo restante será finalizado por Frédéric después. Actualmente Jonathan no se encuentra involucrado en el proyecto Mozilla MathML.</p> +<h2 id="Verano_2007">Verano 2007</h2> +<h3 id="Mejorar_el_soporte_MathML_en_Mozilla_(Vladimir_Sukhoy)">Mejorar el soporte MathML en Mozilla (Vladimir Sukhoy)</h3> +<p>El plan de Vladimir's era unir MathML al tronco principal pero era demasiado trabajo para un proyecto de verano, el quería empezar implementando MathML DOM para familiarizarse con el código.</p> +<ul> + <li><a class="link-https" href="https://bug377499.bugzilla.mozilla.org/attachment.cgi?id=267242" title="https://bug377499.bugzilla.mozilla.org/attachment.cgi?id=267242">Propuesta del proyecto</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=377499" title="https://bugzilla.mozilla.org/show_bug.cgi?id=377499">Reporte principal de fallas y estado</a></li> +</ul> +<p>Desafortunadamente la mayoria de sus cambios no han sido integrados al tronco del proyecto. Algunas de las fallas en las que trabajo han sido corregidas por otras personas. Notablemente Karl ha restaurado el soporte MathML en el tronco. DOM fue removido de MathML 3 y no tenemos planes de implementarlo. Vladimir no se encuentra activo en el proyecto Mozilla MathML.</p> diff --git a/files/es/mozilla/mathml_project/various/index.html b/files/es/mozilla/mathml_project/various/index.html new file mode 100644 index 0000000000..b0ae4a4337 --- /dev/null +++ b/files/es/mozilla/mathml_project/various/index.html @@ -0,0 +1,36 @@ +--- +title: Various MathML Tests +slug: Mozilla/MathML_Project/Various +translation_of: Mozilla/MathML_Project/Various +--- +<h2 id="Visión_en_conjunto_de_la_Presentación_de_los_elementos_de_MathML">Visión en conjunto de la Presentación de los elementos de MathML</h2> +<ul> + <li>Pruebas de Índices de tensor <mmultiscripts>: <math> <mmultiscripts> <mi>R</mi> <mi>i</mi><mi>1</mi> <mi>j</mi><mi>2</mi> <mprescripts></mprescripts> <mi>k</mi><mi>3</mi> </mmultiscripts> </math> ; Esto con <none/>, <math> <mmultiscripts> <mi>A</mi> <mi>q</mi><mi>p</mi> <mprescripts></mprescripts> <mi>i</mi><none></none> </mmultiscripts> </math></li> + <li>Un poco de cálculo: <math> <msubsup> <mo>∫</mo> <mi>a</mi> <mi>b</mi> </msubsup> <mrow> <mi>f</mi> <mo>(</mo> <mi>x</mi> <mo>)</mo> <mi>dx</mi> </mrow> <mrow> <mfrac> <mo>∂</mo> <mrow> <mo>∂</mo> <mi>x</mi> </mrow> </mfrac> <mrow> <mi>F</mi> <mo>(</mo> <mi>x</mi> <mo>,</mo> <mi>y</mi> <mo>)</mo> </mrow> <mo>+</mo> <mfrac> <mo>∂</mo> <mrow> <mo>∂</mo> <mi>y</mi> </mrow> </mfrac> <mrow> <mi>F</mi> <mo>(</mo> <mi>x</mi> <mo>,</mo> <mi>y</mi> <mo>)</mo> </mrow> </mrow> </math></li> + <li>Aquí está el alfabeto con porciones invisibles envueltas con <mphantom> entremedias: <math> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mphantom> <mi>d</mi> <mi>e</mi> <mi>f</mi> <mi>g</mi> <mi>h</mi> <mi>i</mi> <mi>j</mi> </mphantom> <mi>k</mi> <mi>l</mi> <mi>m</mi> <mi>n</mi> <mi>o</mi> <mphantom> <mi>p</mi> <mi>q</mi> <mi>r</mi> <mi>s</mi> </mphantom> <mi>t</mi> <mi>u</mi> <mi>v</mi> <mi>w</mi> <mi>x</mi> <mi>y</mi> <mi>z</mi> </math>.</li> + <li>Pruebas de MathML <msub>: <math> <msub> <mi>a</mi> <mi>b</mi> </msub> </math>; <math> <msub> <mi>a</mi> <mi>i</mi> </msub> </math>; <math> <msub> <mi>A</mi> <msub> <mi>I</mi> <mi>k</mi> </msub> </msub> </math></li> + <li>Pruebas de MathML <msup>: <math> <msup> <mi>d</mi> <mi>b</mi> </msup> <msup> <mn>2</mn> <msub> <mi>a</mi> <mi>x</mi> </msub> </msup> <msup> <msup> <mn>2</mn> <mn>2</mn> </msup> <mi>x</mi> </msup> <msup> <mrow> <mo>(</mo> <mfrac> <mn>1</mn> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> <msup> <mi>y</mi> <msub> <mi>a</mi> <mi>x</mi> </msub> </msup> </msup> </math>.</li> + <li>Pruebas de MathML <munder>, <mover>, y <munderover>: <math> <munder> <mi>abcd</mi> <mi>un</mi> </munder> <mover> <mi>abcd</mi> <mi>ov</mi> </mover> <munderover> <mi>abcd</mi> <mi>under</mi> <mi>over</mi> </munderover> </math>.</li> + <li>Pruebas de MathML <msubsup>: <math> <msubsup> <mi>a</mi> <mi>p</mi> <mi>q</mi> </msubsup> <msubsup> <mi>a</mi> <mrow> <mi>b</mi> <mo>+</mo> <mi>c</mi> </mrow> <mi>x</mi> </msubsup> </math>.</li> + <li>Pruebas de MathML <mrow>: <math> <msup> <mi>d</mi> <mrow> <mo>(</mo> <mfrac> <mi>a</mi> <mi>b</mi> </mfrac> <mo>)</mo> </mrow> </msup> </math></li> + <li><math> <mrow> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mrow> <mn>4</mn> <mo>*</mo> <mi>x</mi> </mrow> <mo>+</mo> <mfrac> <mi>p</mi> <mi>q</mi> </mfrac> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </math>, con este <mfrac> colgando aquí<math> <mfrac><mrow><mi>d</mi> <mo>*</mo> <msup> <mi>T</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mi>i</mi> <mo>+</mo> <mi>j</mi> </mrow> <mi>n</mi> </mfrac> <mo>)</mo> </mrow> </msup> <mo>+</mo> <msub> <mi>p</mi> <mi>y</mi> </msub> <mo>*</mo> <mi>q</mi> </mrow> <mrow> <msup> <mi>p</mi> <mi>x</mi> </msup> <mo>*</mo> <msub> <mi>b</mi> <mi>x</mi> </msub> <mo>+</mo> <mfrac> <mrow> <mi>a</mi> <mo>+</mo> <mi>c</mi> </mrow> <mi>d</mi> en medio de una gran cantidad de texto en marcha para tratar de explicar lo que esto significa para aquellos que se preocupan de leer.</mfrac></mrow></mfrac></math> + <div id="gt-src-tools-l"> + <div id="gt-input-tool" style="display: inline-block;"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="es"><span class="hps">en medio de</span> <span class="hps">una gran cantidad de</span> <span class="hps">texto</span> <span class="hps">en marcha</span> <span class="hps">para tratar de explicar</span> <span class="hps">lo que esto significa</span> <span class="hps">para</span> <span class="hps">los que se preocupan</span> <span class="hps">de leer</span></span></div> + </div> + </div> + </li> + <li>Pruebas de MathML <merror>, <mtext>: <math> <mtext>Esto es un texto en mtext</mtext> <merror><mtext>Esto es un texto en merror</mtext></merror> </math></li> + <li>Pruebas de <maction>: Haga clic para alternar entre expresiones y ver la línea de estado onmouseover/onmouseout: + <p><math display="block"> <maction actiontype="toggle"> <maction actiontype="statusline"> <mi>statusline#Primera Expresión</mi> <mtext>Primera Expresión</mtext> </maction> <maction actiontype="statusline"> <mi>statusline#Segunda Expresión</mi> <mtext>Segunda Expresión</mtext> </maction> <maction actiontype="statusline"> <mi>statusline#Etcétera...</mi> <mtext>Etcétera..</mtext> </maction> </maction> </math></p> + <p>Haga clic en la expresión de abajo para ver varias definiciones de pi:<br> + <math display="block"> <mrow> <maction actiontype="toggle"> <mrow> <mi>π</mi> <mo>=</mo> <mn>3.14159265358</mn><mo mathvariant="bold">...</mo> </mrow> <mrow> <mi>π</mi> <mo>=</mo> <mn>2</mn><mi>i</mi> <mo></mo> <mo>Log</mo> <mfrac> <mrow><mn>1</mn><mo>-</mo><mi>i</mi></mrow> <mrow><mn>1</mn><mo>+</mo><mi>i</mi></mrow> </mfrac> </mrow> <mrow> <mi>π</mi> <mo>=</mo> <mn>2</mn> <mphantom><mo>.</mo></mphantom> <mfrac> <mn>2</mn> <msqrt> <mn>2</mn> </msqrt> </mfrac> <mphantom><mo>.</mo></mphantom> <mfrac> <mn>2</mn> <msqrt> <mn>2</mn> <mo>+</mo> <msqrt> <mn>2</mn> </msqrt> </msqrt> </mfrac> <mphantom><mo>.</mo></mphantom> <mfrac> <mn>2</mn> <msqrt> <mn>2</mn> <mo>+</mo> <msqrt> <mn>2</mn> <mo>+</mo> <msqrt> <mn>2</mn> </msqrt> </msqrt> </msqrt> </mfrac> <mo mathvariant="bold">...</mo> </mrow> <mrow> <mfrac> <mi>π</mi> <mn>4</mn> </mfrac> <mo>=</mo> <mfrac> <mstyle scriptlevel="0"> <mn>1</mn> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>1</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>3</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>5</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac> <mstyle scriptlevel="0"> <msup><mn>7</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </maction> </mrow> </math></p> + </li> +</ul> +<h2 id="Teoría_de_la_dispersión_de_Thomson">Teoría de la dispersión de Thomson</h2> +<p><math display="block"> <mrow> <mtable> <mtr> <mtd columnalign="left"> <mrow> <mfrac> <mrow> <msup> <mi>d</mi> <mn>2</mn> </msup> <mi>P</mi> </mrow> <mrow> <mi>d</mi> <msub> <mi>Ω</mi> <mi>s</mi> </msub> <mo> </mo> <mi>d</mi> <msub> <mi>ω</mi> <mi>s</mi> </msub> </mrow> </mfrac> </mrow> </mtd> <mtd columnalign="left"> <mrow> <mo>=</mo> </mrow> </mtd> <mtd columnalign="left"> <mrow> <msubsup> <mi>r</mi> <mi>e</mi> <mn>2</mn> </msubsup> <msub> <mo>∫</mo> <mi>V</mi> </msub> <mo lspace="0"><</mo> <msub> <mi>S</mi> <mi>i</mi> </msub> <mo>></mo> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">r</mi> <mo>∫</mo> <msup> <mrow> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mover accent="true"> <mi mathvariant="bold">e</mi> <mo>^</mo> </mover> <mo>.</mo> <mover accent="true"> <mo>Π</mo> <mo>↔</mo> </mover> <mo>.</mo> <mover accent="true"> <mi mathvariant="bold">e</mi> <mo>^</mo> </mover> <mo lspace="0" rspace="0" symmetric="false">|</mo> </mrow> <mn>2</mn> </msup> <msup> <mi>κ</mi> <mn>2</mn> </msup> <mi>f</mi> <mo> </mo> <mi>δ</mi> <mrow> <mo stretchy="false">(</mo> <mi mathvariant="bold">k</mi> <mo>.</mo> <mi mathvariant="bold">v</mi> <mo>-</mo> <mi>ω</mi> <mo stretchy="false">)</mo> </mrow> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">v</mi> </mrow> </mtd> </mtr> <mtr> <mtd></mtd> <mtd columnalign="left"> <mrow> <mo>=</mo> </mrow> </mtd> <mtd columnalign="left"> <mrow> <msubsup> <mi>r</mi> <mi>e</mi> <mn>2</mn> </msubsup> <msub> <mo>∫</mo> <mi>V</mi> </msub> <mo lspace="0"><</mo> <msub> <mi>S</mi> <mi>i</mi> </msub> <mo>></mo> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">r</mi> <mo>∫</mo> <msup> <mrow> <mo lspace="0" rspace="0" symmetric="false">|</mo> <mn>1</mn> <mo>-</mo> <mfrac> <mrow> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <mover accent="true"> <mi mathvariant="bold">s</mi> <mo>^</mo> </mover> <mo>.</mo> <mover accent="true"> <mi mathvariant="bold">ı</mi> <mo>^</mo> </mover> <mo stretchy="false">)</mo> </mrow> <mrow> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>i</mi> </msub> <mo stretchy="false">)</mo> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>s</mi> </msub> <mo stretchy="false">)</mo> </mrow> </mfrac> <msubsup> <mi>β</mi> <mi>e</mi> <mn>2</mn> </msubsup> <mo lspace="0" rspace="0" symmetric="false">|</mo> </mrow> <mn>2</mn> </msup> <mspace width="thinmathspace"></mspace> <msup> <mrow> <mo rspace="0" symmetric="false">|</mo> <mfrac> <mrow> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>i</mi> </msub> </mrow> <mrow> <mn>1</mn> <mo>-</mo> <msub> <mi>β</mi> <mi>s</mi> </msub> </mrow> </mfrac> <mo lspace="0" rspace="0" symmetric="false">|</mo> </mrow> <mn>2</mn> </msup> </mrow> </mtd> </mtr> <mtr> <mtd></mtd> <mtd></mtd> <mtd columnalign="left"> <mrow> <mo>×</mo> <mrow> <mo stretchy="false">(</mo> <mn>1</mn> <mo>-</mo> <msup> <mi>β</mi> <mn>2</mn> </msup> <mo stretchy="false">)</mo> </mrow> <mo> </mo> <mi>f</mi> <mo> </mo> <mi>δ</mi> <mrow> <mo stretchy="false">(</mo> <mi mathvariant="bold">k</mi> <mo>.</mo> <mi mathvariant="bold">v</mi> <mo>-</mo> <mi>ω</mi> <mo stretchy="false">)</mo> </mrow> <msup> <mi>d</mi> <mn>3</mn> </msup> <mi mathvariant="bold">v</mi> </mrow> </mtd> </mtr> </mtable> </mrow> </math></p> +<h2 id="Ecuaciones_de_Maxwell">Ecuaciones de Maxwell</h2> +<p style="text-align: center;"><math> <mstyle displaystyle="true"> <mrow> <mo>{</mo> <mtable columnalign="right center left"> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>×</mo> <mover accent="true"> <mi mathvariant="bold">B</mi> <mo stretchy="true">→</mo> </mover> <mo>-</mo> <mfrac> <mn>1</mn> <mi>c</mi> </mfrac> <mfrac> <mrow> <mo>∂</mo> <mover accent="true"> <mi mathvariant="bold">E</mi> <mo stretchy="true">→</mo> </mover> </mrow> <mrow> <mo>∂</mo> <mi>t</mi> </mrow> </mfrac> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mrow> <mfrac> <mrow> <mn>4</mn> <mi>π</mi> </mrow> <mi>c</mi> </mfrac> <mover accent="true"> <mi mathvariant="bold">j</mi> <mo stretchy="true">→</mo> </mover> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>ċ</mo> <mover accent="true"> <mi mathvariant="bold">E</mi> <mo stretchy="true">→</mo> </mover> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mrow> <mn>4</mn> <mi>π</mi> <mi>ρ</mi> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>×</mo> <mover accent="true"> <mi mathvariant="bold">E</mi> <mo stretchy="true">→</mo> </mover> <mo>+</mo> <mfrac> <mn>1</mn> <mi>c</mi> </mfrac> <mfrac> <mrow> <mo>∂</mo> <mover accent="true"> <mi mathvariant="bold">B</mi> <mo stretchy="true">→</mo> </mover> </mrow> <mrow> <mo>∂</mo> <mi>t</mi> </mrow> </mfrac> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mover accent="true"> <mn mathvariant="bold">0</mn> <mo stretchy="true">→</mo> </mover> </mtd> </mtr> <mtr> <mtd> <mrow> <mo>∇</mo> <mo>ċ</mo> <mover accent="true"> <mi mathvariant="bold">B</mi> <mo stretchy="true">→</mo> </mover> </mrow> </mtd> <mtd> <mo>=</mo> </mtd> <mtd> <mn>0</mn> </mtd> </mtr> </mtable> </mrow> </mstyle> </math></p> +<h2 id="Ecuaciones_de_campo_de_Einstein">Ecuaciones de campo de Einstein</h2> +<p style="text-align: center;"><math> <mstyle displaystyle="true"> <mrow> <msub> <mi mathvariant="normal">R</mi> <mstyle scriptlevel="1"> <mrow> <mi>μ</mi> <mi>ν</mi> </mrow> </mstyle> </msub> <mo>-</mo> <mfrac> <mn>1</mn> <mn>2</mn> </mfrac> <msub> <mi>g</mi> <mstyle scriptlevel="1"> <mrow> <mi>μ</mi> <mi>ν</mi> </mrow> </mstyle> </msub> <mi mathvariant="normal">R</mi> <mo>=</mo> <mfrac> <mrow> <mn>8</mn> <mi>π</mi> <mi mathvariant="normal">G</mi> </mrow> <msup> <mi>c</mi> <mn>4</mn> </msup> </mfrac> <msub> <mi mathvariant="normal">T</mi> <mstyle scriptlevel="1"> <mrow> <mi>μ</mi> <mi>ν</mi> </mrow> </mstyle> </msub> </mrow> </mstyle> </math></p> diff --git a/files/es/mozilla/opciones_de_linea_de_comandos/index.html b/files/es/mozilla/opciones_de_linea_de_comandos/index.html new file mode 100644 index 0000000000..f6873fbb6c --- /dev/null +++ b/files/es/mozilla/opciones_de_linea_de_comandos/index.html @@ -0,0 +1,448 @@ +--- +title: Opciones de línea de comandos +slug: Mozilla/Opciones_de_linea_de_Comandos +tags: + - Administración + - Documentación + - Linea de Comandos + - Preguntas y Respuestas + - extensiones +translation_of: Mozilla/Command_Line_Options +--- +<p><span class="seoSummary">Las opciones de la línea de comandos se utilizan para especificar opciones de arranque para las aplicaciones de Mozilla.</span> Por ejemplo, es posible utilizar una opcion de la linea de comandos para saltearse el Administrador de Perfiles y abrir un perfil específico (en el caso de tener varios perfiles). También es posible controlar la manera en que las aplicaciones de Mozilla se inician, que componentes se abren inicialmente y que es lo que estos hacen cuando se abren. Esta página describe las opciones mas utilizadas y la manera de usarlas.</p> + +<h2 id="Syntax_Rules" name="Syntax_Rules">Reglas de Sintaxis</h2> + +<p>Primero vamos a describir las reglas de sintaxis que aplican a todas las opciones.</p> + +<ul> + <li>Los parámetros que contengan espacios deben ser encerrados en comillas dobles; por ejemplo, "Usuario Juan".</li> + <li>Al escribir los comandos, pueden usarse mayúsculas y minúsculas.</li> + <li>Al escribir los parámetros de los comandos, también pueden usarse mayúsculas y minúsculas (excepto en el caso de los nombres de perfil).</li> + <li>Espacios en blanco ( ) separan comandos y parámetros.</li> + <li>Cada opción de mensaje tiene la sintaxis <code><var>campo</var>=<var>valor</var></code>, por ejemplo: + <ul> + <li><code>to=</code><span class="nowiki"><code>foo@nowhere.net</code></span></li> + <li><code>subject=cool page</code></li> + <li><code>attachment=www.mozilla.org</code></li> + <li><code>attachment='<span class="nowiki">file:///c:/test.txt</span>'</code></li> + <li><code>body=check this page</code></li> + </ul> + </li> + <li>Separe con coma (,) múltiples optiones del mensaje, por ejemplo: <code>"<span class="nowiki">to=foo@nowhere.net,subject=cool page</span>"</code> . Antes o después de la coma no deben ir espacios ( ).</li> + <li>Para asignar múltiples valores a un campo, enciérrelos entre comillas sencillas ('), por ejemplo: <code>"<span class="nowiki">to='foo@nowhere.net,foo@foo.de',subject=cool page</span>"</code> .</li> +</ul> + +<h2 id="How_to_use_command_options" name="How_to_use_command_options">Usando las opciones de linea de comandos</h2> + +<p>Las opciones de linea de comando son introducidas posteriormente al comando para iniciar la aplicación. Algunas opciones tienen argumentos. Estos son añadidos como opciones de la linea de comandos. Algunas opciones tienen abreviaturas. Por ejemplo, la opción de linea de comandos "-editor" puede ser abreviada como "-edit". (Cuando las abreviaturas estan habilitada, tal y como esta expuesto mas abajo). En algunos casos sera necesario que los argumentos vayan entrecomillados. (Tal y como se puede contemplar el recuadro inferior.) Se pueden especificar muchas opciones de linea de comandos . Por lo general la sintaxis es como la que sigue:</p> + +<pre class="notranslate">application -option -option "argument" -option argument +</pre> + +<h3 id="Ejemplos">Ejemplos</h3> + +<p>Los suiguientes ejemplos muestran el uso del comando "-ProfileManager" , esta opción de linea de comando abre el gestor de perfiles de Firefox o Thunderbird:</p> + +<h4 id="Windows">Windows</h4> + +<p>Seleccione ejecutar en el menú de inicio y escriba:</p> + +<pre class="eval notranslate">firefox -ProfileManager +</pre> + +<h4 id="Mac_OS_X">Mac OS X</h4> + +<p>Vaya a Aplicaciones> Utilidades. Abra un emulador de terminal y tecleé:</p> + +<pre class="eval notranslate">cd /Applications/Firefox.app/Contents/MacOS +./firefox -ProfileManager +</pre> + +<h4 id="Linux">Linux</h4> + +<p>Abra un terminal y escriba:</p> + +<pre class="eval notranslate">cd <em>Thunderbird</em><var> installation directory</var> +./thunderbird -ProfileManager +</pre> + +<p>El ejemplo anterior invoca la opción de linea de comando"-ProfileManager" en el cliente de correo Mozilla Thunderbird.</p> + +<h2 id="User_Profile" name="User_Profile">User Profile</h2> + +<h3 id="-CreateProfile_profile_name" name="-CreateProfile_profile_name"><code>-CreateProfile <var>profile_name</var></code></h3> + +<p>Create a new profile in the default directory, but do not start application. The profile will be named <code><var>profile_name</var></code> in the profile manager. <var>profile_name</var> must not contain spaces ( ).</p> + +<pre class="eval notranslate">firefox -CreateProfile JoelUser +</pre> + +<h3 id="-CreateProfile_.22profile_name_profile_dir.22" name="-CreateProfile_.22profile_name_profile_dir.22"><code>-CreateProfile "<var>profile_name</var> <var>profile_dir</var>"</code></h3> + +<p>Creates a new profile in the <code><var>profile_dir</var></code> directory, but do not start application. The profile will be named <code>profile_name</code> in the profile manager. Note <code><var>profile_name</var></code> and <code><var>profile_dir</var></code> are quoted together, and are separated by exactly 1 space (as with the previous syntax, <code>profile_name</code> must not contain spaces).</p> + +<p>NOTE: <code><var>profile_dir</var></code> must not exist and you must not already have a profile called <code><var>profile_name</var></code>.</p> + +<pre class="eval notranslate">firefox -CreateProfile "JoelUser c:\internet\joelusers-moz-profile" +</pre> + +<h3 id="-ProfileManager_or_-P" name="-ProfileManager_or_-P"><code>-ProfileManager</code></h3> + +<p>Start with Profile Manager. Short form: <strong>-P</strong> without a profile name.</p> + +<h3 id="-P_.22profile_name.22" name="-P_.22profile_name.22"><code>-P "<var>profile_name</var>"</code></h3> + +<p>Bypass Profile Manager and launch application with the profile named <var>profile_name</var>. Useful for dealing with multiple profiles. Note <var>profile_name</var> is case sensitive. If you don't specify a profile name then the profile manager is opened instead. You must use an upper case P on Linux with versions older than 7.x, as there lower case invokes Purify mode (memory and leak detection). Other platforms accept both upper and lower case.</p> + +<pre class="eval notranslate">firefox -P "Joel User" +</pre> + +<h3 id="-profile_.22.2Fpath.2Fto.2Fprofile.22" name="-profile_.22.2Fpath.2Fto.2Fprofile.22"><code>-profile "<var>profile_path</var>"</code></h3> + +<p>Start with the profile with the given path. <strong>Firefox</strong>, <strong>Thunderbird</strong> and <strong>SeaMonkey2.x</strong> only.</p> + +<p><code>"profile_path"</code> can either be an absolute path (<code>"<var>/path/to/profile</var>"</code>) or a relative path <code>("<var>path/to/profile</var>"</code>).</p> + +<div class="note"><strong>Note: </strong>On Mac OS X specifying a relative path is not supported anymore from Firefox 4.0 and up due to a regression, see {{ bug(673955) }}.</div> + +<h3 id="-no-remote" name="-no-remote"><code>-no-remote</code></h3> + +<p>Allows multiple copies of application to be open at a time.</p> + +<pre class="eval notranslate">firefox -no-remote -P "Another Profile" +</pre> + +<div class="note"><strong>Note: </strong>Since Firefox 9, this does really mean what its name implies on all platforms, i.e. instances created with this parameter do not accept or send remote commands, see {{ bug(650078) }}. That means that such instances won't be re-used. Also when using this argument a new instance is created in any case.</div> + +<h3 id="-migration" name="-migration"><code>-migration</code></h3> + +<p>Start with Import Wizard.</p> + +<h3 id="-override_.2Fpath.2Fto.2Foverride.ini" name="-override_.2Fpath.2Fto.2Foverride.ini"><code>-override <em>/path/to/</em>override.ini</code></h3> + +<p>Load the specified <code>override.ini</code> file to override <code>application.ini</code> ({{ Source("browser/app/application.ini") }}). This can be used to suppress the Migration Wizard at startup by loading the following <code>override.ini</code>. <strong>Firefox</strong> only.</p> + +<pre class="eval notranslate">[XRE] +EnableProfileMigrator=0 +</pre> + +<h2 id="Browser" name="Browser">Browser</h2> + +<h3 id="-browser" name="-browser"><code>-browser</code></h3> + +<p>Start with the browser component. <strong>Firefox</strong> and <strong>SeaMonkey</strong> only.</p> + +<h3 id="-url_URL" name="-url_URL"><code>-url <var>URL</var></code></h3> + +<p>Open <var>URL</var> in a new tab or window, depend on the browser option. <code>-url</code> can be omitted. You may list multiple URLs, separated by spaces. <strong>Firefox</strong> and <strong>SeaMonkey</strong> only.</p> + +<div class="note"><strong>Note: </strong>When opening multiple URLs, Firefox always opens them as tabs in a new window.</div> + +<pre class="eval notranslate">firefox www.mozilla.com +firefox www.mozilla.com developer.mozilla.org +</pre> + +<h3 id="-private" name="-private"><code>-private</code></h3> + +<p>Opens Firefox in permanent private browsing mode. <strong>Firefox 3.6</strong> and later only.</p> + +<p>Not Applicable in Ubuntu for <strong>Firefox 20 </strong>and later.</p> + +<h3 id="-private-toggle" name="-private-toggle"><code>-private-window</code></h3> + +<p>Opens a new private browsing window in an existing instance of Firefox. <strong>Firefox 20</strong> and later only.</p> + +<h3 id="-private-toggle" name="-private-toggle"><code>-private-window URL</code></h3> + +<p>Open URL in a new private browsing window. If a private browsing window is already open, a new tab is opened in the existing window.<strong> Firefox 29 </strong>and later only. Does not work in <strong>Firefox 31</strong> on linux mint 17 - results in page being opened in non-private window.</p> + +<h3 id="-new-tab_URL" name="-new-tab_URL"><code>-new-tab <var>URL</var></code></h3> + +<p>Open <var>URL</var> in a new tab. <strong>Firefox</strong> and <strong>SeaMonkey2.x</strong> only.</p> + +<h3 id="-new-window_URL" name="-new-window_URL"><code>-new-window <var>URL</var></code></h3> + +<p>Open <var>URL</var> in a new window. <strong>Firefox</strong> and <strong>SeaMonkey2.x</strong> only.</p> + +<h3 id="-search_term" name="-search_term"><code>-search <var>term</var></code></h3> + +<p>Search <var>term</var> with your default search engine. <strong>Firefox</strong> and <strong>SeaMonkey 2.1</strong> and later only.</p> + +<h3 id="-preferences" name="-preferences"><code>-preferences</code></h3> + +<p>Open Options/Preferences window. <strong>Firefox</strong> and <strong>SeaMonkey2.x</strong> only.</p> + +<h3 id="-setDefaultBrowser" name="-setDefaultBrowser"><code>-setDefaultBrowser</code></h3> + +<p>Set the application as the default browser. <strong>Firefox</strong> only.</p> + +<h2 id="Mail.2FNews" name="Mail.2FNews">Mail/News</h2> + +<h3 id="-mail" name="-mail"><code>-mail</code></h3> + +<p>Start with the mail client. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p> + +<h3 id="-news_news_URL" name="-news_news_URL"><code>-news</code> <var>news_URL</var></h3> + +<p>Start with the news client. If <var>news_URL</var> (optional) is given, open the specified newsgroup. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p> + +<pre class="eval notranslate">thunderbird -news <span class="nowiki">news://server/group</span> +</pre> + +<h3 id="-compose_message_options" name="-compose_message_options"><code>-compose <var>message_options</var></code></h3> + +<p>Start with mail composer. See <a href="#Syntax_Rules">syntax rules</a>. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p> + +<pre class="eval notranslate">thunderbird -compose "<span class="nowiki">to=foo@nowhere.net</span>" +</pre> + +<h3 id="-addressbook" name="-addressbook"><code>-addressbook</code></h3> + +<p>Start with address book. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p> + +<h3 id="-options" name="-options"><code>-options</code></h3> + +<p>Open Options/Preferences window. <strong>Thunderbird</strong> only.</p> + +<h3 id="-offline" name="-offline"><code>-offline</code></h3> + +<p>Start with the offline mode. <strong>Thunderbird</strong> and <strong>SeaMonkey</strong> only.</p> + +<h3 id="-setDefaultMail" name="-setDefaultMail"><code>-setDefaultMail</code></h3> + +<p>Set the application as the default email client. <strong>Thunderbird</strong> only.</p> + +<h2 id="Calendar" name="Calendar">Calendar</h2> + +<h3 id="-calendar" name="-calendar"><code>-calendar</code></h3> + +<p>Start with the calendar client. <strong>Sunbird</strong> only.</p> + +<h3 id="-subscribe_URL_or_-url_URL" name="-subscribe_URL_or_-url_URL"><code>-subscribe <var>URL</var></code> or <code>-url <var>URL</var></code></h3> + +<p>Subscribe to the given <var>URL</var>. <strong>Sunbird</strong> only.</p> + +<h3 id="-showdate_date" name="-showdate_date"><code>-showdate <var>date</var></code></h3> + +<p>Show your schedule of the given <var>date</var>. <strong>Sunbird</strong> only.</p> + +<pre class="eval notranslate">sunbird -showdate 08/04/2008 +</pre> + +<h2 id="Other_Components" name="Other_Components">Other Components</h2> + +<h3 id="-editor_URL_or_-edit_URL" name="-editor_URL_or_-edit_URL"><code>-editor <var>URL</var></code> or <code>-edit <var>URL</var></code></h3> + +<p>Start with editor (Composer) for the given <var>URL</var> (where <var>URL</var> is optional). <strong>SeaMonkey</strong> only.</p> + +<pre class="eval notranslate">seamonkey -edit www.mozilla.org +</pre> + +<h3 id="-jsconsole" name="-jsconsole"><code>-jsdebugger</code></h3> + +<p>Start application with <a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a> (formerly Browser Debugger). That is different to Venkman debugger (see option -venkman).</p> + +<h3 id="-jsconsole" name="-jsconsole"><br> + <code>-jsconsole</code></h3> + +<p>Start application with the <a href="/en-US/docs/Error_Console" title="Error_Console">Error Console</a>.</p> + +<div class="warning"> +<p>The Error Console is deprecated in Firefox, and is now only made available if you set the <code>devtools.errorconsole.enabled</code> preference to <code>true</code>. Use the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console </a>instead, for web content, or the <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browser Console</a> for chrome content.</p> + +<p>Beginning with Firefox 28, -jsconsole will start Firefox with Browser Console instead.</p> +</div> + +<h3 id="-inspector_URL" name="-inspector_URL"><code>-inspector <var>URL</var></code></h3> + +<p>Start with the <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>, if installed, and inspect the given <var>URL</var> (where <var>URL</var> is optional).</p> + +<h3 id="-venkman" name="-venkman"><code>-venkman</code></h3> + +<p>Start with the JavaScript debugger, <a href="/en-US/docs/Venkman" title="Venkman">Venkman</a>, if installed.</p> + +<h3 id="-venkman" name="-venkman"><code>-purgecaches</code></h3> + +<p>Gecko (layout engine) has a javascript cache, which is not reset on startup. This clears it.</p> + +<h3 id="-chat"><code>-chat</code></h3> + +<p>Start with the IRC client, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/16">ChatZilla</a>, if installed.</p> + +<h2 id="XULRunner" name="XULRunner">XULRunner</h2> + +<h3 id="-app_.2Fpath.2Fto.2Fapplication.ini" name="-app_.2Fpath.2Fto.2Fapplication.ini"><code>-app <em>/path/to/</em>application.ini</code></h3> + +<p>Start a new process running the <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> application at <em>path/to</em>. Also works with Firefox version 3 and above.</p> + +<h3 id="--register-global"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--register-global</span></h3> + +<p><span style="line-height: 21px;">Registers XULRunner on the system for all users. Must be run as admin / root.</span></p> + +<h3 id="--register-user"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--register-user</span></h3> + +<p><span style="line-height: 21px;">Registers XULRunner for a single user.</span></p> + +<h3 id="--unregister-global"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--unregister-global</span></h3> + +<p><span style="line-height: 21px;">Unregisters XULRunner for all users.</span></p> + +<h3 id="--unregister-user"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--unregister-user</span></h3> + +<p><span style="line-height: 21px;">Unregisters XULRunner for a single user.</span></p> + +<h3 id="--install-app_pathtomyapplication.xpixulapp"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">--install-app path/to/myapplication.(xpi|xulapp)</span></h3> + +<p><span style="line-height: 1.572;">Installs the XULRunner application at path/to onto the system. Applications are installed into the default location for your system (program files|Applications|usr/lib) at vendorname/applicationName. </span><span style="line-height: 1.572;"> Applications may be uninstalled per usual methods for your system.</span></p> + +<pre class="eval notranslate" style="margin-top: 0px; margin-bottom: 1.286em; font-size: 14px;">"C:\Program Files\Mozilla XULRunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "C:\Users\Billdo\Desktop\myapplication.xpi"</pre> + +<pre class="notranslate"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">/opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/Desktop/myapplication.xulapp</span></pre> + +<pre class="notranslate"><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;"></span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">/Library/Frameworks/XUL.framework/xulrunner-bin --install-app ~/Desktop/myapplication.xpi</span></pre> + +<h2 id="Chrome" name="Chrome">Chrome</h2> + +<h3 id="-chrome_chrome_URL" name="-chrome_chrome_URL"><code>-chrome <var>chrome_URL</var></code></h3> + +<p>Load the specified chrome.</p> + +<pre class="eval notranslate">firefox -chrome <a class="external" rel="freelink">chrome://inspector/content</a> +</pre> + +<h3 id="-register_chrome_URL" name="-register_chrome_URL"><code>-register <var>chrome_URL</var></code></h3> + +<p>Register the specified chrome, but do not start application.</p> + +<h2 id="Add-ons" name="Add-ons">Add-ons</h2> + +<p>{{ gecko_minversion_note("1.9.2", "-install-global-extension and -install-global-theme have been removed from Gecko 1.9.2 and upwards.") }}</p> + +<h3 id="-install-global-extension_.2Fpath.2Fto.2Fextension" name="-install-global-extension_.2Fpath.2Fto.2Fextension"><code>-install-global-extension <var>/path/to/extension</var></code></h3> + +<p>Installs the extension into the application directory. The parameter is the path to the extension. You must have administrative privileges.</p> + +<h3 id="-install-global-theme_.2Fpath.2Fto.2Ftheme" name="-install-global-theme_.2Fpath.2Fto.2Ftheme"><code>-install-global-theme <var>/path/to/theme</var></code></h3> + +<p>Same as above, but for themes. You must have administrative privileges.</p> + +<div class="note"> +<p><strong>Note: </strong>Since Firefox 2.0.0.7, use of the <code>-install-global-extension</code> and <code>-install-global-theme</code> command line arguments have been restricted to only allow installing add-ons that are on local disks or mapped drives. Installing from a network share directly will no longer succeed.</p> +</div> + +<h3 id="-safe-mode" name="-safe-mode"><code>-safe-mode</code></h3> + +<p>Launches the application with all extensions disabled, for that launch only. (Extensions are not loaded, but are not permanently disabled in the Extension Manager data source).</p> + +<h2 id="Locale" name="Locale">Locale</h2> + +<h3 id="-UILocale_locale" name="-UILocale_locale"><code>-UILocale <var>locale</var></code></h3> + +<p>Start with <var>locale</var> resources as UI Locale.</p> + +<pre class="eval notranslate">firefox -UILocale en-US +</pre> + +<h2 id="Remote_Control" name="Remote_Control">Remote Control</h2> + +<h3 id="-remote_remote_command" name="-remote_remote_command"><code>-remote <var>remote_command</var></code></h3> + +<p>Execute <var>remote_command</var> in an already running application process (see <a class="external" href="http://www.mozilla.org/unix/remote.html">remote control</a>).</p> + +<pre class="eval notranslate">firefox -remote "openURL(www.mozilla.org, new-tab)" +</pre> + +<h2 id="Miscellaneous" name="Miscellaneous">Miscellaneous</h2> + +<h3 id="-tray" name="-tray"><code><strong>-tray</strong></code></h3> + +<p>Start application minimized to system tray. Useful with autorun.</p> + +<h3 id="-silent" name="-silent"><code>-silent</code></h3> + +<p>Don't open default windows. Useful with those command-line arguments that open their own windows but don't already prevent default windows from opening. <strong>Firefox</strong>, <strong>Thunderbird3.x</strong> and <strong>SeaMonkey2.x</strong> only.</p> + +<h3 id="-console" name="-console"><code>-console</code></h3> + +<p>Start application with a debugging console. Note: Windows only.</p> + +<div class="note"> +<p>If you would like the console messages to appear in the console you used to launch the application, you can use the <a href="https://github.com/matthewkastor/Redirector" title="https://github.com/matthewkastor/Redirector">Gecko Console Redirector</a>. Precompiled binaries are available in the zipped archive <a href="https://github.com/matthewkastor/Redirector/archive/master.zip" title="https://github.com/matthewkastor/Redirector/archive/master.zip">https://github.com/matthewkastor/Redirector/archive/master.zip</a> under <code>Redirector-master\Gecko\Console Redirector\bin\Release</code> Copy all the dll's and the exe to wherever you want. Then run <code>Console Redirector.exe /?</code></p> +</div> + +<h3 id="-h_or_-help_or_-.3F" name="-h_or_-help_or_-.3F"><code>-h</code> or <code>-help</code> or <code>-?</code></h3> + +<p>Print the list of all available command line options. Note that on Windows this only works with a redirection such as <code><span class="nowiki">|more</span></code> ({{ Bug(355889) }}). This option is available only in a command console.</p> + +<h3 id="-v_or_-version" name="-v_or_-version"><code>-v</code> or <code>-version</code></h3> + +<p>Print application version. Note that on Windows this only works with a redirection such as <code><span class="nowiki">|more</span></code> ({{ Bug(355889) }}). This option is available only in a command console.</p> + +<h3 id="-osint" name="-osint"><code>-osint</code></h3> + +<p>Tells the application that it is being launched by the OS shell. This should not be specified unless the caller provides all of the functionality provided by the OS shell when launching the application ({{ Bug(384384) }}).</p> + +<h3 id="-requestPending" name="-requestPending"><code>-requestPending</code></h3> + +<p>Tells the application that there will be a Windows DDE request to open the same url specified on the command line. This should not be specified unless the caller provides all of the functionality provided by the OS shell when launching the application ({{ Bug(354005) }}).</p> + +<h3 id="X11_options">X11 options</h3> + +<p>These options are only available for an application build for and running atop the X11/X.org display and window system to be found on Linux and other Unix-based systems.</p> + +<h4 id="--displayDISPLAY">--display=DISPLAY</h4> + +<p>Set the X display to use</p> + +<h4 id="--classWM_CLASS">--class=WM_CLASS</h4> + +<p>Set the WM_CLASS resource class of the X11 windows created by the application.</p> + +<h4 id="--sync">--sync</h4> + +<p>Make X calls synchronous</p> + +<h4 id="--g-fatal-warnings">--g-fatal-warnings</h4> + +<p>Make all warnings fatal</p> + +<h2 id="Other_options_need_to_be_documented" name="Other_options_need_to_be_documented">Other options need to be documented</h2> + +<ul> + <li><code>-print-xpcom-dir</code></li> + <li><code>-print-xpcom-dirlist</code></li> + <li><code>-kill</code></li> + <li><code>-killAll</code></li> + <li><code>-f</code></li> + <li><code>-ftimeout</code></li> + <li><code>-fwait</code></li> + <li><code>-unsetDefaultMail</code></li> + <li><code>-foreground</code></li> + <li><code>-new-instance</code></li> + <li>GTK options</li> +</ul> + +<h2 id="References" name="References">References</h2> + +<ul> + <li><a href="/en-US/docs/Chrome/Command_Line" title="Chrome/Command_Line">Chrome: Command Line</a></li> + <li><a class="external" href="http://www-archive.mozilla.org/quality/browser/front-end/testcases/cmd-line/">Test Documentation for Command-line Features</a> (mozilla.org)</li> + <li>{{ Source("toolkit/xre/nsAppRunner.cpp") }}</li> + <li>{{ Source("browser/components/nsBrowserContentHandler.js") }}</li> + <li>{{ Source("suite/browser/nsBrowserContentHandler.js") }}</li> + <li>{{ Source("mail/components/nsMailDefaultHandler.js") }}</li> + <li><a class="link-https" href="https://wiki.mozilla.org/Installer:Command_Line_Arguments">Installer command line options</a></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Ben Goodger, Steffen Wilberg, Seth Spitzer, Daniel Wang</li> + <li>Copyright Information: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> +</ul> +</div> + +<p><br> + ciones</p> diff --git a/files/es/mozilla/participating_in_the_mozilla_project/index.html b/files/es/mozilla/participating_in_the_mozilla_project/index.html new file mode 100644 index 0000000000..846070a7e3 --- /dev/null +++ b/files/es/mozilla/participating_in_the_mozilla_project/index.html @@ -0,0 +1,106 @@ +--- +title: Participating in the Mozilla project +slug: Mozilla/Participating_in_the_Mozilla_project +tags: + - bug-840092 +translation_of: Mozilla/Participating_in_the_Mozilla_project +--- +<p>Si usted esta interesado en ayudar a reparar bugs y trabajar de otra manera con el codigo subyacente de la plataforma de Mozilla, este es el lugar para encontrar la documentación <span class="short_text" id="result_box" lang="es"><span class="hps">que</span> <span class="hps">te orientará</span> <span class="hps">en la dirección correcta</span></span>.</p> +<table class="mainpage-table"> + <tbody> + <tr> + <td> + <h2 id="Temas_Generales">Temas Generales</h2> + <dl> + <dt> + <a class="internal" href="/En/Developer_Guide" title="en/Mozilla developer guide">Guía para desarrolladores de Mozilla</a></dt> + <dd> + Consejos de desarrollo y guías para contribuir al código base de Mozilla.</dd> + <dt> + <a class="internal" href="/En/Developer_Guide/Source_Code" title="en/Mozilla source code">Código fuente de Mozilla</a></dt> + <dd> + Información sobre cómo obtener el código de Mozilla, ya se mediante descarga o mediante el control de versiones, y cómo obtener el código en el árbol.</dd> + <dt> + <a class="internal" href="/En/Developer_Guide/Build_Instructions" title="En/Build Documentation">Construir </a><a class="internal" href="/En/Developer_Guide/Build_Instructions" title="En/Build Documentation">Documentación </a></dt> + <dd> + Información sobre cómo contruir los proyectos de Mozilla, como Firefox y Thunderbird. <em>Esta página necesita limpieza.</em></dd> + <dt> + <a class="internal" href="/En/The_Mozilla_platform" title="En/The Mozilla platform">La plataforma de Mozilla</a></dt> + <dd> + Información sobre la plataforma de Mozilla, incluyendo la totalidad de su APIs y tecnologías, así como la forma de utilizarlos en sus propios proyectos.</dd> + <dt> + <a class="internal" href="/Project:en/How_to_Help" title="Project:en/How to Help">Documentación de Mozilla</a></dt> + <dd> + Ayudanos a crear y mejorar nuestra documentación para Mozilla y la Web Abierta.</dd> + <dt> + <a class="internal" href="/En/Debugging" title="en/Debugging">Depuración</a></dt> + <dd> + Consejos útiles y directrices a seguir para depurar el código de Mozilla.</dd> + <dt> + <a class="internal" href="/en/QA" title="en/QA">Aseguramiento de la</a><a class="internal" href="/en/QA" title="en/QA"> calidad</a></dt> + <dd> + Información sobre pruebas y bug tracking.</dd> + <dt> + <a class="internal" href="/en/Localization" title="En/Localization">Localización</a></dt> + <dd> + Documentación sobre tradución de los proyectos de Mozilla, documentación y otros contendos en multiples idiomas.</dd> + <dt> + <a class="internal" href="/en/Glossary" title="En/Glossary">Glosario</a></dt> + <dd> + Terminos y definiciones usado por los hackers de Mozilla.</dd> + </dl> + <h2 id="Páginas_del_proyecto">Páginas del proyecto</h2> + <dl> + <dt> + <a class="internal" href="/en/Thunderbird" title="en/Thunderbird">Thunderbird</a></dt> + <dd> + Cliente de correo electrónico de Mozilla</dd> + <dt> + <a class="internal" href="/en/Calendar" title="en/Calendar">Sunbird</a></dt> + <dd> + Proyecto de calendario de Mozilla</dd> + </dl> + </td> + <td> + <h2 id="Herramientas">Herramientas</h2> + <dl> + <dt> + <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd> + <a class="internal" href="/en/Bugzilla" title="En/Bugzilla">Bugzilla</a> es la base de datos utilizado para rastrear temas para proyectos de Mozilla.</dd> + <dd> + <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dd> + <dd> + Examinar y buscar el repositorio de código fuente de Mozilla en la web.</dd> + <dt> + <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd> + <a class="internal" href="/en/Bonsai" title="En/Bonsai">Bonsai</a> la herramienta que permite saber quíen cambió qué archivo en el repositorio, y cuando lo hicieron.</dd> + <dd> + (Esto es para Firefox 3.0 en adelante.)</dd> + <dt> + <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> + <dd> + <a class="internal" href="/en/Tinderbox" title="En/Tinderbox">Tinderbox</a> muestra el estado de el árbol (si es o no actualmente se genera correctamente). Comprueba esto antes del registro de salida, para asegurarse de que está funcionando con el árbol de trabajo.</dd> + <dt> + <a class="internal" href="/en/Crash_reporting" title="en/Crash reporting">Seguimiento de accidente</a></dt> + <dd> + Informacion sobre el sistema de notificaciones de accidente <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a>.</dd> + <dt> + <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Seguimiento del rendimiento</a></dt> + <dd> + Ver la información del rendimiento para los proyectos de Mozilla.</dd> + <dt> + <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Foros para Desarroladores </a></dt> + <dd> + Una lista de temas especificos de los foros de discusión donde se pueda hablar de los temas de desarrollo de Mozilla.</dd> + </dl> + </td> + </tr> + <tr> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/es/mozilla/persona/branding/index.html b/files/es/mozilla/persona/branding/index.html new file mode 100644 index 0000000000..5b8b5255ea --- /dev/null +++ b/files/es/mozilla/persona/branding/index.html @@ -0,0 +1,42 @@ +--- +title: Recursos de marca +slug: Mozilla/Persona/branding +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +<h2 id="Inicia_sesión_con_los_botones_de_Persona">Inicia sesión con los botones de Persona</h2> +<h3 id="Imágenes">Imágenes</h3> +<p>Los botones de "Inicio de sesión" están disponibles en tres versiones, y tres colores:</p> +<table> + <thead> + <tr> + <th scope="row"> </th> + <th scope="col">Iniciar sesión con tu correo</th> + <th scope="col">Iniciar sesión con Persona</th> + <th scope="col">Iniciar sesión</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Negro</th> + <td><img alt="" src="/files/3955/email_sign_in_black.png" style="width: 202px; height: 25px;"></td> + <td><img alt="" src="/files/3961/persona_sign_in_black.png" style="width: 185px; height: 25px;"></td> + <td><img alt="" src="/files/3967/plain_sign_in_black.png" style="width: 95px; height: 25px;"></td> + </tr> + <tr> + <th scope="row">Azul</th> + <td><img alt="" src="/files/3957/email_sign_in_blue.png" style="width: 202px; height: 25px;"></td> + <td><img alt="" src="/files/3963/persona_sign_in_blue.png" style="width: 185px; height: 25px;"></td> + <td><img alt="" src="/files/3969/plain_sign_in_blue.png" style="width: 95px; height: 25px;"></td> + </tr> + <tr> + <th scope="row">Red</th> + <td><img alt="" src="/files/3959/email_sign_in_red.png" style="width: 202px; height: 25px;"></td> + <td><img alt="" src="/files/3965/persona_sign_in_red.png" style="width: 185px; height: 25px;"></td> + <td><img alt="" src="/files/3971/plain_sign_in_red.png" style="width: 95px; height: 25px;"></td> + </tr> + </tbody> +</table> +<h3 id="Basados_en_CSS">Basados en CSS</h3> +<p><a href="http://sawyerhollenshead.com/" title="http://sawyerhollenshead.com/">Sawyer Hollenshead</a> ha creado un conjunto de excelentes botones basados en CSS. <a href="/files/3973/persona-css-buttons.zip" title="/files/3973/persona-css-buttons.zip">Descarga (.zip)</a></p> +<h2 id="Más_información">Más información</h2> +<p>Puedes encontrar más información sobre el diseño visual de Persona en <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">manual de estilo de Sean Martell</a>.</p> diff --git a/files/es/mozilla/persona/browser_compatibility/index.html b/files/es/mozilla/persona/browser_compatibility/index.html new file mode 100644 index 0000000000..f9e916c23c --- /dev/null +++ b/files/es/mozilla/persona/browser_compatibility/index.html @@ -0,0 +1,73 @@ +--- +title: Compatibilidad de navegadores +slug: Mozilla/Persona/Browser_compatibility +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +<h2 id="Navegadores_compatibles">Navegadores compatibles</h2> +<p><strong>Persona</strong> está desarrollado, probado y es compatible con los siguientes navegadores. Gracias a la biblioteca JavaScript multiplataforma de <em>Persona</em>, los usuarios no necesitan complementos para poderlo usar.</p> +<table> + <tbody> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Navegadores de escritorio</strong></th> + </tr> + <tr> + <th scope="row"><strong>Internet Explorer</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup></td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Actual estable, Beta, Aurora, Nightly, y versiones ESR<br> + Versión anterior estable</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Última versión estable</td> + </tr> + <tr> + <th scope="row"><strong>Safari</strong></th> + <td colspan="2" style="background-color: #8ae234;">Última versión estable</td> + </tr> + <tr> + <th scope="row"><strong>Opera</strong></th> + <td colspan="2" style="background-color: #8ae234;">Última versión estable<sup>‡</sup></td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Navegadores en iOS</strong></th> + </tr> + <tr> + <th scope="row"><strong>Mobile Safari</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Navegadores en Android</strong></th> + </tr> + <tr> + <th scope="row"><strong>Navegador predeterminado</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.x — 4.x</td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Actual estable, Beta, Aurora, y versiones<br> + Versión anterior estable</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Última versión estable</td> + </tr> + </tbody> +</table> +<p><sup>*</sup>: En Windows XP. <sup>†</sup>: En Windows Vista y Windows 7. <sup>‡</sup>: Siempre que se pueda.</p> +<h2 id="Navegadores_no_compatibles">Navegadores no compatibles</h2> +<ul> + <li>No son compatibles las versiones 6.0 y 7.0 de Internet Explorer. Se pedirá a los usuarios actualizar su navegador.</li> + <li>Google Chrome Frame no es compatible y no funcionará. Es posible que se añada más adelante (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Problema #796</a>).</li> + <li>Los navegadores de terceros en iOS no son compatibles y no funcionarán. Es posible que se añada más adelante (<a href="https://github.com/mozilla/browserid/issues/1870" title="https://github.com/mozilla/browserid/issues/1870">Problema #1870</a>, <a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Problema #2034</a>).</li> +</ul> +<h2 id="Otros_navegadores">Otros navegadores</h2> +<p>Aunque no se indique explicitamente, cualquier navegador que incluya tanto {{ domxref("window.postMessage()") }} y {{ domxref("Storage", "localStorage") }} debería funcionar. Estas APIs están disponibles en la mayoría de los navegadores desde marzo de 2010.</p> +<h2 id="Problemas_conocidos">Problemas conocidos</h2> +<ul> + <li>Los navegadores deben aceptar cookies de terceros para una funcionalidad completa (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Problema #1352</a>).</li> + <li>Los usuarios de Android 2.x que no tengan un navegador predeterminado puede que no sean capaces de iniciar sesión (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Problema #1854</a>).</li> + <li>Cuando se fuerza a emular IE8, Internet Explorer 9 puede que falle en iniciar sesión en algunos sitios.</li> +</ul> diff --git a/files/es/mozilla/persona/faq/index.html b/files/es/mozilla/persona/faq/index.html new file mode 100644 index 0000000000..b015db56ef --- /dev/null +++ b/files/es/mozilla/persona/faq/index.html @@ -0,0 +1,59 @@ +--- +title: Preguntas más frecuentes +slug: Mozilla/Persona/FAQ +tags: + - Persona +translation_of: Archive/Mozilla/Persona/FAQ +--- +<h3 id="¿Cuál_es_la_diferencia_entre_Mozilla_Persona_y_BrowserID">¿Cuál es la diferencia entre Mozilla Persona y BrowserID?</h3> +<p>Persona es una implementación completa de un nuevo sistema de acceso distribuido de Mozilla.</p> +<p>BrowserID es el protocolo abierto que rige el funcionamiento de Persona.</p> +<p>Como una analogía: Persona permite a los usuarios iniciar sesión en los sitios que implementan BrowserID. De la misma manera, Firefox permite a los usuarios navegar por la web implementando HTTP.</p> +<h3 id="¿Cómo_se_compara_Persona_con_OpenID">¿Cómo se compara Persona con OpenID?</h3> +<p>Persona y OpenID tienen objetivos muy similares y una arquitectura similar. Ambos sistemas reducen el número de contraseñas que un usuario necesita, y ambos están diseñados para ser descentralizados. Esto quiere decir que cualquier dominio puede presentarse como proveedor de identidad sin depender de una autoridad central.</p> +<p>A pesar de estas similitudes, Persona es más fácil de usar y más fácil de añadir a los sitios web. Persona también protege mejor la privacidad de los usuarios. En concreto:</p> +<dl> + <dt> + Persona es más fácil para los usuarios</dt> + <dd> + Persona identifica los usuarios basándose en las direcciones de correo electrónico, que los usuarios ya conocen, comprenden y asocian naturalmente con las identidades en línea. Con OpenID, los usuarios se ven obligados a aprender un nuevo nombre de usuario: una URL que no es intuitiva.</dd> + <dd> + Iniciar sesión mediante Persona también es fácil: después de haberse configurado la primera vez, sólo son necesarios 2 clics para autenticarse.</dd> + <dt> + Persona es más fácil para los desarrolladores</dt> + <dd> + Persona tiene una {{ domxref("navigator.id", "API simple") }} que sólo toma una tarde para entender y empezar a usar.</dd> + <dd> + Las identidades Persona <em>son</em> direcciones de correo electrónico, por lo tanto, los sitios web no necesitan pedir a los usuarios más información de contacto durante el registro.</dd> + <dd> + Dado que los usuarios conocen y entienden su dirección de correo electrónico, los desarrolladores no tienen que construir páginas complejas con botones de inicio de sesión para todos los proveedores populares de OpenID.</dd> + <dt> + Persona protege mejor la privacidad del usuario</dt> + <dd> + Por su diseño, OpenID permite a los proveedores de identidad rastrear a sus usuarios en la web: cada vez que un usuario inicia sesión en un sitio web, el navegador se redireccionado al proveedor de identidad del usuario, y luego se redirecciona otra vez al sitio. Estas redirecciones exponen completamente al proveedor de identidad la información de a donde va el usuario.</dd> + <dd> + En contraste, el protocolo BrowserID nunca filtra información de seguimiento hacia el proveedor de identidad. Más bien, se comporta de una manera similar al de una tarjeta de identificación: los usuarios obtienen credenciales firmadas de sus proveedores de identidad, que se pueden presentar a los sitios web como prueba de identidad. Los sitios web pueden comprobar la validez de las credenciales sin tener que revelar la identidad de un usuario a su proveedor de identidad.</dd> +</dl> +<h3 id="¿Por_qué_Persona_requiere_JavaScript">¿Por qué Persona requiere JavaScript?</h3> +<p>Persona requiere JavaScript, pero algunos usuarios optan por bloquear selectivamente desactivar el JavaScript mediante el uso de complementos del navegador como NoScript. Muchos de estos usuarios están preocupados por las implicaciones de privacidad de tener habilitado JavaScript, ya que este se utiliza a menudo para rastrear a los visitantes a través de sitios web.</p> +<p>Sin embargo, en el caso de Persona, el JavaScript se utiliza realmente para mejorar la privacidad del usuario, ya que permite al navegador realizar operaciones criptográficas en el lado del cliente. Al hacer estas operaciones en el cliente, Persona evita la necesidad de almacenar las claves privadas en otro lugar que no sea en el propio navegador del usuario.</p> +<h3 id="¿Persona_garantiza_la_obtención_de_una_dirección_de_correo_electrónico_válida_para_mis_usuarios">¿Persona garantiza la obtención de una dirección de correo electrónico válida para mis usuarios?</h3> +<h3 id="sect1"> </h3> +<p>No, Persona sólo garantiza la asociación del usuario con una dirección. Al igual que con cualquier dirección de correo electrónico en cualquier sistema de inicio de sesión, es posible que la dirección ya no funcione o no sea comprobada regularmente por el usuario. Para la mayoría de los usuarios, la dirección de correo electrónico será funcional.</p> +<h3 id="¿Como_verifica_Persona_la_asociación_de_un_usuario_con_una_dirección">¿Como verifica Persona la asociación de un usuario con una dirección?</h3> +<p>Persona le hace una petición al dominio de la dirección, y este es libre de verificar sus usuarios de la manera que elija. Si el dominio no es un proveedor de identidad nativo, y por tanto, no puede verificar sus propios usuarios, el navegador solicita la verificación al proveedor de identidad de reserva (<em>fallback</em>) de Persona a <a href="https://login.persona.org" title="https://login.persona.org">https://login.persona.org</a>. Antes de certificar la identidad de un usuario, el proveedor de identidad de reserva prueba la dirección, enviándole un correo electrónico, y pídiendole al usuario que haga clic en el enlace que éste contiene.</p> +<h3 id="¿Cómo_manejar_la_recuperación_de_la_cuenta_si_los_usuarios_pierden_el_control_de_su_correo_electrónico">¿Cómo manejar la recuperación de la cuenta si los usuarios pierden el control de su correo electrónico?</h3> +<p>La mejor manera de hacerlo es permitir a los usuarios añadir una dirección de correo electrónico secundaria en su cuenta. Ver <a href="/en-US/docs/Persona/The_implementor_s_guide/Adding_extra_email_addresses_with_Persona" title="/en-US/docs/Persona/The_implementor_s_guide/Adding_extra_email_addresses_with_Persona">"Adición de direcciones de correo electrónico adicionales con Persona"</a>.</p> +<h3 id="¿Puedo_alojar_yo_mismo_include.js_o_la_tengo_que_incluir_desde_httpslogin.persona.org">¿Puedo alojar yo mismo include.js, o la tengo que incluir desde <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>?</h3> +<p>El código a <code>include.js</code> aún está sujeto a cambios. No se recomienda que se aloje en ningún servidor propio.</p> +<h3 id="¿Puedo_verificar_las_afirmaciones_a_nivel_local_o_tengo_que_usar_el_servicio_de_verificación_remoto">¿Puedo verificar las afirmaciones a nivel local, o tengo que usar el servicio de verificación remoto?</h3> +<p>Para garantizar la privacidad de los usuarios, es importante que las aserciones de identidad se verifiquen a nivel local, y no con el servicio de verificación remota. Sin embargo, el formato de las afirmaciones aún está sujeta a cambios, por lo que la verificación local aún no es recomendable. Aun con la verificación remota, Persona protege al usuario de seguimiento con su proveedor de identidad.</p> +<p>Una vez que el protocolo se haya estabilizado, las bibliotecas estarán disponibles para simplificar la verificación local. Siga el <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">Blog de Identity</a> para saber cuándo es recomendable la verificación local.</p> +<h3 id="¿Qué_consejos_hay_para_la_migración_de_los_usuarios_que_actualmente_utilizan_otros_métodos_de_inicio_de_sesión">¿Qué consejos hay para la migración de los usuarios que actualmente utilizan otros métodos de inicio de sesión?</h3> +<p>A pesar de los beneficios de Persona, nunca es fácil mover todos los usuarios a un nuevo sistema de inicio de sesión. Convenientemente, el enfoque que hace Persona con las direcciones de correo electrónico hace que sea fácil de usar junto con los sistemas de acceso ya existentes, por lo que no hace falta cambiar a todos a la vez.</p> +<p>Un enfoque particular de baja fricción es sugerir Persona a usuarios que no recuerden su contraseña. En lugar de restablecer las contraseñas, los usuarios sólo tienen que acceder con Persona.</p> +<h3 id="¿Como_he_de_señalar_que_Sign_In_también_permite_la_creación_de_cuentas_nuevas">¿Como he de señalar que "Sign In" también permite la creación de cuentas nuevas?</h3> +<h3 id="¿Cómo_puedo_obtener_información_sobre_cambios_importantes_en_BrowserID_como_APIs_nuevas_u_obsoletas">¿Cómo puedo obtener información sobre cambios importantes en BrowserID, como APIs nuevas u obsoletas?</h3> +<p>Cuando un cambio que rompe la compatibilidad hacia atrás o una función queda obsoleta, se anuncia a la lista de correo <a href="https://mail.mozilla.org/listinfo/persona-notices" title="https://mail.mozilla.org/listinfo/persona-notices">persona-notices</a>. Suscríbete.</p> +<p>Para obtener información sobre las nuevas funciones y mejoras, sigue el <a href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">blog del equipo identity</a>.</p> +<p>Para la discusión de desarrollo, suscríbete a la lista de correo <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">dev-identity</a>.</p> diff --git a/files/es/mozilla/persona/glosario/index.html b/files/es/mozilla/persona/glosario/index.html new file mode 100644 index 0000000000..41f36a0f20 --- /dev/null +++ b/files/es/mozilla/persona/glosario/index.html @@ -0,0 +1,67 @@ +--- +title: Glosario +slug: Mozilla/Persona/Glosario +translation_of: Archive/Mozilla/Persona/Glossary +--- +<h2 id="Persona_vs._BrowserID">"Persona" vs. "BrowserID"</h2> +<p><span id="result_box" lang="es"><span class="hps">Persona</span> <span class="hps">es una implementación completa</span> <span class="hps">de un nuevo</span> <span class="hps">sistema de acceso</span> <span class="hps">distribuido</span><span>, desde</span> <span class="hps">Mozilla.</span></span></p> +<p><span id="result_box" lang="es"><span class="hps">BrowserID</span> <span class="hps">es el</span> <span class="hps">protocolo abierto</span> <span class="hps">que rige</span> <span class="hps">cómo funciona</span> <span class="hps">Persona.</span></span></p> +<h2 id="Terminología_Común_De_Persona"><span class="short_text" id="result_box" lang="es"><span class="hps">Terminología</span> <span class="hps">Común</span></span> De Persona</h2> +<dl> + <dt> + BrowserID</dt> + <dd> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">protocolo</span> <span class="hps">descentralizado</span> <span class="hps">abierto para</span> <span class="hps">autenticar a los usuarios</span> <span class="hps">sobre la base de</span> <span class="hps">direcciones de correo electrónico</span><span>.</span></span></div> + </div> + </dd> + <dt> + <span class="short_text" id="result_box" lang="es"><span class="hps">Proveedor de identidad</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>IdP</span><span>")</span></span></dt> + <dd> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"> + <span class="short_text" id="result_box" lang="es"><span class="hps">Servicios</span> <span class="hps">que expiden</span> <span class="hps">credenciales a</span> <span class="hps">sus</span> <span class="hps">usuarios.</span></span></div> + </div> + </dd> + <dd> + <span id="result_box" lang="es"><span class="hps">Los proveedores de correo electrónico</span> <span class="hps">pueden convertirse en</span> <span class="hps">proveedores de identidad</span> <span class="hps">de</span> <span class="hps">sus</span> <span class="hps">usuarios</span> <span class="hps">mediante la adición de</span> <span class="hps">soporte para</span> <span class="hps">el protocolo de autenticación</span> <span class="hps">BrowserID</span> <span class="hps">a</span> <span class="hps">su servicio.</span> <span class="hps">Si un</span> <span class="hps">proveedor de correo electrónico</span> <span class="hps">no admite</span> <span class="hps">Persona,</span> <span class="hps">Mozilla</span> <span class="hps">cuenta con un</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">en</span> <span class="hps">login.persona.org</span><span>.</span></span></dd> + <dt> + login.persona.org</dt> + <dd> + <span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">dirigido por</span> <span class="hps">el equipo de</span> <span class="hps">Identidad</span> <span class="hps">de Mozilla</span><span>.</span></span></dd> + <dt> + Persona</dt> + <dd> + <span id="result_box" lang="es"><span class="hps">El nombre</span> <span class="hps">de cara al</span> <span class="hps">usuario de una</span> <span class="hps">suite completa de</span> <span class="hps">servicios</span> <span class="hps">relacionados con la identidad</span> <span class="hps">de</span> <span class="hps">Mozilla</span><span>, entre ellos el</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">operada por</span> <span class="hps">Mozilla.</span> <span class="hps">Los usuarios finales</span> <span class="hps">no deben</span> <span class="hps">ver el</span> <span class="hps atn">término "</span><span>BrowserID</span><span>.</span><span>"</span></span></dd> + <dd> + <span id="result_box" lang="es"><span class="hps">Persona</span> <span class="hps">puede</span> <span class="hps">eventualmente incluir</span> <span class="hps">características más allá</span> <span class="hps">del protocolo</span> <span class="hps">BrowserID</span><span>, como</span> <span class="hps">partes de</span> <span class="hps">Firefox</span> <span class="hps">Sync o</span> <span class="hps">un cuadro de mandos</span> <span class="hps">para Open</span> <span class="hps">Web Apps.</span></span></dd> +</dl> +<p><span id="result_box" lang="es"><span class="hps">Parte Dependiente</span> <span class="hps atn">(</span><span class="hps">"RP</span><span>")</span><br> + <span class="hps">Cualquier sitio web</span><span>, aplicación o</span> <span class="hps">servicio que permite a</span> <span class="hps">los usuarios iniciar sesión</span> <span class="hps">a través de</span> <span class="hps">Persona.</span></span></p> +<h2 id="Proyecto_Codenames"><span class="short_text" id="result_box" lang="es"><span class="hps">Proyecto</span> Codenames</span></h2> +<dl> + <dt> + BigTent</dt> + <dd> + <span id="result_box" lang="es"><span class="hps">Un conjunto de</span> <span class="hps">tres</span> <span class="hps">proveedores de identidad</span> <span class="hps">de repliegue</span> <span class="hps">que avalan</span> <span class="hps">a los usuarios de</span> <span class="hps">Hotmail</span><span>, Gmail y</span> <span class="hps">Yahoo Mail</span><span>, respectivamente.</span> <span class="hps">BigTent</span> <span class="hps">opera</span><span> cerrando</span> <span class="hps">el protocolo</span> <span class="hps">BrowserID</span> <span class="hps">con</span> <span class="hps">OpenID</span> <span class="hps">o</span> <span class="hps">OAuth</span> <span class="hps">para cada</span> <span class="hps">proveedor de correo electrónico</span><span>.</span> <span class="hps">Fuente</span> <span class="hps">disponible en</span> <span class="hps">https://github.com/mozilla/browserid-bigtent</span><span>.</span></span></dd> + <dt> + Vinz Clortho</dt> + <dd> + <span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">proveedor de identidad</span> <span class="hps"><span id="result_box" lang="es"><span class="hps">de direcciones de correo electrónico </span></span>para <code>@mozilla.com</code> y <code>@mozilla.org</code></span> <span>.</span> <span class="hps">Funciona</span> <span class="hps">mediante la consulta</span> <span class="hps">LDAP.</span> <span class="hps">Fuente</span> <span class="hps">disponible en</span> <span class="hps">https://github.com/mozilla/vinz-clortho</span><span>.</span> <span class="hps">El nombre es una</span> <span class="hps">referencia de</span> una <span class="hps">película de 1984 llamada <span id="result_box" lang="es"><span class="hps">Ghostbusters</span>.</span></span></span></dd> +</dl> +<h2 id="Terminología_Persona_Poco_Frecuente"><span class="short_text" id="result_box" lang="es"><span class="hps">Terminología</span></span> Persona Poco Frecuente</h2> +<dl> + <dt> + <span class="short_text" id="result_box" lang="es"><span class="hps">Autoridad</span> <span class="hps atn">Primaria (</span><span class="hps">"Principal"</span><span>)</span></span></dt> + <dd> + <span id="result_box" lang="es"><span class="hps">Término</span> <span class="hps">en desuso</span> <span class="hps">para los</span> <span class="hps">proveedores de correo electrónico</span> <span class="hps">que también son</span> <span class="hps">capaces de actuar como</span> <span class="hps">proveedores de identidad</span><span>.</span></span></dd> + <dt> + Autoridad Secundaria ("Secundario")</dt> + <dd> + <span id="result_box" lang="es"><span class="hps">Término</span> <span class="hps">en desuso</span> <span class="hps">para un</span> <span class="hps">repliegue </span>de <span class="hps">proveedores de identidad</span> <span class="hps">que pueden</span> <span class="hps">dar fe de</span> <span class="hps">los usuarios, cuyos</span> <span class="hps">proveedores</span> <span class="hps">de correo electrónico no</span> <span class="hps">son</span> <span class="hps">proveedores de identidad</span><span>.</span> <span class="hps">Mozilla</span> <span class="hps">cuenta con un</span> <span class="hps">proveedor de identidad</span> <span class="hps">de reserva</span> <span class="hps">en</span> <span class="hps">login.persona.org</span><span>.</span></span></dd> + <dt> + <span class="short_text" id="result_box" lang="es"><span class="hps">Verificador De</span> <span class="hps">Protocolo</span> <span class="hps">De Email</span></span></dt> + <dd> + <span id="result_box" lang="es"><span class="hps">Un viejo</span> <span class="hps">nombre</span><span>, difunto</span> <span class="hps">para el protocolo</span> <span class="hps">BrowserID</span><span>.</span></span></dd> +</dl> diff --git a/files/es/mozilla/persona/index.html b/files/es/mozilla/persona/index.html new file mode 100644 index 0000000000..66c9c3a1e2 --- /dev/null +++ b/files/es/mozilla/persona/index.html @@ -0,0 +1,131 @@ +--- +title: Persona +slug: Mozilla/Persona +tags: + - Individuo + - Objeto + - Persona +translation_of: Archive/Mozilla/Persona +--- +<div class="callout-box"> +<p><strong>Contacta o pide ayuda</strong></p> + +<p>Sigue <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">nuestro blog</a>, únete a <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">nuestra lista de correo</a>, o encuéntranos en <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity">#identity</a> en <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC"> IRC</a>.</p> +</div> + +<p><a class="link-https" href="https://www.mozilla.org/en-US/persona/" title="https://www.mozilla.org/en-US/persona/">Mozilla Persona</a> es un sistema de autenticación para la web completamente descentralizado y seguro basado en el protocolo abierto de BrowserID. Para asegurarse que Mozilla Persona trabaja en cualquier lugar y que puede ser usado por cualquiera, Mozilla actualmente opera con una pequeña suite de servicios <a href="/es/docs/Persona/Iniciar_Persona" title="/en-US/docs/Persona/Bootstrapping_Persona">optativos y centralizados</a> relacionados con Mozilla Persona.</p> + +<p>¿Por qué deberías usar Mozilla Persona en tu sitio web?</p> + +<ol> + <li><strong>Mozilla Persona elimina por completo las contraseñas específicas para los sitios web, </strong>lo que libera a los usuarios y a las páginas web de tener que crear, administrar y guardar de manera segura las contraseñas.</li> + <li><strong>Mozilla Persona es fácil de usar.</strong> Con tan solo dos clics un usuario de Mozilla Persona puede identificarse en un sitio web nuevo como<a href="http://voo.st" title="http://voo.st"> Voost</a> o <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a>, lo que elimina la fricción que se asocia a la creación de nuevas cuentas.</li> + <li><strong>Mozilla Persona es fácil de implementar</strong><strong>. </strong>Cualquier desarrollador puede agregar Mozilla Persona a una página web en una tarde.</li> + <li>Y lo mejor de todo, no tiene un efecto <strong>candado</strong>. Los desarrolladores obtienen una dirección de correo verificada para todos sus usuarios y, a su vez, los usuarios pueden utilizar cualquier dirección de correo que deseen con Mozilla Persona</li> +</ol> + +<p>¡Sigue leyendo para saber cómo comenzar!</p> + +<div class="note"><strong>Nota:</strong> Persona está actualmente en desarrollo activo. Sigue<a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/"> nuestro blog</a> para descubrir nuevas características, o ¡únete a <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">nuestra lista de correo</a> y danos tu opinión!</div> + +<h2 id="Usar_Mozilla_Persona_en_tu_sitio">Usar Mozilla Persona en tu sitio</h2> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="Comenzar">Comenzar</h3> + + <dl> + <dt><a href="/es/docs/Persona/Why_Persona" title="en/BrowserID/Why_BrowserID">¿Por qué Mozilla Persona?</a></dt> + <dd>Descubre los motivos para implementar Mozilla Persona en tu web, así como las diferencias con otros sistemas de identidad y autenticación.</dd> + <dt><a href="/es/Persona/Quick_Setup" title="BrowserID/Quick setup">Inicio rápido</a></dt> + <dd>Un paseo rápido para mostrar cómo añadir Mozilla Persona a tu sitio web.</dd> + </dl> + </td> + <td> + <h3 id="Referencia_a_la_API_Mozilla_Persona">Referencia a la API Mozilla Persona</h3> + + <dl> + <dt><a href="/en/DOM/navigator.id" title="navigator.id">The navigator.id API reference</a></dt> + <dd>Referencia al objeto navigator.id, el cual pueden utilizar los desarrolladores web para integrar Persona en sus sitios web.</dd> + <dt><a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">Verification API reference</a></dt> + <dd>Referencia para la API de verificación remota alojada en <code>https://verifier.login.persona.org/verify</code>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <h3 id="Guías">Guías</h3> + + <dl> + <dt><a href="/es/docs/Persona/Security_Considerations" title="BrowserID/Security considerations">Consideraciones de seguridad</a></dt> + <dd>Prácticas y técnicas para asegurar un despliegue seguro de Persona.</dd> + <dt><a href="/es/Persona/Browser_compatibility" title="/Browser_compatibility">Compatibilidad de navegadores</a></dt> + <dd>Descubre qué navegadores son compatibles con Persona.</dd> + <dt><a href="/es/docs/Persona/Internationalization" title="/Internationalization">Internacionalización</a></dt> + <dd>Descubre cómo Persona maneja diferentes idiomas.</dd> + </dl> + </td> + <td> + <h3 id="Recursos">Recursos</h3> + + <dl> + <dt><a class="link-https" href="/es/docs/Persona/Libraries_and_plugins" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">Bibliotecas y complementos</a></dt> + <dd>Encuentra la biblioteca para tu lenguaje de programación favorito, framework web, blog o sistema de gestión de contenido (CMS).</dd> + <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">The Persona cookbook</a></dt> + <dd>Ejemplos de código fuente para sitios con Persona. Incluye snippets en PHP, Node.JS y más.</dd> + <dt><a href="/es/docs/persona/branding" title="/en-US/docs/persona/branding">Branding resources</a></dt> + <dd>Botones de inicio de sesión y otros gráficos para ayudarte a presentar Persona a tus usuarios.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Información_para_proveedores_de_identidad">Información para proveedores de identidad</h2> + + <p>Si usted es un proveedor de correo u otro proveedor de servicios de identidad, vea los siguientes enlaces para aprender acerca de convertirse en un Proveedor de Identidad Persona.</p> + + <dl> + <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">Informaciòn general deIdP</a></dt> + <dd>Una vista de alto nivel de los Proveedores de Identidad Persona.</dd> + <dt><a href="/en/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">Implementando un IdP</a></dt> + <dd>Una guía detallada sobre los detalles técnicos de convertirse en IdP.</dd> + <dt><a href="/en-US/Persona/IdP_Development_tips" title="Developer tips">Consejos de desarrollo</a></dt> + <dd>Un conjunto de consejos y trucos útiles para el desarrollo de un nuevo Proveedor de Identidad.</dd> + <dt><a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd>Información general de la estructura y propósito del archivo de <code>.well-known/browserid</code>, el cual IdPs usa para anunciar el soporte para el protocolo.</dd> + </dl> + </td> + <td> + <h2 id="El_proyecto_Mozilla_Persona">El proyecto Mozilla Persona</h2> + + <dl> + <dt><a href="/en/Persona/Glossary" title="navigator.id">Glosario</a></dt> + <dd>Definición de los términos BrowserID y Persona.</dd> + <dt><a href="/en/Persona/FAQ" title="en/BrowserID/FAQ">FAQ</a></dt> + <dd>Respuestas a preguntas frecuentes.</dd> + <dt><a href="/en/Persona/Protocol_Overview" title="BrowserID/Protocol overview">Información general del protocolo</a></dt> + <dd>Descripción técnica a nivel medio del protocolo Persona subyacente</dd> + <dt><a href="/es/docs/Persona/Crypto" title="MDN">Crypto</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">Una mirada a</span> <span class="hps">los conceptos</span> <span class="hps">criptográficos</span> <span class="hps">detrás</span> de <span class="hps">Persona</span> <span class="hps">y</span> <span class="hps">BrowserID</span><span>.</span></span></dd> + <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/master/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">La especificación</a></dt> + <dd>Profundos detalles técnicos viven aquí.</dd> + <dt><a href="/es/docs/Persona/Iniciar_Persona" title="en/BrowserID/Bootstrapping_BrowserID">El sitio web de Persona</a></dt> + <dd>Para hacer funcionar a Persona, estamos hosteando trés servicios en <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: un Proveedor de Identidad en caso de fallos, una implementación portable de las APIs de {{ domxref("navigator.id") }} y un servicio de verificación de afirmación de identidad.</dd> + <dt><a href="https://github.com/mozilla/browserid">El código fuente de Persona</a></dt> + <dd>El código detrás del sitio web de Persona vive en un repositorio de GitHub. Los pedidos de pull son bienvenidos!</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/es/mozilla/persona/información_general_idp/index.html b/files/es/mozilla/persona/información_general_idp/index.html new file mode 100644 index 0000000000..1befe0db1a --- /dev/null +++ b/files/es/mozilla/persona/información_general_idp/index.html @@ -0,0 +1,39 @@ +--- +title: Información general del Proveedor de Identidad +slug: Mozilla/Persona/Información_general_IdP +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Identity_Provider_Overview +--- +<p>Un proveedor de identidad Persona (IdP) es un dominio que firma y certifica directamente la identidad de sus usuarios. Como las identidades Persona están basadas en direcciones de correo electrónico, es un paso natural para cualquier dominio que ofrezca correo electrónico convertirse en IdP.</p> +<p>Si usted tiene un nombre de dominio, puede convertirse en un IdP de Persona implementando el soporte para el protocolo BrowserID.</p> +<h2 id="El_documento_de_apoyo_IdP">El documento de apoyo IdP</h2> +<p>Los dominios anuncian su capacidad de actuar como IDPs mediante la publicación de un documento de apoyo en <code>/.well-known/browserid</code>. Este documento formateado con JSON contiene tres valores:</p> +<ul> + <li><code>public-key</code>: La parte pública de la clave de cifrado del dominio.</li> + <li><code>authentication</code>: La página del dominio para pedir a los usuarios que inicien sesión.</li> + <li><code>provisioning</code>: La página del dominio para certificar la identidad de los usuarios.</li> +</ul> +<p>Los sitios web utilizan la clave pública para verificar la autenticidad de las aserciones de identidad de los usuarios.</p> +<p>Los navegadores utilizan los valores autenticación y aprovisionamiento para obtener la certificación de identidad de los usuarios.</p> +<p>Para obtener más información, incluyendo cómo los dominios pueden delegar en otros IdP, véase la <a href="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/BrowserID/.well-known-browserid"><code>/.well-known/browserid</code> documentation</a>.</p> +<h2 id="Cómo_interactúan_los_navegadores_con_los_IDPs">Cómo interactúan los navegadores con los IDPs</h2> +<p>Para demostrar cómo los navegadores y los IDPs interactúan, veamos qué pasa la primera vez que <code>alice@example.com</code> utiliza Persona para iniciar sesión en un sitio web.</p> +<ol> + <li>El navegador de Alice obtiene el documento de soporte de <code>https://example.com/.well-known/browserid</code>.</li> + <li>El navegador de Alice carga de manera invisible la página de aprovisionamiento d'<code>example.com</code>, pidiéndole que firme una clave pública certificando la identidad de Alice.</li> + <li>Antes de firmar la clave, <code>example.com</code> necesita pruebas de que el usuario realmente es Alice, así que le indica al navegador que ella necesita autenticarse.</li> + <li>El navegador de Alice le muestra a Alice la página de autenticación de <code>example.com</code> y ella inicia sesión, estableciendo una nueva sesión a <code>example.com</code>.</li> + <li>El navegador de Alice vuelve a cargar la página de aprovisionamiento y de nuevo le pide que firme la clave pública que certifica la identidad de Alice.</li> + <li>La página de aprovisionamiento puede verificar la identidad de Alice inspeccionando la sesión recién creada. Satisfecha, firma un certificado que contiene la clave pública de Alice, su dirección de correo electrónico, y una fecha de caducidad del certificado.</li> +</ol> +<p>Durante la vigencia del certificado firmado, el navegador de Alice puede crear aserciones de identidad válidos para <code>alice@example.com</code> cada vez que quiere acceder a un sitio web con Persona.</p> +<p>Los pasos 3-5 pueden ser omitidos si Alice ya tiene una sesión válida con <code>example.com</code>, por ejemplo, si ha iniciado sesión en el correo web o un portal de intranet.</p> +<h2 id="Cómo_interactúan_los_sitios_web_con_los_IDPs">Cómo interactúan los sitios web con los IDPs</h2> +<p>Supongamos que Alice quiere acceder a <a href="http://123done.org/" title="http://123done.org/">123done.org</a>. Su navegador genera y firma una aserción de identidad que contiene el certificado de más arriba y que presenta como prueba de su identidad.</p> +<p>Al comparar la firma de la aserción de identidad de Alice con la clave pública en el interior del certificado firmado, 123done puede estar seguro de que el certificado ha sido emitido para la misma persona que ha generado la aserción de identidad. Sin embargo, 123done aún debe comprobar que el certificado es válido examinando la firma.</p> +<p>Como el certificado ha sido emitido para <code>alice@example.com</code>, 123done coge el documento de soporte de <code>https://example.com/.well-known/browserid</code>. Extrae la clave pública y la compara con la firma del certificado de Alice. Si la clave coincide con la firma, 123done sabe que el certificado es legítimo y puede finalmente permitir que Alice inicie sesión.</p> +<p>Tenga en cuenta que 123done no "ha llamado nunca por teléfono a casa" o ha revelado de ninguna otra manera la identidad de Alice cuando ella ha iniciado sesión. Tan sólo ha necesitado pedir un simple documento a <code>example.com</code> que además puede ser guardado en la memoria caché.</p> +<h2 id="Seguridad_y_confianza">Seguridad y confianza</h2> +<p>El protocolo BrowserID, y por tanto Persona, se basan en técnicas estándar de criptografía de clave pública.</p> +<p>Puede consultar nuestra documentación sobre los <a href="/en/Persona/Crypto" title="https://developer.mozilla.org/en/Persona/Crypto">conceptos criptográficos</a> que hay detrás de cómo funcionan los IdP de Persona o puede leer <a href="/en-US/docs/Persona/Implementing_a_Persona_IdP" title="/en-US/docs/Persona/Implementing_a_Persona_IdP">los detalles sobre cómo están implementados los IDPs</a>.</p> diff --git a/files/es/mozilla/persona/quick_setup/index.html b/files/es/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..c12d2000d4 --- /dev/null +++ b/files/es/mozilla/persona/quick_setup/index.html @@ -0,0 +1,170 @@ +--- +title: Configuración rápida +slug: Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +<p>Agregar el sistema de identificación de Mozilla Persona a tu sitio web solo requiere seguir estos cinco pasos:</p> + +<ol> + <li>Incluye en tus páginas la biblioteca JavaScript de Mozilla Persona.</li> + <li>Agrega los botones "conectar" y "desconectar".</li> + <li>Presta atención a las acciones de conexión y desconexión.</li> + <li>Comprueba las credenciales de los usuarios.</li> + <li>Revisa las buenas prácticas.</li> +</ol> + +<p>Con esto deberías poder ponerlo en funcionamiento en una sola tarde, pero lo primero es lo primero: si vas a usar Mozilla Persona en tu sitio, <em>por favor, </em>dedica unos minutos a suscribirte a la lista de correo de <a href="https://mail.mozilla.org/listinfo/persona-notices">Mozilla Persona</a>. Tiene muy poco tráfico ya que solo se usa para anunciar cambios o cuestiones relacionadas con la seguridad que pueden tener un impacto negativo sobre tu sitio.</p> + +<h2 id="Paso_1_Incluye_la_biblioteca_de_Persona">Paso 1: Incluye la biblioteca de Persona</h2> + +<p>Persona está diseñado para no depender del navegador y funciona correctamente con la <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">todos los naveadores de escritorio y móviles modernos</a>. Esto es posible gracias a la biblioteca JavaScript multiplataforma de Persona. Una vez que se carga ésta biblioteca en tu página, las funciones de Persona que necesitas ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, y {{ domxref("navigator.id.logout()", "logout()") }}) estarán disponibles en el objeto global <code>navigator.id</code>.</p> + +<p>Para incluir la biblioteca JavaScript de Persona, puedes colocar ésta etiqueta <code>script</code> en el head de tu página:</p> + +<pre class="brush: html;"><script src="https://login.persona.org/include.js"></script> +</pre> + +<p><strong>Debes</strong> incluir esto en todas las páginas que usen las funciones {{ domxref("navigator.id") }}. Debido a que Persona está aún en desarrollo, no debes alojar en tu servidor el archivo <code>include.js</code>.</p> + +<h2 id="Paso_2_Añadir_botones_de_inicio_y_cierre_de_sesión">Paso 2: Añadir botones de inicio y cierre de sesión</h2> + +<p>Debido a que Persona está diseñado como una API DOM, debes ejecutar funciones cuando un usuario haga clic en los botones de inicio y cierre de sesión en tu web. Para abrir un diálogo de Persona y pedir que el usuario inicie sesión, debes ejecutar {{ domxref("navigator.id.request()") }}. Para cerrar sesión, ejecuta {{ domxref("navigator.id.logout()") }}.</p> + +<p>Por ejemplo:</p> + +<pre class="brush: js;">var signinLink = document.getElementById('signin'); +if (signinLink) { + signinLink.onclick = function() { navigator.id.request(); }; +}; + +var signoutLink = document.getElementById('signout'); +if (signoutLink) { + signoutLink.onclick = function() { navigator.id.logout(); }; +}; +</pre> + +<p>¿Cómo deben ser esos botones? Da un vistazo a nuestra página de <a href="https://developer.mozilla.org/docs/persona/branding">recursos de marca</a> para conseguir imágenes y botones css predefinidos.</p> + +<h2 id="Paso_3_Vigilar_las_acciones_de_inicio_y_cierre_de_sesión">Paso 3: Vigilar las acciones de inicio y cierre de sesión</h2> + +<p>Para que Persona funcione, necesitas indicarle qué hacer cuando un usuario inicia o cierra sesión. Este se puede realizar llamando a la función {{ domxref("navigator.id.watch()") }} y pasandole tres parámetros:</p> + +<ol> + <li> + <p><code>El loggedInEmail</code> del actual usuario de tu sitio, o <code>null</code> si no existe. Deberías generar esto dinámicamente cuando la página es pintada.</p> + </li> + <li> + <p>Una función a la que invocar cuando la acción <code>onlogin</code> es desencadenada. Esta función se pasa como un parámetro único, una "afirmación de identidad", que debe ser verificada.</p> + </li> + <li> + <p>Una función a la que invocar cuando la acción <code>onlogout</code> es desencadenada. En esta función no se pasa ningún parámetro.</p> + </li> +</ol> + +<div class="note style-wrap"> +<p><strong>Nota:</strong> Siempre tienes que incluir ambas funciones, <code>onlogin</code> <code>y onlogout</code>, cuando llames a {{ domxref("navigator.id.watch()") }}.</p> +</div> + +<p>Por ejemplo, si actulamente crees que Bob ha iniciado sesión en tu sitio, puedes hacer esto:</p> + +<pre class="brush: js;">var currentUser = 'bob@example.com'; + +navigator.id.watch({ + loggedInEmail: currentUser, + onlogin: function(assertion) { + // Un usuario ha iniciado sesión! Aquí necesitas: + // 1. Enviar la verificación a tu servidor para verificar y crear la sesión. + // 2. Actualizar la interfaz de usuario. + $.ajax({ /* <-- Este ejemplo utiliza Jquery, pero usar lo que más te guste */ + type: 'POST', + url: '/auth/login', // Esta es la URL de tu servidor. + data: {assertion: assertion}, + success: function(res, status, xhr) { window.location.reload(); }, + error: function(res, status, xhr) { alert("login failure" + res); } + }); + }, + onlogout: function() { + // Un usuario ha cerrado sesión. Aqui necesitas: // Salir de la sesión redirigiendo al usuario o haciendo una llamada a tu servidor. + $.ajax({ + type: 'POST', + url: '/auth/logout', // Esta es la URL de tu servidor. + success: function(res, status, xhr) { window.location.reload(); }, + error: function(res, status, xhr) { alert("logout failure" + res); } + }); + } +}); +</pre> + +<p>En este ejemplo, ambas funciones, <code>onlogin</code> y <code>onlogout</code>, son implementeadas por una petición asíncrona <code>POST</code> al servidor del sitio. El servidor registra la entrada o salida del usuario usualmente ajustando o eliminando información de la cookie de sesión. Entonces, si todo ha sido verificado, la página recargará para acceder al nuevo estado de sesión de la cuenta.</p> + +<p>Puedes usar AJAX para implementar esto sin necesidad de recargar o redirigir la página, pero eso queda fuera del alcance de este tutorial.</p> + +<p><strong>Tienes </strong>que llamar a esta función en cada página con un botón de inicio o cierre de sesión. Para dar soporte a mejoras de Persona, como el inicio de sesión automático y el cierre de sesión global para los usuarios, <strong>deberás </strong>llamar a esta función en cada página de tu sitio.</p> + +<h2 id="Paso_4_Comprueba_las_credenciales_de_los_usuarios">Paso 4: Comprueba las credenciales de los usuarios</h2> + +<p>En lugar de contraseñas, Persona utiliza "declaraciones de identidad", que son algo así como contraseñas de un solo uso y un solo sitio combinadas con la dirección de correo electrónico del usuario. Cuando un ususario desea iniciar sesión, tu función de retorno <code>onlogin</code> será invocada con una declaración de ese usuario. Antes de que le inicies sesión, debes verificar que la declaración es válida.</p> + +<p>Es <em>extremadamente importante</em> que verifiques la declaración en tu servidor, y no en el código JavaScript ejecutándose en el navegador del usuario, debido a que podría ser fácil de falsificar. El ejemplo de arriba envió la declaración al servidor del sitio utilizando la función <code>$.ajax()</code> de jQuery para hacer <code>POST</code> en <code>/api/login</code>.</p> + +<p>Una vez que tu servidor tiene la declaración, ¿cómo la verificas? La manera más fácil es utilizando un servicio de ayuda provisto por Mozilla. Simplemente envía una solicitud POST a <code>https://verifier.login.persona.org/verify</code> con dos parámetros:</p> + +<ol> + <li><code>assertion</code>: La declaración de identidad provista por el usuario.</li> + <li><code>audience</code>: El nombre y puerto de tu sitio. Debes establecer rígidamente este valor en tu código de servidor; no lo derives de ningún dato suministrado por el usuario.</li> +</ol> + +<p>Por ejemplo, si eres <code>example.com</code>, puedes utilizar la línea de comandos para probar una declaración con:</p> + +<pre class="brush: bash;">$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify" +</pre> + +<p>Si es válida, obtendrás una respuesta JSON como la siguiente:</p> + +<pre class="brush: js;">{ + "status": "okay", + "email": "bob@eyedee.me", + "audience": "https://example.com:443", + "expires": 1308859352261, + "issuer": "eyedee.me" +} +</pre> + +<p>Puedes aprender mas acerca del servicio de verificación leyendo L<a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">a API del Servicio de Verificación</a>. Un ejemplo la implementación de <code>/api/login</code>, utilizando <a href="http://python.org/">Python</a>, el framework web <a href="http://flask.pocoo.org/">Flask</a>, y la librería <a href="http://python-requests.org">Requests</a> HTTP se vería así:</p> + +<pre class="brush: python;">@app.route('/api/login', methods=['POST']) +def login(): + # The request has to have an assertion for us to verify + if 'assertion' not in request.form: + abort(400) + + # Send the assertion to Mozilla's verifier service. + data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'} + resp = requests.post('https://verifier.login.persona.org/verify', data=data) + + # Did the verifier respond? + if resp.ok: + # Parse the response + verification_data = json.loads(resp.content) + + # Check if the assertion was valid + if verification_data['status'] == 'okay': + # Log the user in by setting a secure session cookie + session.update({'email': verification_data['email']}) + return resp.content + + # Oops, something failed. Abort. + abort(500) +</pre> + +<p>El manejo de sesiones es probablemente muy similar a tu sistema actual de login. El primer gran cambio está en la verificación de la identidad del usuario revisando una aserción en vez de revisar un password. El otro gran cambio es asegurarse que la dirección de email del usuario está disponible para usarse en el parametro <code>loggedInEmail para </code>{{ domxref("navigator.id.watch()") }}.</p> + +<p>El Logout es simple: Solo necesitas remover la cookie de la sesión del usuario.</p> + +<h2 id="Paso_5_Revisa_las_mejores_prácticas">Paso 5: Revisa las mejores prácticas</h2> + +<p>Una vez que todo funciona y has logrado iniciar y cerrar sesion satisfactoriamente en tu sitio, debes de tomarte un momento para revisar las <a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">mejores prácticas</a> para usar Persona de forma segura.</p> + +<p>Si estás haciendo un sitio listo para producción, tal vez quieras hacer pruebas de integración que simulan un usuario entrando y saliendo de tu sitio utilizando BrowserID. Para facilitar esta acción en Selenium, considera la librería <a href="https://github.com/mozilla/bidpom">bidpom</a>. Los sitios <a href="https://mockmyid.com/" title="https://mockmyid.com/">mockmyid.com</a> y <a href="http://personatestuser.org" title="http://personatestuser.org">personatestuser.org</a> también son útiles.</p> + +<p>Por último, no olvides enrolarte en la lista de correos de <a href="https://mail.mozilla.org/listinfo/persona-notices">Noticias de Persona</a> para que seas notificado de cualquier problema de seguridad o cambios de incopatibilidad con versiones anteriores de la API de persona. La lista es extremadamente de poco tráfico: es solo utilizada para anunciar cambios que pueden impactar en tu sitio.</p> diff --git a/files/es/mozilla/persona/remote_verification_api/index.html b/files/es/mozilla/persona/remote_verification_api/index.html new file mode 100644 index 0000000000..e2a00c4856 --- /dev/null +++ b/files/es/mozilla/persona/remote_verification_api/index.html @@ -0,0 +1,199 @@ +--- +title: Remote Verification API +slug: Mozilla/Persona/Remote_Verification_API +tags: + - Ochoa +translation_of: Archive/Mozilla/Persona/Remote_Verification_API +--- +<p></p><div class="warning"> <p>On November 30th, 2016, Mozilla shut down the persona.org services. Persona.org and related domains will soon be taken offline.</p> <p>For more information, see this guide to migrating your site away from Persona:</p> <p><a href="https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers">https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers</a></p></div><p></p> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>When a user tries to log into a website, their browser generates a data structure called an <em>assertion</em>, which is essentially a cryptographically signed email address. The browser sends this assertion to the website, which must verify that the assertion is valid before logging the user in.</p> + +<p>Assertions can be verified locally, or with an API hosted at <span class="link-https"><code>https://verifier.login.persona.org/verify</code></span>. This page describes how to use the API.</p> + +<h2 id="Methods" name="Methods">Method</h2> + +<p>HTTP POST request to <code>https://verifier.login.persona.org/verify</code>.</p> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><code>assertion</code></dt> + <dd>The assertion supplied by the user. Available as the first parameter passed to the <code>onlogin</code> function in <a href="/es/docs/Web/API/Navigator/id/watch" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>navigator.id.watch()</code></a>.</dd> + <dt><code>audience</code></dt> + <dd>The protocol, domain name, and port of your site. For example, "<code>https://example.com:443</code>".</dd> +</dl> + +<h3 id="Return_values" name="Return_values">Return values</h3> + +<p>The call returns a JSON structure containing a <code>status</code> element, which may be either "okay" or "failure". Depending on the value of <code>status</code>, the structure contains additional elements listed below.</p> + +<h4 id="okay" name="okay">"okay"</h4> + +<p>The assertion is valid.</p> + +<p>In this case the JSON structure contains the following additional elements:</p> + +<table class="standard-table" style="width: 80%;"> + <tbody> + <tr> + <td>"<code>email</code>"</td> + <td>The address contained in the assertion, for the intended person being logged in.</td> + </tr> + <tr> + <td>"<code>audience</code>"</td> + <td>The audience value contained in the assertion. Expected to be your own website URL.</td> + </tr> + <tr> + <td>"<code>expires</code>"</td> + <td>The date the assertion expires, expressed as the <a href="/en/JavaScript/Reference/Global_Objects/Date/valueOf" title="en/JavaScript/Reference/Global_Objects/Date/valueOf">primitive value of a Date object</a>: that is, the number of milliseconds since midnight 01 January, 1970 UTC.</td> + </tr> + <tr> + <td>"<code>issuer</code>"</td> + <td>The hostname of the identity provider that issued the assertion.</td> + </tr> + </tbody> +</table> + +<h4 id="failure" name="failure">"failure"</h4> + +<p>The assertion is invalid. In this case, the JSON structure contains one additional element:</p> + +<table class="compact-table"> + <tbody> + <tr> + <td><code>"reason"</code></td> + <td>A string explaining why verification failed.</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">Examples</h2> + +<h3 id="node.js" name="node.js">node.js</h3> + +<p>This example uses a node.js server using express.js</p> + +<pre class="brush: js">var express = require("express"), + app = express.createServer(), + https = require("https"), + querystring = require("querystring"); +/* ... */ + +// The audience must match what your browser's address bar shows, +// including protocol, hostname, and port +var audience = "http://localhost:8888"; + +app.post("/authenticate", function(req, res) { + var vreq = https.request({ + host: "verifier.login.persona.org", + path: "/verify", + method: "POST" + }, function(vres) { + var body = ""; + vres.on('data', function(chunk) { body+=chunk; } ) + .on('end', function() { + try { + var verifierResp = JSON.parse(body); + var valid = verifierResp && verifierResp.status === "okay"; + var email = valid ? verifierResp.email : null; + req.session.email = email; + if (valid) { + console.log("assertion verified successfully for email:", email); + res.json(email); + } else { + console.log("failed to verify assertion:", verifierResp.reason); + res.send(verifierResp.reason, 403); + } + } catch(e) { + console.log("non-JSON response from verifier"); + // bogus response from verifier! + res.send("bogus response from verifier!", 403); + + } + }); + }); + + vreq.setHeader('Content-Type', 'application/x-www-form-urlencoded'); + + var data = querystring.stringify({ + assertion: req.body.assertion, + audience: audience + }); + + vreq.setHeader('Content-Length', data.length); + vreq.write(data); + vreq.end(); + + console.log("verifying assertion!"); +}); + +</pre> + +<p>via <a class="link-https" href="https://github.com/lloyd/myfavoritebeer.org/blob/06255b960e1f9078bc935c1c7af0662f33c88818/server/main.js#L112">Lloyd Hilaiel</a></p> + +<h3 id="PHP" name="PHP">PHP</h3> + +<pre class="brush: php">$url = 'https://verifier.login.persona.org/verify'; +$assert = filter_input( + INPUT_POST, + 'assertion', + FILTER_UNSAFE_RAW, + FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH +); +//Use the $_POST superglobal array for PHP < 5.2 and write your own filter +$params = 'assertion=' . urlencode($assert) . '&audience=' . + urlencode('http://localhost:8888'); +$ch = curl_init(); +$options = array( + CURLOPT_URL => $url, + CURLOPT_RETURNTRANSFER => TRUE, + CURLOPT_POST => 2, + //CURLOPT_SSL_VERIFYPEER => true, //This currently blocks connection to 'https://verifier.login.persona.org/verify' + CURLOPT_SSL_VERIFYPEER => 0, + + CURLOPT_SSL_VERIFYHOST => 2, + CURLOPT_POSTFIELDS => $params +); +curl_setopt_array($ch, $options); +$result = curl_exec($ch); +curl_close($ch); +echo $result;</pre> + +<p>Via <a class="link-https" href="https://github.com/codepo8/BrowserID-login-with-PHP/blob/184fdb74c8a554461c262875859968154d09288e/verify.php">Christian Heilmann</a></p> + +<h3 id="Java" name="Java" style="line-height: 20px;">Java</h3> + +<pre class="brush: java">@Override +protected void doPost(final HttpServletRequest req, + final HttpServletResponse resp) throws ServletException, + IOException { + + final String audience = req.getServerName(); + final String assertion = req.getParameter("assertion"); + final Verifier verifier = new Verifier(); + final BrowserIDResponse personaResponse = verifier.verify(assertion,audience); + final Status status = personaResponse.getStatus(); + + if (status == Status.OK) { + /* Authentication with Persona was successful */ + String email = personaResponse.getEmail(); + log.info("{} has sucessfully signed in", email); + HttpSession session = req.getSession(true); + session.setAttribute("email", email); + + } else { + /* Authentication with Persona failed */ + log.info("Sign in failed..."); + + } +} +</pre> + +<p>Via <a class="link-https" href="https://github.com/user454322/browserid-verifier">Javier</a></p> + +<p> </p> + +<p>Note: If you send the assertion and audience parameters as a JSON-object, they <strong>must not</strong> be URL-encoded. If they are sent as regular HTTP POST parameters, as in the example above, they <strong>must</strong> be URL-encoded.</p> diff --git a/files/es/mozilla/persona/security_considerations/index.html b/files/es/mozilla/persona/security_considerations/index.html new file mode 100644 index 0000000000..023bd98164 --- /dev/null +++ b/files/es/mozilla/persona/security_considerations/index.html @@ -0,0 +1,59 @@ +--- +title: Consideraciones de Seguridad +slug: Mozilla/Persona/Security_Considerations +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Security_Considerations +--- +<p>Cuando agregas soporte para Persona en tu sitio web, ella toma tantas medidas de seguridad como puede. Sin embargo, algunas medidas de seguridad solo pueden ser manejadas por tu sitio web. Estas son listadas a continuación.</p> +<h2 id="Essential_practices" name="Essential_practices">Prácticas Esenciales</h2> +<h3 id="Verify_assertions_on_your_server" name="Verify_assertions_on_your_server">Verificar la confirmación en tu servidor</h3> +<p>Cuando utilizas Persona, las declaraciones de identidad son pasadas dentro de la función <code>onlogin</code> a través de</p> +<p>{{ domxref("navigator.id.watch()") }}</p> +<p><em>Siempre</em> debes pasar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span> a tu servidor para verificarla, y solo tu servidor debe decidir si autoriza al usuario permisos adicionales en base al resultado de la verificación:</p> +<pre class="brush:js;">// Inside navigator.id.watch({ ... +onlogin: function(assertion) { + // A user wants to log in! Here you need to: + // 1. Send the assertion to your backend for verification and to create a session. + // 2. Update your UI. +}, +</pre> +<p>Si trata de verificar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span> usando JavaScript ejecutándose en el navegador del usuario, algún usuario malicioso podría suplantar por otro usuario legítimo de su sitio inyectando código bloqueando tu código JavaScript. Esto es posible debido a que no se tiene control del navegador del usuario, donde se ejecuta el código.</p> +<p>Como mencionamos lineas arriba, <em>siempre</em> debe pasar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span> a su servidor para la verificación. Incluso si está usando la API de verificación remota.</p> +<h3 id="Explicitly_specify_the_audience_parameter" name="Explicitly_specify_the_audience_parameter">Especifique explícitamente el parámetro <code>audience</code></h3> +<p>Para verificar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span>, debe realizar un pedido <code>POST</code> a<code> https://verifier.login.persona.org/verify</code>. El pedido incluye el parámetro llamado <code>audience</code>:</p> +<pre><code>assertion=<ASSERTION>&audience=https://mysite.com:443"</code></pre> +<p>El parámetro <code>audience</code> es requerido. Siempre debe especificar explícitamente audience en el código, o en la configuración del código. Específicamente:</p> +<ul> + <li>No confie en la cabecera o header Host enviado por el navegador del usuario.</li> + <li>No confíe en el parámetro explicito enviado por el navegador del usuario, pero generado usando JavaScript, e.g. <code>document.location</code>.</li> +</ul> +<p>Si dejas que el navegador del usuario te envíe el parámetro <code>audience</code>, esto deja la posibilidad de que un sitio web malicioso pueda reusar las declaraciones de su sitio web para autenticarse en tu sitio web.</p> +<h3 id="Verify_SSL_certificates" name="Verify_SSL_certificates">Verifica los certificados SSL</h3> +<p>Para verificar una <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span>, debes realizar un petición POST a <code>https://verifier.login.persona.org/verify</code>. Debes asegurarte que tu petición HTTPS verifique el certificado enviado desde el servidor contra un certificado raíz confiable. Si no lo haces, un atacante podría presentarse como <code>verifer.login.persona.org</code> y realizar verificaciones falsas.</p> +<p>Revisa que la libreria que usas para hacer el pedido verifique los certificados correctamente, y que has iniciado esto con un certificado de administrador apropiado.</p> +<p>Por ejemplo, el <a class="external" href="http://docs.python.org/release/2.7.3/library/urllib2.html#urllib2.urlopen" title="http://docs.python.org/release/2.7.3/library/urllib2.html#urllib2.urlopen">modulo urllib2</a> estándar de Python 2.7 no valida certificados del servidor. En lugar de ello, recomendamos utilizar los módulos "<a class="external" href="http://pypi.python.org/pypi/requests">requests</a>" o "<a class="external" href="http://pypi.python.org/pypi/urllib3" title="http://pypi.python.org/pypi/urllib3">urllib3</a>" en Python 2.x, o la clase estándar <code>http.client.HTTPSConnection</code> en Python 3.x. Para Perl, asegúrate que usas al menos la versión 6.0 de <code>libwww-perl</code>. Dependiendo del lenguaje, librería, y sistema operativo que estés usando, vas a necesitar utilizar algún CA (Certificate Authority) confiable o el CA simple usado por <code>verifier.login.persona.org</code>.</p> +<h3 id="Implement_CSRF_protection" name="Implement_CSRF_protection">Implementar protección CSRF</h3> +<p>En un ataque de inicio de sesión por CSRF (Cross-Site Request Forgery), el atacante utiliza CSRF para iniciar la sesión del usuario dentro del sitio web usando las credenciales del atacante.</p> +<p>Por ejemplo: un usuario visita una web maliciosa que contiene un elemento <code>form</code>. El atributo <code>action</code> del <code>form</code> está configurado para hacer una petición HTTP POST a <a class="external" href="http://www.google.com/login" title="http://www.google.com/login">http://www.google.com/login</a>, dándole el username y password del atacante. Cuando el usuario envía el <code>form</code>, el pedido es enviado a Google, se inicia sesión y el servidor de Google configura una cookie en el navegador del usuario. Ahora el usuario sin saberlo ha iniciado sesión con la cuenta Google del atacante.</p> +<p>El ataque puede ser usado para reunir información sensible del usuario. Por ejemplo, <a class="link-https" href="https://www.google.com/history/">Web History</a> de Google tiene la característica de registrar todos los términos de búsqueda del usuario. Si el usuario inicia sesión dentro de la cuenta Google del atacante y el atacante tiene la característica Web History activada, el usuario le estará enviando toda su información al atacante.</p> +<p>Los ataques de inicio de sesión CSRF, y defensas potenciales contra éstos son documentados con mayor detalle en <a class="external" href="http://www.adambarth.com/papers/2008/barth-jackson-mitchell-b.pdf">Robust Defenses for Cross-Site Request Forgery</a> (PDF). Estos ataques no son específicos de Persona: la mayoría de mecanismos de inicio de sesión son potencialmente vulnerables a ellos.</p> +<p>Existen una variedad de técnicas, las cuales pueden ser usadas para proteger un sitio de ataques de inicio de sesión CSRF, las cuales son documentadas con mayor detalle en el estudio antes mencionado.</p> +<p>Una propuesta es crear un identificador secreto en el servidor, compartido con el navegador, y requerir al navegador que lo proporcione cuando realice un pedido de inicio de sesión. Por ejemplo:</p> +<ol> + <li>Tan pronto como el usuario visite su sitio, antes de intentar iniciar sesión cree una sesión para él en el servidor. Almacene el ID de la sesión en una cookie del navegador.</li> + <li>En el servidor, genere un texto aleatorio de al menos 10 caracteres alfanuméricos. un UUID generado aleatoriamente es una buena opción. Esto es un token CSRF. Almacene esto en la sesión.</li> + <li>Envie el CSRF token al navegador a través de JavaScript embebido o HTML como una variable oculta del formulario.</li> + <li>Asegurese que el envio AJAX o la petición POST del formulario incluya el token CSRF.</li> + <li>En el lado del servidor, antes de aceptar la <span class="short_text" id="result_box" lang="es"><span class="hps">aserción</span></span>, revise que el token CSRF enviado concuerde con el almacenado en la sesión.</li> +</ol> +<h2 id="Enhancements" name="Enhancements">Mejoras</h2> +<h3 id="Content_Security_Policy_(CSP)" name="Content_Security_Policy_(CSP)">Politicas de seguridad del contenido (Content Security Policy o CSP)</h3> +<p><a href="/en-US/docs/Security/CSP" title="Security/CSP">Content Security Policy</a> (CSP) es una capa extra de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluyendo Cross Site Scripting (XSS) y ataques de inyección de datos. Estos ataques son usados para todo desde robo de datos a desconfiguración del sitio o distribución de malware.</p> +<p>SI utilizas CSP en tu siitio, es posible que necesites modificar tu politica para permitir Persona. Dependiendo de tu política, puedes necesitar:</p> +<ul> + <li>Eliminar inline <code>javascript:</code> URIs y reemplazarlos con código cargado desde un archivo script adicional. El archivo puede ver elementos basándose en su ID, y luego atacar al elemento configurando {{ domxref("element.onclick", "onclick") }} o llamando a {{ domxref("element.addEventListener()", "addEventListener()") }}.</li> + <li>Permitir <code>https://login.persona.org</code> como <code>script-src</code> y <code>frame-src</code> para que el archivo pueda cargar el archivo remoto <code>include.js</code> y ese archivo pueda comunicarse con la llamada a la implementación de Persona.</li> +</ul> +<p>Un ejemplo de la configuración de Apache puede incluir:</p> +<pre><span class="diff-content"><span class="idiff">Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://login.persona.org ; script-src 'self' https://login.persona.org"</span></span></pre> diff --git a/files/es/mozilla/persona/why_persona/index.html b/files/es/mozilla/persona/why_persona/index.html new file mode 100644 index 0000000000..48ce47f155 --- /dev/null +++ b/files/es/mozilla/persona/why_persona/index.html @@ -0,0 +1,30 @@ +--- +title: ¿Por qué Mozilla Persona? +slug: Mozilla/Persona/Why_Persona +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +<p style="">El sistema de nombres de usuarios y contraseñas que prevalece es insostenible: los usuarios están obligados a crear y recordar una nueva, y compleja contraseña para cada sitio y servicio que utilizan, y cada sitio tiene que almacenar dichas contraseñas de manera segura. Sin embargo, brechas recientes demuestran que inclusive las compañías más prominentes tienen fallos de seguridad al almacenar las contraseñas, lo cual expone la información del usuario.</p> +<p style="">"Persona" es un sistema de identificación abierto, distribuído, a escala web que reemplaza las contraseñas para cada sitio. Aborda las deficiencias relacionadas a la usabilidad y privacidad de sistemas tales como OpenID sin recurrir a una infraestructura centralizada como Facebook connect.</p> +<h2 id="Persona_se_deshace_de_las_contraseñas_para_cada_sitio">Persona se deshace de las contraseñas para cada sitio</h2> +<p>En lugar de contraseñas para cada sitio, Persona permite que los usuarios se autentiquen en los diferentes sitios con tan sólo dos clics después de completar un proceso sencillo, que se realiza una sola vez para cada una de sus identidades. Esto es seguro, y está respaldado por un sistema de cifrado de clave pública. En lugar de una contraseña, el navegador web del usuario genera una confirmación de identidad cifrada que expira después de unos pocos minutos y es únicamente válido para un solo sitio. Debido a que no existen contraseñas específicas por sitio, los sitios web que utilizan Persona no tienen que preocuparse sobre el almacenamiento seguro o de pérdidas de las contraseñas en su base de datos.</p> +<p>Este proceso de registro rápido también reduce la desavenencia a los usuarios cada vez que visiten sitios nuevos.</p> +<h2 id="Las_identidades_Persona_son_los_correos_electrónicos">Las identidades Persona son los correos electrónicos</h2> +<p>Lejos de utilizar nombres de usuario de manera libre, Persona utiliza los correos electrónicos como identidades. Esto ofrece muchos beneficios tanto para los usuarios como para los desarrolladores:</p> +<h3 id="El_usuario_se_beneficia_al_utilizar_direcciones_de_correo_electrónico">El usuario se beneficia al utilizar direcciones de correo electrónico</h3> +<ul> + <li>Los usuarios conocen de antemano sus correos electrónicos, a diferencia de aprender una nueva y potencialmente confusa dirección URL con OpenID.</li> + <li>Las direcciones de correo electrónico capturan de manera elegante la idea de <code>alguien@algun-contexto</code>, haciendo fácil para los usuarios el poder mantener sus identidades <code>@trabajo</code>, <code>@hogar</code>, o <code>@escuela</code> separadas. Esto se diferencia de la tendencia de consolidar las identidades a través de un nombre verdadero, políticas que limitan a una cuenta única en las redes sociales tales como Facebook y Google+.</li> + <li>El correo electrónico puede tener su propio hosting o delegado a otros proveedores, dándole control a los usuarios sobre su identidad.</li> +</ul> +<h3 id="Los_desarrolladores_se_benefician_al_utilizar_direcciones_de_correo_electrónico">Los desarrolladores se benefician al utilizar direcciones de correo electrónico</h3> +<ul> + <li>Las direcciones de correo electrónico ofrecen a los desarrolladores un medio directo para contactar a sus usuarios.</li> + <li>La mayoría de los sitios requieren de una dirección de correo electrónico para registrar sus usuarios, Persona ofrece esta información de manera automática cuando un usuario se registra, eliminando la necesidad de un formulario adicional para esta información después del registro.</li> + <li>Muchos sistemas de acceso de antemano utilizan la dirección de correo electrónico como únicos. Esto significa que Persona se adapta perfectamente, y puede ser integrado junto a sistemas de acceso existentes.</li> +</ul> +<p>Sin mencionar que los correos electrónicos ya son sistemas distribuídos con billones de cuentas a través de diferentes proveedores.</p> +<h2 id="¿Qué_diferencia_a_Persona_de_otros_proveedores_de_acceso_sencillo" style="">¿Qué diferencia a Persona de otros proveedores de acceso sencillo?</h2> +<p>"Persona" es seguro, y fácil. Protege la privacidad del usuario, control del usuario, y elección del usuario de formas que los otros proveedores no hacen o no pueden:</p> +<p>Muchas redes sociales tales como Facebook y Google+ obligan a que los usuarios utilicen sus nombres verdaderos, y limitan a los usuarios a una sola cuenta. Al estar construida encima de direcciones de correo electrónico, Persona permite que los usuarios mantengas sus identidades separadas, ya sea de trabajo, hogar, escuela u otras.</p> +<p>"Persona" es abierta y distribuída: cualquiera con un correo electrónico puede registrarse en sitios que utilicen Persona. Y no es sólo eso, cualquiera puede alojar su propio proveedor de identidad o delegar a otras autoridades, al igual que con el correo electrónico. Esto difiere a los servicios de acceso que ofrecen los sitios sociales, los cuales requieren una cuenta en un servicio único y centralizado.</p> +<p>"Persona" también toma un alcance novedoso para proteger la privacidad del usuario al colocar el navegador web del usuario en medio del proceso de autenticación: el navegador obtiene las credenciales del proveedor de correo electrónico que utiliza el usuario, y luego presenta esas credenciales al sitio web. El proveedor de correo electrónico no puede rastrear al usuario, pero los sitios web pueden seguir confiando en la identidad del usuario al verificar dichas credenciales de manera cifrada. La mayoría de otros sistemas, inclusive aquellas que son distribuídas como el OpenID, requiere que los sitios "llamen a casa" antes de permitir que un usuario ingrese.</p> diff --git a/files/es/mozilla/preferences/index.html b/files/es/mozilla/preferences/index.html new file mode 100644 index 0000000000..1169ecabf1 --- /dev/null +++ b/files/es/mozilla/preferences/index.html @@ -0,0 +1,48 @@ +--- +title: Preferences +slug: Mozilla/Preferences +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Preferences +--- +<p>The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt><a href="/en-US/docs/Preferences/Preferences_system" title="Preferences/Preferences system">Preferences system</a></dt> + <dd>An introduction to using the preference system in Mozilla.</dd> + <dt><a href="/en-US/docs/XUL_School/Handling_Preferences" title="XUL School/Handling Preferences">XUL School: Handling preferences</a></dt> + <dd>The XUL School tutorial chapter on preferences.</dd> + <dt><a href="/en-US/docs/Preferences/Preference_reference" title="Preferences/Preference_reference">Mozilla preference reference</a></dt> + <dd>A reference guide to all Mozilla preferences; currently a work in progress.</dd> + <dt><a href="/en-US/docs/Preferences/A_brief_guide_to_Mozilla_preferences" title="Preferences/A brief guide to Mozilla preferences">A brief guide to Mozilla preferences</a></dt> + <dd>An introductory guide to where preferences are stored and other useful information about the core preference system.</dd> + <dt><a href="/en-US/docs/Preferences/Using_preferences_from_application_code" title="Preferences/Using preferences from application code">Using preferences from application code</a> {{gecko_minversion_inline("6.0")}}</dt> + <dd>Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.</dd> + <dt><a href="/en-US/docs/Preferences/Mozilla_networking_preferences" title="Preferences/Mozilla networking preferences">Mozilla networking preferences</a></dt> + <dd>A guide to key networking-related preferences.</dd> + <dt><a href="/en-US/docs/Preferences/Mozilla_preferences_for_uber-geeks" title="Preferences/Mozilla preferences for uber-geeks">Mozilla preferences for uber-geeks</a></dt> + <dd>A guide to preferences that only truly elite geeks should play with.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Preferences" title="tag/Preferences">View all pages tagged with "Preferences"...</a></span></p> + </td> + <td> + <h2 class="Community" id="Examples" name="Examples">Examples</h2> + <dl> + <dt><a href="/en-US/docs/Code_snippets/Preferences" title="Code snippets/Preferences">Code snippets</a></dt> + <dd>Preference-related code snippets.</dd> + <dt><a href="/en-US/docs/Adding_preferences_to_an_extension" title="Adding preferences to an extension">Adding preferences to an extension</a></dt> + <dd>How to add preferences to an existing extension.</dd> + </dl> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a>, <a href="/en-US/docs/Extensions" title="Extensions">Extensions</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/es/mozilla/projects/index.html b/files/es/mozilla/projects/index.html new file mode 100644 index 0000000000..6291137b31 --- /dev/null +++ b/files/es/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p>{{ draft() }}</p> +<p>This page needs to become a pretty index to Mozilla projects whose documentation is located under it.</p> +<p>{{ LandingPageListSubpages() }}</p> diff --git a/files/es/mozilla/projects/nspr/reference/index.html b/files/es/mozilla/projects/nspr/reference/index.html new file mode 100644 index 0000000000..d53b3eed23 --- /dev/null +++ b/files/es/mozilla/projects/nspr/reference/index.html @@ -0,0 +1,770 @@ +--- +title: NSPR API Reference +slug: Mozilla/Projects/NSPR/Reference +tags: + - NSPR + - NSPR_API_Reference + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Projects/NSPR/Reference +--- +<section id="Quick_Links"> +<ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR">NSPR</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/About_NSPR">About NSPR</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference">NSPR API Reference</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/NSPR_build_instructions">NSPR Build Instruction</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Release_process">NSPR Release Process</a></li> + <li class="toggle"> + <details> + <summary>Introduction to NSPR</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Naming_Conventions">NSPR Naming Conventions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Threads">NSPR Threads</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Thread_Schedoling">Thread Scheduling</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Setting_Thread_Priorities">Setting Thread Priorities</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Preempting_Threads">Preempting Threads</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Interrupting_Threads">Interrupting Threads</a></li> + </ol> + </li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Thread_Synchronization">NSPR Thread Synchronization</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Locks_and_Monitors">Locks and Monitors</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Condition_Variables">Condition Variables</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Sample_Code">NSPR Sample Code</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>NSPR Types</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Calling_Convention_Types">Calling Convention Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Algebraic_Types">Algebraic Types</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#8-.2C_16-.2C_and_32-bit_Integer_Types">8-, 16-, and 32-bit Integer Types</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Signed_Integers">Signed Integers</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Unsigned_Integers">Unsigned Integers</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#64-bit_Integer_Types">64-bit Integer Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Floating-Point_Number_Type">Floating-Point Integer Type</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Native_OS_Integer_Types">Native OS Integer Types</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Miscellaneous_Types">Miscellaneous Types</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Size_Type">Size Type</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Pointer_Difference_Types">Pointer Difference Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Boolean_Types">Boolean Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Types#Status_Type_for_Return_Values">Status Type for Return Values</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Threads</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Threading_Types_and_Constants">Threading Types and Constants</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Threading_Functions">Threading Functions</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Creating.2C_Joining.2C_and_Identifying_Threads">Creating, Joining, and Identifying Threads</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Thread_Priorities">Controlling Thread Priorities</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Per-Thread_Private_Data">Controlling Per-Thread Private Data</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Interrupting_and_Yielding">Interrupting and Yielding</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Setting_Global_Thread_Concurrency">Setting Global Thread Concurrency</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Threads#Getting_a_Thread.27s_Scope">Getting a Thread's Scope</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Process Initialization</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Identity_and_Versioning">Identity and Versioning</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Name_and_Version_Constants">Name and Version Constants</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Initialization_and_Cleanup">Initialization and Cleanup</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Initialization#Module_Initialization">Module Initialization</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Locks</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Locks#Lock_Type">Lock Type</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Locks#Lock_Functions">Lock Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Condition Variables</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Type">Condition Variable Type</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Functions">Condition Variable Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Monitors</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Type">Monitor Type</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Functions">Monitor Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Cached Monitors</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Cached_Monitors#Cached_Monitor_Functions">Cached Monitor Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>I/O Types</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Directory_Type">Directory Type</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Descriptor_Types">File Descriptor Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Info_Types">File Info Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Network_Address_Types">Network Address Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Types_Used_with_Socket_Options_Functions">Types Used with Socket Options Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Type_Used_with_Memory-Mapped_I.2FO">Type Used with Memory-Mapped I/O</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Types#Offset_Interpretation_for_Seek_Functions">Offset Interpretation for Seek Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>I/O Functions</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Operate_on_Pathnames">Functions that Operate on Pathnames</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Act_on_File_Descriptors">Functions that Act on File Descriptors</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Directory_I.2FO_Functions">Directory I/O Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Socket_Manipolation_Functions">Socket Manipolation Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Converting_Between_Host_and_Network_Addresses">Converting Between Host and Network Addresses</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Memory-Mapped_I.2FO_Functions">Memory-Mapped I/O Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Anonymous_Pipe_Function">Anonymous Pipe Function</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Polling_Functions">Polling Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Pollable_Events">Pollable Events</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions#Manipulating_Layers">Manipulating Layers</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Network Addresses</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Types_and_Constants">Network Address Types and Constants</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Functions">Network Address Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Atomic Operations</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicIncrement">PR_AtomicIncrement</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicDecrement">PR_AtomicDecrement</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_AtomicSet">PR_AtomicSet</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Interval Timing</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Time_Type_and_Constants">Interval Time Type and Constants</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Functions">Interval Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Date and Time</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Types_and_Constants">Types and Constants</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Time_Parameter_Callback_Functions">Time Parameter Callback Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Date_and_Time#Functions">Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Memory Management Operations</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Functions">Memory Allocation Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Macros">Memory Allocation Macros</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>String Operations</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strlen">PL_strlen</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strcpy">PL_strcpy</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strdup">PL_strdup</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PL_strfree">PL_strfree</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Floating Point Number to String Conversion</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_strtod">PR_strtod</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_dtoa">PR_dtoa</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_cnvtf">PR_cnvtf</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Linked Lists</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Types">Linked List Types</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRCList">PRCList</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Macros">Linked List Macros</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INIT_CLIST">PR_INIT_CLIST</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INIT_STATIC_CLIST">PR_INIT_STATIC_CLIST</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_APPEND_LINK">PR_APPEND_LINK</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_LINK">PR_INSERT_LINK</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NEXT_LINK">PR_NEXT_LINK</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_PREV_LINK">PR_PREV_LINK</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_REMOVE_LINK">PR_REMOVE_LINK</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_REMOVE_AND_INIT_LINK">PR_REMOVE_AND_INIT_LINK</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_BEFORE">PR_INSERT_BEFORE</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_INSERT_AFTER">PR_INSERT_AFTER</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Dynamic Library Linking</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Types">Library Linking Types</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLibrary">PRLibrary</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRStaticLinkTable">PRStaticLinkTable</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Functions">Library Linking Functions</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLibraryPath">PR_SetLibraryPath</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_GetLibraryPath">PR_GetLibraryPath</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_GetLibraryName">PR_GetLibraryName</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FreeLibraryName">PR_FreeLibraryName</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LoadLibrary">PR_LoadLibrary</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_UnloadLibrary">PR_UnloadLibrary</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FindSymbol">PR_FindSymbol</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_FindSymbolAndLibrary">PR_FindSymbolAndLibrary</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Finding_Symbols_Defined_in_the_Main_Executable_Program">Finding Symbols Defined in the Main Executable Program</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Platform_Notes">Platform Notes</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Dynamic_Library_Search_Path">Dynamic Library Search Path</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Exporting_Symbols_from_the_Main_Executable_Program">Exporting Symbols from the Main Executable Program</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Process Management and Interprocess Communication</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Process_Management_Types_and_Constants">Process Management Types and Constants</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRProcess">PRProcess</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRProcessAttr">PRProcessAttr</a></li> + </ol> + </li> + <li><a href="/es/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Process_Management_Functions">Process Management Functions</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Setting_the_Attributes_of_a_New_Process">Setting the Attributes of a New Process</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Process_Management_and_Interprocess_Communication#Creating_and_Managing_Processes">Creating and Managing Processes</a></li> + </ol> + </li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Logging</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Conditional_Compilation_and_Execution">Conditional Compilation and Execution</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Log_Types_and_Variables">Log Types and Variables</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLogModoleInfo">PRLogModoleInfo</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PRLogModoleLevel">PRLogModoleLevel</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_LOG_MODULES">NSPR_LOG_MODULES</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_LOG_FILE">NSPR_LOG_FILE</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Logging_Functions_and_Macros">Logging Functions and Macros</a> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NewLogModole">PR_NewLogModole</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLogFile">PR_SetLogFile</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_SetLogBuffering">PR_SetLogBuffering</a>/li> + </li><li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LogPrint">PR_LogPrint</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LogFlush">PR_LogFlush</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LOG_TEST">PR_LOG_TEST</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_LOG">PR_LOG</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_Assert_">PR_Assert</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_ASSERT">PR_ASSERT</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/PR_NOT_REACHED">PR_NOT_REACHED</a></li> + </ol> + </li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Logging#Use_Example">Use Example</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Named Shared Memory</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Shared_Memory_Protocol">Shared Memory Protocol</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Named_Shared_Memory_Functions">Named Shared Memory Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Anonymous Shared Memory</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Memory_Protocol">Anonymous Memory Protocol</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Shared_Memory_Functions">Anonymous Shared Memory Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>IPC Semaphores</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/IPC_Semaphores#IPC_Semaphore_Functions">IPC Semaphore Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Thread Pools</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Types">Thread Pool Types</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Functions">Thread Pool Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Random Number Generator</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Random_Number_Generator#Random_Number_Generator_Function">Random Number Generator Function</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Hash Tables</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Tables_and_Type_Constants">Hash Tables and Type Constants</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Table_Functions">Hash Table Functions</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>NSPR Error Handling</summary> + <ol> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Type">Error Type</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Functions">Error Functions</a></li> + <li><a href="/es/docs/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Codes">Error Codes</a></li> + </ol> + </details> + </li> + <li class="toggle"> + <details> + <summary>Contribute</summary> + <ol> + <li><a href="/es/docs/MDN/Doc_status/NSPR"></a></li> + <li><a href="/es/docs/MDN">The MDN Project</a></li> + </ol> + </details> + </li> + </ol> +</section> + +<h2 id="Introduction_to_NSPR" name="Introduction_to_NSPR"><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR">Introduction to NSPR</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Naming_Conventions">NSPR Naming Conventions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Threads">NSPR Threads</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Thread_Scheduling">Thread Scheduling</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Setting_Thread_Priorities">Setting Thread Priorities</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Preempting_Threads">Preempting Threads</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Interrupting_Threads">Interrupting Threads</a></li> + </ul> + </li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Thread_Synchronization">NSPR Thread Synchronization</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Locks_and_Monitors">Locks and Monitors</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#Condition_Variables">Condition Variables</a></li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Introduction_to_NSPR#NSPR_Sample_Code">NSPR Sample Code</a></li> +</ul> + +<h2 id="NSPR_Types" name="NSPR_Types"><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types">NSPR Types</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Calling_Convention_Types">Calling Convention Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Algebraic_Types">Algebraic Types</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#8-.2C_16-.2C_and_32-bit_Integer_Types">8-, 16-, and 32-bit Integer Types</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Signed_Integers">Signed Integers</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Unsigned_Integers">Unsigned Integers</a></li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#64-bit_Integer_Types">64-bit Integer Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Floating-Point_Number_Type">Floating-Point Integer Type</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Native_OS_Integer_Types">Native OS Integer Types</a></li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Miscellaneous_Types">Miscellaneous Types</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Size_Type">Size Type</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Pointer_Difference_Types">Pointer Difference Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Boolean_Types">Boolean Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Types#Status_Type_for_Return_Values">Status Type for Return Values</a></li> + </ul> + </li> +</ul> + +<h2 id="Threads" name="Threads"><a href="/Mozilla/Projects/NSPR/Reference/Threads">Threads</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Threading_Types_and_Constants">Threading Types and Constants</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Threading_Functions">Threading Functions</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Creating.2C_Joining.2C_and_Identifying_Threads">Creating, Joining, and Identifying Threads</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Thread_Priorities">Controlling Thread Priorities</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Controlling_Per-Thread_Private_Data">Controlling Per-Thread Private Data</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Interrupting_and_Yielding">Interrupting and Yielding</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Setting_Global_Thread_Concurrency">Setting Global Thread Concurrency</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Threads#Getting_a_Thread.27s_Scope">Getting a Thread's Scope</a></li> + </ul> + </li> +</ul> + +<h2 id="Process_Initialization" name="Process_Initialization"><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization">Process Initialization</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Identity_and_Versioning">Identity and Versioning</a> + + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Name_and_Version_Constants">Name and Version Constants</a></li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Initialization_and_Cleanup">Initialization and Cleanup</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Process_Initialization#Module_Initialization">Module Initialization</a></li> +</ul> + +<h2 id="Locks" name="Locks"><a href="/Mozilla/Projects/NSPR/Reference/Locks">Locks</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Locks#Lock_Type">Lock Type</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Locks#Lock_Functions">Lock Functions</a></li> +</ul> + +<h2 id="Condition_Variables" name="Condition_Variables"><a href="/Mozilla/Projects/NSPR/Reference/Condition_Variables">Condition Variables</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Type">Condition Variable Type</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Condition_Variables#Condition_Variable_Functions">Condition Variable Functions</a></li> +</ul> + +<h2 id="Monitors" name="Monitors"><a href="/Mozilla/Projects/NSPR/Reference/Monitors">Monitors</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Type">Monitor Type</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Monitors#Monitor_Functions">Monitor Functions</a></li> +</ul> + +<h2 id="Cached_Monitors" name="Cached_Monitors"><a href="/Mozilla/Projects/NSPR/Reference/Cached_Monitors">Cached Monitors</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Cached_Monitors#Cached_Monitor_Functions">Cached Monitor Functions</a></li> +</ul> + +<h2 id="I.2FO_Types" name="I.2FO_Types"><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types">I/O Types</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Directory_Type">Directory Type</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Descriptor_Types">File Descriptor Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#File_Info_Types">File Info Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Network_Address_Types">Network Address Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Types_Used_with_Socket_Options_Functions">Types Used with Socket Options Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Type_Used_with_Memory-Mapped_I.2FO">Type Used with Memory-Mapped I/O</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Types#Offset_Interpretation_for_Seek_Functions">Offset Interpretation for Seek Functions</a></li> +</ul> + +<h2 id="I.2FO_Functions" name="I.2FO_Functions"><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions">I/O Functions</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Operate_on_Pathnames">Functions that Operate on Pathnames</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Functions_that_Act_on_File_Descriptors">Functions that Act on File Descriptors</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Directory_I.2FO_Functions">Directory I/O Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Socket_Manipulation_Functions">Socket Manipulation Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Converting_Between_Host_and_Network_Addresses">Converting Between Host and Network Addresses</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Memory-Mapped_I.2FO_Functions">Memory-Mapped I/O Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Anonymous_Pipe_Function">Anonymous Pipe Function</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Polling_Functions">Polling Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Pollable_Events">Pollable Events</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/I_O_Functions#Manipulating_Layers">Manipulating Layers</a></li> +</ul> + +<h2 id="Network_Addresses" name="Network_Addresses"><a href="/Mozilla/Projects/NSPR/Reference/Network_Addresses">Network Addresses</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Types_and_Constants">Network Address Types and Constants</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Network_Addresses#Network_Address_Functions">Network Address Functions</a></li> +</ul> + +<h2 id="Atomic_Operations" name="Atomic_Operations"><a href="/Mozilla/Projects/NSPR/Reference/Atomic_Operations">Atomic Operations</a></h2> + +<ul> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_AtomicIncrement">PR_AtomicIncrement</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_AtomicDecrement">PR_AtomicDecrement</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_AtomicSet">PR_AtomicSet</a></code></li> +</ul> + +<h2 id="Interval_Timing" name="Interval_Timing"><a href="/Mozilla/Projects/NSPR/Reference/Interval_Timing">Interval Timing</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Time_Type_and_Constants">Interval Time Type and Constants</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Interval_Timing#Interval_Functions">Interval Functions</a></li> +</ul> + +<h2 id="Date_and_Time" name="Date_and_Time"><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time">Date and Time</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time#Types_and_Constants">Types and Constants</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time#Time_Parameter_Callback_Functions">Time Parameter Callback Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Date_and_Time#Functions">Functions</a></li> +</ul> + +<h2 id="Memory_Management_Operations" name="Memory_Management_Operations"><a href="/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations">Memory Management Operations</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Functions">Memory Allocation Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Memory_Management_Operations#Memory_Allocation_Macros">Memory Allocation Macros</a></li> +</ul> + +<h2 id="String_Operations" name="String_Operations"><a href="/Mozilla/Projects/NSPR/Reference/String_Operations">String Operations</a></h2> + +<ul> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strlen">PL_strlen</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strcpy">PL_strcpy</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strdup">PL_strdup</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PL_strfree">PL_strfree</a></code></li> +</ul> + +<h2 id="Floating_Point_Number_to_String_Conversion" name="Floating_Point_Number_to_String_Conversion"><a href="/Mozilla/Projects/NSPR/Reference/Floating_Point_Number_to_String_Conversion">Floating Point Number to String Conversion</a></h2> + +<ul> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_strtod">PR_strtod</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_dtoa">PR_dtoa</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_cnvtf">PR_cnvtf</a></code></li> +</ul> + +<h2 id="Long_Long_.2864-bit.29_Integers" name="Long_Long_.2864-bit.29_Integers">Long Long (64-bit) Integers</h2> + +<h2 id="BitMaps" name="BitMaps">BitMaps</h2> + +<h2 id="Formatted_Printing" name="Formatted_Printing">Formatted Printing</h2> + +<h2 id="Linked_Lists" name="Linked_Lists"><a href="/Mozilla/Projects/NSPR/Reference/Linked_Lists">Linked Lists</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Types">Linked List Types</a> + + <ul> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PRCList">PRCList</a></code></li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Linked_Lists#Linked_List_Macros">Linked List Macros</a> + <ul> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INIT_CLIST">PR_INIT_CLIST</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INIT_STATIC_CLIST">PR_INIT_STATIC_CLIST</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_APPEND_LINK">PR_APPEND_LINK</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INSERT_LINK">PR_INSERT_LINK</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_NEXT_LINK">PR_NEXT_LINK</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_PREV_LINK">PR_PREV_LINK</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_REMOVE_LINK">PR_REMOVE_LINK</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_REMOVE_AND_INIT_LINK">PR_REMOVE_AND_INIT_LINK</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INSERT_BEFORE">PR_INSERT_BEFORE</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_INSERT_AFTER">PR_INSERT_AFTER</a></code></li> + </ul> + </li> +</ul> + +<h2 id="Dynamic_Library_Linking" name="Dynamic_Library_Linking"><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking">Dynamic Library Linking</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Types">Library Linking Types</a> + + <ul> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PRLibrary">PRLibrary</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PRStaticLinkTable">PRStaticLinkTable</a></code></li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Library_Linking_Functions">Library Linking Functions</a> + <ul> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_SetLibraryPath">PR_SetLibraryPath</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_GetLibraryPath">PR_GetLibraryPath</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_GetLibraryName">PR_GetLibraryName</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_FreeLibraryName">PR_FreeLibraryName</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_LoadLibrary">PR_LoadLibrary</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_UnloadLibrary">PR_UnloadLibrary</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_FindSymbol">PR_FindSymbol</a></code></li> + <li><code><a href="/Mozilla/Projects/NSPR/Reference/PR_FindSymbolAndLibrary">PR_FindSymbolAndLibrary</a></code></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Finding_Symbols_Defined_in_the_Main_Executable_Program">Finding Symbols Defined in the Main Executable Program</a></li> + </ul> + </li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Platform_Notes">Platform Notes</a> + <ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Dynamic_Library_Search_Path">Dynamic Library Search Path</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Dynamic_Library_Linking#Exporting_Symbols_from_the_Main_Executable_Program">Exporting Symbols from the Main Executable Program </a></li> + </ul> + </li> +</ul> + +<h2 id="Process_Management_and_Interprocess_Communication" name="Process_Management_and_Interprocess_Communication"><a href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication">Process Management and Interprocess Communication</a></h2> + +<ul> + <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Process_Management_Types_and_Constants">Process Management Types and Constants</a> + + <ul> + <li><code><a class="internal" href="/En/PRProcess">PRProcess</a></code></li> + <li><code><a class="internal" href="/En/PRProcessAttr">PRProcessAttr</a></code></li> + </ul> + </li> + <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Process_Management_Functions">Process Management Functions</a> + <ul> + <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Setting_the_Attributes_of_a_New_Process">Setting the Attributes of a New Process</a></li> + <li><a class="internal" href="/En/NSPR_API_Reference/Process_Management_and_Interprocess_Communication#Creating_and_Managing_Processes">Creating and Managing Processes</a></li> + </ul> + </li> +</ul> + +<h2 id="Multiwait_Receive" name="Multiwait_Receive">Multiwait Receive</h2> + +<h2 id="System_Information_and_Environment_Variables" name="System_Information_and_Environment_Variables">System Information and Environment Variables</h2> + +<h2 id="Logging" name="Logging"><a href="/NSPR_API_Reference/Logging">Logging</a></h2> + +<ul> + <li><a href="/NSPR_API_Reference/Logging#Conditional_Compilation_and_Execution">Conditional Compilation and Execution</a></li> + <li><a href="/NSPR_API_Reference/Logging#Log_Types_and_Variables">Log Types and Variables</a> + <ul> + <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/PRLogModuleInfo">PRLogModuleInfo</a></code></li> + <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/PRLogModuleLevel">PRLogModuleLevel</a></code></li> + <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/NSPR_LOG_MODULES">NSPR_LOG_MODULES</a></code></li> + <li><code><a href="/docs/Mozilla/Projects/NSPR/Reference/Logging/NSPR_LOG_FILE">NSPR_LOG_FILE</a></code></li> + </ul> + </li> + <li><a href="/NSPR_API_Reference/Logging#Logging_Functions_and_Macros">Logging Functions and Macros</a> + <ul> + <li><code><a href="PR_NewLogModule">PR_NewLogModule</a></code></li> + <li><code><a href="PR_SetLogFile">PR_SetLogFile</a></code></li> + <li><code><a href="PR_SetLogBuffering">PR_SetLogBuffering</a></code></li> + <li><code><a href="PR_LogPrint">PR_LogPrint</a></code></li> + <li><code><a href="PR_LogFlush">PR_LogFlush</a></code></li> + <li><code><a href="PR_LOG_TEST">PR_LOG_TEST</a></code></li> + <li><code><a href="PR_LOG">PR_LOG</a></code></li> + <li><code><a href="PR_Assert_">PR_Assert</a></code></li> + <li><a href="/en-US/docs/Mozilla/Projects/NSPR/Reference/PR_ASSERT">PR_ASSERT</a></li> + <li><code><a href="PR_NOT_REACHED">PR_NOT_REACHED</a></code></li> + </ul> + </li> + <li><a href="/NSPR_API_Reference/Logging#Use_Example">Use Example</a></li> +</ul> + +<h2 id="Instrumentation_Counters" name="Instrumentation_Counters">Instrumentation Counters</h2> + +<h2 id="Named_Shared_Memory" name="Named_Shared_Memory"><a href="/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory">Named Shared Memory</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Shared_Memory_Protocol">Shared Memory Protocol</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Named_Shared_Memory#Named_Shared_Memory_Functions">Named Shared Memory Functions</a></li> +</ul> + +<h2 id="Anonymous_Shared_Memory" name="Anonymous_Shared_Memory"><a href="/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory">Anonymous Shared Memory</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Memory_Protocol">Anonymous Memory Protocol</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Anonymous_Shared_Memory#Anonymous_Shared_Memory_Functions">Anonymous Shared Memory Functions</a></li> +</ul> + +<h2 id="IPC_Semaphores" name="IPC_Semaphores"><a href="/Mozilla/Projects/NSPR/Reference/IPC_Semaphores">IPC Semaphores</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/IPC_Semaphores#IPC_Semaphore_Functions">IPC Semaphore Functions</a></li> +</ul> + +<h2 id="Thread_Pools" name="Thread_Pools"><a href="/Mozilla/Projects/NSPR/Reference/Thread_Pools">Thread Pools</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Types">Thread Pool Types</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Thread_Pools#Thread_Pool_Functions">Thread Pool Functions</a></li> +</ul> + +<h2 id="Random_Number_Generator" name="Random_Number_Generator"><a href="/Mozilla/Projects/NSPR/Reference/Random_Number_Generator">Random Number Generator</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Random_Number_Generator#Random_Number_Generator_Function">Random Number Generator Function</a></li> +</ul> + +<h2 id="Hash_Tables" name="Hash_Tables"><a href="/Mozilla/Projects/NSPR/Reference/Hash_Tables">Hash Tables</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Tables_and_Type_Constants">Hash Tables and Type Constants</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/Hash_Tables#Hash_Table_Functions">Hash Table Functions</a></li> +</ul> + +<h2 id="NSPR_Error_Handling" name="NSPR_Error_Handling"><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling">NSPR Error Handling</a></h2> + +<ul> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Type">Error Type</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Functions">Error Functions</a></li> + <li><a href="/Mozilla/Projects/NSPR/Reference/NSPR_Error_Handling#Error_Codes">Error Codes</a></li> +</ul> diff --git a/files/es/mozilla/projects/psm/index.html b/files/es/mozilla/projects/psm/index.html new file mode 100644 index 0000000000..5251e19a4b --- /dev/null +++ b/files/es/mozilla/projects/psm/index.html @@ -0,0 +1,11 @@ +--- +title: Administrador de seguridad personal +slug: Mozilla/Projects/PSM +translation_of: Mozilla/Projects/PSM +--- +<p>Administrador de seguridad personal consiste de un conjunto de librerías que realizan operaciones de criptografía en nombre de una aplicación instalada. Estas operaciones incluyen la creación de una conexión SSL, objeto de firmas y verificación de firmas, la administración de certificados (incluye la emisión y revocación), y otras funciones de PKI.</p> +<p>Notas:</p> +<ul> + <li>PSM siempre se <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions">construye con Firefox</a> , así que no hay instrucciones de construcción separadas.</li> + <li><a href="http://www-archive.mozilla.org/projects/security/pki/psm/">Información Archivada sobre PSM</a></li> +</ul> diff --git a/files/es/mozilla/rendimiento/index.html b/files/es/mozilla/rendimiento/index.html new file mode 100644 index 0000000000..33c54bd649 --- /dev/null +++ b/files/es/mozilla/rendimiento/index.html @@ -0,0 +1,135 @@ +--- +title: Rendimiento +slug: Mozilla/Rendimiento +translation_of: Mozilla/Performance +--- +<p><span class="tlid-translation translation" lang="es"><span title="">Los artículos vinculados desde aquí te ayudarán a mejorar el rendimiento, ya sea que estés desarrollando un código de Mozilla central o un complemento.</span></span></p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="Documentation">Documentation</h3> + + <dl> + <dt><a href="/en/Performance/Reporting_a_Performance_Problem" title="en/Performance/Reporting_a_Performance_Problem">Reportar un Problema de rendimiento</a></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">Una guía fácil de usar para reportar un problema de rendimiento.</span> <span title="">No se requiere un entorno de desarrollo.</span></span></dd> + <dt><a href="Benchmarking" title="Performance/Benchmarking advice">Benchmarking</a></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">Consejos para generar métricas de rendimiento válidas.</span></span></dd> + <dt><a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Mejores prácticas de rendimiento en extensiones</a></dt> + <dd><span class="tlid-translation translation" lang="es"><span title="">Una guía de rendimiento de "mejores prácticas" para desarrolladores de extensiones.</span></span></dd> + <dt><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></dt> + <dd>A guide for add-on developers on how to set up a performance testing environment.</dd> + <dt><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">XUL School: Add-on Performance</a></dt> + <dd>Tips for add-on developers to help them avoid impairing application performance.</dd> + <dt><a href="/en/Performance/GPU_performance" title="en/GPU performance">GPU performance</a></dt> + <dd>Tips for profiling and improving performance when using a GPU.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/ScrollLinkedEffects">Scroll-Linked Effects</a></dt> + <dd>Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Automated_Performance_Testing_and_Sheriffing">Automated Performance Testing and Sheriffing</a></dt> + <dd>Information on automated performance testing and sheriffing at Mozilla.</dd> + </dl> + + <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Performance" title="Special:Tags?tag=Performance">View all pages tagged with "Performance"...</a></span></p> + + <h3 id="Memory_profiling_and_leak_detection_tools">Memory profiling and leak detection tools</h3> + + <dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory" title="en/Performance/Profiling with the Built-in Profiler">The Developer Tools "Memory" panel</a></dt> + <dd>The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.</dd> + </dl> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Performance/about:memory">about:memory</a></dt> + <dd>about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC & CC logs, and dump DMD reports. about:memory is built on top of Firefox's <a href="/en-US/docs/Mozilla/Performance/Memory_reporting">memory reporting</a> infrastructure.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/DMD">DMD</a></dt> + <dd>DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/AWSY">Are We Slim Yet</a></dt> + <dd>areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/BloatView">BloatView</a></dt> + <dd>BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Refcount_tracing_and_balancing">Refcount tracing and balancing</a></dt> + <dd>Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/GC_and_CC_logs">GC and CC logs</a></dt> + <dd>GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.</dd> + <dt><a href="/en-US/docs/Mozilla/Testing/Valgrind">Valgrind</a></dt> + <dd><a class="external text" href="http://valgrind.org/" rel="nofollow">Valgrind</a> is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as <a class="external text" href="/en-US/docs/Valgrind_test_job" rel="nofollow">part</a> of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Testing/Firefox_and_Address_Sanitizer#LeakSanitizer">LeakSanitizer</a></dt> + <dd><span class="external text">LeakSanitizer</span> (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.</dd> + <dt><a href="https://developer.apple.com/documentation/Performance/Conceptual/ManagingMemory/Articles/FindingLeaks.html">Apple tools</a></dt> + <dd>Apple provides <span class="external text">some tools</span> for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=390944" rel="nofollow">bug 390944</a>).</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Leak_Gauge">Leak Gauge</a></dt> + <dd>Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.</dd> + <dt><a href="https://dxr.mozilla.org/mozilla-central/source/memory/replace/logalloc/README">LogAlloc</a></dt> + <dd>LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Memory_Profiler">Memory Profiler</a></dt> + <dd>The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.</dd> + </dl> + + <p>See also the documentation on <a href="/en-US/docs/Mozilla/Performance/Leak-hunting_strategies_and_tips">Leak-hunting strategies and tips.</a></p> + </td> + <td> + <h3 id="Profiling_and_performance_tools">Profiling and performance tools</h3> + + <dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Developer Tools Profiler</a></dt> + <dd>The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.</dd> + </dl> + + <dl> + <dt><a href="/en/Performance/Profiling_with_the_Built-in_Profiler" title="en/Performance/Profiling with the Built-in Profiler">Profiling with the Gecko Profiler</a> {{ gecko_minversion_inline("16.0") }}</dt> + <dd>The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.</dd> + <dt><a href="/en/Performance/Profiling_with_Instruments" title="en/Performance/Profiling with Instruments">Profiling with Instruments</a></dt> + <dd>How to use Apple's Instruments tool to profile Mozilla code.</dd> + <dt><a href="/en/Performance/Profiling_with_Xperf" title="en/Performance/Profiling with Xperf">Profiling with Xperf</a></dt> + <dd>How to use Microsoft's Xperf tool to profile Mozilla code.</dd> + <dt><a href="/en-US/docs/Performance/Profiling_with_Concurrency_Visualizer" title="en/Performance/Profiling with Concurrency Visualizer">Profiling with Concurrency Visualizer</a></dt> + <dd>How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.</dd> + <dt><a href="/en/Performance/Profiling_with_Zoom" title="en/Performance/Profiling with Zoom">Profiling with Zoom</a></dt> + <dd>Zoom is a profiler for Linux done by the people who made Shark</dd> + <dt><a href="/en/Performance/Measuring_performance_using_the_PerfMeasurement.jsm_code_module" title="en/Performance/Measuring performance using the PerfMeasurement.jsm code module">Measuring performance using the PerfMeasurement.jsm code module</a> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>Using <a href="/en/JavaScript_code_modules/PerfMeasurement.jsm" title="en/JavaScript code modules/PerfMeasurement.jsm"><code>PerfMeasurement.jsm</code></a> to measure performance data in your JavaScript code.</dd> + <dt><a href="/en-US/docs/Performance/Adding_a_new_Telemetry_probe" title="https://developer.mozilla.org/en-US/docs/Performance/Adding_a_new_Telemetry_probe">Adding a new Telemetry probe</a></dt> + <dd>Information on how to add a new measurement to the Telemetry performance-reporting system</dd> + <dt><a href="/en/Performance/Profiling_JavaScript_with_Shark" title="en/Performance/Profiling JavaScript with Shark">Profiling JavaScript with Shark</a> (obsolete - replaced by Instruments)</dt> + <dd>How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.</dd> + <dt><a href="/en/Performance/Profiling_with_Shark" title="en/Performance/Profiling with Shark">Profiling with Shark</a> (obsolete - replaced by Instruments)</dt> + <dd>How to use Apple's Shark tool to profile Mozilla code.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Investigating_CSS_Performance">Investigating CSS Performance</a></dt> + <dd>How to figure out why restyle is taking so long</dd> + </dl> + + <h3 id="Power_profiling">Power profiling</h3> + + <dl> + <dt><a href="/en-US/docs/Mozilla/Performance/Power_profiling_overview">Power profiling overview</a></dt> + <dd>This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.</dd> + <dt><code><a href="/en-US/docs/Mozilla/Performance/tools_power_rapl">tools/power/rapl</a></code> (Mac, Linux)</dt> + <dd><code>tools/power/rapl</code> is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.</dd> + <dt><code><a href="/en-US/docs/Mozilla/Performance/powermetrics">powermetrics</a></code> (Mac-only)</dt> + <dd><code>powermetrics</code> is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/TimerFirings_logging">TimerFirings logging</a> (All platforms)</dt> + <dd>TimerFirings logging is a built-in logging mechanism that prints data on every time fired.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Activity_Monitor_and_top">Activity Monitor, Battery Status Menu and <code>top</code></a> (Mac-only)</dt> + <dd>The battery status menu, Activity Monitor and <code>top</code> are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.</dd> + <dt><a href="/en-US/docs/Mozilla/Performance/Intel_Power_Gadget">Intel Power Gadget</a> (Windows, Mac, Linux)</dt> + <dd>Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.</dd> + <dt><code><a href="/en-US/docs/Mozilla/Performance/perf">perf</a></code> (Linux-only)</dt> + <dd><code>perf</code> is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.</dd> + <dt><code><a href="/en-US/docs/Mozilla/Performance/turbostat">turbostat</a></code> (Linux-only)</dt> + <dd><code>turbostat</code> is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.</dd> + <dt><code><a href="https://01.org/powertop">powertop</a></code> (Linux-only)</dt> + <dd><code>powertop</code> is an interactive command-line utility that gathers and displays various power-related measurements.</dd> + </dl> + + <h3 id="Related_Topics">Related Topics</h3> + + <dl> + <dd><a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a>, <a href="/en/Extensions" title="en/Extensions">Extensions</a>, <a href="/en/Addons" title="en/Addons">Addons</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/es/mozilla/rust/index.html b/files/es/mozilla/rust/index.html new file mode 100644 index 0000000000..3454ab434b --- /dev/null +++ b/files/es/mozilla/rust/index.html @@ -0,0 +1,45 @@ +--- +title: The Rust programming language +slug: Mozilla/Rust +tags: + - Desarrollo web + - lenguajes + - paralelización + - systemas +translation_of: Mozilla/Rust +--- +<p><img alt="Rust logo" src="https://www.rust-lang.org/logos/rust-logo-blk.svg" style="float: left; height: 150px; width: 150;"><a href="https://www.rust-lang.org/">Rust</a> es un nuevo lenguaje de programación de código libre, creado por Mozilla y una comunidad de voluntarios, diseñado para ayudar a los desarrolladores a crear rápidamente aplicaciones seguras que puedan tener todas las ventajas de los modernos procesadores de varios núcleos. Evita los accesos de memoria incorrectos, garantiza hilos de procesamiento seguros y además tiene una sintaxis fácil de aprender.</p> + +<p>Además Rust ofrece abstracciones a coste cero, semántica de movimientos, y garantiza memoria segura, hilos sin condiciones de carreras, genéricos basados en propiedades, identificación de patrones, deducciones de tipos, y uniones eficientes a C, con unos tamaños en ejecución mínimos. </p> + +<p>Para aprender más de Rust, puede:</p> + +<ul> + <li>Ver los vídeos a continuación para ver más en detalle la potencia y beneficios que tiene Rust.</li> + <li>Leer el libro en linea<em><a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a></em>.</li> + <li>Descargarse el compilador de Rust, ver los ejemplos y aprender todo lo que quiera en el sitio oficial de Rust <a href="https://www.rust-lang.org/">Rust official web site</a>.</li> +</ul> + +<h2 id="Rust_and_the_future_of_systems_programming">Rust and the future of systems programming</h2> + +<p>{{EmbedYouTube("8EPsnf_ZYU0")}}</p> + +<h2 id="Unlocking_the_power_of_parallelism_with_Rust">Unlocking the power of parallelism with Rust</h2> + +<p>{{EmbedYouTube("cNeIOt8ZdAY")}}</p> + +<h2 id="Rust_for_web_developers">Rust for web developers</h2> + +<p>{{EmbedYouTube("FfoXFnzZbBM")}}</p> + +<h2 id="Safe_systems_programming_with_Rust">Safe systems programming with Rust</h2> + +<p>{{EmbedYouTube("P3sfNGtpuxc")}}</p> + +<h2 id="Growing_the_Rust_community">Growing the Rust community</h2> + +<p>{{EmbedYouTube("duv0tuPAnO0")}}</p> + +<h2 id="Putting_Rust_into_production_at_Mozilla">Putting Rust into production at Mozilla</h2> + +<p>{{EmbedYouTube("2RhbYpgVpg0")}}</p> diff --git a/files/es/mozilla/security/index.html b/files/es/mozilla/security/index.html new file mode 100644 index 0000000000..bf7933d35b --- /dev/null +++ b/files/es/mozilla/security/index.html @@ -0,0 +1,33 @@ +--- +title: Browser security +slug: Mozilla/Security +tags: + - Developing Mozilla + - Firefox + - Landing + - Mozilla + - NeedsTranslation + - Security + - TopicStub +translation_of: Mozilla/Security +--- +<p><span class="seoSummary">An important aspect of developing code for any browser, including Firefox, as well as any Web-oriented project, is its security. These articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines.</span></p> + +<p>{{LandingPageListSubpages}}</p> + +<section id="Quick_Links"> +<ol> + <li><a href="https://www.mozilla.org/en-US/security/bug-bounty/" title="We appreciate all bug reports, but we back up our appreciation of reports of severe security problems with a $3000 reward!">Bug bounty program</a></li> + <li><a href="http://www.mozilla.org/projects/security/known-vulnerabilities.html" title="Learn from our past mistakes.">Known vulnerabilities and fixes in Mozilla</a></li> + <li><a href="/en-US/docs/Mozilla/Security">Debugging and testing</a> + <ol> + <li>{{Link("/en-US/docs/Clang_Static_Analysis")}}</li> + <li>{{Link("/en-US/docs/Debugging_Mozilla_with_Valgrind")}}</li> + <li>{{Link("/en-US/docs/Mozilla/Testing/Firefox_and_Address_Sanitizer")}}</li> + <li>{{Link("/en-US/docs/Mozilla/QA/Fuzzing")}}</li> + </ol> + </li> + <li>{{Link("/en-US/docs/Mozilla/Developer_guide")}}</li> + <li>{{Link("/en-US/docs/Web/Security")}}</li> +</ol> +</section> diff --git a/files/es/mozilla/security/x509_certificates/index.html b/files/es/mozilla/security/x509_certificates/index.html new file mode 100644 index 0000000000..cdad565f6d --- /dev/null +++ b/files/es/mozilla/security/x509_certificates/index.html @@ -0,0 +1,386 @@ +--- +title: A Web PKI x509 certificate primer +slug: Mozilla/Security/x509_Certificates +translation_of: Mozilla/Security/x509_Certificates +--- +<p><span class="seoSummary">X.509 (in this document referred as x509) is an ITU standard to describe certificates. This article provides an overview of what these are and how they work.</span></p> + +<p>Three versions of the x509 standard have been defined for web-pki. In this document we will be referring to the current standard in use for web pki: x509 v3, which is described in detail in {{rfc(5280)}}. In general, x509 certificates bind a signature to a validity period, a public key, a subject, an issuer, and a set of extensions. The extensions define extra properties of the certificate such as extra attributes of the certificate or constraints on the use of the certificate. In order for a certificate to be valid these three requirements must be met:</p> + +<ol> + <li>There is a verification path from the site certificate to a trusted certificate of the user agent (ie if you follow the issuer path you will end on a self-signed certificate that is considered trusted by the browser).</li> + <li>The attributes of the certificates in the verification path have valid parameters for that verification (for example the validity period of all the certificates are valid for the time the verification is being done)</li> + <li>Revocation checks are considered OK for that particular validation.</li> +</ol> + +<p>One issue that is not commonly known is that the x509 trust graph is not a forest (a bunch of trees where each root is a trusted root) but a cyclic graph, where the same key/issuer can be a root or an intermediate for another root in the browsers key store (when roots create intermediates for each other it is called cross-signing).</p> + +<h2 id="Extensions_2"><span class="mw-headline" id="Extensions">Extensions</span></h2> + +<p>While {{rfc(5280)}} defines 16 extensions for webpki in this document we will be describing the six extensions we considered critical for understanding. Certificates can have other extensions not described on {{rfc(5280)}}, but that is out of the scope of this document. Extensions can be marked as critical or non-critical, conforming certificate verification libraries should stop processing verification when encountering a critical extension that they do not understand ( and should continue processing if the extension is marked as non-critical) mozila::pkix has this behavior.</p> + +<h3 id="Subject_alternate_name"><span class="mw-headline" id="Subject_Alternate_Name">Subject alternate name</span></h3> + +<p>This extension defines what other names (such as DNS names) are valid for this certificate. This allows for a certificate to be used for more than one <a class="external text" href="http://www.tech-faq.com/fqdn.html" rel="nofollow">FQDN</a>, for example you can have a certificate that is valid for both a.example.com and b.example.com</p> + +<h3 id="Basic_constraints"><span class="mw-headline" id="Basic_Constraints">Basic constraints</span></h3> + +<p>This allows certificates to be asserted as issuing certificates (it is mandatory for CA certificates). It can also be used to express the maximum depth of the trust path from the CA.</p> + +<h3 id="Key_usage"><span class="mw-headline" id="Key_Usage">Key usage</span></h3> + +<p>This extension is used to constrain the purpose for the key in the certificate. More than one key usage can be asserted. Examples of key usages are: <code>digitalSignature</code>, <code>keyEncipherment</code>, <code>dataEncipherment</code>, <code>keyCertSign</code>, and <code>cRLSign</code>. For CA certificates the <code>keyCertSign</code> bit <strong>must</strong> be set.</p> + +<h3 id="Extended_key_usages"><span class="mw-headline" id="Extended_Key_Usages">Extended key usages</span></h3> + +<p>This is another bitfield to constrain the usages of the key of the certificate. Its is directed mostly at what type of application the certificate was issued for. Examples of extended key usages are: <code>serverAuth</code>, <code>clientAuth</code>, and <code>OCSPSigning</code>. For end-entity certificates for PKI this extension is required to exist with the <code>serverAuth</code> bit asserted.</p> + +<h3 id="Name_constraints"><span class="mw-headline" id="Name_Constraints">Name constraints</span></h3> + +<p>This is an extension exclusive for CA and indicates limits on the name space for its children. This is one of the most powerful extensions for businesses to have to help limit risk imposed by losing the private key of the CA.</p> + +<h3 id="Authority_information_access"><span class="mw-headline" id="Authority_Information_Access">Authority information access</span></h3> + +<p>This extension is primarily used to to describe the OCSP location for revocation checking. It is mandatory for certificates that chain up to a root in the Mozilla CA program.</p> + +<h2 id="Self-signed_certificates"><span class="mw-headline" id="Self_Signed_Certs">Self-signed certificates</span></h2> + +<p>These are the steps to generate a certificate for www.example.com. Replace this value with the actual server name in the steps below.<br> + 1. Generate the key using the following command:</p> + +<ul> + <li><code>openssl genpkey -algorithm RSA -out key.pem -pkeyopt rsa_keygen_bits:2048</code></li> + <li>2048 is considered secure for the next 4 years.</li> +</ul> + +<dl> +</dl> + +<p>2. Generate CSR using this command:</p> + +<ul> + <li><code>openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr -utf8 -subj '/CN=www.example.com'</code></li> + <li>This creates a new Certificate Signing Request (CSR) that will be valid for 3 years.</li> +</ul> + +<dl> +</dl> + +<p>3. Write extensions file by creating a new file with name <code>openssl.ss.cnf</code> with the following contents:</p> + +<ul> + <li>basicConstraints = CA:FALSE</li> + <li>subjectAltName =DNS:www.example.com</li> + <li>extendedKeyUsage =serverAuth</li> +</ul> + +<dl> +</dl> + +<p>4. Self-sign csr (using SHA256) and append the extensions described in the file</p> + +<ul> + <li>"openssl x509 -req -sha256 -days 3650 -in example.csr -signkey key.pem -set_serial $ANY_INTEGER -extfile openssl.ss.cnf -out example.pem"</li> +</ul> + +<dl> +</dl> + +<p>You can now use example.pem as your certfile</p> + +<h2 id="CAs_included_in_Firefox"><span class="mw-headline" id="CAs_Included_in_Firefox">CAs included in Firefox</span></h2> + +<p>When you visit a secure website, Firefox will validate the website’s certificate by checking that the certificate that signed it is valid, and checking that the certificate that signed the parent certificate is valid and so forth up to a root certificate that is known to be valid. This chain of certificates is called the Certificate Hierarchy.</p> + +<p>If your certificates will only be used to verify one domain (e.g. *.yourcompany.com) but you want others outside of your organization to be able to browse to your website using https without having to manually import a root certificate, then you can get an SSL certificate from one of the CAs who already have a root certificate included in the major browsers.</p> + +<p>Firefox uses a default set of X.509v3 root certificates for various <a class="external text" href="http://www.mozilla.org/projects/security/certs/included/" rel="nofollow">Certification Authorities (CAs)</a>. The root certificates included by default have their "trust bits" set to indicate if the CA's root certificates may be used to verify certificates for SSL servers, S/MIME email users, and/or digitally-signed code objects without having to ask users for further permission or information.</p> + +<p>CAs apply to have their root certificates <a class="external text" href="http://www.mozilla.org/projects/security/certs/included/" rel="nofollow">included by default in Mozilla products</a> by following the <a class="external text" href="http://www.mozilla.org/projects/security/certs/policy/" rel="nofollow">Mozilla CA Certificate Policy</a> and applying for inclusion as per <a href="https://wiki.mozilla.org/CA:How_to_apply" title="CA:How to apply">CA:How_to_apply</a>. Users may override the default root certificate settings using the <a class="external text" href="https://wiki.mozilla.org/CA:UserCertDB" rel="nofollow">Certificate Manager</a>.</p> + +<p>Some organizations make use of the set of CAs included in Mozilla's products. If you wish to do this, you should read the relevant part of the <a href="https://wiki.mozilla.org/CA:FAQ#Can_I_use_Mozilla.27s_set_of_CA_certificates.3F">Mozilla CA FAQ</a> before doing so.</p> + +<h2 id="Running_your_Own_CA_2"><span class="mw-headline" id="Running_your_Own_CA">Running your Own CA</span></h2> + +<p>If you are going to have your own CA, we recommend building 3 certificates: a long term root cert, a medium term intermediate cert, and a short term end-entity cert. This type of hierarchy allows for a relatively simple long term root to be distributed to clients, and some flexibility on the intermediate cert so that you can change parameters based on best practices and security research.</p> + +<h2 id="Generate_your_CA_Root_2"><span class="mw-headline" id="Generate_your_CA_Root">Generate your CA Root</span></h2> + +<p>Update *.example.com and *.example.net below to match your domains.</p> + +<p>Assumptions:</p> + +<ul> + <li>You are the domain owner of *.example.com and *.example.net.</li> + <li>Your computer is <strong>not</strong> connected to the internet.</li> +</ul> + +<p>Steps to generate your CA root certificate:</p> + +<ol> + <li>Generate key + <ul> + <li>"openssl genpkey -algorithm RSA -out rootkey.pem -pkeyopt rsa_keygen_bits:4096"</li> + <li>4096 is considered secure for the next 15 years.</li> + </ul> + </li> + <li>Generate csr + <ul> + <li>"openssl req -new -key rootkey.pem -days 5480 -extensions v3_ca -batch -out root.csr -utf8 -subj '/C=US/O=Orgname/OU=SomeInternalName'</li> + <li>Make a new Certificate Signing Request (CSR) that will be valid for 15 years.</li> + </ul> + </li> + <li>Write extensions File (openssl.root.cnf) + <ul> + <li>basicConstraints = critical, CA:TRUE</li> + <li>keyUsage = keyCertSign, cRLSign</li> + <li>subjectKeyIdentifier = hash</li> + <li>nameConstraints = permitted;DNS:example.com,permitted;DNS:example.net</li> + </ul> + </li> + <li>Self-sign csr (using SHA256) and append the extensions described in the file + <ul> + <li>"openssl x509 -req -sha256 -days 3650 -in root.csr -signkey rootkey.pem -set_serial $ANY_SMALL_INTEGER -extfile openssl.root.cnf -out root.pem"</li> + </ul> + </li> +</ol> + +<p>Now you have CA pem file with its associated key.</p> + +<h2 id="Generate_your_Intermediate_cert_2"><span class="mw-headline" id="Generate_your_Intermediate_cert">Generate your Intermediate cert</span></h2> + +<p>The following steps create an intermediate cert that is valid for 8 years.</p> + +<ol> + <li>Generate key + <ul> + <li>"openssl genpkey -algorithm RSA -out r=intkey.pem -pkeyopt rsa_keygen_bits: 3072"</li> + <li>A 3072 bit key is considered secure for the next 8 years.</li> + </ul> + </li> + <li>Generate csr + <ul> + <li>"openssl req -new -key intkey.pem -days 2922 -extensions v3_ca -batch -out int.csr - utf8 -subj '/C=US/O=Orgname/OU=SomeInternalName2'</li> + <li>Make a new Certificate Signing Request (CSR) that will be valid for 8 years.</li> + </ul> + </li> + <li>Write extensions File (openssl.int.cnf) + <ul> + <li>basicConstraints = critical, CA:TRUE</li> + <li>authorityKeyIdentifier = keyid, issuer</li> + <li>subjectKeyIdentifier = hash</li> + <li>keyUsage = keyCertSign, cRLSign</li> + <li>extendedKeyUsage =serverAuth</li> + <li>authorityInfoAccess = OCSP;URI:<a class="external free" href="http://ocsp.example.com:8888/" rel="nofollow">http://ocsp.example.com:8888/</a></li> + </ul> + </li> + <li>Sign the intermediate csr with the root key and the intermediate extensions + <ul> + <li>"openssl x509 -req -sha256 -days 2922 -in int.csr -CAkey rootkey.pem -CA root.pem -set_serial $SOME_LARGE_INTEGER -out int.pem -extfile openssl.int.cnf"</li> + </ul> + </li> +</ol> + +<h2 id="Generate_the_end_entity_certificate_2"><span class="mw-headline" id="Generate_the_end_entity_certificate">Generate the end entity certificate</span></h2> + +<p>Update www.example.com below to match your domain.</p> + +<ol> + <li>Generate key + <ul> + <li>"openssl genpkey -algorithm RSA -out eekey.pem -pkeyopt rsa_keygen_bits: 2048"</li> + <li>2048 is considered secure for the next 4 years.</li> + </ul> + </li> + <li>Generate csr + <ul> + <li>"openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr - utf8 -subj '/CN=www.example.com'</li> + <li>Make a new Certificate Signing Request (CSR) that will be valid for 3 years.</li> + </ul> + </li> + <li>Write extensions file (make a new file with name openssl.ss.cnf with the following contents) + <ul> + <li>basicConstraints = CA:FALSE</li> + <li>subjectAltName =DNS:www.example.com</li> + <li>extendedKeyUsage =serverAuth</li> + <li>authorityInfoAccess = OCSP;URI:<a class="external free" href="http://ocsp.example.com:80/" rel="nofollow">http://ocsp.example.com:80/</a></li> + </ul> + </li> + <li>Intermediate sings the csr (using SHA256) and appends the extensions described in the file + <ul> + <li>"openssl x509 -req -sha256 -days 1096 -in example.csr -CAkey intkey.pem -CA int.pem -set_serial $SOME_LARGE_INTEGER -out www.example.com.pem -extfile openssl.int.cnf"</li> + </ul> + </li> +</ol> + +<h1 id="Security_Notes_2"><span class="mw-headline" id="Security_Notes">Security Notes</span></h1> + +<p>There are several organizations that provide recommendations regarding the security parameters for key/hash sizes given current computational power. For the end date of the root cert created following the instructions in this page (year 2017). These are the recomendations of bit sizes (from <a class="external free" href="http://www.keylength.com/" rel="nofollow">http://www.keylength.com/</a>):</p> + +<table class="wikitable"> + <tbody> + <tr> + <th></th> + <th>Asymmetric</th> + <th>ECC(Key)</th> + <th>Hash</th> + </tr> + <tr> + <td>Linestra(2004)</td> + <td>1902</td> + <td>172</td> + <td>172</td> + </tr> + <tr> + <td>Ecrypt 2012</td> + <td>2432</td> + <td>224</td> + <td>224</td> + </tr> + <tr> + <td>NIST 2012</td> + <td>2048</td> + <td>224</td> + <td>224</td> + </tr> + <tr> + <td>ANSSI 2010</td> + <td>4096</td> + <td>200</td> + <td>256</td> + </tr> + <tr> + <td><a class="external mw-magiclink-rfc" href="https://tools.ietf.org/html/rfc3766" rel="nofollow">RFC 3766</a></td> + <td>2358</td> + <td>200</td> + <td>---</td> + </tr> + <tr> + <td>BSI</td> + <td>1976</td> + <td>256</td> + <td>256</td> + </tr> + </tbody> +</table> + +<p>In other words, SHA1 is now deprecated for new uses. We should use at least 3072 key sizes and at least a 256 ECC curve. Thus the recommendation here is for the root to be 4096 if using RSA and p384 for the root key. (p384 also chosen for compatibility as most SSL/TLS implementations support this part of suite B).</p> + +<h1 id="Error_Codes_in_Firefox_2"><span class="mw-headline" id="Error_Codes_in_Firefox">Error Codes in Firefox</span></h1> + +<p>Here are some common errors that might be encountered when working with certificates in Firefox.</p> + +<table class="wikitable"> + <tbody> + <tr> + <th>Error Code</th> + <th>What It Means</th> + <th>What Can I Do</th> + </tr> + <tr> + <td>SEC_ERROR_BAD_DER</td> + <td>A certificate is not properly encoded according to ASN.1 (DER) encoding</td> + <td>Re-generate the improperly-encoded certificate</td> + </tr> + <tr> + <td>SEC_ERROR_CA_CERT_INVALID</td> + <td>An end-entity certificate is being used to issue another certificate</td> + <td>Ensure that any certificate intended to issue certificates has a basic constraints extension with cA: TRUE</td> + </tr> + <tr> + <td>SEC_ERROR_BAD_SIGNATURE</td> + <td>A signature on a certificate is improperly formatted or the certificate has been tampered with</td> + <td>Re-issue the certificate with the bad signature</td> + </tr> + <tr> + <td>SEC_ERROR_CERT_BAD_ACCESS_LOCATION</td> + <td>The OCSP URI in the authorityInformationAccess extension is improperly formed</td> + <td>Re-generate the certificate with a well-formed OCSP URI</td> + </tr> + <tr> + <td>SEC_ERROR_CERT_NOT_IN_NAME_SPACE</td> + <td>A certificate has a common name or subject alternative name that is not in the namespace of an issuing certificate</td> + <td>Re-issue the certificate with names that are within the namespace of all certificates in the chain</td> + </tr> + <tr> + <td>SEC_ERROR_CERT_SIGNATURE_ALGORITHM_DISABLED</td> + <td>A certificate has been signed with an obsolete algorithm</td> + <td>Re-sign the certificate using a modern algorithm</td> + </tr> + <tr> + <td>SEC_ERROR_EXPIRED_CERTIFICATE</td> + <td>A certificate is too old to be used</td> + <td>Re-generate the certificate</td> + </tr> + <tr> + <td>SEC_ERROR_EXTENSION_VALUE_INVALID</td> + <td>A certificate has an extension with an empty value</td> + <td>Re-generate the certificate without the extension, or re-generate it with a non-empty value</td> + </tr> + <tr> + <td>SEC_ERROR_INADEQUATE_CERT_TYPE</td> + <td>A certificate has an extended key usage extension that does not assert a required usage, or an end-entity certificate asserts the id-kp-OCSPSigning usage when it shouldn't</td> + <td>Re-generate the certificate with the appropriate extended key usage values</td> + </tr> + <tr> + <td>SEC_ERROR_INADEQUATE_KEY_USAGE</td> + <td>A certificate has a key usage extension that does not assert a required usage</td> + <td>Re-generate the certificate with the appropriate key usage values</td> + </tr> + <tr> + <td>SEC_ERROR_INVALID_ALGORITHM</td> + <td>A certificate has been signed with an unknown algorithm</td> + <td>Re-sign the certificate with a standardized certificate signing algorithm</td> + </tr> + <tr> + <td>SEC_ERROR_INVALID_TIME</td> + <td>A time field in a certificate has an invalid value</td> + <td>Re-generate the certificate with valid encodings for time fields</td> + </tr> + <tr> + <td>MOZILLA_PKIX_ERROR_KEY_PINNING_FAILURE</td> + <td></td> + <td></td> + </tr> + <tr> + <td>SEC_ERROR_PATH_LEN_CONSTRAINT_INVALID</td> + <td></td> + <td></td> + </tr> + <tr> + <td>SEC_ERROR_UNKNOWN_CRITICAL_EXTENSION</td> + <td>A certificate contains an extension marked as critical that is not handled by mozilla::pkix</td> + <td>Re-generate the certificate without the extension or with it not marked as critical</td> + </tr> + <tr> + <td>SEC_ERROR_UNKNOWN_ISSUER</td> + <td>Either a missing intermediate or root certificate is necessary to verify the certificate</td> + <td>Import the root certificate into Firefox or have the server send the intermediate</td> + </tr> + <tr> + <td>SEC_ERROR_INVALID_KEY</td> + <td></td> + <td></td> + </tr> + <tr> + <td>SEC_ERROR_UNSUPPORTED_KEYALG</td> + <td></td> + <td></td> + </tr> + <tr> + <td>SEC_ERROR_EXPIRED_ISSUER_CERTIFICATE</td> + <td>An issuer certificate is too old</td> + <td>Re-issue the issuer certificate</td> + </tr> + <tr> + <td>MOZILLA_PKIX_ERROR_CA_CERT_USED_AS_END_ENTITY</td> + <td>A certificate with a basic constraints extension with cA:TRUE is being used as an end-entity certificate</td> + <td>Re-generate the end-entity certificate without the basic constraints extension</td> + </tr> + <tr> + <td>MOZILLA_PKIX_ERROR_INADEQUATE_KEY_SIZE</td> + <td>A certificate has a key that is too small to be secure</td> + <td>Re-generate a larger key and issue a certificate using that key</td> + </tr> + </tbody> +</table> diff --git a/files/es/mozilla/tech/index.html b/files/es/mozilla/tech/index.html new file mode 100644 index 0000000000..f9682e62e1 --- /dev/null +++ b/files/es/mozilla/tech/index.html @@ -0,0 +1,14 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +<p>Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/es/mozilla/tech/toolkit_api/smile/index.html b/files/es/mozilla/tech/toolkit_api/smile/index.html new file mode 100644 index 0000000000..20b37a8659 --- /dev/null +++ b/files/es/mozilla/tech/toolkit_api/smile/index.html @@ -0,0 +1,58 @@ +--- +title: SMILE +slug: Mozilla/Tech/Toolkit_API/SMILE +tags: + - Interfaces + - NeedsTranslation + - SMILE + - SeaMonkey + - TopicStub + - XPCOM + - XPCOM API Reference +translation_of: Mozilla/Tech/Toolkit_API/SMILE +--- +<p> </p> + +<div class="overheadIndicator smMinVerHeader standardNote"> +<p>This article covers features introduced in <a class="new" href="https://developer.mozilla.org/en-US/docs/SeaMonkey_2_for_developers" rel="nofollow">SeaMonkey 2</a></p> +</div> + +<p> </p> + +<p>SMILE is a JavaScript library designed to help developers build extensions using terminology and interfaces that are familiar to them.</p> + +<p>SMILE is about making it easier for extension developers to be productive, by minimizing some of the XPCOM formality and adding some "modern" JavaScript ideas. We want to start with areas that will provide the most benefit.</p> + +<p>SMILE has a <code><span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/comm-central/source/suite/smile/public/smileIApplication.idl" rel="external nofollow" title="http://mxr.mozilla.org/comm-central/source/suite/smile/public/smileIApplication.idl">smileIApplication</a> </span></code> interface that implements all the functions of <code><span class="lang lang-en"><a class="external" href="http://mxr.mozilla.org/comm-central/source/mozilla/toolkit/components/exthelper/extIApplication.idl" rel="external nofollow" title="http://mxr.mozilla.org/comm-central/source/mozilla/toolkit/components/exthelper/extIApplication.idl">extIApplication</a></span></code>. The library has also been implemented in Firefox ("<a class="internal" href="/en/Toolkit_API/FUEL" title="en/FUEL">FUEL</a>") and in Thunderbird ("<a class="internal" href="/en/Toolkit_API/STEEL" title="en/Thunderbird/STEEL">STEEL</a>").</p> + +<h3 id="Objects" name="Objects">Objects</h3> + +<h4 id="extIApplication_Objects">extIApplication Objects</h4> + +<ul> + <li><a href="/en/Toolkit_API/extIConsole" title="en/FUEL/Console">extIConsole</a></li> + <li><a href="/en/Toolkit_API/extIEventItem" title="en/FUEL/EventItem">extIEventItem</a></li> + <li><a href="/en/Toolkit_API/extIEventListener" title="en/FUEL/EventListener">extIEventListener</a></li> + <li><a href="/en/Toolkit_API/extIEvents" title="en/FUEL/Events">extIEvents</a></li> + <li><a href="/en/Toolkit_API/extIExtension" title="en/FUEL/Extension">extIExtension</a></li> + <li><a href="/en/Toolkit_API/extIExtensions" title="en/FUEL/Extensions">extIExtensions</a></li> + <li><a href="/en/Toolkit_API/extIPreference" title="en/FUEL/Preference">extIPreference</a></li> + <li><a href="/en/Toolkit_API/extIPreferenceBranch" title="en/FUEL/PreferenceBranch">extIPreferenceBranch</a></li> + <li><a href="/en/Toolkit_API/extISessionStorage" title="en/FUEL/SessionStorage">extISessionStorage</a></li> +</ul> + +<h4 id="smileIApplication_Objects">smileIApplication Objects</h4> + +<ul> + <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIBookmarkRoots" title="en/Toolkit API/SMILE/smileIBookmarkRoots">smileIBookmarkRoots</a></li> + <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIWindow" title="en/Toolkit API/SMILE/smileIWindow">smileIWindow</a></li> + <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIBrowserTab" title="en/Toolkit API/SMILE/smileIBrowserTab">smileIBrowserTab</a></li> + <li><a class="internal" href="/en/Toolkit_API/SMILE/smileIApplication" title="en/Toolkit API/SMILE/smileIApplication">smileIApplication</a></li> +</ul> + +<h3 id="XPCOM" name="XPCOM">XPCOM</h3> + +<p>Although the <a class="internal" href="/en/Toolkit_API/extIApplication" title="en/Toolkit API/extIApplication">extIApplication</a> object is preloaded into XUL scripts, it is not preloaded into JavaScript XPCOM code. The object needs to be accessed like any other XPCOM service:</p> + +<pre>var Application = Components.classes["@mozilla.org/smile/application;1"].getService(Components.interfaces.smileIApplication); +</pre> diff --git a/files/es/mozilla/tech/xpcom/guide/index.html b/files/es/mozilla/tech/xpcom/guide/index.html new file mode 100644 index 0000000000..7afb1c9cd1 --- /dev/null +++ b/files/es/mozilla/tech/xpcom/guide/index.html @@ -0,0 +1,16 @@ +--- +title: XPCOM guide +slug: Mozilla/Tech/XPCOM/Guide +tags: + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Guide +--- +<p><span class="seoSummary">These articles provide tutorials and usage documentation for XPCOM, including how to use it in your own projects and how to build XPCOM components for your Firefox add-ons and the like.</span></p> +<p></p><div class="row topicpage-table"> + <div class="section"><dl><dl><dt class="landingPageList"><a href="/es/docs/C%C3%B3mo_crear_un_componente_XPCOM_en_JavaScript">Cómo crear un componente XPCOM en JavaScript</a></dt><dd class="landingPageList"></dd></dl></dl></div> + <div class="section"><dl><dt class="landingPageList"><a href="/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM">Creación de Componentes XPCOM</a></dt><dd class="landingPageList"></dd></dl></div> + </div><p></p> diff --git a/files/es/mozilla/tech/xpcom/language_bindings/index.html b/files/es/mozilla/tech/xpcom/language_bindings/index.html new file mode 100644 index 0000000000..727c397d50 --- /dev/null +++ b/files/es/mozilla/tech/xpcom/language_bindings/index.html @@ -0,0 +1,25 @@ +--- +title: Language bindings +slug: Mozilla/Tech/XPCOM/Language_Bindings +tags: + - Embedding + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM + - 'XPCOM:Language Bindings' +translation_of: Mozilla/Tech/XPCOM/Language_Bindings +--- +<p>An <strong>XPCOM Language Binding</strong> is a bridge between a particular language and <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> to provide access to XPCOM objects from that language, and to let modules written in that language be used as XPCOM objects by all other languages for which there are XPCOM bindings.</p> +<p>More specifically, an XPCOM language binding:</p> +<ul> + <li>Enables <em>access to XPCOM objects from that language</em> (where access means reading/writing/creating XPCOM objects as well as calling methods on them).</li> + <li>Exposes <em>modules written in the bound language as XPCOM objects</em>, thereby enabling all other languages for which XPCOM bindings exist to access these modules.</li> +</ul> +<p>Since the XPCOM layer itself is written in C/C++, its API can be accessed out-of-the-box using C or C++. In order to allow any other language to use the XPCOM API, a bridging layer is required.</p> +<p>The following bridging layers are currently available:</p> +<p></p><div class="row topicpage-table"> + <div class="section"><dl><dl><dt></dt></dl></dl></div> + <div class="section"><dl><dt class="landingPageList"><a href="/es/docs/Components.utils.import">Components.utils.import</a></dt><dd class="landingPageList">Este método fue introducido en <a href="es/Firefox_3_para_desarrolladores">Firefox 3</a> y es usado para compartir código entre diferentes alcances(scopes) de forma sencilla. Por ejemplo, puedes importar <a href="es/XPCOMUtils.jsm">XPCOMUtils.jsm</a> para evitar copiar y pegar grandes porciones comunes de código de registración de componentes XPCOM en tus archivos de compomentes.</dd></dl></div> + </div><p></p> diff --git a/files/es/mozilla/tech/xpcom/reference/index.html b/files/es/mozilla/tech/xpcom/reference/index.html new file mode 100644 index 0000000000..9fcb623f1b --- /dev/null +++ b/files/es/mozilla/tech/xpcom/reference/index.html @@ -0,0 +1,30 @@ +--- +title: XPCOM reference +slug: Mozilla/Tech/XPCOM/Reference +tags: + - Add-ons + - Extensions + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Reference +--- +<p>This reference describes the interfaces and functions provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM">XPCOM</a> library. In addition, it details the various helper classes and functions, as well as the components, provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Glue">XPCOM glue</a> library. The contents herein are oriented primarily toward extension developers and people embedding XPCOM in other projects.</p> + +<div class="warning"> +<p><strong>WebExtensions are becoming the new standard for creating add-ons. </strong>Eventually support for XPCOM add-ons will be deprecated, so you should begin to investigate porting your add-ons to use the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> API, and <a href="https://mzl.la/webext-feature-needed">report any missing functionality</a> so we can be sure to address your concerns. Work is ongoing on WebExtension capabilities, so your input will help prioritize and plan the work. To learn more about the kinds of changes that will be needed, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a>. In addition, any binaries you use will then need to be converted for use with the WebExtensions <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">native messaging</a> API, or compiled using <a href="https://webassembly.github.io/">WebAssembly</a> or <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</p> +</div> + +<div class="note"> +<p>If you're working on a module in the Mozilla codebase that's compiled with the <code>MOZILLA_INTERNAL_API</code> flag set, some of these APIs -- the string functions and classes in particular -- are not the ones you should be using. See the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Guide/Internal_strings">XPCOM internal string guide</a> for documentation of the internal string API used within the Mozilla codebase.</p> +</div> + +<p></p><div class="row topicpage-table"> + <div class="section"><dl><dl><dt></dt></dl></dl></div> + <div class="section"><dl><dt class="landingPageList"><a href="/es/docs/XPCOM_Interface_Reference">XPCOM Interface Reference</a></dt><dd class="landingPageList">This is a reference to the XPCOM interfaces provided by the Mozilla platform.</dd></dl></div> + </div><p></p> + +<p>Many XPCOM pages return an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Core_functions/nsresult">nsresult</a></code>. Prior to Gecko 19 (Firefox 19 / Thunderbird 19 / SeaMonkey 2.16), this was an integer that simply returned an error code. It is now a strongly typed <code>enum</code> when XPCOM is built using a C++11 compiler. This causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs.</p> diff --git a/files/es/mozilla/tech/xpidl/index.html b/files/es/mozilla/tech/xpidl/index.html new file mode 100644 index 0000000000..c091484d6f --- /dev/null +++ b/files/es/mozilla/tech/xpidl/index.html @@ -0,0 +1,26 @@ +--- +title: XPIDL +slug: Mozilla/Tech/XPIDL +tags: + - Todas_las_Categorías + - XPCOM + - xpidl +translation_of: Mozilla/Tech/XPIDL +--- +<p> +</p><p><b>XPIDL</b> es un lenguaje de descripción de interface usado para especificar clases en la interface <a href="es/XPCOM">XPCOM</a>. +</p><p>Los lenguajes de descripción de interface (IDL, por Interface Description Languages) son usados para describir interfaces independientemente del lenguaje y de la máquina. Los IDLs permiten definir interfaces que pueden luego ser procesadas por herramientas para autogenerar especificaciones de interface dependientes del lenguaje. +</p><p>Una de estas herramientas es <a href="es/XPIDL/xpidl">xpidl</a>, que es usada para generar archivos de encabezado para C++ (.h), información 'typelib', y mucho más. +</p> +<h2 id="Escribiendo_archivos_de_interfaz_XPIDL">Escribiendo archivos de interfaz XPIDL</h2> +<p>XPIDL se asemeja bastante a <a class="external" href="http://www.omg.org/gettingstarted/omg_idl.htm">OMG IDL</a>, con sintaxis extendida para manejar IIDs y tipos adicionales. Hay algunos ejemplos en la <a class="external" href="http://lxr.mozilla.org/mozilla/source/xpcom/base">xpcom/base</a> y en los directorios <a class="external" href="http://lxr.mozilla.org/mozilla/source/xpcom/ds">xpcom/ds</a> del árbol Mozilla. +</p> +<ul><li> <a class="external" href="http://www.mozilla.org/scriptable/xpidl/syntax.html">XPIDL syntax</a> (Desactualizado) +</li><li> <a href="es/XPIDL/Sintaxis">XPIDL:Sintaxis</a> (XPIDL <a class="external" href="http://en.wikipedia.org/wiki/Extended_Backus-Naur_form">EBNF</a>) +</li><li> <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">XPIDL Author's Guide</a> (Actualizado en su mayoría) +</li></ul> +<h2 id="Recursos">Recursos</h2> +<ul><li> <a class="external" href="http://www.mozilla.org/scriptable/xpidl/notes/">Algunas notas en desórden</a>, que incluyen una <a class="external" href="http://www.mozilla.org/scriptable/xpidl/notes/keywords.txt">lista de palabras clave (keywords)</a> +</li><li> <a href="es/XPIDL/xpidl">xpidl</a> es una herramienta para generar encabezados de C++, interfaces de Java, typelibs <a href="es/XPConnect">XPConnect</a>, y documentación HTML desde los archivos XPIDL +</li></ul> +{{ languages( { "fr": "fr/XPIDL", "ja": "ja/XPIDL", "en": "en/XPIDL" } ) }} diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_éstas/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_éstas/index.html new file mode 100644 index 0000000000..efb5adcff9 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_éstas/index.html @@ -0,0 +1,291 @@ +--- +title: Agregar barras de herramientas y botones para éstas +slug: >- + Mozilla/Tech/XUL/Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_Toolbars_and_Toolbar_Buttons +--- +<p>{{AddonSidebar}}</p> + +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_menus_y_submenus", "Escuela_XUL/Agregar_eventos_y_comandos") }}</p> + +<h2 id="Adding_a_new_toolbar">Adding a new toolbar</h2> + +<p>Adding new toolbars to Firefox is easy, but adding them the wrong way is very easy as well.</p> + +<p>Toolbars in Firefox are very customizable. Some users don't like extra toolbars, or they want to rearrange toolbar buttons to their liking, possibly merging multiple toolbars in the process. Firefox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest.</p> + +<p>The first thing you need to do is add your buttons to the toolbar palette. The <a href="/en/XUL/toolbarpalette" title="en/XUL/toolbarpalette">toolbarpalette</a> is a collection of all toolbar buttons and toolbar items in Firefox, including those added by extensions. To add your buttons, all you need to do is overlay the palette in your main browser overlay.</p> + +<pre><overlay id="xulschoolhello-browser-overlay" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <toolbarpalette id="BrowserToolbarPalette"> + <toolbarbutton id="xulschoolhello-hello-world-button" + class="toolbarbutton-1 chromeclass-toolbar-additional" + label="&xulschoolhello.helloWorld.label;" + tooltiptext="&xulschoolhello.helloWorld.tooltip;" + oncommand="XULSchoolChrome.BrowserOverlay.doSomething(event);" /> + <!-- More buttons here. --> + </toolbarpalette> + <!-- More overlay stuff. --> +</overlay> +</pre> + +<p>One detail that is easy to overlook is the fact that the <em>toolbarpalette</em> element is outside of the <em>window</em> element. If you put the <em>toolbarpalette</em> element inside the <em>window</em> element in your overlay, some weird errors will begin to happen.</p> + +<div class="note"> +<p>Always set the <em>label</em> and <em>tooltiptext</em> attributes of a <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a>. In the case of a <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a> element (discussed later), use the <em>title</em> attribute instead of <em>label</em>. Tooltips are very important for users that want to know what a button does before clicking it.</p> +</div> + +<p>Setting the image for a toolbar button is done with CSS:</p> + +<pre>#xulschoolhello-hello-world-button { + list-style-image: url("chrome://xulschoolhello/skin/hellow-world.png"); +} +</pre> + +<p>It's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.</p> + +<p>The CSS file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. This is very important because the toolbar customization dialog won't work correctly without this. The way to include the file in the manifest is to add this line:</p> + +<pre>style chrome://global/content/customizeToolbar.xul chrome://xulschoolhello/skin/toolbar.css +</pre> + +<p>If you are using XBL bindings (explained way ahead) for your toolbar items, you'll have to include the CSS files for those as well, each in a new line like the one above.</p> + +<p>We now have code that adds one or more buttons to the toolbar palette. The user can now use the Customize Dialog to add the buttons to the current Firefox toolbars. In most cases this is not what you want as default behavior, because it would be very hard for the user to discover your buttons. Keep in mind most users don't know how to customize toolbars in Firefox.</p> + +<p>Let's add our own <a href="/en/XUL/toolbar" title="en/XUL/toolbar">toolbar</a>. This is done in the overlay as well.</p> + +<pre><window id="main-window"> + <toolbox id="navigator-toolbox"> + <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarName.label;" + accesskey="&xulschoolhello.toolbar.accesskey;" + customizable="true" mode="icons" context="toolbar-context-menu" + defaultset="xulschoolhello-hello-world-button" + insertbefore="PersonalToolbar" /> + </toolbox> +</window> +</pre> + +<p>Our toolbar is added as a child of the <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a> element in the main browser window. The toolbox is the collection of toolbars in Firefox, including the main menu bar. Let's look at the attributes we used:</p> + +<ul> + <li>The <em>toolbarname</em> is the name that will appear on the View > Toolbars menulist. This menu allows hiding and showing any toolbar.</li> + <li>The <em>customizable</em> attribute determines if the user can customize the toolbar. You should normally set this to <em>true</em>, unless you have strong reasons not to want users changing your toolbar.</li> + <li>The <em>mode</em> attribute is set to <em>icons</em>, which is the usual value. This can be changed in the Customize dialog by the user.</li> + <li>The <em>context</em> attribute should also be set if you want a customizable toolbar. It points to the id of a popup element that holds the customization options that are displayed when the user right-clicks on the toolbar. This popup is already part of the main window, so it doesn't need to be implemented again.</li> + <li>The <em>defaultset</em> attribute lists the ids of the icons youwant to include on your toolbar by default. It's a comma-separated list of ids, and it can also include other special values: <em>spacer</em>, <em>separator</em> and <em>spring</em>. <em>spacer</em> represents an empty button space, <em>separator</em> a vertical separation line and <em>spring</em> a flexible empty area that stretches.</li> + <li>Finally, the <em>insertbefore</em> attribute places our toolbar above the Bookmarks Toolbar. This is a matter of personal preference, but the Mac OS theme seems to be designed so that the Bookmarks Toolbar is always the last one (it has a lighter color than the rest). It also makes sense from a usability perspective, since bookmarks should be very easy to access for the user.</li> +</ul> + +<p>That's it for the basics. With this knowledge you should be able to create simple toolbars and toolbar buttons you can add to Firefox. Now we'll look deeper into the details of toolbars so that you can make <strong>great</strong> toolbars.</p> + +<h2 id="Toolbar_buttons">Toolbar buttons</h2> + +<p>There are several types of buttons and elements you can add to a toolbar depending on your needs. The <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a> element has the <em>type</em> attribute that allows you to change the behavior of the button in many ways. The <em>menu</em> and <em>menu-button</em> types allow you to create buttons that open popup menus beneath them. See the Back/Forward buttons in the main Firefox toolbar for an example. Menu toolbar buttons are handy when you want to include many options in your toolbar and you don't want it to be too cluttered. The other types, <em>checkbox</em> and <em>radio</em> are useful when you have buttons that change state when the user clicks on them. Read more about this in the <a href="/en/XUL/Attribute/toolbarbutton.type" title="en/XUL/Attribute/toolbarbutton.type">type attribute</a> specification.</p> + +<div class="note"> +<p>Keep in mind some users have small screens with low resolution. If you shrink the Firefox window, you'll notice that the content resizes until it reaches its minimum size and begin to be cropped (cut), making UI elements disappear. You should test that your toolbar resizes gracefully and doesn't force Firefox to crop content before it's strictly necessary.</p> +</div> + +<p>When you need something more elaborate than a button in your toolbar, you can use the <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a> element instead. This element is nothing more than a wrapper, so you can have whatever XUL content you want in it. However, you should keep in mind that odd-looking toolbars are likely to confuse and annoy users. Use custom toolbar items sparingly.</p> + +<h3 id="Toolbar_button_icons">Toolbar button icons</h3> + +<p>Making the icons and CSS rules for toolbar buttons is one of the most difficult tasks when making extensions. It is not too hard to come up with some graphics for the buttons, but it can be hard to make them blend in with Firefox on all operating systems. These are the icon sets for Firefox 3.0 on Windows XP, Windows Vista, Mac OS X and Linux:</p> + +<p><strong>Windows XP</strong><strong> and older</strong></p> + +<p><img alt="Toolbar-win.png" class="default internal" src="/@api/deki/files/4132/=Toolbar-win.png"></p> + +<p><strong>Windows Vista and 7 (Aero)</strong></p> + +<p><img alt="Toolbar-aero.png" class="default internal" src="/@api/deki/files/4133/=Toolbar-aero.png"></p> + +<p><strong>Mac OS X</strong></p> + +<p><img alt="Toolbar-mac.png" class="default internal" src="/@api/deki/files/4134/=Toolbar-mac.png"></p> + +<p><strong>Linux (Gnome)</strong></p> + +<p><img alt="" class="internal" src="../../../../@api/deki/files/4135/=Toolbar-gnome.png" style="height: 48px; width: 120px;"></p> + +<div class="note"> +<p>Note: the images above are probably not distributable under the same CC license, unlike the rest of this material.</p> +</div> + +<p>There are lots of differences there, right? Let's look at the most important ones:</p> + +<ul> + <li>On Windows, all icons except for the back / forward buttons are 24x24 pixels. The icons are colorful and detailed. On Windows Vista and Windows 7, the icons look shinier, and the predominant color is blue, while on XP the predominant color is green. Most Windows icons have 4 different states, from top to bottom: default, hover, disabled and active. The hover state is set when the mouse pointer is on top of the button and the button is not disabled. The active state is set when the user is clicking on the button. It is usually seen for only an instant, but you can you click and hold on the button to see the active state more clearly. You can't really tell on the white background of this page, but the disabled graphics are semi-transparent. This allows them to blend with whatever color the toolbar background is.</li> + <li>On Mac OS X, all icons except for the back / forward buttons are 36x23 pixels. They're all a mixture of grey tones, with very simple graphics in the center. Most only have 3 states: default, disabled and active. Transparency is not used.</li> + <li>On Linux, all icons are 24x24 pixels. Since Firefox is a <a class="external" href="http://www.gtk.org/" title="http://www.gtk.org/">GTK</a> application, it uses <a class="external" href="http://library.gnome.org/devel/gtk/stable/gtk-Stock-Items.html" title="http://library.gnome.org/devel/gtk/stable/gtk-Stock-Items.html">GTK icons</a> whenever possible. The icons in the image are the ones that aren't provided by GTK. GTK icons are accessed using special URLs, like this one: <a class="external" rel="freelink">moz-icon://stock/gtk-go-back?size=menu</a>. You can enter this URL in Firefox on Linux, and the corresponding icon will be displayed. The icons have the default and disabled states, and just like on Windows the disabled state is defined using transparency.</li> +</ul> + +<p>Now let's look at the CSS work involved in a toolbar that works on the 4 aforementioned systems. If you want your toolbar to look right on all systems, you should consider having different icon sets for each. You should also consider using a graphic designer for this work, as it takes a lot of attention to detail to make good icons.</p> + +<p>You can have a different skin directory for each operating system using Manifest Flags in the chrome.manifest file:</p> + +<pre>skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/ +skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/ os=WINNT +skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/winaero/ os=WINNT osversion>=6 +skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/ os=Darwin +</pre> + +<p>There is a separate skin directory for each system, with the Unix theme as the default (as most other systems are Unix-based). This makes it easy to keep the themes separate and to make changes to one of them without having to worry about the rest. On the other hand, it is often the case that there are multiple images and CSS sheets that are the same for all systems. For example, your extension logo icon will probably be the same. Having 4 copies of these files can be wasteful, so you may want to have a "common" directory.</p> + +<div class="note"> +<p>Image files use the most space in an extension package, by far. Most extensions are a few hundred kilobytes in size or smaller. If your extension is getting too big, you should look into reducing image size.</p> +</div> + +<p>Given the way manifest files work, we have found that the best solution is to have a separate package name for OS-specific skin files.</p> + +<pre>skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/all/ +skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/ +skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/ os=WINNT +skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/winaero/ os=WINNT osversion>=6 +skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/ os=Darwin +</pre> + +<p>All we did here is add a new entry for "common" styles that points to the <em>all</em> directory. The OS-specific entries now use a different package name: <em>xulschoolhello-os</em>. Now you just need to be careful about when to use <em><a class="external" rel="freelink">chrome://xulschoolhello/skin/</a></em> and when to use <em><a class="external" rel="freelink">chrome://xulschoolhello-os/skin/</a></em>. It's a bit hacky, but it works well.</p> + +<p>As for the image files themselves, you may be wondering why it is that all icons are included in a single file instead of having one file for every state of every icon. One reason is that it would be complicated to manage that many files, and it becomes more likely that changes made to some of the files lead to an inconsistent appearance that is not obvious by looking at the individual files. It is easier to be able to edit all icons in one go. There is also a performance gain from using a single file. To get the region that corresponds to a specific state of an icon, the <a href="/en/CSS/-moz-image-region" title="en/CSS/-moz-image-region">-moz-image-region</a> CSS property is used.</p> + +<p>Here are some examples of how the CSS for a <em>toolbarbutton</em> would look like on the 3 major platforms. This assumes that you've set the class<em> xs-hw-toolbarbutton</em> to all of your buttons.</p> + +<p>Windows:</p> + +<pre>/* The second and third selectors at the bottom are necessary to prevent + conflicts with installed themes. */ +toolbarbutton.xulschoolhello-toolbarbutton, +window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, +toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { + list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); +} + +#xulschoolhello-hello-world-button { + -moz-image-region: rect(0px, 24px, 24px, 0px); +} + +#xulschoolhello-hello-world-button:not([disabled="true"]):hover { + -moz-image-region: rect(24px, 24px, 48px, 0px); +} + +#xulschoolhello-hello-world-button[disabled="true"] { + -moz-image-region: rect(48px, 24px, 72px, 0px); +} + +#xulschoolhello-hello-world-button:not([disabled="true"]):hover:active { + -moz-image-region: rect(72px, 24px, 96px, 0px); +} +</pre> + +<p>Mac OS X:</p> + +<pre>/* The second and third selectors at the bottom are necessary to prevent + conflicts with installed themes. */ +toolbarbutton.xulschoolhello-toolbarbutton, +window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, +toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { + list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); +} + +#xulschoolhello-hello-world-button { + -moz-image-region: rect(0px, 36px, 23px, 0px); +} + +#xulschoolhello-hello-world-button[disabled="true"] { + -moz-image-region: rect(23px, 36px, 46px, 0px); +} + +#xulschoolhello-hello-world-button:not([disabled="true"]):hover:active { + -moz-image-region: rect(46px, 36px, 69px, 0px); +} +</pre> + +<p>Linux:</p> + +<pre>/* The second and third selectors at the bottom are necessary to prevent + conflicts with installed themes. */ +toolbarbutton.xulschoolhello-toolbarbutton, +window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, +toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { + list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); +} + +#xulschoolhello-hello-world-button { + -moz-image-region: rect(0px, 24px, 24px, 0px); + /* Or: list-style-image: url("moz-icon://stock/gtk-some-icon?size=menu"); */ +} + +#xulschoolhello-hello-world-button[disabled="true"] { + -moz-image-region: rect(24px, 24px, 48px, 0px); +} +</pre> + +<p>The Windows and Linux themes have several CSS rules that apply by default to all toolbar buttons. These add the button-like look you want. If for some reason you want to override these styles (and we don't recommend doing it), you'll need the following rule:</p> + +<pre>-moz-appearance: none; +</pre> + +<p><a href="/en/CSS/-moz-appearance" title="en/CSS/-moz-appearance">-moz-appearance</a> can be used in many cases where you want to strip the native look out of an element. This will save you a lot of time trying to remove all the CSS rules that give the buttons a native look. You'll probably still need to override a couple other CSS rules to get a completely plain look.</p> + +<h2 id="The_Customize_Toolbars_Dialog">The Customize Toolbars Dialog</h2> + +<p>Firefox has the option to customize its toolbars. We've already mentioned this before, and if you follow our recommendations, then you shouldn't have many problems making your toolbar compatible with the Customize Toolbars dialog. The dialog can be opened from View > Toolbars > Customize..., or by right-clicking on the main toolbar (or any toolbar with the correct <em>context</em> attribute value) and clicking on the Customize option.</p> + +<p>Other than what we have stated before, you should take into account the controls at the bottom of the Customize Toolbars dialog. You should test your toolbar buttons and items under all combinations of Icons / Icons and text / Text, Use Small Icons, and hiving your icons in different toolbars. You should also test that the Reset to Defaults button works correctly. Adding elements to your toolbar that are not <em>toolbarbutton</em> or <em>toolbaritem</em> will cause it to fail. Make sure your icons look OK while the Customize Dialog is open, and after clicking on the OK button. If you use XBL bindings, make sure everything works normally after customizing toolbars. All of this is very important to test because, when the dialog is opened, Firefox changes the DOM of the toolbar, adding wrapper elements that allow the customization. This tends to break very specific CSS, and XBL bindings lose their internal state when moved around the DOM.</p> + +<h2 id="Adding_toolbar_buttons_to_existing_toolbars">Adding toolbar buttons to existing toolbars</h2> + +<p>Finally, there is the very common case where you just want to add one button to the main toolbar. In this case you still need to add the button to the palette using an overlay. In order to add your button to the main toolbar on first run, you'll have to use Javascript code. Keep in mind that you shouldn't assume anything about the location (or presence!) of any specific buttons; remember users could have moved them or removed them altogether. The <a href="/en/Code_snippets/Toolbar#Adding_button_by_default" title="en/Code snippets/Toolbar#Adding button by default">Toolbar Code Snippets</a> page has a code sample you can use to do this.</p> + +<p>Remember to validate if your button is already present, to prevent duplicates. It's also a good idea to set a preference that indicates that you added your button already, so that it can be removed permanently if the user chooses to. Another option is to use <a href="/en/Toolkit_API/extIExtension" title="en/FUEL:Extension">FUEL's firstRun</a> property, which also relies on a preference.</p> + +<p><strong>Firefox 3</strong></p> + +<pre class="brush: js">let extension = Application.extensions.get(YOUR_EXTENSION_ID); + +if (extension.firstRun) { + // add button here. +} +</pre> + +<p><strong>Firefox 4</strong></p> + +<pre class="brush: js">Application.getExtensions(function (extensions) { + let extension = extensions.get(YOUR_EXTENSION_ID); + + if (extension.firstRun) { + // add button here. + } +})</pre> + +<p><strong>Both</strong></p> + +<pre class="brush: js">function firstRun(extensions) { + let extension = extensions.get(YOUR_EXTENSION_ID); + + if (extension.firstRun) { + // add button here. + } +} + +if (Application.extensions) + firstRun(extensions); +else + Application.getExtensions(firstRun); +</pre> + +<p>The FUEL library currently only works on Firefox 3 and above.</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_menus_y_submenus", "Escuela_XUL/Agregar_eventos_y_comandos") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html new file mode 100644 index 0000000000..64b2aea74a --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html @@ -0,0 +1,198 @@ +--- +title: Agregar barras laterales +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_barras_laterales +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_sidebars +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}{{ PreviousNext("Escuela_XUL/Agregar_ventanas_y_dialogos", "Escuela_XUL/Uso_de_objetos_en_JavaScript") }}</p> + +<p>The sidebar in Firefox is a relatively large and flexible space to add rich interfaces without requiring new windows or complicated overlays. Sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. You're probably familiar with the Bookmarks and History sidebars. If not, you can open either one from the View > Sidebar menu. They also have shortcuts to open or close them using the keyboard.</p> + +<p>The code required to add a sidebar is very simple, as explained in <a href="/en/Creating_a_Firefox_sidebar" title="en/Creating a Firefox sidebar">Creating a Firefox Sidebar</a>. It's even simpler than that. All you need is to overlay the View Sidebar menu.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><menupopup id=<span class="code-quote">"viewSidebarMenu"</span>> + <menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-sidebar"</span> + label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.sidebar.title;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.sidebar.accesskey;"</span> + type=<span class="code-quote">"checkbox"</span> autoCheck=<span class="code-quote">"<span class="code-keyword">false</span>"</span> group=<span class="code-quote">"sidebar"</span> + sidebarurl=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/sidebar.xul"</span> +</span> sidebartitle=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.sidebar.title;"</span> + oncommand=<span class="code-quote">"toggleSidebar('</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-sidebar');"</span> /> +</menupopup></pre> +</div> +</div> + +<p>The example in the MDC page includes a shortcut key combination to toggle the new sidebar. <a href="/en/XUL_Tutorial/Keyboard_Shortcuts" title="en/XUL Tutorial/Keyboard Shortcuts">Keyboard shortcuts</a> are an essential feature of Firefox, and you can add your own into your extensions, which is also great. The problem is that choosing the right keyboard shortcuts is very, very hard, as <a class="external" href="http://adblockplus.org/blog/shortcut-keys-are-hard">explained by the creator of AdBlock Plus</a>, and the <a class="external" href="http://www.mozilla.org/access/keyboard/">Mozilla Keyboard Reference</a>. To sum up both of these references: you can choose an obscure key combination that won't conflict with Firefox, such as Ctrl+Shift+(some letter), but there's no way of knowing if any other extension uses that same combination as well. Shortcut keys can be very valuable for advanced users, but don't rely on them.</p> + +<p>The XUL page for the sidebar can hold any content you want and it's no different from other XUL windows or overlays. One minor difference is that the XUL sidebar should be defined using the <a href="/en/XUL/page" title="en/XUL/page">page</a> root element instead of <em>window</em> or <em>dialog</em>. The load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up .</p> + +<p>Another, more important difference to take into account is that users can resize the sidebar to their liking, and in most cases, the sidebar is going to be fairly narrow. You should design the content of your sidebar carefully, so that it is usable and appealing regardless of width. There are ways to limit the size boundaries of your sidebar with CSS or even disable resizing altogether, but none of those are good practices. Forcing sidebars to have a fixed size can cause accessibility and usability problems.</p> + +<p>You can still have plenty of content available in your sidebar, you just need to organize it in a way that doesn't take too much space. For this purpose we'll also look at some handy XUL elements in this section. They allow you to stack content on top of other content and switch between different sections easily.</p> + +<h2 id="The_tabbox_Element">The tabbox Element</h2> + +<p>The <a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a> element creates a tabbed view of one or more <a href="/en/XUL/tabpanels" title="en/XUL/tabpanels">tabpanel</a> elements. You can see an example of a <em>tabbox</em> element if you open the Firefox Preferences window and select the Advanced section. The tabs are styled to match the operating system you're using, so you should avoid changing the CSS in tab boxes. On the other hand, if you need UI that behaves like a <em>tabbox</em> but doesn't look like one, you should still favor using a <em>tabbox</em> and use CSS to change its look. Using custom-made elements are likely to cause accessibility and functional problems.</p> + +<p>Creating a tabbed view is simple:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><tabbox id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-tabbox"</span>> + <tabs> + <tab label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.mainTab.label;"</span> /> + <tab label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.advancedTab.label;"</span> /> + </tabs> + <tabpanels> + <tabpanel> + <!-- Content <span class="code-keyword">for</span> the main panel. --> + </tabpanel> + <tabpanel> + <!-- Content <span class="code-keyword">for</span> the advanced panel. --> + </tabpanel> + </tabpanels> +</tabbox></pre> +</div> +</div> + +<p>The first tab is selected by default, but you can change the default selection by setting the <a href="/en/XUL/Attribute/selected" title="en/XUL/Attribute/selected">selected</a> attribute to true in the <a href="/en/XUL/tab" title="en/XUL/tab">tab</a> element.</p> + +<p>A <em>tabpanel</em> can hold any kind of content. You should take into account that the whole tab box is going to be as large as the tab strip on the top and the content of the largest panel. You should try to balance the content in the tab panels so that you don't end up with uneven an mostly empty panels.</p> + +<h2 id="Decks_and_stacks">Decks and stacks</h2> + +<p>Sometimes you'll need finer grained control than the one provided by a <em>tabbox</em>. In these cases the <a href="/en/XUL/deck" title="en/XUL/deck">deck</a> and <a href="/en/XUL/stack" title="en/XUL/stack">stack</a> elements are probably what you're looking for. They are extremely useful, and you'll find yourself using them in many situations besides sidebars.</p> + +<p>A <em>deck</em> is like a <em>tabbbox</em> without the tabs. It only displays one of its child nodes at a time, depending on its <a href="/en/XUL/Attribute/selectedIndex" title="en/XUL/Attribute/selectedIndex">selectedIndex</a> value. In the following example, the second child will be displayed, not the first which would be the default.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><deck selectedIndex=<span class="code-quote">"2"</span>> + <hbox> + <!-- Content <span class="code-keyword">for</span> the first child. --> + </hbox> + <hbox> + <!-- Content <span class="code-keyword">for</span> the second child. --> + </hbox> +</deck></pre> +</div> +</div> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Note how this is one of the few cases where an attribute of an element is named using camel case instead of all small caps.</div> +</div> +</div> + +<p> The size of the deck depends on the size of the largest child node, just like in a <em>tabbox</em>.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">We recommend that you use <em>hbox</em> or <em>vbox</em> elements as children of a <em>deck</em> or <em>stack</em>. The code is easier to read and maintain this way.</div> +</div> +</div> + +<p>A <em>deck</em> can be very useful when you have a large piece of XUL code that only changes in a small way depending on different circumstances. For instance, you could have a window that is used for two different purposes, and the only difference between the two cases is a label that has a value in one case and something else in another. Using a <em>.properties</em> file and a string bundle is a viable option, but it involves a lot of code for something so simple, specially if that's the only case where you need dynamic text. The alternative is to use a deck with the two labels, and change the selected index depending on the purpose of the window. This way you can still use DTD, and the code remains simple.</p> + +<p>A <a href="/en/XUL/stack" title="en/XUL/stack">stack</a> is like a <em>deck</em>, except that all of its children are always on display, one of top of the other. It allows you to decompose complex UI into individual layers, broadening the layout possibilities. One common use for a stack is to have an image background that stretches horizontally and vertically depending on the size of the foreground object:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><stack> + <hbox flex=<span class="code-quote">"1"</span>> + <image src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/stack-bg.png"</span> flex=<span class="code-quote">"1"</span> /> +</span> </hbox> + <hbox> + <!-- Some content here. --> + </hbox> +</stack></pre> +</div> +</div> + +<p>This workaround is necessary because you can't have an background image stretch using CSS.</p> + +<p>A less common use for the <em>stack</em> element is to use the <em>left</em> and <em>top</em> attributes on its children in order to have absolute positioning for the content on the layers. This kind of positioning can be useful for various artistic effects, as well as some type of desktop-like or Dashboard-like interface, where items are located in positions determined by the user, and they can overlap with each other. This can become complicated very easily, though.</p> + +<div class="note">Remember that you can't have flexibility and absolute positioning at the same time.</div> + +<h2 id="Trees">Trees</h2> + +<p>The bookmarks and history sidebars in Firefox use the <a href="/en/XUL/tree" title="en/XUL/tree">tree</a> element to show their content. Trees are another strong option when you need to show a great amount of information in a compact presentation. With a tree you can show a rather small amount of root nodes, giving the user the possibility to expand whichever ones are needed. Trees are specially powerful when combined with data templates, a topic that will be covered later on. You can also read much more about trees in the <a href="/en/XUL_Tutorial/Trees" title="en/XUL Tutorial/Trees">XUL Tutorial</a> page.</p> + +<p>The <em>tree</em> element is possibly the most complex element in XUL. It is meant to be very versatile and malleable, but it can require a good amount of work before it fits your specific needs. It is in reality a hierarchical table view, so its content is defined in terms of rows and columns. Here's an example of a simple tree:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><tree flex=<span class="code-quote">"1"</span>> + <treecols> + <treecol label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.nameColumn.label;"</span> flex=<span class="code-quote">"1"</span> /> + <treecol label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.greetingColumn.label;"</span> flex=<span class="code-quote">"3"</span> /> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label=<span class="code-quote">"Peter"</span> /> + <treecell label=<span class="code-quote">"Hey, what's up?"</span> /> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label=<span class="code-quote">"John"</span>/> + <treecell label=<span class="code-quote">"Good evening, how are you doing?"</span> /> + </treerow> + </treeitem> + </treechildren> +</tree></pre> +</div> +</div> + +<p>The text in the rows of the tree is hardcoded because we wouldn't generally use text from locale files. We would use data from a datasource such as a database or a remote API. This tree is not much of a tree because it only has one level of depth. A more elaborate tree would look like this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><tree flex=<span class="code-quote">"1"</span>> + <treecols> + <treecol label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.nameColumn.label;"</span> flex=<span class="code-quote">"1"</span> /> + <treecol label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.greetingColumn.label;"</span> flex=<span class="code-quote">"3"</span> /> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label=<span class="code-quote">"Peter"</span> /> + <treecell label=<span class="code-quote">"Hey, what's up?"</span> /> + </treerow> + </treeitem> + <!-- Notice that you need to specify the container attribute. --> + <treeitem container=<span class="code-quote">"<span class="code-keyword">true</span>"</span> open=<span class="code-quote">"<span class="code-keyword">true</span>"</span>> + <treerow> + <treecell label=<span class="code-quote">"John"</span>/> + <treecell label=<span class="code-quote">"Good evening, how are you doing?"</span> /> + </treerow> + <treechildren> + <treeitem> + <treerow> + <treecell label=<span class="code-quote">"John Jr."</span>/> + <treecell label=<span class="code-quote">"Bah, bah!"</span> /> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> +</tree></pre> +</div> +</div> + +<p>In this case, the row for "John" has a child row for "John Jr.". The <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a> element is placed as a child for John's <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a> element, and the <a href="/en/XUL/Attribute/container" title="en/XUL/Attribute/container">container</a> attribute must be set.</p> + +<p>It should be evident at this point that hand-coding a tree would take quite some time and yields a great deal of XML code that is hard to follow. This is why most of the uses of the <em>tree</em> element are for displaying data from an external datasource. Even handling the construction of a tree using Javascript and DOM functions can become very convoluted, which is why trees are better used along with templates. This topic will be covered later when we look at different kinds of datasources and templates.</p> + +<p>Adding style to a tree can also be challenging, which is why there's a guide at MDC specifically covering how to <a href="/en/XUL_Tutorial/Styling_a_Tree" title="en/XUL Tutorial/Styling a Tree">Style a Tree</a>. Looking at the Bookmarks and History sidebars should make it clear that trees are quite customizable with CSS.</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_ventanas_y_dialogos", "Escuela_XUL/Uso_de_objetos_en_JavaScript") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html new file mode 100644 index 0000000000..8d1771e21a --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html @@ -0,0 +1,135 @@ +--- +title: Agregar eventos y comandos +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_eventos_y_comandos +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_Events_and_Commands +--- +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas", "Escuela_XUL/El_modelo_de_caja") }}</p> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>Just like with HTML, most JavaScript code execution is triggered by event handlers attached to DOM elements. The most commonly used event is the <a href="/en/DOM/window.onload" title="en/DOM/window.onload">onload event</a>, which is used in overlays and other windows to detect when the window has loaded and then run initialization code:</p> + +<pre class="brush: js">// rest of overlay code goes here. +window.addEventListener( + "load", function() { XulSchoolChrome.BrowserOverlay.init(); }, false); +</pre> + +<p>You can do something similar with the <a href="/en/DOM/window.onunload" title="en/DOM/window.onunload">onunload event</a>, to do any cleanup you may need.</p> + +<div class="note">Please read <a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">Appendix A</a> for recommendations on how to use the load event to initialize your add-on without having a negative performance impact on Firefox.</div> + +<p>Another way to attach event handlers, just like HTML, is to place the handler in the XUL code:</p> + +<pre><overlay id="xulschoolhello-browser-overlay" + onload="XulSchoolChrome.BrowserOverlay.init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> + +<p>We prefer the first method because it keeps a better separation of content and behavior. Also, note that the <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a> method receives the event name without the "on" prefix, while element attributes do have the prefix. There's a long <a href="/en/XUL/Events" title="en/XUL/Events">list of events</a> you can listen to, and which you use depend on the situation. Elements only implement the events that are relevant to them, but there are several events that are implemented for most elements. These are some notable events you should keep in mind:</p> + +<ul> + <li><a href="/en/XUL/Attribute/oncommand" title="en/XUL/Attribute/oncommand">oncommand</a>. This is one of the most important and commonly used events in XUL. It's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. For a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the ENTER key. It's an abstraction of the main way to interact with a control element.</li> + <li><a href="/en/XUL/Attribute/onselect" title="en/XUL/Attribute/onselect">onselect</a>. Fired when the selection in a tree or listbox changes.</li> + <li><a href="/en/XUL/Attribute/onclick" title="en/XUL/Attribute/onclick">onclick</a>. Triggered when the user clicks on the element, including right clicks. You shouldn't normally use this event to trigger actions on input controls such as buttons. Use oncommand instead.</li> + <li><a href="/en/DOM/element.onfocus" title="en/DOM/element.onfocus">onfocus</a> and <a href="/en/DOM/element.onblur" title="en/DOM/element.onblur">onblur</a>. Used when an element receives or loses focus when the user is navigating with the keyboard. You can combine these with <a href="/en/CSS/-moz-user-focus" title="en/CSS/-moz-user-focus">-moz-user-focus</a> to add custom focus behavior to elements that normally wouldn't have it.</li> + <li><a href="/En/DragDrop/Drag_and_Drop" title="en/DragDrop/Drag and Drop">Drag and drop</a>. Drag and drop operations involve several events. Since drag and drop is a complicated thing to manage, there are some high level wrappers that facilitate working with it. Also keep in mind that there are 2 drag and drop APIs, the newest (and preferred) one introduced in Firefox 3.5.</li> +</ul> + +<p>Event handlers can take an <em>event</em> argument, which is an <a href="/en/DOM/event" title="en/DOM/event">Event</a> object that holds information on the event. You can get information on key modifiers (in case the user was holding a modifier key like Alt while performing the event), screen coordinates for mouse events, and most importantly, the target element for the event. For example:</p> + +<pre><button label="&xulschoolhello.defaultGreeting.label;" + oncommand="XulSchoolChrome.BrowserOverlay.changeGreeting(event);" /> +</pre> + +<p>Then on the Javascript code you would have something like this:</p> + +<pre class="brush: js">changeGreeting : function(aEvent) { + // more stuff + aEvent.target.setAttribute("label", someNewGreeting); +} +</pre> + +<p>The target in this example is the button element, so clicking on it will change its text. The advantage of using the <em>event</em> argument is that the method is not dependent of the specific button, so it can also be used for other elements.</p> + +<p>For more advanced event handling, you should read about <a href="/en/XUL_Event_Propagation" title="en/XUL Event Propagation">Event Propagation</a>. In a nutshell, events propagate from the root of the DOM tree all the way down to the target element and then all the way up back to the root, in the capture and bubble phases, respectively. You can capture and cancel events during any of these phases, provided that they aren't canceled before they reach the point where you intended to capture them. The <em>addEventListener</em> method allows you to control the phase where you want to handle an event, with the last argument of the function.</p> + +<div class="note">In general, you should avoid adding event handlers in the capturing phase, or canceling events. This can lead to unexpected behavior for the user since most events have a default behavior associated to them.</div> + +<h3 id="Custom_events">Custom events</h3> + +<p>This is a very powerful tool that you should know, even if it isn't that frequently used. The DOM <a href="/en/DOM/document.createEvent" title="en/DOM/document.createEvent">createEvent</a> function allows you to create custom events that you can dispatch and capture.</p> + +<p>Custom events serve as a good communication mechanism, specially when dealing with a somewhat common problem: communication between window XUL and web page content. It isn't hard for XUL code to control the content on pages being loaded or displayed, as we will see later on, but it can be hard for your extension XUL code to receive information from pages in a secure manner. This is because it would be very insecure to have a website JS controlling the behavior of Firefox and running JavaScript code with chrome privileges.</p> + +<p>Suppose your extension interacts with pages from a website, and you want some actions on this site to trigger actions in your extension. One way to solve this is to have the actions on the site to generate a custom event that can be easily recognized by your extension. You can capture the events in the XUL overlay, since they'll bubble all the way up:</p> + +<pre class="brush: js">// in the overlay code. +document.addEventListener( + "XSHelloGreetingEvent", function(aEvent) { /* do stuff*/ }, false); +</pre> + +<p>Be careful when doing this! You should at least validate the URL of the page that is generating the custom event, so that you know that it's coming from the right place. You should also avoid this kind of events to trigger actions that could be destructive to the user's data, because a malicious site could try to trigger these events and cause damage. There's a reason for the division between remote content and local chrome, so make sure you respect it.</p> + +<p>There's a section further ahead on Intercepting Page Loads which complements this section very well. This should give you a solid foundation to handle interaction between web content and XUL. Additional information on custom events and how they can be used to effect communication between web content and XUL can be found in the <a href="/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="en/Code snippets/Interaction between +privileged and non-privileged pages">Interaction between privileged and non-privileged pages</a> code snippets, which describe and provide examples of this sort of communication.</p> + +<h2 id="Broadcasters">Broadcasters</h2> + +<p>Keeping a consistent UI is another important aspect of extension behavior. Maybe your extension needs to disable or enable a series of controls when the user logs in or out of a service, or when Firefox detects it's <a href="/en/Online_and_offline_events" title="en/Online and offline events">online or offline</a>. It's common that you need to change several elements at the same time, and this can be difficult to manage through JavaScript. The <a href="/en/XUL/broadcaster" title="en/XUL/broadcaster">broadcaster</a> element can help you out in these cases.</p> + +<p>First you need to add a <em>broadcaster</em> element to your XUL code, as a child of a <a href="/en/XUL/broadcasterset" title="en/XUL/broadcasterset">broadcasterset</a> element.</p> + +<pre><broadcasterset id="xulschoolhello-broadcasterset"> + <broadcaster id="xulschoolhello-online-broadcaster" /> +</broadcasterset> +</pre> + +<p>These elements are completely invisible, so you can put them anywhere. It is recommended that you have them at the top of the XUL code, along with script declarations and other invisible elements with as <em>popupset</em> and <em>commandset</em>.</p> + +<p>Then you need to identify which of your XUL elements will be linked to this broadcaster, using the <a href="/en/XUL/Attribute/observes" title="en/XUL/Attribute/observes">observes attribute</a>:</p> + +<pre><menuitem id="xulschoolhello-hello-menu-item" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + <strong>observes="xulschoolhello</strong><strong>-online-broadcaster"</strong> + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> +</pre> + +<p>The attribute value is set to be the <em>id</em> of the <em>broadcaster</em> element, indicating that this element will observe all attribute changes that happen in the <em>broadcaster</em>. You can have as many elements as you want observing a <em>broadcaster</em>.</p> + +<p>With that set, all you need to do now is set or remove attributes in the <em>broadcaster</em> using JavaScript. All nodes observing it will automatically have those attribute values set or removed as well. You can override pre-existing values, such as the <em>label</em> attribute value in the example.</p> + +<pre class="brush: js">let onlineBroadcaster = document.getElementById("xulschoolhello-online-broadcaster"); + +onlineBroadcaster.setAttribute("label", "Something"); +</pre> + +<p>You can also have finer-grained control to this behavior by adding the <a href="/en/XUL/observes" title="en/XUL/observes">observes</a> element as a child to your observer node. This allows you to choose which attributes you want it to observe.</p> + +<p>Broadcasters allow you to easily maintain consistency among numerous elements without having to add much code. They also save you the trouble of having to know if a given element is present in the DOM or not. For example, if you have a customizable toolbar, you can't be sure if a given button is present or not, so it's easier to use a <em>broadcaster</em>. This way you only need to set values to the broadcaster instead of having to check if the button is there or not.</p> + +<h2 id="Commands">Commands</h2> + +<p>The <a href="/en/XUL/Attribute/command" title="en/XUL/Attribute/command">command</a> element is a specialized type of <em>broadcaster</em>, meant to be used with the <em>oncommand</em> event. This is the recommended way of centralizing common UI behavior in Firefox and extensions. Commands are heavily used in Firefox, as a quick look into the DOM Inspector should show.</p> + +<p>Their behavior is identical as <em>broadcaster</em> elements, but they should be used when <em>oncommand</em> is one of the shared attributes. Our menu example is in fact better suited for a command.</p> + +<pre><commandset id="xulschoolhello-commandset"> + <command id="xulschoolhello-hello-command" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + <!-- More commands. --> +</commandset> +<!-- More code here... --> +<menuitem id="xulschoolhello-hello-menu-item" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + command="xulschoolhello-hello-command" /> +</pre> + +<p>Commands allow you to keep your JavaScript calls in a single place, avoiding code repetition and possible bugs. Your UI can easily scale this way. You can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of XUL code in the process. Commands and broadcasters also facilitate working with complex form windows and dialogs. You should always keep them in mind when adding the event-driven code for your extension.</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas", "Escuela_XUL/El_modelo_de_caja") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html new file mode 100644 index 0000000000..e39f36363a --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html @@ -0,0 +1,139 @@ +--- +title: Agregar menus y submenus +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_menus_y_submenus +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_menus_and_submenus +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Montando_un_ambiente_de_desarrollo", "Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas") }}</p> + +<p>The Hello World example in the previous sections shows the two most common ways to add menus: adding them to the Tools menu (recommended) and adding them to the main menu bar (not recommended). In this section we'll look into more specialized menus and what you can do with them.</p> + +<h2 id="Adding_a_New_Menu">Adding a New Menu</h2> + +<p>We already saw how to add menus in overlays, and as you may have imagined, you can nest submenus as deep as you want. You should avoid having deep menus full of options, though, because too many options are confusing for most users.</p> + +<p>If your extension requires new XUL windows, you may also need to have menus on those windows. You can do this with a <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a>. The <em>menubar</em> element should be a child of a <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a> element because it is treated like another toolbar on systems other than Mac OS X. On those systems you can move toolbar controls to the menu bar when you're customizing your toolbars.</p> + +<div class="note"> +<p>Mac OS X treats menus in a very different way than other systems. If your extension involves menus in any way, you should test it on Mac OS X to make sure everything works adequately.</p> +</div> + +<p>The toolbox should be positioned at the beginning of the XUL document, and the code should be similar to this:</p> + +<pre><code><toolbox> + <menubar id="</code><code>xulschoolhello</code><code>-menubar"> + <menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&</code><code>xulschoolhello</code><code>.greeting.label;"> + <menupopup> + <menuitem label="&xulschoolhello.greet.short.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.medium.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.long.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" /> + <menuseparator /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.custom.label;" + oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" /> + </menupopup> + </menu> + </menubar> +</toolbox> </code></pre> + +<p>This code displays a simple <a href="/en/XUL/menu" title="en/XUL/menu">menu</a> with options for 3 different types of greetings, a <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a>, and finally an option to show a custom greeting. The separator is usually displayed as a horizontal line that creates a logical division between different types of <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a> elements, keeping everything more organized.</p> + +<p>A <em>menubar</em> can hold one or more <em>menu</em> elements. Menus require a <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> element as a container for its children, which are usually <em>menuitem</em> elements, but can also be <em>menuseparator,</em> or <em>menu</em> in order to have multiple nesting levels:</p> + +<pre><code><toolbox> + <menubar id="</code><code>xulschoolhello</code><code>-menubar"> + <menu id="</code><code>xulschoolhello</code><code>-greeting-menu" label="&</code><code>xulschoolhello</code><code>.greeting.label;"> + <menupopup> + <menu id="</code><code>xulschoolhello</code><code>-greeting-sizes-menu" label="&</code><code>xulschoolhello</code><code>.greetingSizes.label;"> + <menupopup> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.short.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingShort(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.medium.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingMedium(event);" /> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.long.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingLong(event);" /> + </menupopup> + </menu> + <menuitem label="&</code><code>xulschoolhello</code><code>.greet.custom.label;" + oncommand="</code><code>XULSchoolChrome</code><code>.GreetingDialog.greetingCustom(event);" /> + </menupopup> + </menu> + </menubar> +</toolbox> </code></pre> + +<p>In this case we grouped the 3 greeting items into a submenu. It doesn't make much sense to do that in this case because we end up with only two menu items, one of them being a menu with 3 child items.</p> + +<p>You can also have menus that are filled dynamically. Instead of setting the menupopup directly in the XUL, you can use the <a href="/en/XUL/Attribute/onpopupshowing" title="en/XUL/Attribute/onpopupshowing">onpopupshowing</a> event to fill the children when the popup is about to be displayed.</p> + +<div class="note"> +<p>If you have nothing to show on a menu, you should follow the standard used in Firefox: show a single disabled item with an "(Empty)" label.</p> + +<p>If filling your menu takes a noticeable amount of time, you should not make Firefox (and your users) wait for it to fill up before displaying anything. It's best to show an item with a throbber image (see <a class="external" rel="freelink">chrome://global/skin/icons/loading_16.png</a>) so the user knows there's something going on, and asynchronously fill its contents. We'll look into some asynchronous techniques further ahead in the tutorial.</p> +</div> + +<h2 id="Adding_Elements_to_Existing_Menus">Adding Elements to Existing Menus</h2> + +<p>Just as explained in the previous sections, the best place to overlay your extension menu is inside the <em>Tools</em> menu. That is, unless there's a place inside the menu structure where your extension menus make more sense. If you're overlaying the Tools menu, your overlay code should have something like this:</p> + +<pre><code><menupopup id="menu_ToolsPopup"> + <menu id="</code><code>xulschoolhello</code><code>-hello-menu" label="&</code><code>xulschoolhello</code><code>.hello.label;" + accesskey="&</code><code>xulschoolhello</code><code>.helloMenu.accesskey;" + insertafter="javascriptConsole,devToolsSeparator"> + <menupopup> + <!-- Your menuitem goes here. --> + </menupopup> + </menu> +</menupopup> </code></pre> + +<p>Now let's look at some specialized types of menu items.</p> + +<h2 id="Menu_types">Menu types</h2> + +<h3 id="Checkbox_Menu_Items">Checkbox Menu Items</h3> + +<p>You can make a <em>menuitem</em> "checkable" to allow the user to enable/disable options using the menu. We use two attributes for this: <a href="/en/XUL/menuitem#a-menuitem.type" title="en/XUL/menuitem#a-menuitem.type">type</a> and <a href="/en/XUL/menuitem#a-checked" title="en/XUL/menuitem#a-checked">checked</a>. The <em>type</em> attribute must be set to "checkbox". You can set the <em>checked</em> attribute to "true" to check it by default.</p> + +<p>The item's checked state changes when the user clicks on it. An example of one such item is the View > Status Bar item in the main Firefox menu.</p> + +<h3 id="Radio_Menu_Items">Radio Menu Items</h3> + +<p>If you need to have a set of <em>menuitem</em> elements where only one of them has to be checked at any given moment, you should set the <em>type</em> to "radio". The <em>name</em> attribute is used to identify the items that belong to the radio group.</p> + +<pre><code><menupopup oncommand="XULSchoolChrome.HW.GreetingDialog.greeting(event);"> + <menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio" + label="&</code><code>xulschoolhello</code><code>.greet.short.label;" checked="true" /> + <menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio" + label="&</code><code>xulschoolhello</code><code>.greet.medium.label;" /> + <menuitem type="radio" name="</code><code>xulschoolhello</code><code>-greeting-radio" + label="&</code><code>xulschoolhello</code><code>.greet.long.label;" /> +</menupopup> </code></pre> + +<p>This is a modified version of the 3 greeting menus. It is now implemented as a radio menu where you pick one of the 3 available choices. The first one is checked by default. The <em>oncommand</em> attribute is set on the <em>menupopup</em> to avoid code duplication, since now the 3 items call the same function.</p> + +<p>Another example of a menu like this is the View > Sidebars menu. Only one sidebar is visible at any given moment, and you can pick from several.</p> + +<h3 id="Menus_with_Images">Menus with Images</h3> + +<p>To add an icon to a <em>menu</em> or <em>menuitem</em>, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the <a href="/en/XUL/Attribute/image" title="en/XUL/Attribute/image">image</a> attribute or the <a href="/en/CSS/list-style-image" title="en/CSS/list-style-image">list-style-image</a> CSS property. Menu icons are typically 16px by 16px.</p> + +<h2 id="Menus_on_Mac_OS_X">Menus on Mac OS X</h2> + +<p>As mentioned earlier, menus are very different on Mac OS X. This is because menus on Mac are unified in a single menu bar which is controlled by the operating system, as opposed to menus in other systems, which are entirely controlled by Firefox. Mac OS X also has menu standards, such as the positioning of certain items that are not used in other systems. Here's a list of the known issues we've run into when handling menus on Mac:</p> + +<ul> + <li>The About, Preferences and Quit menu items are located under the "Firefox" menu, not the usual places you would find them. You can access these items by id through the DOM, but their parent menu is not easily accessible.</li> + <li>We've run into bugs when adding, removing, enabling and disabling menu items dynamically, specially the root menu items (File, Edit, View, etc). You should carefully test this behavior to make sure it works properly in your extension.</li> + <li>Images in menu items may not appear, showing only a narrow segment of the image instead. This seems to happen when remote images are used.</li> + <li>Menu items are not dynamically updated while they are open. For example, you could have a <em>menuitem</em> that tells you the current time and is updated every second. On other systems you would be able to see the item update itself without having to close the menu and then reopen. This is not the case on Mac OS.</li> +</ul> + +<p>{{ PreviousNext("Escuela_XUL/Montando_un_ambiente_de_desarrollo", "Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html new file mode 100644 index 0000000000..030ed3c918 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html @@ -0,0 +1,197 @@ +--- +title: Agregar ventanas y dialogos +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_ventanas_y_dialogos +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_windows_and_dialogs +--- +<p>{{AddonSidebar}}</p> + +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}</p> + +<p>{{ PreviousNext("Escuela_XUL/El_modelo_de_caja", "Escuela_XUL/Agregar_barras_laterales") }}</p> + +<h2 id="Opening_windows_and_dialogs">Opening windows and dialogs</h2> + +<p>To open a new window, use the Javascript <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> function just like with HTML windows.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">window.open( + <span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/someWindow.xul"</span>, +</span> <span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-some-window"</span>, + <span class="code-quote">"chrome,centerscreen"</span>);</pre> +</div> +</div> + +<p>The first argument is the URL to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window. If this value is null or empty, the default toolbars of the main window will be added to the new one, which is rarely what you want. The <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> page has a detailed description of the features you can use and their values. The following features are very important and you should always keep them in mind:</p> + +<ul> + <li>chrome. This can only be used from the chrome, not from regular HTML JavaScript. It indicates that a chrome document is being opened, not a web page. This means that the document defines the whole window, and not only the inner content area. You should always include it when opening a XUL window or dialog.</li> + <li>modal. Modal windows block their parent window until action is taken on them. An alert window is an example of this. Modal windows should be avoided when possible because they interrupt the user's browsing and can become annoying very quickly. This feature should only be used when there's no way to continue without having the user do something. <strong>Never open modal windows at startup.</strong></li> + <li>resizable. Indicates the user can resize the window or not. In general, windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content.</li> +</ul> + +<p>To open a new dialog, use the function <a href="/en/DOM/window.openDialog" title="en/DOM/window.openDialog">window.openDialog</a>, an extension of the <em>open</em> function. It allows you to send a set of optional parameters that can be used to communicate with the dialog.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let someValue = 2; +let returnValue = { accepted : false , result : "" }; + +window.openDialog( + "<a class="external" rel="freelink">chrome://xulschoolhello/content/someDialog.xul</a>", + "xulschoolhello-some-dialog", "chrome,centerscreen", + someValue, returnValue); // you can send as many extra parameters as you need. + +// if (returnValue.accepted) { do stuff }</pre> +</div> +</div> + +<p>The optional parameters are available in the dialog code through the <em>window.arguments</em> property:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let someValue = window.arguments[0]; +let returnValue = window.arguments[1]; + +// returnValue.accepted = true; +// returnValue.result = "something"; +</pre> +</div> +</div> + +<p>The parameter named <em>returnValue</em> is an object that the dialog will modify to reflect what the user did in it. This is the simplest way to have the dialog return something to its opener. Note that the opener will wait until the dialog is closed. This means the <em>openDialog</em> function call will not return until the dialog has been closed by the user.</p> + +<h2 id="Common_Dialogs_and_the_Prompt_Service">Common Dialogs and the Prompt Service</h2> + +<p>There are several types of dialogs that are fairly common, so there are ways to create them easily without having to reinvent the wheel and write all their XUL and JS code all over again. Whenever you need a new dialog, you should ask yourself if it can be implemented using these common dialogs, and use them whenever it is possible. They have been thoroughly tested for OS integration, accessbility and localization, so you save yourself a lot of work and favor them.</p> + +<p>Using the <a href="/en/XPCOM_Interface_Reference/nsIPromptService" title="en/NsIPromptService">Prompt Service</a> is the recommended way to create common dialogs in an extension. Read the article and its examples carefully, because there are many useful functions to use in the Prompt Service. There are some equivalent, simpler functions that are available in the <em>window</em> object, but those are meant for unprivileged HTML JavaScript code.</p> + +<h3 id="Alert">Alert</h3> + +<p>The alert is the simplest form of dialog. All it does is display a text message that the user can read and then click the OK button to dismiss it. We have been using the <a href="/en/DOM/window.alert" title="en/DOM/window.alert">window.alert</a> function to open alert messages in our examples so far, but that's not the right way to do it. It's OK to use this function if you're just debugging some problem and want to see if the program reaches a specific line of code, or to inspect the value of a variable, but your final extension should not have <em>alert</em> calls anywhere.</p> + +<p>If you use <em>window.alert</em>, the alert window will have the title [JavaScript Application], indicating that the source of the message is not well defined. The Prompt Service allows better alerts to be displayed. Here's an example of displaying an alert using the Prompt Service:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let prompts = + Cc["@mozilla.org/embedcomp/prompt-service;1"]. + getService(Ci.nsIPromptService); + +prompts.alert(window, "Alert Title", "Hello!");</pre> +</div> +</div> + +<p>You should of course use localized strings instead of hard-coded ones.</p> + +<p>The Prompt Service allows you to set the title of the dialog however you want it, and also lets you specify the window you want to use as a parent for the alert. This normally should be set to the current window. You can pass a null value and the service will pick the currently active window.</p> + +<h3 id="Confirm">Confirm</h3> + +<p>Confirmation dialogs display a text with a Yes / No question, and prompts the user to choose an answer. In HTML you can use the <a href="/en/DOM/window.confirm" title="en/DOM/window.confirm">window.confirm</a> function for this. The Prompt Service has a <em>confirm</em> method with similar behavior:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let prompts = + Cc["@mozilla.org/embedcomp/prompt-service;1"]. + getService(Ci.nsIPromptService); + +if (prompts.confirm(window, "Confirm Title", "Would you like to continue?")) { + // do something. +} else { + // do something else +}</pre> +</div> +</div> + +<p>The method returns a boolean value indicating the user's response.</p> + +<h3 id="Others">Others</h3> + +<p>Unprivileged Javascript can also use the <a href="/en/DOM/window.prompt" title="en/DOM/window.prompt">window.prompt</a> function to receive text input from the user. The Prompt Service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "Never ask this again"-type dialogs. The <a href="/en/XPCOM_Interface_Reference/nsIPromptService#confirmEx" title="en/nsIPromptService#confirmEx">confirmEx</a> and <a href="/en/XPCOM_Interface_Reference/nsIPromptService#prompt" title="en/nsIPromptService#prompt">prompt</a> methods are the most customizable, allowing a great deal of options that cover most common dialog cases.</p> + +<p>Using the Prompt Service will save you a lot of XUL coding, and you'll be at ease knowing that you're using Mozilla's tried and tested code.</p> + +<h2 id="The_Dialog_Element">The Dialog Element</h2> + +<p>When the Prompt Service is not enough, you'll have to create you own XUL dialogs. Luckily, you still get a great deal of help from the platform if you use the <a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a> element as the document root instead of the more generic <em>window</em> element.</p> + +<p>You may be asking yourself what's the big deal about defining a simple XUL window with an OK and maybe a Cancel button. The dialogs we have covered in this section are very simple and shouldn't be too hard to implement manually using XUL. Well, it's more complicated than that. Different operating systems order and position their buttons differently in their dialogs. There are also subtle aspects about window size, margins and paddings that are not the same for all systems, so you should avoid making dialogs from scratch or overriding the default dialog CSS styles.</p> + +<p>The <em>dialog</em> element handles all of this transparently. All you need to do is define which buttons you'll need and the actions associated with them.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><dialog id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-dialog"</span> + title=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloDialog.title;"</span> + buttons=<span class="code-quote">"accept,cancel"</span> + ondialogaccept=<span class="code-quote">"<span class="code-keyword">return</span> XULSchoolChrome.HelloDialog.accept();"</span> + ondialogcancel=<span class="code-quote">"<span class="code-keyword">return</span> XULSchoolChrome.HelloDialog.cancel();"</span> + xmlns=<span class="code-quote">"http:<span class="code-comment">//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</span>></span></pre> +</div> +</div> + +<p>Carefully read the specification of the <a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a> element. You'll see that you can choose from a wide variety of buttons, associate any action you need to them, override their labels, and even add completely customized extra buttons. All of this without having to worry about your dialog looking odd in some operating systems. The only constant rule is that clicking on OK and Cancel will close the dialog unless your associated function returns false. You should avoid returning false, though, specially with the Cancel button. Dialogs in general should be easy to dismiss.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<p>Your dialogs shouldn't have fixed dimensions because of potential localization problems. Dialogs are sized to their contents and will generally work fine. However, there are cases where the dialog contents are generated or expanded dynamically by your code, and you'll need to resize them appropriately. The <a href="/en/DOM/window.sizeToContent" title="en/DOM/window.sizeToContent">window.sizeToContent</a> function is what you need in this case.</p> +</div> +</div> + +<h2 id="Input_Controls">Input Controls</h2> + +<p>Most additional XUL windows and dialogs in extensions are some kind of input form. Let's look into the most commonly used form elements and how to use them in your XUL windows. There isn't much we need to add from what the XUL Tutorial explains, so go ahead and read the following sections:</p> + +<ul> + <li><a href="/en/XUL_Tutorial/Input_Controls" title="en/XUL Tutorial/Input Controls">Input controls</a></li> + <li><a href="/en/XUL_Tutorial/Numeric_Controls" title="en/XUL Tutorial/Numeric Controls">Numeric controls</a></li> + <li><a href="/en/XUL_Tutorial/List_Controls" title="en/XUL Tutorial/List Controls">List controls</a></li> +</ul> + +<p>There are some other aspects to take into account when handling input controls, which we cover in the following sections.</p> + +<h3 id="Groupboxes">Groupboxes</h3> + +<p>The <a href="/en/XUL/groupbox" title="en/XUL/groupbox">groupbox</a> element should be easy to understand: it groups a series of XUL controls together. It's a box container with styling that is usually a visible border around its contents, so that it's clear what is being grouped together. It is frequently used with the <a href="/en/XUL/caption" title="en/XUL/caption">caption</a> element to associate the grouped elements with a title.</p> + +<p>The <em>groupbox</em> shouldn't be seen as an aesthetic device, but a logical one. If all you need is a border, use CSS. The <em>groupbox</em> element should be used when enclosed elements share some function which is separate from other elements or groups in the same window. It's also a useful accessibility feature, because screen readers will read the caption right before reading any text in its contents. You can change its style using CSS in case you don't want the borders to appear. See the Firefox Preferences window for an example of this: sections are defined using <em>groupbox</em> elements, but their style is quite different from the default.</p> + +<h3 id="Attribute_Persistence">Attribute Persistence</h3> + +<p>User actions can change the state of your windows, such as selecting an option in a listbox, or entering text in a textbox. If the user closes and then reopens your window, all the controls are reset to their defaults, which may not be what you want. You need some way of remembering the user-manipulated attribute values so that the window reloads it last state when opened.</p> + +<p>Most XUL elements support the <a href="/en/XUL/Attribute/persist" title="en/XUL/Attribute/persist">persist</a> attribute, which has this exact function. You set the <em>persist</em> attribute with a space-separated list of attribute names, indicating which attribute values must be persisted across window "sessions".</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><checkbox id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-some-checkbox"</span> + label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.someText.label;" + </span> checked=<span class="code-quote">"<span class="code-keyword">false</span>"</span> persist=<span class="code-quote">"checked"</span> /></pre> +</div> +</div> + +<p>Setting the <em>id</em> attribute of the element is mandatory if you want the <em>persist</em> attribute to work. You can also set persistence programatically using the <em>document.persist</em> function:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">document.persist("xulschoolhello-some-checkbox", "checked");</pre> +</div> +</div> + +<p>Persistent data is stored in the user profile, in the file <em>localstore.rdf</em>. You may need to modify or delete this file often when testing persistent data in your extension.</p> + +<h3 id="Focus_and_Tabbing">Focus and Tabbing</h3> + +<p>Moving through all input controls in a window using only the keyboard is an accessibility requirement. You can do this in most Firefox windows by pressing the Tab key. Each Tab key press moves you to the next control in the window, giving it focus.</p> + +<p>In general, there's nothing you need to do in order to have good keyboard focus management. Firefox will automatically focus the first input control in your window, and tab focus advances in the order the items are found in the XUL document. If you have a very complex layout, or need customized tabbing behavior, you can set the <a href="/en/XUL/Property/tabIndex" title="en/XUL/Property/tabIndex">tabindex</a> attribute in the controls. You can also use the <a href="/en/XUL/Method/focus" title="en/XUL/Method/focus">focus</a> function to focus an element depending on events such as window load. You should do this carefully, to avoid having inaccessible controls.</p> + +<p>You can also use the <a href="/en/CSS/-moz-user-focus" title="en/CSS/-moz-user-focus">-moz-user-focus</a> CSS property to enable focusing of elements that typically wouldn't receive focus. Again, this should be used sparingly.</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html b/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html new file mode 100644 index 0000000000..888f350c16 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html @@ -0,0 +1,140 @@ +--- +title: Almacenamiento local +slug: Mozilla/Tech/XUL/Escuela_XUL/Almacenamiento_local +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Local_Storage +--- +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> +<p>{{ PreviousNext("Escuela_XUL/Manejo_de_preferencias", "Escuela_XUL/Interceptando_cargas_de_página") }}</p> + +<p>It is very common for an extension to require some kind of local persistent storage. We recommend that you at least keep an error log, so that you can request error data from your users when you encounter problems that are hard to debug. We'll discuss logging in this section, but first let's look at the right (or at least, common and scalable) way of managing local files.</p> + +<p>It is strongly recommended that you keep your local files inside the Firefox profile directory. Otherwise you may run into problems if the same extension is installed in multiple profiles. The common practice is to create a directory with the name of your project at the root of the profile folder, and keep your files inside. The structure could be something like this:</p> + +<ul> + <li>s435L.default (your profile directory) + <ul> + <li>XULSchool + <ul> + <li>log.txt</li> + <li>somedbfile.sqlite</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>The <a href="/en/nsDirectoryService" title="en/nsDirectoryService">Directory Service</a> and the {{ interface("nsIFile") }} interface are used to create the local directory. Here's what we usually do: we have a function that returns a reference to our root directory and creates it if necessary.</p> + +<pre class="brush: js">getLocalDirectory : function() { + let directoryService = + Cc["@mozilla.org/file/directory_service;1"]. + getService(Ci.nsIProperties); + // this is a reference to the profile dir (ProfD) now. + let localDir = directoryService.get("ProfD", Ci.nsIFile); + + localDir.append("XULSchool"); + + if (!localDir.exists() || !localDir.isDirectory()) { + // read and write permissions to owner and group, read-only for others. + localDir.create(Ci.nsIFile.DIRECTORY_TYPE, 0774); + } + + return localDir; +}, +</pre> + +<p><strong>ProfD</strong> is a special identifier for the profile directory that exists so that you don't need to figure out its location. In general this is the only directory flag you'll need, but sometimes you'll need access to other system directories, and you don't want to have to worry about which operating system or system language your extension is running on. A {{ source("xpcom/io/nsDirectoryServiceDefs.h","full list of these flags") }} can be found in the Firefox source.<br> + Having that function in place, we do something like the following:</p> + +<pre class="brush: js">let myFile = XULSchool.getLocalDirectory(); + +myFile.append("someFile.txt"); +// do stuff with the file.</pre> + +<p>Files are handled with the {{ interface("nsIFile") }} interface. An {{ interface("nsIFile") }} doesn't necessarily represent an existing file, as in the previous examples. You first specify the file using {{ interface("nsIFile") }} and then use {{ ifmethod("nsIFile","create") }} to actually write it out to disk. You can also check if an {{ interface("nsIFile") }} exists using {{ ifmethod("nsIFile","exists") }}.</p> + +<p>To read and write information in files, you need to use stream objects. You can read more about <a href="/en/Code_snippets/File_I//O" title="en/Code snippets/File I//O">reading and writing files here</a>. In general you won't need to do this directly, but it's always useful to know.</p> + +<p>Finally, there's the issue of deleting local files when the extension is going to be uninstalled. Whether this is necessary or not is a matter of preference. Some extension developers prefer to leave the data there, so that if the user chooses to install the extension again, all the previous data will be recovered. This is the default behavior when Firefox is uninstalled: the profile information remains intact and it will be there waiting for you if Firefox is installed again. Others feel concerned about privacy and storing private information locally without deleting it. A good argument can be done for both, so it is up to you to choose what to do in this case. The FUEL library has an <a href="/en/Toolkit_API/extIExtension" title="en/Toolkit API/extIExtension">uninstall event</a> you can use to perform these operations.</p> + +<h2 id="Logging">Logging</h2> + +<p>Good logging is essential in all kinds of software projects. Any extension that is more complex than a Hello World needs some way to log errors and trace execution without having to fire up a debugger.</p> + +<p>It used to be the case that custom logging solutions were necessary, but Mozilla Labs have come up with a JavaScript implementation of a logger similar to the <a class="external" href="http://logging.apache.org/log4j/1.2/index.html">Log4J logger</a> used in Java projects. The logger is called <a class="link-https" href="https://wiki.mozilla.org/Labs/JS_Modules#Logging" title="https://wiki.mozilla.org/Labs/JS_Modules#Logging">Log4Moz</a> and it is implemented as a JavaScript Code Module, so it only works on Firefox 3 and above.</p> + +<p>To use this logger, you need to copy the <strong>log4moz.js</strong> file to your modules directory. In the initialization method of your one of your "common" or startup objects, add the following code:</p> + +<pre class="brush: js">let formatter = new Log4Moz.BasicFormatter(); +let root = Log4Moz.repository.rootLogger; +let logFile = this.getLocalDirectory(); // remember this? +let appender; + +logFile.append("log.txt"); + +// Loggers are hierarchical, lowering this log level will affect all +// output. +root.level = Log4Moz.Level["All"]; + +// this appender will log to the file system. +appender = new Log4Moz.RotatingFileAppender(logFile, formatter); +appender.level = Log4Moz.Level["All"]; +root.addAppender(appender); +</pre> + +<p>After that, you can create a logger object for any object in your project like this:</p> + +<pre class="brush: js">this._logger = Log4Moz.repository.getLogger("XULSchool.SomeObject"); + +this._logger.level = Log4Moz.Level["All"]; +</pre> + +<p>{{ note("We recommend that you create a logger instance in the constructor of every object and store it in a private variable.") }}</p> + +<p>And then logging is done with any of the following methods, depending on the kind of message being logged:</p> + +<pre class="brush: js">this._logger.fatal("This is a fatal message."); +this._logger.error("This is an error message."); +this._logger.warn("This is a warning message."); +this._logger.info("This is an info message."); +this._logger.config("This is a config message."); +this._logger.debug("This is a debug message."); +this._logger.trace("This is a trace message."); +</pre> + +<p>You can filter the output of the global logger or any specific logger instance by setting the <strong>level</strong> property. During development you should use the "All" level, but for release versions it's usually better to move the level up to "Warn", so that the log is compact and execution is more efficient.</p> + +<div class="note"><strong>Note:</strong> We recommend that all exception <strong>catch</strong> blocks include some logging at the error or warn levels, and in general you should use logging freely in order to have as much information as possible to fix bugs and know what is going on. Don't log inside functions that are called too often, such as <strong>mouseover</strong> event handlers, or certain HTTP activity listeners. This impacts performance and fills the log with useless messages. We normally add a comment that indicates that logging is not done there for performance reasons.</div> + +<h2 id="SQLite">SQLite</h2> + +<p><a class="external" href="http://en.wikipedia.org/wiki/Sqlite">SQLite</a> storage was introduced in Firefox 2, and it's the preferred storage mechanism in Firefox. It is the storage system used for the <a href="/en/Places" title="en/Places">Places API</a> that manages bookmarks and history. It's also used for storing cookies, form inputs, and others.</p> + +<p>SQLite is a lightweight SQL based storage system. It is ideal for embedding in other programs, and is currently in use in several popular applications. It's also the storage system we recommend for local storage in extensions.</p> + +<p>The <a href="/en/Storage" title="en/Storage">Storage page</a> has a good explanation on how to use the SQLite API, so we won't go over that again. If you're unfamiliar with SQL or if you're interested in knowing the restrictions in the syntax used by SQLite, you can read more at the <a class="external" href="http://www.sqlite.org/lang.html">SQLite site</a>.</p> + +<p>You should carefully design your database structure, taking into account features you're planning on adding in the future. Adding or removing columns, or making other changes to your DB structure from one version of your extension to the next will probably cause breakage of user data in older versions. You'll need to carefully add migration code that moves the data from the old DB format to the new, and this becomes increasingly complex as you add new versions and new structure changes. So, be careful and plan for the future.</p> + +<p>There are two paths you can take when creating the local database you'll be using for your extension:</p> + +<ul> + <li>Generate the database file (through {{ ifmethod("mozIStorageService","openDatabase") }}, all tables (through {{ ifmethod("mozIStorageConnection","createTable") }}, and initial data when your extension starts up for the first time. If you need a complex database this can be heavy in terms of time and code, but this will only happen once and this can be done in a lazy or asynchronous way.</li> + <li>Have an initial database file in your <strong><code>defaults</code></strong> directory that you can copy to the user's profile. This way you just need to do a file copy. You can reach the <code>defaults</code> directory at <code><strong>ProfD/extensions/YOUR_EXTENSION_ID.xpi/defaults</strong></code> for packed extensions or <code><strong>ProfD/extensions/YOUR_EXTENSION_ID/defaults</strong></code> for unpacked extensions. Packed extensions have appear with Gecko 2.0 (Firefox 4.0). This approach has the downside of being less stable.</li> +</ul> + +<h2 id="RDF">RDF</h2> + +<p><a href="/en/RDF" title="en/RDF">RDF</a> used to be the preferred storage mechanism for Firefox. If was used for most of its datasources, and you can still see it in use here and there, like in the <strong>install.rdf</strong> file. It is being phased out, with SQLite taking its place in most cases. The RDF API may be removed at some point in the future because it requires a great deal of code even for the simplest tasks, and it currently sees little maintenance, so we don't recommend using it unless you really have to.</p> + +<p>You'll still need to understand at least a little about RDF when you read the documentation about templates.</p> + +<h2 id="Templates">Templates</h2> + +<p>Templates are a very powerful tool in Firefox. They allow you to automatically generate XUL content using information from a datasource, and automatically update the content once the datasource changes. They were designed with RDF datasources in mind, but since Firefox 3 they have been extended to support SQLite datasources as well.</p> + +<p>Handling templates can also be complicated, but it is worth the effort if you need to display long lists or trees with complex data. If you manage to get your display code to use templates, you will have saved a lot of coding. Since templates are not necessary for most extensions and they're a complicated subject, it's better that you read it from the experts. There's a very detailed <a href="/en/XUL/Template_Guide" title="en/XUL/Template Guide">XUL Template Guide here</a>. As mentioned before, it revolves around RDF, so you may need to take some time to understand how RDF works. There's a section about <a href="/en/XUL/Template_Guide/SQLite_Templates" title="en/XUL/Template Guide/SQLite Templates">SQLite Templates</a> in the guide, but there are some concepts in it that will require you to read at least some of the rest of it.</p> + +<p>{{ PreviousNext("Escuela_XUL/Manejo_de_preferencias", "Escuela_XUL/Interceptando_cargas_de_página") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_a_colon__rendimiento_de_los_add-ons/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_a_colon__rendimiento_de_los_add-ons/index.html new file mode 100644 index 0000000000..74a50cf7a2 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_a_colon__rendimiento_de_los_add-ons/index.html @@ -0,0 +1,57 @@ +--- +title: 'Apéndice A: Rendimiento de los Add-ons' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_A:_Rendimiento_de_los_Add-ons' +translation_of: 'Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_A:_Add-on_Performance' +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<div class="note"><strong>Note:</strong> See the newer article <a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Performance best practices in extensions</a> for more up-to-date information about how to optimize the performance of your add-on.</div> + +<p>Add-ons can have a noticeable performance impact on Firefox. This is evident when opening a Firefox profile that has many add-ons installed; some profiles can take minutes to load, which is a serious inconvenience for users that gives them a negative view of Firefox. Add-on developers need to make sure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that.</p> + +<h2 id="Startup">Startup</h2> + +<p>This is the area where add-ons have the most noticeable impact. Most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data. The problem with the <em>onload</em> event is that it runs before the main window becomes visible, so all handlers need to complete before the user can see the window. An add-on can normally add a few hundred milliseconds to startup time because of the load handler, and it's not hard to figure out what having several add-ons will do.</p> + +<p>Luckily, minimizing your startup time is easy, if you follow these guidelines:</p> + +<ol> + <li>Do not load or run code before it’s needed. Add-ons can have extra features that are only available depending on user preferences. Other add-ons have most of their features depend on a user being logged in to a service. Don’t load at startup something you won’t need at the time.</li> + <li><a href="/../../../../en/Using_JavaScript_code_modules" title="../../../../en/Using_JavaScript_code_modules">JavaScript Code Modules</a>. Use them. JSM provide the cleanest way to separate JS into modules that can be loaded on request, unlike chrome scripts which are generally loaded with the overlay at startup. Keep as much of your code in JSM, make it as modular as you can, and only load modules as you require them. If your add-on is too simple for JSM, don’t worry about it. There’s still one more thing you can do.</li> + <li>Do as little as possible in your load handler. Ask yourself: is there anything I can’t run 100 ms or even 500 ms later? If there is, just use an <a href="/../../../../En/nsITimer" title="../../../../En/nsITimer">nsITimer</a> or the <a href="/../../../../en/DOM/window.setTimeout" title="../../../../en/DOM/window.setTimeout">setTimeout</a> function to delay running this code . The Firefox window will be able to load sooner and your startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session. The browser will now load faster, and your code will still load at startup for all practical purposes. The code is simple enough:</li> +</ol> + +<pre class="brush: js">// this is the function that is called in the load event handler. +init : function() { + let that = this; + // run this later and let the window load. + window.setTimeout(function() { that.postInit(); }, 500); +}, + +postInit: function() { + // actual init code goes here. +}, +</pre> + +<p>How can you tell it works? The <a class="link-https" href="https://wiki.mozilla.org/Firefox/Projects/StartupPerformance/MeasuringStartup" title="https://wiki.mozilla.org/Firefox/Projects/StartupPerformance/MeasuringStartup">Measuring Startup</a> wiki page includes a relatively simple test you can use to compare a clean Firefox profile vs that profile with your add-on installed.</p> + +<h2 id="Page_Loads">Page Loads</h2> + +<p>This is another critical route that many add-ons tap into. The <a href="/en/XUL_School/Intercepting_Page_Loads" title="en/XUL School/Intercepting Page Loads">Intercepting Page Loads</a> section details several techniques to do this, and you should read all of them carefully to figure out which one you need. Some of these events are fired multiple times during a single page load, and having inefficient code in the event handlers can cause a noticeable delay that users may have hard time figuring out.</p> + +<p>Look at the source samples in the article and notice how they mostly consist of nested <em>if</em> statements. This is what you should do <strong>first</strong> to make sure that you filter out all cases that don't interest you so that your add-on doesn't slow down other requests. A very common filter is the URL of the page, since most add-ons are limited to one or a few domains. Use regular expressions if you need to. Make sure your comparison code is as efficient as possible.</p> + +<p>Finally, make sure all of your page load code is as efficient as possible. This can be tricky for some add-ons, like ad or script blockers that need to check a whitelist or blacklist. Nevertheless, loading pages is pretty important in Firefox, and users expect it to be fast. Try your best to keep it that way.</p> + +<h2 id="Other_Recommendations">Other Recommendations</h2> + +<ul> + <li>Always clean up after yourself. Event listeners, observers and other handlers normally have both an add and a remove function. Don't forget to remove what you don't need anymore! Even if you need something during the whole existence of the window, you should clean everything up in the unload event handler.</li> + <li>Even the unload event should be handled efficiently. Even if it is not as important as other areas, Firefox shutdown can also be slowed down because of add-ons. If there's anything you can unload before shutdown, or if there's anything you can do to unload things more efficiently, then it's important that you do.</li> + <li><strong>Never</strong> use XMLHttpRequest in synchronous mode.</li> + <li>If your add-on needs to perform a heavy operation like sorting or a complex mathematical calculation, you should use <a href="/En/Using_web_workers" title="En/Using web workers">DOM Workers</a> to offload the work to other threads.</li> +</ul> diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_b_colon__instalar_y_desinstalar_scripts/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_b_colon__instalar_y_desinstalar_scripts/index.html new file mode 100644 index 0000000000..4ee95d992b --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_b_colon__instalar_y_desinstalar_scripts/index.html @@ -0,0 +1,51 @@ +--- +title: 'Apéndice B: Instalar y desinstalar Scripts' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_B:_Instalar_y_desinstalar_Scripts' +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_B:_Install_and_Uninstall_Scripts +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>Add-ons normally run code at startup, and as it is covered in the main tutorial, all you need is a <em>load</em> event handler and a little code. It is also common for an add-on to require to run a script only when it is installed for the first time, or every time it is updated. It can be used to write or copy necessary files to the profile folder, like the initial DB the add-on will use for storage. A few others require cleanup code to be run after the add-on is uninstalled. This appendix covers these cases with simple code that should work for most add-ons.</p> + +<h2 id="Install_Scripts">Install Scripts</h2> + +<p>Just like with a regular initialization function, we want a <em>load</em> event handler:</p> + +<pre class="brush: js">// rest of overlay code goes here. +window.addEventListener( + "load", function() { XulSchoolChrome.BrowserOverlay.init(); }, false); +</pre> + +<p>Then all we need is some persistent flag that ensures that the first run code is only run once. The best approach in this case is to use a preference, as explained in the <a href="/en/XUL_School/Handling_Preferences" title="en/XUL School/Handling Preferences">Handling Preferences</a> section. So, if we were to use FUEL, we can do the following in the <em>init</em> function:</p> + +<pre class="brush: js">init : function() { + let firstRunPref = + Application.prefs.get("extensions.xulschoolhello.firstRunDone"); + + if (!firstRunPref.value) { + firstRunPref.value = true; + // all the rest of the first run code goes here. + } +} +</pre> + +<p>In this case you would need to declare the first run preference in your default preferences file, with a default value of <em>false</em>. You should also change the preference value before you run any other first run code. Keep in mind that the user could have set multiple Firefox windows to open at startup, so there's a race condition on which window will run the first run code.</p> + +<p>If you need to run code on every update, or some of them, the code would be very similar. Instead of a boolean preference, it would be best to use a string preference with the last-installed add-on version. And then do a version comparison to decide which code to run. The current version number can be hard-coded in the first run function, or you can use the Add-on Manager to dynamically get it. This can get tricky with the <a href="/en/Addons/Add-on_Manager/AddonManager" title="en/Addons/Add-on Manager/AddonManager">Firefox 4 AddonManager</a>, so it's probably best to keep it simple.</p> + +<h2 id="Uninstall_Scripts">Uninstall Scripts</h2> + +<p>There are two common cases for needing these: cleaning up local data and presenting an uninstall feedback form. Regarding local data, it is debatable if it is good practice to remove it or not. If an add-on is uninstalled and later installed again, it might be desirable for preferences and other settings to be kept. Another argument in favor of keeping that data is that Firefox doesn't delete its profile folders after it is uninstalled, so it would be consistent to keep it. On the other hand, local data that is no longer needed takes unnecessary disk space and can contain private information that users forget is there. It's up to the developer's discretion.</p> + +<p>Uninstalling an add-on happens in 2 stages: first the add-on is flagged to be uninstalled, and then the add-on is actually removed. In the case of <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped extensions">Bootstrapped Extensions</a>, both steps happen at the same time. In the case of "traditional" extensions, like those explained in the tutorial, both steps happen at different times. In this case the user is told that Firefox needs to restart in order for the extension to be completely removed. Then the user has the option to restart right away, wait to restart whenever is convenient, or even cancel the uninstall operation. The add-on will not be completely removed until the browser is restarted.</p> + +<p>So, in order to detect the first stage, you'll need to add an event listener using the <a href="/en/Addons/Add-on_Manager/AddonManager#addAddonListener%28%29" title="en/Addons/Add-on Manager/AddonManager#addAddonListener()">addAddonListener</a> method. The data parameter explains the action being performed.</p> + +<p>If you detect your add-on is going to be uninstalled at this stage, it's a good time to show the uninstall feedback form. It is <strong>not</strong> a good time to clean up your files, at least not without prior user consent. Remember that the user can revert this decision. So, you should listen to other events, like canceling the operation, to make sure that you know what is going on. Set a boolean flag that indicates if your add-on is set to be uninstalled or not, and reset it when necessary.</p> + +<p>The second stage is knowing when the application is actually going to be closed. Then you'll have reasonable certainty that the add-on will be removed and you can perform any cleanup operations safely. For this, you need to add an observer for the <a href="/en/Observer_Notifications#Application_shutdown" title="en/Observer Notifications#Application shutdown">quit-application</a> topic. This is when you'll know the application will close. Then you can check the flag you set up on the first stage and perform any necessary deletions. You shouldn't perform very time-consuming operations here, at least not without telling users what is going on.</p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html new file mode 100644 index 0000000000..1fb0b53d94 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html @@ -0,0 +1,210 @@ +--- +title: 'Apéndice C: Evitar usar eval en los Add-ons' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_C:_Evitar_usar_eval_en_los_Add-ons' +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_C:_Avoid_using_eval_in_Add-ons +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>Using <code>eval</code> in extensions is almost always unnecessary, and many times even a security vulnerability. Moreover, code using <code>eval</code> is harder to parse for a human mind, is often pretty complex, and relies on assumptions that are not necessarily true in the future or even now.</p> + +<p>This article is aimed at presenting alternatives to common <code>eval</code> uses in add-ons and other Javascript code.</p> + +<p>Add-on authors are strongly encouraged to update their code to eliminate all use of <code>eval</code>, no matter if the add-on is to be hosted in the <a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">Mozilla Add-ons Gallery </a>or not. In order to host your add-on with Mozilla it is crucial to minimize or completely eliminate <code>eval</code> use in order to receive a positive review and have your add-on made public.</p> + +<h2 id="Parsing_JSON">Parsing JSON</h2> + +<p>Mozilla provides native JSON support since Firefox 3. There is simply no need to parse JSON using <code>eval</code>. Additionally, parsing JSON retrieved from a remote location becomes a security vulnerability when parsed with the <code>eval</code> function. Basically, you are executing remote code with full chrome access; that is, introducing a remote code execution vulnerability. Even if you trust the remote server; for example, because it is one you rent and administer yourself, there is a huge security risk, because of, but not limited to:</p> + +<ul> + <li>You might discontinue your project or sell it, so that it is possible another person with malicious intentions takes over your domain.</li> + <li>The server and/or domain name might be compromised.</li> + <li>If using an unencrypted, insecure connection, a Man-in-the-middle attacker might replace the JSON with attack code before it arrives at the user.</li> +</ul> + +<h3 id="Use_Native_JSON">Use Native JSON</h3> + +<p>Since Firefox 3.5 you should <a href="/En/Using_native_JSON" title="en/Using native JSON">use native JSON</a>. In Firefox 3.0, you may take a look at {{ Interface("nsIJSON") }} instead. Using native JSON has the added benefit that it is better when validating the input and also a lot faster.</p> + +<div class="note"><strong>Note:</strong> Do not use JSON parsers implemented in Javascript. These implementations are less efficient and often also contain serious security vulnerabilities. Such implementations are meant to be used within a very different security context, namely a website, where the origin of the data is usually known in all instances and where vulnerabilities would have a much smaller impact.</div> + +<h2 id="Passing_around_functionscode_as_strings">Passing around functions/code as strings</h2> + +<p>Often you'll want to pass functions or code to other functions, most notoriously <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">setTimeout</a> and <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a>. Often this is achieved by a hack "function/code as string" technique.</p> + +<pre class="brush: js">// DO NOT USE +setTimeout("doSomething();", 100); +addEventListener("load", "myAddon.init(); myAddon.onLoad();", true); +setInterval(am_I_a_string_or_function_reference_qmark, 100); +</pre> + +<p>That in itself is certainly not elegant, but it may also become a security issue if you construct the passed code with externally provided data:</p> + +<pre class="brush: js">// DO NOT USE +setTimeout("alert('" + xhr.responseText + "');", 100); +// Attacker manipulated responseText to contain "attack!'); format_computer(); alert('done" +setTimeout("alert('attack!'); format_computer(); alert('done');", 100); +</pre> + +<p>As a general rule of thumb, just don't pass code around as strings and execute it by calling <code>eval</code>, <code>setTimeout</code> and friends.</p> + +<h3 id="Alternative_Use_(anonymous)_functions">Alternative: Use (anonymous) functions</h3> + +<p>You can always create a small anonymous function to pass around instead. Closures will ensure the code is still valid, even if your outer function already returned from execution.</p> + +<pre class="brush: js">addEventListener("load", function() { myAddon.init(); myAddon.onLoad(); }, true); +function doXHR() { + //... + var response = xhr.responseText; + setTimeout(function() { alert(response); }, 100); +} +</pre> + +<h3 id="Alternative_Use_Function.bind">Alternative: Use Function.bind</h3> + +<p>Function.bind is a new utility function that you may use to (partially) bind parameters to functions.</p> + +<pre class="brush: js">addEventListener("load", myAddon.init.bind(myAddon), true); +setTimeout(alert.bind(null, xhr.responseText), 100); +</pre> + +<h2 id="OverridingExtending_existing_functions">Overriding/Extending existing functions</h2> + +<p>A common thing add-ons do during their initialization is overriding/extending existing browser functions by using <code>Function.toString</code>/<code>Function.toSource</code> and <code>eval</code> to "string-patch" the function body.</p> + +<pre class="brush: js">// DO NOT USE +var functionBody = gBrowser.addTab.toSource(); +var afterBracket = functionBody.indexOf("{"} + 1; +functionBody = functionBody.substring(0, afterBracket) + "myAddon.onAddTab(aURI);" + functionBody.substring(afterBracket); +eval("gBrowser.addTab = " + functionBody); +</pre> + +<p>Of course, this not only looks messy, but can be quite error prone.</p> + +<ul> + <li>Other extensions might do something similar, but a little different, ending up with completely broken code.</li> + <li>The code is hard to read and by that hard to maintain and review. (The example is a quite simple one. In real life such code is often far more complex)</li> + <li>The code might break in the future, as certain assumptions might not longer be true, for example the function signature may change (aURI from above becomes aURL) or the function is replaced by a shorthand not containing bracket: + <pre class="brush: js">function addTab(aURI) tabBrowser.addTab(aURI); + </pre> + </li> +</ul> + +<p>Like with "Passing functions/code as strings" above, patching function to include some external data will create security vulnerabilities.</p> + +<h3 id="Alternative_Replace_Function.apply">Alternative: Replace + Function.apply</h3> + +<p>You may replace the original function with a new function, keeping a reference to the original function which you then call from the new one.</p> + +<pre class="brush: js">(function() { + var _original = gBrowser.addTab; // Reference to the original function + gBrowser.addTab = function() { + // Execute before + try { + myAddon.onAddTab(arguments[0]); + } catch (ex) { /* might handle this */ } + // Execute original function + var rv = _original.apply(gBrowser, arguments); + // execute afterwards + try { + myAddon.doneAddTab(rv); + } catch (ex) { /* might handle this */ } + + // return the original result + return rv; + }; +})(); +</pre> + +<p>This is admittedly more verbose, but at the same time it should be easier to understand.</p> + +<ul> + <li>You don't have to parse in your mind what the resulting function will look like.</li> + <li>There won't be any problems if various Add-ons employ this method with the same function.</li> + <li>You don't have to care about parameter naming or short-hand functions.</li> +</ul> + +<div class="note"><strong>Note:</strong> It is not safe to remove such an override again, as this method constitutes in a single-linked function chain. If you want to disable your overrides again, then use a flag indicating that, or similar. At the same time, it is also not safe to "un-string-patch" a function, for the exact same reason.</div> + +<div class="note"><strong>Note:</strong> There are still some scenarios where incompatibilities may arise, such as trying to cancel the function call under a certain set of conditions when other Add-ons have overridden the same function. Again, this is a problem with the "string-patch" method, too. How to handle this is inter-Add-on specific and not addressed in this article.</div> + +<h2 id="Triggering_event_handlers">Triggering event handlers</h2> + +<p>Sometimes scripts might want to manually trigger an event handler that is defined directly in the XUL document. Consider the following XUL fragment throughout the rest of this section.</p> + +<pre class="brush: xml"><menuitem id="mymenu" oncommand="executeSomething; executeSomethingElse();"/> +<label id="mylabel" onclick="executeSomething; executeSomethingElse();"/> +</pre> + +<p>Add-on authors commonly use <code>eval</code> to trigger the handlers.</p> + +<pre class="brush: js">// DO NOT USE +eval(document.getElementById("mymenu").getAttribute("oncommand")); +eval(document.getElementById("mylabel").getAttribute("onclick")); +</pre> + +<h3 id="Alternative_Dispatch_real_events">Alternative: Dispatch real events</h3> + +<p>Dispatching real events has the added bonus that all other event listeners for that Element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.</p> + +<pre class="brush: js">// Fake a command event +var event = document.createEvent("Events"); +event.initEvent("command", true, true); +document.getElementById("mymenu").dispatchEvent(event); + +// Fake a mouse click +var mouseEvent = document.createEvent("MouseEvents"); +event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); +document.getElementById("mylabel").dispatchEvent(mouseEvent); +</pre> + +<p>Please see the corresponding documentation on how to use and initialize particular event types.</p> + +<h3 id="Alternative_Element.doCommand()">Alternative: Element.doCommand()</h3> + +<p>Elements that have a command (<code>oncommand</code>) assigned will also have a working <code>doCommand</code> method.</p> + +<pre class="brush: js">document.getElementById("mymenu").doCommand(); +</pre> + +<h2 id="Accessing_properties_via_computed_names">Accessing properties via computed names</h2> + +<p>Not that common anymore, but still existing, are Add-Ons or other Javascript programs that access object properties using <code>eval</code> when the property name is not a literal, but computed on the fly.</p> + +<pre class="brush: js">//DO NOT USE +eval("myAddon.phrases.word" + word + " = '" + phrase + "';");</pre> + +<p>Again, this is not only unnecessarily hard to parse for a human, but may also contain security vulnerabilities if you compute the names using external data.</p> + +<h3 id="Alternative_Using_bracket-access_to_object_properties">Alternative: Using bracket-access to object properties</h3> + +<p>Object properties can always accessed using the bracket syntax:</p> + +<pre class="brush: js">obj["property"] === obj.property +</pre> + +<p>Hence the following will just work without having to resort to <code>eval</code>.</p> + +<pre class="brush: js">myAddon.phrases["word" + word] = "phrase"; +</pre> + +<h2 id="Special_thanks">Special thanks</h2> + +<p>Special thanks goes to Wladimir Palant of Adblock Plus, who wrote <a class="link-https" href="https://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension" title="https://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension">an article</a> years back which heavily inspired this one.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/En/Using_native_JSON" title="en/Using native JSON">Native JSON</a></li> + <li>{{ Interface("nsIJSON") }}</li> + <li><a href="/en/JSON" title="en/JSON">JSON</a></li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Function/bind" title="en/JavaScript/Reference/Global Objects/Function/bind">Function.bind</a></li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></li> + <li><a href="/en/XUL/Method/doCommand" title="en/XUL/Method/doCommand">Element.doCommand</a></li> + <li><a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createEvent</a></li> + <li><a href="/en/DOM/event.initEvent" title="en/DOM/event.initEvent">event.initEvent</a></li> +</ul> diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_d_colon__cargar_scripts/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_d_colon__cargar_scripts/index.html new file mode 100644 index 0000000000..e282486a46 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_d_colon__cargar_scripts/index.html @@ -0,0 +1,304 @@ +--- +title: 'Apéndice D: Cargar Scripts' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_D:_Cargar_Scripts' +translation_of: 'Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_D:_Loading_Scripts' +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>Most add-ons and XUL Runner applications provide their primary functionality by loading and executing JavaScript code. Because there are such a diverse array of add-ons, and because the needs of developers have grown organically over time, the Gecko runtime provides a number of means to dynamically load and execute JavaScript files. Each of these means has its own advantages and disadvantages, as well as its own quirks which may trap the unwary. Below is an overview of the more common means of loading scripts, along with some of their primary advantages, disadvantages, quirks, and use cases.</p> + +<p>The examples below which make use of the <code>Services</code> global assume that you're previously imported the <a href="/en/JavaScript_code_modules/Services.jsm" title="en/JavaScript_code_modules/Services.jsm">Services.jsm</a> module. As this module only exists on Firefox 4 and other Gecko 2-based platforms, the services in question will have to be manually loaded on other platforms.</p> + +<p> </p> + +<h2 id="<script>_tags"><script> tags</h2> + +<p> </p> + +<p>XUL <a href="/en/XUL/script" title="en/XUL/script">script tags</a> are traditionally the primary means of loading scripts for extension developers. These tags are generally inserted into XUL overlay files or other XUL documents, after which they are automatically loaded into the context of the XUL window in question and executed immediately and synchronously.</p> + +<h3 id="Advantages">Advantages</h3> + +<ul> + <li><strong>Familiarity:</strong> These tags are very similar to the HTML script tags familiar to most web developers.</li> + <li><strong>Simplicity:</strong> The simple, declarative nature of these tags make them easy to find and understand at a glance.</li> + <li><strong>Speed:</strong> Script tags may or may not be loaded from pre-compiled bytecode in the fastload cache (Gecko 1.x) or startup cache (Gecko 2), which means they don't necessarily need to read as source and compiled with each restart.</li> + <li><strong>Flexibility:</strong> Script tags provide a means to specify the character set and JavaScript version of the scripts to be loaded, which many other methods do not.</li> + <li><strong>Debuggable</strong>: development tools support debugging JavaScript loaded by script tags</li> +</ul> + +<h3 id="Disadvantages">Disadvantages</h3> + +<ul> + <li><strong>Scoping:</strong> Scripts loaded via script tags share the global scope with all other scripts loaded into the same window. These tags provide no means to load scripts into a private or otherwise specific scope.</li> + <li><strong>Speed:</strong> Even if these scripts are loaded from a cache, only read and compile time are reduced. The scripts still need to execute all of their initialization code and allocate and initialize all of their data structures each time the script is loaded.</li> + <li><strong>Loading:</strong> Script loaded via script tags run in partially loaded documents. Problems can ensue if the script immediately attempts to access DOM nodes. This is easily resolved by deferring the work to a dynamically added onload hander. (A standalone XUL window can use an onload attribute.)</li> +</ul> + +<h3 id="Example">Example</h3> + +<p>The following overlay will load the script “overlay.js” from the same directory as the overlay file into the window which it overlays. The script will be read with the UTF-8 encoding, based on the encoding of the overlay, and will execute as JavaScript <a href="/en/JavaScript/New_in_JavaScript/1.8" title="en/JavaScript/New_in_JavaScript/1.8">version 1.8</a>, based on the version specified in the script tag.</p> + +<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> + +<!DOCTYPE overlay> + +<overlay id="script-overlay" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <script type="application/javascript;version=1.8" src="overlay.js"/> + +</overlay></pre> + +<h2 id="evalInSandbox">evalInSandbox</h2> + +<p>The <a href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox"><code>Components.utils.evalInSandbox</code></a> method may be used to load arbitrary code into <a href="/en/Components.utils.Sandbox" title="en/Components.utils.Sandbox"><code>Components.utils.Sandbox</code></a> objects. JavaScript files or URLs may be loaded in this manner by first retrieving their contents into memory using an <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>. This is the method used by Jetpack's securable module system to load nearly all executable code.</p> + +<h3 id="Advantages_2">Advantages</h3> + +<ul> + <li><strong>Namespacing</strong>: Since scripts executed via <code>evalInSandbox</code> run in a defined namespace, global namespace contamination and the resultant extension compatibility issues are not usually a problem.</li> + <li><strong>Flexibility:</strong> The <code>evalInSandbox</code> method accepts several parameters, including the URL, line number, and JavaScript version of the file from which the code being evaluated was extracted. This information is invaluable for debugging, and the flexibility with which it can be specified makes this method useful for extracting JavaScript from a number of file formats other than raw JavaScript scripts. Additionally, as Sandbox objects can be created with an arbitrary prototype object, the evaluated code can be given access to the global properties of any existing scope.</li> + <li><strong>Security:</strong> <code>Sandbox</code> objects are initialized with a security principal object, or otherwise a window or URL from which to derive one. This means that <code>evalInSandbox</code> can be used to execute code with a specified privilege level rather than full chrome privileges. Beyond this, the scope of the Sandbox can be augmented or rarified to add or remove privileges as necessary. Under ordinary circumstances, native objects passed out of Sandboxes are wrapped in <a href="/en/XPConnect_security_membranes#section_2" title="en/XPConnect_security_membranes#section_2"><code>XrayWrapper</code></a> objects, which means that only native properties of these objects are directly exposed to privileged code. This behavior can be reversed by setting the <code>wantsXrays</code> parameter to false when constructing the <code>Sandbox</code>.</li> +</ul> + +<h3 id="Disadvantages_2">Disadvantages</h3> + +<ul> + <li><strong>Performance:</strong> There are several significant performance disadvantages inherent in this method: + + <ul> + <li>There is currently no way to load code into sandboxes from a cache. This means that code must be compiled and executed anew each time it is loaded, which has a significant overhead for large code bases.</li> + <li>In addition to compile time, reading files synchronously from disk has its own overhead, and <code>XMLHttpRequests</code> have significantly more overhead than native loading methods.</li> + <li>Although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session.</li> + <li>Because Sandbox objects are evaluated in their own <a href="/en/XPConnect_security_membranes" title="en/XPConnect_security_membranes">javascript compartment</a>, they are separated by a membrane from other JavaScript code. This means that any and all JavaScript objects passed in our out of them are wrapped in inter-compartment Proxy objects, which consume additional memory and add an extra layer of complexity to all property accesses and method calls.</li> + </ul> + </li> + <li><strong>JavaScript compartments</strong>: As noted above, each Sandbox executes in its own <a href="/en/XPConnect_security_membranes" title="en/XPConnect_security_membranes">javascript compartment</a>. In addition to the possible performance concerns, passing data between these compartments is not entirely transparent. Some known issues include: + <ul> + <li>E4X XML objects cannot be wrapped for passage between compartments: {{ Bug(613142) }}</li> + <li>There are a number of type detection issues, including: + <ul> + <li>String.replace does not recognize RegExp objects from foreign compartments: {{ Bug(633830) }}</li> + </ul> + </li> + </ul> + </li> + <li><strong>Debugging:</strong> Support for Sandbox evaluation in development tools is uneven. Chromebug supports Firebug based Sandboxes.</li> +</ul> + +<h3 id="Examples">Examples</h3> + +<p>The following code will execute a simple script in a Sandbox with the privilege level of the current content page. The globals of the current content window will be available in the scripts global scope. In stack traces, the script will appear to have been loaded from the file "<code><span class="nowiki">zz-9://plural/zed/alpha</span></code>", line <code>42</code>.</p> + +<pre class="brush: js">// Use the current content window as the execution context. +// To make properties defined by scripts executing on the page +// available to your sandbox script, use content.wrappedJSObject +// instead. +let context = content; + +// Create the Sandbox +let sandbox = Components.utils.Sandbox(context, { + // Make properties of the context object available via the + // script's global scope + sandboxPrototype: context, + // Wrap objects retrieved from the sandbox in XPCNativeWrappers. + // This is the default action. + wantXrays: true +}); + +// The script that will be executed: +let script = String(); + +// Evaluate the script: +Components.utils.evalInSandbox(script, sandbox, + // The JavaScript version + "1.8", + // The apparent script filename: + "zz-9://plural/zed/alpha", + // The apparent script starting line number: + 42); +</pre> + +<p>The following code will execute a simple script loaded from a local file in the same directory as the current script. The script will execute in the same security context as the current script and will have access to the same globals, but any new globals it creates will be accessible only to the script itself. Objects passed out of the sandbox will not be wrapped in <a href="/en/XPCNativeWrapper" title="en/XPCNativeWrapper"><code>XPCNativeWrapper</code></a>s but will still be wrapped in inter-compartment proxies.</p> + +<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", + "nsIXMLHttpRequest", + "open"); + +function loadScript(name, context) { + // Create the Sandbox + let sandbox = Components.utils.Sandbox(context, { + sandboxPrototype: context, + wantXrays: false + }); + + // Get the caller's filename + let file = Components.caller.stack.filename; + // Strip off any prefixes added by the sub-script loader + // and the trailing filename + let directory = file.replace(/.* -> |[^\/]+$/g, ""); + let scriptName = directory + name; + + // Read the script + let xmlhttp = XMLHttpRequest("GET", scriptName, false); + xmlhttp.overrideMimeType("text/plain"); + xmlhttp.send(); + let script = xmlhttp.textContent; + + // Evaluate the script: + Components.utils.evalInSandbox(script, sandbox, + "1.8", scriptName, 0); +} + + +// Use the current global object. +// The following may be used instead at the top-level: +// +// let context = this +if (Components.utils.getGlobalForObject) + // Gecko 2.x + var context = Components.utils.getGlobalForObject({}); +else + // Gecko 1.x + context = {}.__parent__; + +loadScript("script.js", context); +</pre> + +<h2 id="The_Sub-Script_Loader">The Sub-Script Loader</h2> + +<p>The {{ interface("mozIJSSubScriptLoader") }} can be used to load local scripts from the <code>chrome:</code>, <code>resource:</code>, and <code>file:</code> protocols into any JavaScript object. Any new globals created by this script are defined as properties of this object. Additionally, any properties of the target object are available as variables in the script's global namespace, along with as any properties of the global associated with the target object. These scripts execute with the same privileges and restrictions of the global associated with the target object, and this method can therefore also be used when with <a href="/en/Components.utils.Sandbox" title="en/Components.utils.Sandbox"><code>Sandbox</code></a> objects with the same effect as <a href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox"><code>evalInSandbox</code></a> and into content windows with the same effect as injecting script tags into their documents.</p> + +<h3 id="Advantages_3">Advantages</h3> + +<ul> + <li><strong>Namespacing</strong>: Global namespace contamination and the resultant extension compatibility issues can often be avoided by loading sub-scripts into private namespaces.</li> + <li><strong>Flexibility</strong>: The sub-script loader can load scripts into a variety of different namespaces for a wide variety of uses, and as of Gecko 2 allows the character set of the script to be specified.</li> + <li><strong>Performance</strong>: As of Gecko 8.0, scripts loaded via {{ ifmethod("mozIJSSubScriptLoader", "loadSubScript") }} are loaded from a cache. Unlike modules, however, scripts are still executed each time they are loaded and therefore still suffer performance and memory disadvantages over that method.</li> + <li>When loading into a Sandbox object, the same advantages apply as above.</li> +</ul> + +<h3 id="Disadvantages_3">Disadvantages</h3> + +<ul> + <li><strong>Performance</strong>: Prior to Gecko 8.0, scripts loaded via {{ ifmethod("mozIJSSubScriptLoader", "loadSubScript") }} are not loaded from a cache, and therefore must be read and compiled each time they are loaded which has a significant overhead for large code bases. Although wary authors can choose to cache instances of their modules so that modules are loaded only once globally, this method can be easily misused to re-load scripts for each new window where they would be better loaded only once globally per session.</li> + <li>Non-chrome files loaded in this manner will have the current filename prefixed to the filename in their debugging information. For instance, the file “<code><span class="nowiki">resource://foo/bar.js</span></code>” loaded from “<code><span class="nowiki">resource://foo/baz.js</span></code>” will appear as “<code><span class="nowiki">resource://foo/baz.js -> resource://foo/bar.js</span></code>” in stack traces.</li> + <li>When loading into a Sandbox object, the same disadvantages apply as above.</li> +</ul> + +<h3 id="Examples_2">Examples</h3> + +<p>The following code will load a script into its own context. The script will execute with the security principal of and have access to the global properties of the current global.</p> + +<pre class="brush: js">let context = {}; +Services.scriptloader.loadSubScript("chrome://my-package/content/foo-script.js", + context, "UTF-8" /* The script's encoding */); +</pre> + +<p>The following code will execute a simple script loaded from a local file in the same directory as the current script. The script will execute in the same security context as the current script and will have access to the same globals, but any new globals it creates will be accessible only to the script itself. Objects passed out of the sandbox will not be wrapped in <code>XPCNativeWrapper</code>s but will still be wrapped in inter-compartment proxies.</p> + +<pre class="brush: js">function loadScript(name, context) { + // Create the Sandbox + let sandbox = Components.utils.Sandbox(context, { + sandboxPrototype: context, + wantXrays: false + }); + + // Get the caller's filename + let file = Components.caller.stack.filename; + // Strip off any prefixes added by the sub-script loader + // and the trailing filename + let directory = file.replace(/.* -> |[^\/]+$/g, ""); + + Services.scriptloader.loadSubScript(directory + name, + sandbox, "UTF-8"); +} + +loadScript("foo.js", this); +</pre> + +<h2 id="JavaScript_modules">JavaScript modules</h2> + +<p><a href="/en/JavaScript_code_modules/Using" title="en/JavaScript_code_modules/Using">JavaScript modules</a> are used to efficiently load scripts into their own global namespaces. Because these scripts are loaded from a bytecode cache, and the same scripts are loaded only once per session no matter how many times they are imported, this is one of the most performant methods of script loading.</p> + +<h3 id="Advantages_4">Advantages</h3> + +<ul> + <li><strong>Performance</strong>: JavaScript modules are stored in a pre-compiled format in a cache, and therefore load with significantly less overhead than other types of scripts. Additionally, scripts are loaded only once globally per session, and therefore have virtually no overhead for multiple imports.</li> + <li><strong>Namespacing</strong>: JavaScript modules, like JavaScript components, are loaded into their own private scope. Namespace contamination and the resulting compatibility issues are only an issue when they are imported into shared global namespaces.</li> + <li><strong>Data sharing</strong>: As modules are loaded only once globally, every import has access to the same data and global variables no matter what context or window it was imported from. JavaScript modules can therefor be used for communication and data sharing between otherwise isolated contexts.</li> + <li><strong>Debugging</strong>: Chromebug (at least) can list Component.utils modules and single step through them.</li> +</ul> + +<h3 id="Disadvantages_4">Disadvantages</h3> + +<ul> + <li><strong>Namespacing:</strong> As modules always execute with their own namespace, they have no direct access to the DOM or window properties of windows or documents, and therefore must often pass around references to these objects and any document-specific state data that they require.</li> +</ul> + +<h3 id="Examples_3">Examples</h3> + +<p>The following code will import a module into the current global scope. All variables named in the target script's EXPORTED_SYMBOLS global array will be copied into the current execution context.</p> + +<pre class="brush: js">Components.utils.import("resource://my-package/my-module.jsm"); +</pre> + +<p>The following function will import an arbitrary module into a singleton object, which it returns. If the argument is not an absolute path, the module is imported relative to the caller's filename.</p> + +<pre class="brush: js">function module(uri) { + if (!/^[a-z-]+:/.exec(uri)) + uri = /([^ ]+\/)[^\/]+$/.exec(Components.stack.caller.filename)[1] + uri + ".jsm"; + + let obj = {}; + Components.utils.import(uri, obj); + return obj; +} +</pre> + +<p>Given the above code, the following code will import the module "my-module.jsm" from the current directory and define the symbols <code>foo</code> and <code>bar</code> from that module in the current scope. It will also import the symbol <code>Services</code> from the standard <code>Services.jsm</code> module.</p> + +<pre class="brush: js">const { Services } = module("resource://gre/modules/Services.jsm"); +const { bar, foo } = module("my-module"); +</pre> + +<h2 id="DOM_Workers_Worker_and_ChromeWorker">DOM Workers: Worker and ChromeWorker</h2> + +<p><a href="/En/Using_workers_in_extensions" title="En/Using_workers_in_extensions">DOM Workers</a> can be used to load scripts into their own global contexts which run in their own threads. In order to ensure thread safety, these contexts are extremely limited, can't be passed JavaScript objects, and have no access to the DOM. All communication between these contexts and outer contexts is marshalled through <a href="/en/JSON" title="en/JSON">JSON</a> encoding and decoding. <a href="/en/DOM/ChromeWorker" title="en/DOM/ChromeWorker"><code>ChromeWorker</code></a>s also have access to <code>ctypes</code> and a limited number of thread safe XPCOM classes, but are otherwise limited to simple computation based on data passed via messages and <code>XMLHttpRequests</code>.</p> + +<h3 id="Advantages_5">Advantages</h3> + +<ul> + <li><strong>Asynchronous</strong>: Workers execute asynchronously in their own threads, which means that they have limited risk of interfering with the main thread. They may safely perform synchronous <code>XMLHttpRequests</code> or other intensive computation which would normally need to be broken up into multiple callbacks.</li> + <li><strong>Safety</strong>: As workers have no access to objects which might cause a crash or deadlock when executed re-entrantly or by spinning the event loop, there are significant safety advantages over other methods of asynchronous execution.</li> +</ul> + +<h3 id="Disadvantages_5">Disadvantages</h3> + +<ul> + <li><strong>Limited scoping:</strong> As data from the main thread may only be accessed via JSON message passing, there are significant difficulties in performing many operations in Worker scopes.</li> + <li><strong>DOM Access</strong>: As there is no DOM access in Worker scopes, <code>XMLHttpRequests</code> may not easily be used with XML or HTML sources, and should instead only be used with JSON or other text-based sources.</li> + <li><strong>Debugging</strong>: JSD knows nothing about Workers and no JavaScript debuggers work on them.</li> +</ul> + +<h2 id="Jetpack_Processes">Jetpack Processes</h2> + +<p><a href="/en/Jetpack_Processes" title="en/Jetpack_Processes"><code>nsIJetpack</code> classes</a> are very similar to DOM workers, except that modules execute in entirely separate processes rather than separate threads. Additionally, rather than directly loading files, scripts are executed by evaluating strings.</p> + +<h3 id="Advantages_6">Advantages</h3> + +<ul> + <li><strong>Stability:</strong> As code running in Jetpack processes is isolated from the main process, crashes in these processes are unlikely to bring down the main process as well, though they may put a halt to functionality provided by the script or any functionality reliant on it.</li> + <li>The advantages of DOM Workers listed above also apply to Jetpack processes</li> +</ul> + +<h3 id="Disadvantages_6">Disadvantages</h3> + +<ul> + <li><strong>Performance:</strong> As scripts must be evaluated from strings, they are impossible to cache, which has significant performance implications for large code bases.</li> + <li>The disadvantages of DOM Workers listed above also apply to Jetpack processes</li> +</ul> diff --git a/files/es/mozilla/tech/xul/escuela_xul/apéndice_e_colon__dom_e_inserción_html/index.html b/files/es/mozilla/tech/xul/escuela_xul/apéndice_e_colon__dom_e_inserción_html/index.html new file mode 100644 index 0000000000..66073bcc6b --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/apéndice_e_colon__dom_e_inserción_html/index.html @@ -0,0 +1,244 @@ +--- +title: 'Apéndice E: DOM e inserción HTML' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_E:_DOM_e_inserción_HTML' +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/DOM_Building_and_HTML_Insertion +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>Many add-ons need to dynamically generate DOM content, either XUL or HTML, from their scripts. For security reasons, and to prevent errors, care needs to be taken to avoid evaluating arbitrary text as HTML. Failure to do so can lead to execution or remote scripts, and in the worst cases to privilege escalation which can leave a user's PC open to remote attack.</p> + +<h2 id="Building_DOM_Trees">Building DOM Trees</h2> + +<p>In most cases, DOM trees should be built exclusively with DOM creation methods. The following methods will all safely create a DOM tree without risk of remote execution.</p> + +<h3 id="E4X_Templating">E4X Templating</h3> + +<p>The following function can be used to generate DOM nodes from <a href="/en/E4X" title="en/E4X">E4X</a> XML objects. It has the advantage of appearing identical to ordinary HTML, but the disadvantage of being nearly exclusive to Firefox.</p> + +<pre class="brush: js">var HTML = Namespace("html", "http://www.w3.org/1999/xhtml"); +var XUL = Namespace("xul", "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +default xml namespace = HTML; +function xmlToDOM(xml, doc, nodes) { + if (xml.length() != 1) { + let domnode = doc.createDocumentFragment(); + for each (let child in xml) + domnode.appendChild(xmlToDOM(child, doc, nodes)); + return domnode; + } + switch (xml.nodeKind()) { + case "text": + return doc.createTextNode(String(xml)); + case "element": + let domnode = doc.createElementNS(xml.namespace(), xml.localName()); + for each (let attr in xml.@*::*) + domnode.setAttributeNS(attr.namespace(), attr.localName(), String(attr)); + + for each (let child in xml.*::*) + domnode.appendChild(xmlToDOM(child, doc, nodes)); + if (nodes && "@key" in xml) + nodes[xml.@key] = domnode; + return domnode; + default: + return null; + } +}</pre> + +<p>When passed an XML literal and a document, it returns the DOM tree corresponding to the XML for that document. If passed a third argument, the DOM node created for any element with a "key" attribute, is stored in a property of the given object named for the "key" attribute's value.</p> + +<pre class="brush: js">default xml namespace = XUL; + +var href = "http://www.google.com/"; +var text = "Google"; +var nodes = {}; +document.documentElement.appendChild( + xmlToDOM(<hbox xmlns:html={HTML}> + <html:div> + <a href={href} target="_top" key="link">{text}</a> + </html:div> + </hhox>, + document, nodes); + + nodes.link.addEventListener("click", function (event) { alert(event.target.href); }, false);</pre> + +<h3 id="JSON_Templating">JSON Templating</h3> + +<p>For code which needs to be cross-browser compatible, a similar templating system can be used, based on JSON objects rather than E4X. It also has the advantage of being slightly more concise than the E4X variant, though no easier to read.</p> + +<pre class="brush: js">var namespaces = { + html: "http://www.w3.org/1999/xhtml", + xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" +}; + +jsonToDOM.defaultNamespace = namespaces.html; +function jsonToDOM(xml, doc, nodes) { + function namespace(name) { + var m = /^(?:(.*):)?(.*)$/.exec(name); + return [namespaces[m[1]], m[2]]; + } + + function tag(name, attr) { + if (isArray(name)) { + var frag = doc.createDocumentFragment(); + Array.forEach(arguments, function (arg) { + if (!isArray(arg[0])) + frag.appendChild(tag.apply(null, arg)); + else + arg.forEach(function (arg) { + frag.appendChild(tag.apply(null, name[i])); + }); + }); + return frag; + } + + var args = Array.slice(arguments, 2); + var vals = namespace(name); + var elem = doc.createElementNS(vals[0] || jsonToDOM.defaultNamespace, + vals[1]); + + for (var key in attr) { + var val = attr[key]; + if (nodes && key == "key") + nodes[val] = elem; + + vals = namespace(key); + if (typeof val == "function") + elem.addEventListener(key.replace(/^on/, ""), val, false); + else + elem.setAttributeNS(vals[0] || "", vals[1], val); + } + args.forEach(function(e) { + elem.appendChild(typeof e == "object" ? tag.apply(null, e) : + e instanceof Node ? e : doc.createTextNode(e)); + }); + return elem; + } + return tag.apply(null, xml); +}</pre> + +<p>In the above, the <code>namespaces</code> object defines the namespace prefixes which can be used in the given DOM tree. Event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes.</p> + +<pre class="brush: js">var href = "http://www.google.com/"; +var text = "Google"; +var nodes = {}; +document.documentElement.appendChild( + jsonToDOM(["xul:hbox", {}, + ["div", {}, + ["a", { href: href, key: "link", + onclick: function (event) { alert(event.target.href); } }, + text], + ["span", { class: "stuff" }, + "stuff"]]], + document, nodes)); + +alert(nodes.link);</pre> + +<h3 id="jQuery_Templating">jQuery Templating</h3> + +<p>For extensions which already use jQuery, it is possible to use its builtin DOM building functions for templating, though care must be taken when passing non-static strings to methods such as <code>.append()</code> and <code>.html()</code>. In most cases, <code>.text()</code> should be used instead of the latter. When using the <code>jQuery</code> constructor, only empty tags should be specified in order to avoid invoking the DOM parser.</p> + +<pre class="brush: js">var href = "http://www.google.com/"; +var text = "Google"; + $("body").append( + $("<div>", { class: "foo" }) + .append($("<a>", { href: href, text: text }) + .click(function (event) { alert(event.target.href) })) + .append($("<span>").text("Foo")));</pre> + +<h3 id="innerHTML_with_HTML_Escaping">innerHTML with HTML Escaping</h3> + +<p>This method is a last resort which should be used only as a temporary measure in established code bases. It is safe, though inefficient, to assign dynamic values to <code>innerHTML</code> if any dynamic content in the value is escaped with the following function:</p> + +<pre class="brush: js">function escapeHTML(str) str.replace(/[&"<>]/g, function (m) "&" + ({ "&": "amp", '"': "quot", "<": "lt", ">": "gt" })[m] + ";");</pre> + +<p>Note that quotation marks must be escaped in order to prevent fragments escaping attribute values, and that single quotes may not be used to quote attribute values in the fragment.</p> + +<pre class="brush: js">var href = "http://www.google.com/"; +var text = "Google"; + +document.getElementById("target-div").innerHTML = '<div>\ + <a href="' + escapeHTML(href) '" target="_top">' + escapeHTML(text) + '</a>\ + </div>'</pre> + +<p>It needs to be stressed that this method <strong>should not be used in new code</strong> and is only a temporary measure to shore up legacy code bases.</p> + +<h2 id="Safely_Generating_Event_Listeners_and_Scripts">Safely Generating Event Listeners and Scripts</h2> + +<p>It is occasionally necessary to generate event listeners and script fragments from dynamic content. Great care must be taken in these situations. Under no circumstances should code resembling <code>'callback("' + str + '")'</code> appear anywhere in your add-on.</p> + +<h3 id="Closures">Closures</h3> + +<p>By far the best way to create dynamic event listeners is to use closures. The following two code fragments are roughly equivalent:</p> + +<pre class="brush: js">function clickify(elem, address) { + elem.addEventListener("click", function (event) { openWindow(address) }, false); +} + +function clickify(elem, address) { + elem.onclick = function (event) { openWindow(address) }; +}</pre> + +<h3 id="Multiple_Attributes">Multiple Attributes</h3> + +<p>Sometimes there is a need for event listeners to appear as attributes in the DOM. In these cases, multiple attributes should be used, one for each variable:</p> + +<pre class="brush: js">function clickify(elem, address) { + elem.setAttribute("href", address); + elem.setAttribute("onclick", "openWindow(this.getAttribute('href'))"); +}</pre> + +<h3 id="Escaping_Functions">Escaping Functions</h3> + +<p>When the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as <code>uneval</code>, <a href="/en/JavaScript/Reference/Global_Objects/String/quote" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/quote"><code>String.quote</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/JSON/stringify" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/stringify"><code>JSON.stringify</code></a>, or <a href="/en/JavaScript/Reference/Global_Objects/Number" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number">Number</a>. Generating scripts in this matter is deprecated and <strong>should be avoided wherever possible</strong>, but is relatively safe and sometimes acceptable.</p> + +<pre class="brush: js">function createScript(href, otherStuff) { + var script = function (href, otherStuff) { + doStuffWith(href); + doOtherStuff(); + for (var someStuff in otherStuff) + doSomeMoreStuffWith(someStuff); + } + + return script.toSource() + "(" + [String.quote(href), uneval(otherStuff)] + ")"; +}</pre> + +<h2 id="Safely_Using_Remote_HTML">Safely Using Remote HTML</h2> + +<p>In the above cases, we're working with text content that needs to appear in generated DOM. There are cases, however, where we need to safely display formatted HTML sent by a remote server. Fortunately, there is a safe and simple way to do this. The {{ ifmethod("nsIScriptableUnescapeHTML","parseFragment") }} method will convert a string to a document fragment while removing any scripts or other unsafe content in the process.</p> + +<pre class="brush: js">function ParseHTML(doc, html) { + return Components.classes["@mozilla.org/feed-unescapehtml;1"] + .getService(Components.interfaces.nsIScriptableUnescapeHTML) + .parseFragment(html, false, null, doc.documentElement); +}</pre> + +<p>The returned fragment may be appended to any element in the given document.</p> + +<pre class="brush: js">document.body.appendChild(ParseHTML(document, xhr.responseText, xhr.channel.name);</pre> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/En/Displaying_web_content_in_an_extension_without_security_issues" title="En/Displaying_web_content_in_an_extension_without_security_issues">Displaying web content in an extension without security issues</a></li> + <li><a href="/en/How_to_create_a_DOM_tree" title="https://developer.mozilla.org/en/How_to_create_a_DOM_tree">How to create a DOM tree</a></li> + <li>{{ domxref("Node.textContent") }}</li> + <li>{{ domxref("Node.appendChild()") }}</li> + <li>{{ domxref("element.setAttribute()") }}</li> + <li><a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement()</a></li> + <li><a href="/en/DOM/document.createTextNode" title="en/DOM/document.createTextNode">document.createTextNode()</a></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Kris Maglione</li> + <li>Last Updated Date: 2011-08-08</li> +</ul> +</div> + +<p> </p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/documentación_de_mozilla/index.html b/files/es/mozilla/tech/xul/escuela_xul/documentación_de_mozilla/index.html new file mode 100644 index 0000000000..0928dec065 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/documentación_de_mozilla/index.html @@ -0,0 +1,72 @@ +--- +title: Documentación de Mozilla +slug: Mozilla/Tech/XUL/Escuela_XUL/Documentación_de_Mozilla +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Mozilla_Documentation_Roadmap +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Notificaciones_de_usuario_y_alertas", "Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla") }}</p> + +<h2 id="Mozilla_Documentation">Mozilla Documentation</h2> + +<p>Firefox extension development is still an immature discipline, with a developer base consisting mostly of hobbyists and just a few organized development groups. There's a great deal of free online documentation available on XUL and extension development, but finding it and turning it into useful information can be a daunting task. Knowing where to look is critical and non trivial. This tutorial was aimed at compiling all the right resources for extension development and putting them in the right context, but there's much more to learn, and knowing how to find it is part of what we felt was necessary to teach.</p> + +<p>Let's look into the resources that have helped us the most.</p> + +<h2 id="The_Mozilla_Developer_Center">The Mozilla Developer Center</h2> + +<p>This is the official and most extensive guide to everything related to Mozilla. MDC is where this tutorial is hosted, and where most of its links point to. It encompasses Firefox, other Mozilla products, Javascript, CSS, XUL, web and extension development guidelines, accessibility, usability, best practices... The list goes on. It's incredibly comprehensive, and its underlying Wiki technology makes it easy to expand and evolve with the help of the community.</p> + +<p>Having said that, there are a few problems with it. First of all, the in-site search is not reliable, so we recommend using a search engine like Google, with queries such as "MDC Javascript Code Modules" or "Javascript code modules site:developer.mozilla.org". Secondly, there are several important articles that are very lacking in information, like the <a href="/en/Preferences/Preferences_system" title="en/Preferences System">Preferences System</a> page. And finally, what we mentioned in our XPCOM section: almost no documentation on XPCOM components. The documentation on interfaces is very complete, but it isn't nearly as useful as the documentation that existed at <a class="external" href="http://xulplanet.com/">XULPlanet</a> and was later taken down. XULPlanet allowed you to navigate between interfaces and their related components, which makes locating components very easy. Hopefully this will be corrected in the future. In the meantime, you can still navigate XULPlanet using the <a class="external" href="http://www.archive.org/web/web.php" title="http://www.archive.org/web/web.php">Wayback Machine</a>.</p> + +<p>MDC should be your first stop when looking for documentation. If you find it lacking or missing some piece of information, please consider adding it once you've found it. Everyone looking for it later will thank you for it.</p> + +<h2 id="The_AMO_Developer_Hub">The AMO Developer Hub</h2> + +<p>The <a class="link-https" href="https://addons.mozilla.org/developers/" title="https://addons.mozilla.org/developers/">AMO Developer Hub</a> is a great guide for add-on developers. It includes links to tutorials and documentation, development tools, and most notably, the <a class="link-https" href="https://forums.addons.mozilla.org/" title="https://forums.addons.mozilla.org/">Mozilla Add-ons Forum</a>. This is a great place to ask questions and have them answered by experienced developers. It also includes discussions on add-on monetization, job postings and a long list of add-on ideas waiting to be developed.</p> + +<h2 id="The_Mozilla_Source">The Mozilla Source</h2> + +<p>Sometimes you need more than just a tutorial. There are various tricks that you can't learn anywhere, but you know that Firefox implements them in some way. In these cases you should dive into Mozilla's source code and try to locate the code you need. One way to do this is to look into your Firefox installation directory, maybe unpack a few JARs and see what's inside. But this is very awkward and limited. It would be much better to be able to search and navigate through the huge code base with some ease.</p> + +<p>Luckily, Mozilla provides exactly that in the <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">Mozilla Cross-Reference</a>. The main index in this page gives you options to look into the different product branches in development at Mozilla. Make sure you pick the one that matches your target versions.</p> + +<p>All of these provide advanced search capabilities, including regular expression search and file path search. You'll be able to navigate the full source tree, inspect the change history for all files, and link to specific code lines. It takes a little getting used to, specially learning how to choose the best search queries, but it's an invaluable resource of information.</p> + +<h2 id="Mozilla_Blogs">Mozilla Blogs</h2> + +<p>Several Mozilla community members maintain blogs that are updated frequently, often including information on API changes, bug fixes, useful tools and future release plans. Many of the tips and tricks included in this tutorial were discovered by reading these blogs.</p> + +<p>There are several useful feeds that you can follow using a feed reader, such as Thunderbird. Here are some important feeds you should consider following:</p> + +<ul> + <li><a class="external" href="http://planet.mozilla.org/">Planet Mozilla</a>. This is the ultimate source for everything related to Mozilla. It brings together the feeds of most Mozilla employees, as well as several other members of the Mozilla community. Feeds are added frequently, so the information available through it will only grow with time. It can be hard to follow due of the sheer mass of information coming out of it (dozens of posts per day), but you'll certainly be up to date with pretty much everything if you take the time to read at least part of it.</li> + <li>The <a class="external" href="/devnews/index.php/categories/about-mozilla" title="devnews/index.php/categories/about-mozilla">about:mozilla newsletter</a> is a weekly publication that includes the highlights of what is posted at Planet Mozilla. It is a good alternative if you feel Planet Mozilla is too much. You can also subscribe to receive it by email if you prefer that. Posts on about:mozilla also make it to Planet Mozilla.</li> + <li>The <a class="external" href="http://blog.mozilla.com/addons/" title="http://blog.mozilla.com/addons/">Mozilla Add-ons Blog</a>. This blog is maintained by the Add-ons Team at Mozilla, and it's a great way to stay up to date with AMO development and add-on review policies. This blog is also part of Planet Mozilla.</li> +</ul> + +<h2 id="IRC_and_newsgroups">IRC and newsgroups</h2> + +<p>Mozilla developers use their <a class="external" href="http://irc.mozilla.org/">IRC channels</a> heavily. There are several help and development channels where you can discuss problems and other topics in real time with the people that have the answers. You'll need an IRC client in order to do this, and the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/16?id=16">Chatzilla</a> extension works well for this purpose. Problems using IRC include: finding help when you have a big timezone difference with the United States, and no records of previously asked questions and their answers.</p> + +<p>Another somewhat obscure communication channel is the <a class="external" href="http://www.mozilla.org/community/developer-forums.html">Mozilla Newsgroups</a>. They are also very diverse and active, and there's a good chance you'll get your queries answered. Thunderbird also comes in handy for reading and posting to the newsgroups. Another advantage is that discussions are archived and searchable through Google Groups.</p> + +<h2 id="Other">Other</h2> + +<p>And finally, a couple resources you should also keep in mind:</p> + +<ul> + <li>Other extensions. There are thousands of extensions out there, and you may strike luck and find one that does exactly what you need. Be sure to look at the license the extension's code is released with before thinking about copying large sections of it. Also, remember to give credit when it's due.</li> + <li><a class="external" href="http://bugzilla.mozilla.org/">Mozilla's Bugzilla repository</a>. Pretty much every code change done in Firefox and Mozilla projects is documented in this huge tracking database. But this also means that finding exactly what you need can be time-consuming, and often fruitless. The advanced search is very useful in filtering results, but it is our experience that it's often better to be too general than too specific. Better to scan a list of hundreds of bugs than getting no results at all, right?</li> + <li>Anywhere else. Use your favorite search engine and patiently look for answers. It's better to take a long time finding an answer than taking even longer doing something that has already been done.</li> +</ul> + +<p>Good luck!</p> + +<p>{{ PreviousNext("Notificaciones_de_usuario_y_alertas", "Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensión/index.html b/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensión/index.html new file mode 100644 index 0000000000..9fdbda1f36 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensión/index.html @@ -0,0 +1,417 @@ +--- +title: Elementos esenciales de una extensión +slug: Mozilla/Tech/XUL/Escuela_XUL/Elementos_esenciales_de_una_extensión +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Introducción_a_las_extensiones_de_Firefox", "Escuela_XUL/Montando_un_ambiente_de_desarrollo") }}</p> + +<h2 id="El_archivo_install.rdf">El archivo install.rdf</h2> + +<p>En la última sección miramos a los contenidos de la extensión Hola Mundo. Ahora, miraremos sus archivos y su código, comenzando con el archivo <em>install.rdf</em>. Puedes abrirlo con cualquier editor de texto.</p> + +<p>El archivo tiene un formato distinto del XML tradicional, llamado <a class="external" href="http://en.wikipedia.org/wiki/Resource_Description_Framework">RDF</a>. RDF solía ser el mecanismo central de almacenamiento para Firefox, pero está siendo reemplazado por un sistema de bases de datos más sencillo. Hablaremos de ambos más adelante en este tutorial.</p> + +<p>Ahora, miremos a las partes importantes del archivo.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:id>holamundo@xulschool.com</em:id></pre> +</div> +</div> + +<p>Este es el identificador único para la extensión. Firefox necesita esto para distinguir tu extensión de otras extensiones, así que se requiere que tengas una ID única.</p> + +<p>Hay dos estándares aceptados para las ids de las extensiones. Una es el formato email presente en el ejemplo de Hola Mundo, que sería algo como <em><nombreproyecto-name>@<tudominio></em>. El otro estándar es usar una cadena de texto <a class="external" href="http://en.wikipedia.org/wiki/Uuid">UUID</a>, la cuál es extremadamente única, y es muy improbable que sea duplicada. Los sistemas basados en Unix tienen una herramienta desde la línea de comandos llamada <em>uuidgen</em> que genera UUIDs. Estas también se pueden crear utilizando herramientas específicas para todos los sistemas. Los paréntesis que cierran son simplemente notación, y son una práctica común. Siempre y cuando tu id sea única, está bien usar cualquiera de las formas.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:name>XUL School Hello Worldem:name> +<em:description>Welcome to XUL School!</em:description> +<em:version>0.1</em:version> +<em:creator>Appcoast</em:creator> +<span class="code-comment"><em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL></span></pre> +</div> +</div> + +<p>Esta será la información que será mostrada antes y después de la que la extensión sea instalada, la que puedes ver en la ventana de Extensiones. La URL de la página principal puede ser visitada haciendo clic derecho en la extensión y eligiendo Visitar página principal. Hay muchas otras etiquetas que pueden ser añadidas, para contribuidores y traductores. La <a href="/en/Install_Manifests" title="en/Install Manifests">especificación completa</a> del archivo install.rdf tiene todos los detalles.</p> + +<p>Ya que las extensiones pueden ser traducidas en múltiples idiomas, suele ser necesario traducir la descripción de la extensión, o incluso su nombre. A partir de Firefox 3 y superior, una descripción y nombres con localización específica se puede añadir de la siguiente manera:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:localized> + <Description> + <em:locale>es-ES</em:locale> + <em:name>XUL School Hola Mundo</em:name> + <em:description>¡Bienvenido a XUL School!</em:description> + </Description> +</em:localized></pre> +</div> +</div> + +<p>La cadena de texto <em>es-ES</em> indica que esta es la localización para española (es) para España (ES). Puedes añadir tantos <em><em:localized></em> como necesites Para Firefox 2, localizar este archivo es un <a href="/en/Localizing_extension_descriptions#Localizing_before_Gecko_1.9" title="en/Localizing extension descriptions#Localizing before Gecko 1.9">poco más complicado</a>. Hablaremos de la localizacion más adelante en esta sección.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:type>2</em:type></pre> +</div> +</div> + +<p>Esto especifica que la extensión se instala como una extensión (y no como un tema, por ejemplo). Puedes leer los distintos tipos disponibles en la <a href="/en/Install_Manifests#type" title="en/Install Manifests#type">especificación de install.rdf</a>.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:targetApplication> + <Description> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> + <em:minVersion>3.0</em:minVersion> + <em:maxVersion>6.0a1</em:maxVersion> + </Description> +</em:targetApplication></pre> +</div> +</div> + +<p>Este nodo especifica a qué versiones apunta la extensión, especialmente Firefox, desde la versión 3.0 hasta las versiones experimentales de Firefox 6. La UUID es la ID única de Firefox. Otras aplicaciones y aplicaciones basadas en Mozilla como Thunderbird o Seamonkey tienen las suyas propias. Puedes tener una extensión que funcione en múltiples aplicaciones y versiones. Por ejemplo, si creas una extensión para Firefox, normalmente se debería hacer el pequeño esfuerzo para portarla a Flock o SeaMonkey, los cuáles tienen funciones y UI similares.</p> + +<p>La versión mínima y máxima especifica el rango en el cuál la extensión puede ser instalada. Aquí hay más sobre el <a href="/en/Toolkit_version_format" title="en/Toolkit version format">formato de la versión</a>. Si la aplicación o el rango de versiones no coinciden, no podrás instalar la aplicación, o la aplicación se instalará desactivada. Los usuarios pueden desactivar la comprobación de versiones a través de las preferencias o a través de extensiones como <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/15003" title="https://addons.mozilla.org/en-US/firefox/addon/15003">Add-on Compatibility Reporter</a>.</p> + +<p>Esta es toda la información que Firefox y otras aplicaciones de Mozilla necesitan para instalar una extensión. Cualquier error o información omitida causará un error en el proceso de instalación, o la extensión se instalará como desactivada.</p> + +<h2 id="El_archivo_chrome.manifest">El archivo chrome.manifest</h2> + +<blockquote> +<p>Chrome es el conjunto de elementos gráficos para el usuario de la ventana de la aplicación que están fuera del contenido de la ventana. Barras de herramientas, de menús, de progreso y de título son ejemplos de elementos que son parte de chrome.</p> +</blockquote> + +<p>Extraído de <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>.</p> + +<p>En otras palabras, el chrome es todo lo que ves en Firefox. Todas las ventanas de Firefox pueden verse en dos partes: (1) la chrome y (2) la posible área de contenido, como aquella que muestra las páginas web en una pestaña de Firefox. Las ventanas como el administrador de extensiones o la ventana de descargas son puro chrome. La mayoría del código reside en la carpeta chrome, como en el ejemplo de Hola Mundo.</p> + +<p>Los archivos chrome están empacados en un archivo JAR, normalmente nombrados tras la extensión. No es necesario empacar los archivos chrome, pero es una práctica común y recomendada por razones de rendimiento.</p> + +<p> </p> + +<p>Como hemos visto en la estructura de directorios de la extensión desempacada, la chrome está compuesta de 3 secciones: content, locale y skin. Estas 3 son necesarias para la mayoría de las extensiones. Si abrimos el archivo <em>chrome.manifest</em> (de nuevo, cualquier editor de texto servirá), veremos que las 3 secciones se mencionan:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">content xulschoolhello jar:chrome/xulschoolhello.jar!/content/ +skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/ +locale xulschoolhello en-US jar:chrome/xulschoolhello.jar!/locale/en-US/</pre> +</div> +</div> + +<p>El archivo <em>chrome.manifest</em> le dice a Firefox donde mirar para los archivos chrome. El texto contiene varios espacios para que parezca una tabla, pero no es necesario. El parseador ignorará los espacios repetidos.</p> + +<p>La pimera línea le dice a Firefox que está siendo declarado (content, skin, locale, u otros que veremos más adelante). La segunda es el nombre del paquete, el cuál explicaremos en breve. Los paquetes skin y locale tienen un tercer valor para especificar que localización o tema están extendiendo. Puede haber múltiples temas y entradas de localización en relación a distintos temas y localizaciones. El caso más común es tener una entrada skin para el skin global, <em>classic/1.0</em>, y múltiples entradas locale, una para cada traducción. Finalmente, la localización es especificada.<br> + Nótese del esquema <em>jar</em><em>;</em> le dice a Firefox que mire dentro del archivo JAR y lea los archivos del camino correcto. Si quieres tener una extensión con un directorio chrome desempacado, sólo necesitas cambiar los lugares a algo como <em>chrome/content</em>/.</p> + +<p> </p> + +<p>Hay algunas opciones adicionales que pueden ser incluidas en las entradas del archivo <em>chrome.manifest</em>. Están documentadas en la página de <a href="/en/Chrome_Registration" title="en/Chrome Registration">Chrome Registration</a>. Notablemente, podemos tener distintas entradas que sean específicas para cada SO. Esto es importante, especialmente en Firefox 3 y versiones superiores, donde la apariencia del navegador es muy diferente para cada sistema operativo. Si nuestra extensión necesitase parecer diferente en los sistemas mayoritarios, podríamos cambiar el archivo de manifiesto para que incluyese esto:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">content xulschoolhello jar:chrome/xulschoolhello.jar!/content/ +skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/ +skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/ os=Darwin +skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/ os=WinNT +locale xulschoolhello en-US jar:chrome/xulschoolhello.jar!/locale/en-US/</pre> +</div> +</div> + +<p>De esta manera podemos tener temas distintos para Windows, Mac OS X, y Linux (además de otros sistemas similares a unix), cada uno definido en un directorio separado. Ya que la mayoría de los sistemas están basados en Unix, el tema "unix" es el utilizado por defecto, sin banderas.</p> + +<h2 id="El_Chrome">El Chrome</h2> + +<p>Como se ha mencionado antes, el chrome se compone de 3 secciones: contenido, localizaciones y temas. El contenido es la sección mas importante, ya que tiene la interfaz de usuario (XUL) y archivos de scripts (JS). La sección de temas contiene los archivos que definen la mayoría del aspecto y la sensación de la UI (incluyendo CSS e imágenes, como las páginas web). Finalmente, la sección de localización incluye todos los textos utilizados en la extensión, en DTD y archivos de propiedades. Esta división permite a otros desarrolladores crear temas que reemplacen pieles, y traductores para crear localizaciones en distintos idiomas, todo esto sin tener que cambiar tu extensión o tu código. Esto le da a las extensiones de Firefox gran flexibilidad.</p> + +<p>Se accede a los archivos chrome a través del protocolo chrome. Las URIs chrome se definen así:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">chrome:<span class="code-comment">//packagename/section/path/to/file</span></pre> +</div> +</div> + +<p>Así que, por ejemplo, si quiero acceder al archivo <em>b</em><em>rowserOverlay.xul</em> en la extensión, la URI chrome sería <em><a class="external" rel="freelink">chrome://xulschoolhello/content/browserOverlay.xul</a></em>. Si tienes demasiados archivos en el contenido y quieres organizarlos en subdirectorios, no necesitas cambiar nada en <em>chrome.manifest</em>, todo lo que necesitas es añadir el camino correcto tras <em>content</em> en la URI. Los temas y localizaciones funcionan de la misma manera, y no necesitas especificar sus nombre. Así que, para acceder al archivo DTD en la extensión Hola Mundo, el camino chrome es <em><a class="external" rel="freelink">chrome://xulschoolhello/locale/browserOverlay.dtd</a></em>. Firefox sabe qué localización buscar.</p> + +<p>Aquí tenemos un experimento interesante. Abre una pestaña nueva en Firefox, teclea<em> <a class="external" rel="freelink">chrome://mozapps/content/downloads/downloads.xul</a></em> en la barra de notificaciones y pulsa ENTRAR. ¿Sorprendido? ¡Acabas de abrir la ventana de Descargas en tu pestaña de Firefox! Puedes acceder a cualquier archivo chrome simplemente tecleando su URI en la barra de direcciones. Esto puede ser útil si quieres inspeccionar archivos de script que son parte de Firefox, u otras extensiones, por ti sólo. La mayoría de estos archivos se abren como archivos de texto, a excepción de los archivos XUL, que se ejecutan y muestran como normalmente los verías en una ventana.</p> + +<h3 id="Contenido">Contenido</h3> + +<p>Hay dos archivos de contenido en el directorio de contenido. Miremos el primer archivo XUL.</p> + +<p>Los archivos <a href="/en/XUL" title="en/XUL">XUL</a> son archivos XML que definen la interfaz gráfica de usuario de los elementos en Firefox y las extensiones de Firefox. XUL fue inspirado por HTML, así que verás bastantes similitudes entre ambos. De todos modos, XUL es también una mejora sobre HTML, habiendo aprendido de los errores cometidos durante la evolución de HTML. XUL te permite crear interfaces más ricas e interactivas que las que puedas crear con HTML, o al menos XUL lo hace más fácil.</p> + +<p>Los archivos XUL normalmente definen una de dos cosas: ventanas o superposiciones. El archivo que has abierto antes, <em>downloads.xul</em>, tiene el código que define la ventana de Descargas. El archivo XUL incluido en la extensión Hola Mundo tiene una superposición. Una superposición extiende una ventana ya existente, añadiendo nuevos elementos a esta o reemplazando algunos de los elementos que tiene. La línea que nos hemos saltado en el archivo <em>chrome.manifest</em> declara que este archivo XUL es una superposición para la ventana principal del navegador.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">overlay chrome:<span class="code-comment">//browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul</span></pre> +</div> +</div> + +<p>Con esta línea, Firefox sabe que necesita tomar el contenido de <em>browserOverlay.xul</em> y superponerlo sobre la ventana principal del navegador, <em>browser.xul</em>. Puedes declarar overlays para cualquier ventana o diálogo en Firefox, pero superponer la ventana principal del navegador es el caso más común.</p> + +<p>Ahora echemos un vistazo a los contenidos de nuestro archivo XUL. Nos saltaremos las primeras líneas porque se refieren al tema y la localización, las cuales cubriremos más tarde.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><overlay id="xulschoolhello-browser-overlay" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></pre> +</div> +</div> + +<p>El elemento raíz en el archivo es un <em>overlay</em>. Otros documentos XUL usan la etiqueta <em>window</em> o <em>dialog</em>. El elemento tiene una id única, la cuál deberías usar en la mayoría de los elementos en tu XUL. El segundo atributo es el espaciado de nombres, lo cuál es algo que siempre deberías definir en tu elemento raíz. Esto dice que este nodo y todos sus nodos hijos son XUL. Sólo necesitas cambiar las declaraciones del espaciado de nombres cuando combines distintos tipos de contenidos, como XUL con HTML o SVG.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Es probable que te hayas dado cuenta del nombre que hemos usado en distintos lugares, así como la id <em>xulschoolhello-browser-overlay. Este es el espaciado de nombres estándar que utilizamos para evitar conflictos con Firefox y otras extensiones, así como hacer algunas tareas de desarrollo más sencillas. Usamos el mismo espaciado de nombres en todas las ids y clases de estilo de los elementos de superposición porque serán mezclados con otros elementos en la ventana principal del navegador. Si usásemos ids genéricas como container o input, estas </em>entrarían en conflicto con las ids usadas dentro de Firefox, o las ids de otras extensiones de superposición. Usando espaciado de nombres minimiza los problemas de compatibilidad con otras extensiones. Usamos camel casing para los nombres de archivos, y todo en minúsculas con barras para las ids de elementos y los nombres de clases de los estilos CSS.</div> +</div> +</div> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><script type=<span class="code-quote">"application/x-javascript"</span> + src=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/content/browserOverlay.js"</span> /></span></pre> +</div> +</div> + +<p>Al igual que en HTML, esto incluye un script en JavaScript. Puedes tener tantos elementos <em>scripts</em> en un archivo XUL como necesites. Miraremos su código más tarde.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">También es posible que te hayas dado cuenta en el formato de nuestro código, y preguntarte sobre las reglas que seguimos. Nuestra regla general es que la longitud de la línea no sea superior a 80 caracteres. Esto puede parecer muy restrictivo, sobre todo en los archivos XML, pero este número ha sido elegido para permitir a casi todos los editores de texto que manejen estos archivos de manera sencilla. Incluso un editor de textos antiguo desde la línea de comandos funciona bien que cortan sus líneas antes de los 80 caracteres. La tabulación es muy directa: 2 espacios en blanco para indentar. Nunca usamos caracteres TAB, a excepción de los Makefiles, los cuáles cubriremos más adelante. La mayoría de nuestros estándares de código se basan en los estándares de Mozilla u otros conocidos.</div> +</div> +</div> + +<p>Nos saltaremos algo de código qie se cubrirá en la sección de localización, moviéndonos así a la parte importante del contenido:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><menubar id="main-menubar"> + <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu"> + <menupopup> + <menuitem id="xulschoolhello-hello-menu-item" + label="&xulschoolhello.hello.label;" + accesskey="&xulschoolhello.helloItem.accesskey;" + oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> + </menupopup> + </menu> +</menubar></pre> +</div> +</div> + +<p>Este es el código que añade el menú de Hola Mundo a la ventana del navegador. Para escribir este código, necesitamos algo de conocimiento sobre el código XUL en <em>browser.xul</em>. Necesitábamos saber que la id del menú principal es <em>main-menubar</em>. Estamos añadiendo un menú nuestro propio, y diciéndole a Firefox que lo añada a la barra de menú principal, justo después del menú de ayuda. Ese es el propósito del atributo:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">insertafter=<span class="code-quote">"helpMenu"</span></pre> +</div> +</div> + +<p><em>helpMenu</em> es la id del elemento del menú que corresponde al menú de Ayuda en la ventana principal del navegador. Más adelante veremos como podemos encontrar cosas como las ids de los elementos del navegador, pero por ahora miraremos a los elementos que componen el menú de Hola Mundo.</p> + +<p>El elemento <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a> representa la barra de menús que normalmente ves arriba del todo de una ventana de aplicación. La ventana principal de Firefox tiene una, pero pocas otras ventanas tienen. También es raro para ventanas adicionales de una extensión tengan sus propias barras de menú.</p> + +<p>Hemos añadido el menú de Hola Mundo justo en la "raíz" de la barra de menús así que sería muy fácil para ti localizarlo, pero no es una práctica recomendada. Imaginemos si todas las extensiones añadieran menús a la barra de menús de arriba; teniendo unas pocas extensiones haría que el menú pareciese como un salpicadero de un avión, lleno de opciones. El lugar recomendado para los menús de extensiones es bajo el menú de <em>Herramientas</em>, así que el código se parecería a este:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><menupopup id=<span class="code-quote">"menu_ToolsPopup"</span>> + <menu id=<span class="code-quote">"xulschoolhello-hello-menu"</span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloMenu.accesskey;"</span> + insertafter=<span class="code-quote">"javascriptConsole,devToolsSeparator"</span>> + <menupopup> + <menuitem id=<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">-hello-menu-item" + </span> label=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello.label;"</span> + accesskey=<span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.helloItem.accesskey;"</span> + oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span> /> + </menupopup> + </menu> +</menupopup></pre> +</div> +</div> + +<p>Estamos superponiendo un menú que está más adentro en nuestro árbol XUL, pero no parece importar porque todo lo que necesitamos es la id del elemento que queremos superponer. En estado es el elemento <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a> que está dentro del elemento del <a href="/en/XUL/menu" title="en/XUL/menu">menú</a> de Herramientas. El atributo <em>insertafter</em> le dice a Firefox que añada el menú debajo del objeto de la Consola de Errores (formalmente conocida como la Consola de JavaScript) en el menú de Herramientas, como se recomienda en la <a href="/en/Extensions/Extension_etiquette" title="en/Extension Etiquette"><span class="external">Extension Etiquette page</span></a>. Discutiremos más de los menús más adelante en este tutorial. Por ahora vamos a centrarnos en la siguiente línea:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">oncommand=<span class="code-quote">"XULSchoolChrome.BrowserOverlay.sayHello(event);"</span></pre> +</div> +</div> + +<p>This attribute defines an event handler. The <em>command</em> event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the <em>script</em> tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named <em>event</em>, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.</p> + +<p>Now let's look at the JavaScript file and see what's going on when the event is fired.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * XULSchoolChrome namespace. + */ +if ("undefined" == typeof(XULSchoolChrome)) { + var XULSchoolChrome = {}; +};</pre> +</div> +</div> + +<p>The <em>XULSchoolChrome</em> namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called <em>MenuHandler</em> or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: <em>XULSchoolChrome</em>. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.</p> + +<p>You can read more about the <a href="/en/JavaScript/Reference/Operators/Special/typeof" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/typeof Operator"><span class="external">typeof operator</span></a>. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as <em>{}</em> is the equivalent of initializing it to <em>new Object()</em>.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension. + */ +XULSchoolChrome.BrowserOverlay = {</pre> +</div> +</div> + +<p>Finally, <em>BrowserOverlay</em> is our object. Naming and referencing objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">We use <a class="external" href="http://java.sun.com/j2se/javadoc/writingdoccomments/index.html">Javadoc</a> style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.</div> +</div> +</div> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">sayHello : function(aEvent) { + let stringBundle = document.getElementById("xulschoolhello-string-bundle"); + let message = stringBundle.getString("xulschoolhello.greeting.label"); + + window.alert(message); +}</pre> +</div> +</div> + +<p>And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the <a href="/en/XUL/stringbundle" title="en/XUL/stringBundle">stringbundle</a> element defined in the overlay. The variable is declared using <em>let,</em> which is similar to <em>var</em> but with more restricted scope. Here you can read more about <a href="/en/JavaScript/New_in_JavaScript/1.7#Block_scope_with_let" title="en/New in JavaScript 1.7#Block scope with let"><span class="external">let declarations</span></a>. It's worth noting that this is a relatively new addition to JavaScript in Firefox and you should use <em>var</em> if you're creating an extension compatible with very old versions.</p> + +<p>Just like in regular JS, we can use the <a href="/en/DOM" title="en/DOM"><span class="external">DOM</span></a> (Document Object Model) in order to manipulate the XUL document. First we get a reference of the <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle"><span class="external">stringbundle element</span></a> in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the <a href="/en/XUL/stringbundle#m-getString" title="en/XUL/stringbundle#m-getString">getString method</a> of the bundle element and get the localized message to be displayed. We then call the <a href="/en/DOM/window.alert" title="en/DOM/window.alert">window.alert</a> function with the message, just like we would do in an HTML document.</p> + +<h3 id="Locale">Locale</h3> + +<p>There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.</p> + +<p>Looking back at the menu code, you probably noticed some attributes such as this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">label=<span class="code-quote">"&xulschoolhello.hello.label;"</span> accesskey=<span class="code-quote">"&xulschoolhello.helloItem.accesskey;"</span></pre> +</div> +</div> + +<p>These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, <em>browserOverlay.dtd</em>. The DTD file was included in the XUL file with the following code:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" ></pre> +</div> +</div> + +<p>And in the DTD file you can see the association between keys and localized strings:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><!ENTITY xulschoolhello.hello.label <span class="code-quote">"Hello World!"</span>> +<!ENTITY xulschoolhello.helloMenu.accesskey <span class="code-quote">"l"</span>> +<!ENTITY xulschoolhello.helloItem.accesskey <span class="code-quote">"H"</span>></pre> +</div> +</div> + +<p>Notice that on the XUL file you enclose the string key with <em>&</em> and <em>;</em> while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get it right.</p> + +<p>Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:</p> + +<div> +<p><img alt="" class="internal" src="../../../../@api/deki/files/4226/=accesskeys.png" style="height: 58px; width: 167px;"></p> +</div> + +<p>Most user interface controls have the <em>accesskey</em> attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".</p> + +<p>DTD strings are resolved and set when the document is being loaded. If you request the <em>label</em> attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let helloItem = document.getElementById(<span class="code-quote">"xulschoolhello-hello-menu-item"</span>); + +<span class="code-comment">// The alert will say <span class="code-quote">"Hello World!"</span> +</span>alert(helloItem.getAttribute(<span class="code-quote">"label"</span>)); +<span class="code-comment">// Wrong +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"&</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label;"</span>); +<span class="code-comment">// Better +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, <span class="code-quote">"Alternate message"</span>); +<span class="code-comment">// Right! +</span>helloItem.setAttribute(<span class="code-quote">"label"</span>, someStringBundle.getString(<span class="code-quote">"</span><span class="code-quote">xulschoolhello</span><span class="code-quote">.hello2.label"</span>));</pre> +</div> +</div> + +<p>This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><stringbundleset id="stringbundleset"> + <stringbundle id="xulschoolhello-string-bundle" + src="chrome://xulschoolhello/locale/browserOverlay.properties" /> +</stringbundleset></pre> +</div> +</div> + +<p>The <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a> element is just a container for <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a> elements. There should only be one per document, which is the reason why we overlay the <em>stringbundleset</em> that is in <em>browser.xul</em>, hence the very generic id. We don't include the <em>insertbefore</em> or <em>insertafter</em> attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.</p> + +<p>All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">xulshoolhello.greeting.label = Hi! How are you?</pre> +</div> +</div> + +<p>The whitespace around the equals sign is ignored. Just like in <em>install.rdf</em>, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.</p> + +<p>You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">xulshoolhello.search.label = Found %S words matching the search query!</pre> +</div> +</div> + +<p>Then you use <a href="/en/XUL/stringbundle#m-getFormattedString" title="en/XUL/stringbundle#m-getFormattedString">getFormattedString</a> instead of <em>getString</em> in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the <a href="/en/XUL_Tutorial/Property_Files#Text_Formatting" title="en/XUL Tutorial/Property Files#Text Formatting">Text Formatting section</a> of the XUL Tutorial. Also have a look at the <a href="/en/Localization_and_Plurals" title="en/Localization and Plurals">Plurals and Localization</a> article, that covers a new localization feature in Firefox 3 that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.</p> + +<h3 id="Skin">Skin</h3> + +<p>Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><?xml-stylesheet type=<span class="code-quote">"text/css"</span> href=<span class="code-quote">"chrome:<span class="code-comment">//global/skin/"</span> ?> +</span><?xml-stylesheet type=<span class="code-quote">"text/css"</span> + href=<span class="code-quote">"chrome:<span class="code-comment">//xulschoolhello/skin/browserOverlay.css"</span> ?></span></pre> +</div> +</div> + +<p>The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.</p> + +<p>This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.</p> + +<h2 id="Exercise">Exercise</h2> + +<p>Change the welcome message that is displayed in the alert window and move the Hello World menu to the Tools Menu, where it belongs. Repackage the XPI and re-install it. You can just drag the XPI file to the browser and it will be installed locally. Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders. Note that on Firefox 4 and above, on Windows and some Linux distributions, the Tools menu is hidden by default. It can be enabled using the Alt key.</p> + +<p>Once you're done, you can look at this reference solution: <a href="/@api/deki/files/5141/=xulschoolhello2.xpi" title="https://developer.mozilla.org/@api/deki/files/5141/=xulschoolhello2.xpi">Hello World 2</a>.</p> + +<p>{{ PreviousNext("Escuela_XUL/Introducción_a_las_extensiones_de_Firefox", "Escuela_XUL/Montando_un_ambiente_de_desarrollo") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html b/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html new file mode 100644 index 0000000000..bc80d6b948 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html @@ -0,0 +1,231 @@ +--- +title: Enlazando contenido remoto +slug: Mozilla/Tech/XUL/Escuela_XUL/Enlazando_contenido_remoto +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Connecting_to_Remote_Content +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Interceptando_cargas_de_página", "Escuela_XUL/Personalizar_elementos_XUL_con_XBL") }}</p> + +<h2 id="Using_XMLHttpRequest">Using XMLHttpRequest</h2> + +<p><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a> is an API for transferring XML between a local script and a remote server via HTTP. It is an integral part of the modern web, and all major browsers support it. Besides XML, it can be used to retrieve data in other formats, for example JSON, HTML and plain text. In this section we'll look into the XML and JSON communication mechanisms.</p> + +<pre class="brush: js">let url = "<a class="external" href="http://www.example.com/" rel="freelink">http://www.example.com/</a>"; +let request = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] + .createInstance(Components.interfaces.nsIXMLHttpRequest); +request.onload = function(aEvent) { + window.alert("Response Text: " + aEvent.target.responseText); +}; +request.onerror = function(aEvent) { + window.alert("Error Status: " + aEvent.target.status); +}; +request.open("GET", url, true); +request.send(null); +</pre> + +<p>In this example we demonstrate how to make a XMLHttpRequest call in asynchronous mode. You can see that an instance of the XMLHttpRequest class is created and it holds all functionality for making a request. We create this instance using XPCOM instead of the usual way (<code>new XMLHttpRequest()</code>) because this way works both in chrome and non-chrome code.</p> + +<p>Following initialization, <em>onload</em> and <em>onerror</em> handlers are registered to a callback function to handle the response returned from the remote server. In both cases <em>aEvent.target</em> is an {{ interface("nsIXMLHttpRequest") }}. In the <em>onload</em> callback function, the <em>responseText</em> parameter contains the server response as text.</p> + +<p>If the response is an XML document, the <em>responseXML</em> property will hold an XMLDocument object that can be manipulated using DOM methods. Sometimes the server doesn't specify an XML Content-Type header, which is necessary for the XML parsing to happen automatically. You can use <em>overrideMimeType</em> to force the response to be parsed as XML.</p> + +<pre class="brush: js">request.overrideMimeType("text/xml"); // do this before sending the request! +</pre> + +<p>The <em>open</em> method takes two required parameters: the HTTP request method and the URL to send the request. The HTTP request method can be "GET", "POST" or "PUT". Sending a POST request requires you to set the content type of the request and to pass the post data to the send() method as below.</p> + +<pre class="brush: js">request.open("POST", url, true); +request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); +request.send("data=hello&version=2"); +</pre> + +<p>The third parameter for the <em>open</em> method specifies whether the request should be handled asynchronously or not. In asynchronous mode code execution continues immediately after the <em>send</em> call. In synchronous mode the code and user interface are blocked while waiting for a response to come back.</p> + +<div class="note"><strong>Note:</strong> Requests can take a long time to process and you don't want users to be stuck waiting while a request is obtained and processed. Therefore, <strong>it is very important that XMLHttpRequest calls are always done asynchronously</strong>.</div> + +<p>Now let's look at the most common types of content you can use to communicate with remote servers.</p> + +<h2 id="JSON_content">JSON content</h2> + +<p><a href="/en/JSON" title="en/JSON">JSON</a> is a very lightweight and simple data representation format, similar to the object representation used in JavaScript. Unlike JavaScript, the JSON format doesn't allow any kind of code that can be run, only data.</p> + +<p>JSON used to be risky in terms of security because the favored way of parsing it was to use the JavaScript <a href="/en/eval" title="en/eval">eval</a> function. Since <em>eval</em> executes any code contained in the string, workarounds had to be devised in order to close security holes. Luckily, Firefox now provides a few alternatives for extension developers. The <a href="/en/JSON" title="en/JSON">JSON</a> page explains in detail how to parse JSON data in different versions of Firefox and other applications.</p> + +<p>Assume we need to parse the following data:</p> + +<pre class="brush: js">{"shops": [{"name": "Apple", "code": "A001"}, {"name": "Orange"}], "total": 100} +</pre> + +<p>When the <em>onload</em> callback function is called, the response text is converted into a JS object using the <em>parse</em> method. You can then use this object like any other JavaScript objects in your code.</p> + +<pre class="brush: js">request.onload = function(aEvent) { + let text = aEvent.target.responseText; + let jsObject = JSON.parse(text); + + window.alert(jsObject.shops[1].name); // => "Orange" + window.alert(jsObject.total); // => 2; +}; +</pre> + +<p>The JavaScript object can also be serialized back with the <em>stringify</em> method.</p> + +<pre class="code-javascript">let string = JSON.stringify(jsObject); +</pre> + +<h2 id="XML_content">XML content</h2> + +<p>XML is possibly the most popular data interchange format. Let's assume that the XML returned from remote server is this:</p> + +<pre class="code-xml"><span class="code-tag"><?xml version=<span class="code-quote">"1.0"</span>?></span> +<span class="code-tag"><data></span> + <span class="code-tag"><shops></span> + <span class="code-tag"><shop></span> + <span class="code-tag"><name></span>Apple<span class="code-tag"></name></span> + <span class="code-tag"><code></span>A001<span class="code-tag"></code></span> + <span class="code-tag"></shop></span> + <span class="code-tag"><shop></span> + <span class="code-tag"><name></span>Orange<span class="code-tag"></name></span> + <span class="code-tag"></shop></span> + <span class="code-tag"></shops></span> + <span class="code-tag"><total></span>2<span class="code-tag"></total></span> +<span class="code-tag"></data></span> +</pre> + +<p>When a valid XML response comes back from the remote server, the XML document object can be manipulated using different DOM methods, to display the data in the UI or store it into a local datasource.</p> + +<pre class="brush: js">request.onload = function(aEvent) { + let responseXML = aEvent.target.responseXML; + let rootElement = responseXML.documentElement; + + if (rootElement && "parseerror" != rootElement.tagName) { + let shopElements = rootElement.getElementsByTagName("shop"); + let totalElement = rootElement.getElementsByTagName("total")[0]; + + window.alert(shopElements[1].getElementsByTagName("name")[0].firstChild.nodeValue); // => Orange + window.alert(totalElement.firstChild.nodeValue); // => 2 + } +}; +</pre> + +<p>Using DOM functions is good for simple XML documents, but DOM manipulation code can become too complicated if the documents are more complex. There are a couple of tools you can use to process these documents more efficiently:</p> + +<h3 id="Using_XPath">Using XPath</h3> + +<blockquote> +<p>XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML document.</p> +</blockquote> + +<p>Taken from the <a href="/en/XPath" title="en/XPath">XPath page</a>.</p> + +<p>You can use XPath to quickly access specific nodes in an XML or HTML document with a simple query mechanism. XPath can also be used to extract information from web pages once they load, along with the page load interception techniques discussed previously.</p> + +<p>XPath is very useful for cases when you're receiving large and complex XML files, and you only need some of the data contained in them. Using XPath to parse a complete XML document is probably not a good idea performance-wise.</p> + +<h3 id="Using_XSLT">Using XSLT</h3> + +<p><a href="/en/XSLT" title="en/XSLT">XSLT</a> (eXtensible Stylesheet Language Transformations) is another tool used to manipulate XML documents and transform them into other forms of text output, such as HTML, XUL, and so on.</p> + +<p>We can not cover all transformations to various output formats, so we'll just look into converting an XML document to XUL.</p> + +<p>First you need to create an XSLT stylesheet that acts as a template. This template will transform the XML you receive (in our case, the example XML document above) and convert it into XUL. The <a class="external" href="http://www.w3schools.com/xsl/">XSLT tutorial</a> contains details for building these templates.</p> + +<pre class="code-xml"><span class="code-tag"><?xml version=<span class="code-quote">"1.0"</span> encoding=<span class="code-quote">"utf-8"</span>?></span> +<<span class="code-keyword">xsl:stylesheet</span> version=<span class="code-quote">"1.0"</span> + <span class="code-keyword">xmlns:xsl</span>=<span class="code-quote">"http://www.w3.org/1999/XSL/Transform"</span> + <span class="code-keyword">xmlns:xul</span>=<span class="code-quote">"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"</span>> + <span class="code-tag"><<span class="code-keyword">xsl:template</span> match=<span class="code-quote">"/data"</span>></span> + <span class="code-tag"><xul:vbox></span> + <span class="code-tag"><<span class="code-keyword">xsl:for-each</span> select=<span class="code-quote">"shops/name"</span>></span> + <span class="code-tag"><xul:hbox></span> + <span class="code-tag"><xul:label value=<span class="code-quote">"Name:"</span> /></span> + <span class="code-tag"><xul:label></span> + <span class="code-tag"><<span class="code-keyword">xsl:value-of</span> select=<span class="code-quote">"."</span> /></span> + <span class="code-tag"></xul:label></span> + <span class="code-tag"></xul:hbox></span> + <span class="code-tag"></<span class="code-keyword">xsl:for-each</span>></span> + <span class="code-tag"><xul:hbox></span> + <span class="code-tag"><xul:label value=<span class="code-quote">"Total:"</span> /></span> + <span class="code-tag"><xul:label></span> + <span class="code-tag"><<span class="code-keyword">xsl:value-of</span> select=<span class="code-quote">"total"</span> /></span> + <span class="code-tag"></xul:label></span> + <span class="code-tag"></xul:hbox></span> + <span class="code-tag"></xul:vbox></span> + <span class="code-tag"></<span class="code-keyword">xsl:template</span>></span> +<span class="code-tag"></<span class="code-keyword">xsl:stylesheet</span>></span> +</pre> + +<p>Next you need to read the XSLT stylesheet as a file stream and parse it into a document object. After that, the XSLT stylesheet can be imported into an XSLT processor as shown below. Now, the processor is ready to perform the transformation.</p> + +<pre class="brush: js">let domParser = Components.classes["@mozilla.org/xmlextras/domparser;1"] + .createInstance(Components.interfaces.nsIDOMParser); +let fileStream = Components.classes["@mozilla.org/network/file-input-stream;1"] + .createInstance(Components.interfaces.nsIFileInputStream); +let xsltProcessor = Components.classes["@mozilla.org/document-transformer;1?type=xslt"] + .createInstance(Components.interfaces.nsIXSLTProcessor); +let xslDocument; + +fileStream.init(someXSLFile, -1, 0x01, 0444); // read only + +// parse from the XSLT stylesheet file stream +xslDocument = domParser.parseFromStream( + fileStream, null, fileStream.available(), "text/xml"); + +// import the XSLT stylesheet to the XSLT processor +xsltProcessor.importStylesheet(xslDocument); +</pre> + +<p>Finally, you can either use {{ ifmethod("nsIXSLTProcessor","transformToDocument") }} or {{ ifmethod("nsIXSLTProcessor","transformToFragment") }} methods to transform the XML document. The {{ ifmethod("nsIXSLTProcessor","transformToDocument") }} method returns a DOM Document with the results of the transformation, whereas, the {{ ifmethod("nsIXSLTProcessor","transformToFragment") }} method returns a DOM DocumentFragment node. In this example code, the first child of the XUL document is appended to a XUL element after the transformation.</p> + +<pre class="brush: js">request.onload = function(aEvent) { + let responseXML = aEvent.target.responseXML; + let xulNode; + + // transform the XML document to a XUL document + xulDocument = xsltProcessor.transformToDocument(responseXML); + + // append the XUL node to a XUL element + xulNode = document.adoptNode(xulDocument.firstChild); + document.getElementById("foo").appendChild(xulNode); +}; +</pre> + +<p>We effectively transformed the XML file into XUL and integrated it into the UI.</p> + +<div class="note"><strong>Note:</strong> Security should be your number one priority when handling remote content. Do not allow event handlers or any other kinds of code to be passed through your parsers. If you need your generated XUL to have JS code in it, all of it should be added locally, never from the remote source.</div> + +<p>Here are a couple of practical situations were you may want to use XSLT:</p> + +<ol> + <li>Convert a large XML document directly into XUL.</li> + <li>Filter a complex XML file and generate a simpler XML document with only the data you need, so then you can use regular DOM functions to read it.</li> + <li>Convert XML into SQL statements. You could use this to generate a script to run on your local database. You would of course need to be very careful about escaping characters and protecting yourself against SQL injection attacks.</li> + <li>Convert XML into RDF. This was more useful when RDF was the default storage format. You can still use RDF as an intermediate format, though, and then use templates to generate XUL and display the data.</li> +</ol> + +<h2 id="HTTP_debugging">HTTP debugging</h2> + +<p>When you start debugging HTTP requests, you may find it hard to know exactly what data was sent, especially with POST data. We recommend you to use extensions like <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/966">Tamper Data</a>. They help you to track HTTP/HTTPS requests and responses occurring in Firefox.</p> + +<p>After installation, you can find a Tamper Data menu item in the menu bar:</p> + +<ul> + <li>Tools > Tamper Data or</li> + <li>View > Sidebar > Tamper Data</li> +</ul> + +<p>Once you open the Tamper Data view, all requests and responses will begin to appear in it. You can discover some interesting things about Firefox like this, such as the automatic update URLs for extensions, and the behavior of web applications such as Gmail.</p> + +<p>If you click on the "Start Tamper" button, for every request made you will get a popup dialog for tampering with it before it is sent. You can use it to view or even modify the data in a request, and then inspect the result. This can be a lot of work because there is a lot of web activity in a normal Firefox window, so use it sparingly.</p> + +<p>A tutorial on Tamper Data can be found <a class="external" href="http://www.jimbojw.com/wiki/index.php?title=Tamper_Data">here</a>.</p> + +<div class="note"><strong>Note:</strong> You should always test your connection code to cover edge cases, like when there is no Internet connection, or the computer is connected to a local network with no Internet access (like at an airport or hotel room). Make sure you're not telling users everything is OK, or worse, bombarding them with error messages.</div> + +<p>{{ PreviousNext("Escuela_XUL/Interceptando_cargas_de_página", "Escuela_XUL/Personalizar_elementos_XUL_con_XBL") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/index.html b/files/es/mozilla/tech/xul/escuela_xul/index.html new file mode 100644 index 0000000000..94497a9507 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/index.html @@ -0,0 +1,77 @@ +--- +title: Escuela XUL +slug: Mozilla/Tech/XUL/Escuela_XUL +tags: + - Plugins + - Rerencias + - Tutoriales + - XUL + - extensiones +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}</p> + +<p>{{AddonSidebar}}</p> + +<p>El proyecto Escuela <a href="/es/XUL" title="es/XUL">XUL</a> es un tutorial completo para la creación de extensiones, enfocándose en el desarrollo de extensiones para Firefox. Es recomendable que lo leas completamente al menos una vez. Como Firefox cambia rápidamente, el contenido en este tutorial debería ser actual y válido.</p> + +<dl> + <dt>Introducción</dt> + <dd> + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Introduction" title="es/Escuela XUL/Introducción">Introducción</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions" title="en/XUL School/Getting Started with Firefox Extensions">Comenzando con las Extensiones de Firefox</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/The_Essentials_of_an_Extension" title="es/Escuela XUL/Elementos esenciales de una extensión">Elementos Esenciales de una Extensión</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Setting_Up_a_Development_Environment" title="es/Escuela XUL/Montando un ambiente de desarrollo">Configurando un Ambiente de Desarrollo</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management" title="es/Escuela XUL/Uso de objetos en JavaScript">Uso de Objetos en JavaScript</a></li> + </ul> + </dd> + <dt>Funcionalidad básica</dt> + <dd> + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_menus_and_submenus" title="es/Escuela XUL/Agregar menus y submenus">Agregar menus y submenus</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_Toolbars_and_Toolbar_Buttons" title="es/Escuela XUL/Agregar barras de herramientas y botones para éstas">Agregar barras de herramientas y botones para éstas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_Events_and_Commands" title="es/Escuela XUL/Agregar eventos y comandos">Agregar eventos y comandos</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_windows_and_dialogs" title="es/Escuela XUL/Agregar ventanas y dialogos">Agregar ventanas y dialogos</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Adding_sidebars" title="es/Escuela XUL/Agregar barras laterales">Agregar barras laterales</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/User_Notifications_and_Alerts" title="es/Escuela XUL/Notificaciones de usuario y alertas">Notificaciones de usuario y alertas</a></li> + </ul> + </dd> + <dt>Funcionalidad intermedia</dt> + <dd> + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Intercepting_Page_Loads" title="es/Escuela XUL/Interceptando cargas de página">Interceptando cargas de página</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Connecting_to_Remote_Content" title="es/Escuela XUL/Enlazando contenido remoto">Conexión con Contenido Remoto</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Handling_Preferences" title="es/Escuela XUL/Manejo de preferencias">Manejo de preferencias</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Local_Storage" title="es/Escuela XUL/Almacenamiento local">Almacenamiento Local</a></li> + </ul> + </dd> + <dt>Temas avanzados</dt> + <dd> + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/The_Box_Model" title="es/Escuela XUL/El modelo de caja">El modelo de caja</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/XPCOM_Objects" title="es/Escuela XUL/Objetos XPCOM">Objetos XPCOM</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Observer_Notifications" title="es/Escuela XUL/Notificaciones Observer">Notificaciones Observer</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Custom_XUL_Elements_with_XBL" title="es/Escuela XUL/Personalizar elementos XUL con XBL">Personalizar elementos XUL con XBL</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Mozilla_Documentation_Roadmap" title="es/Escuela XUL/Documentación de Mozilla">Documentación de Mozilla</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Useful_Mozilla_Community_Sites" title="es/Escuela XUL/Sitios útiles de la comunidad Mozilla">Sitios útiles de la comunidad Mozilla</a></li> + </ul> + </dd> + <dt>Apéndices</dt> + <dd> + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_A:_Add-on_Performance" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">Apéndice A: Rendimiento de los Add-ons</a></li> + <li><a href="/es/Escuela_XUL/Apéndice_B:_Instalar_y_desinstalar_Scripts" title="en/XUL School/Appendix B: Install and Uninstall Scripts">Ap</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_B:_Install_and_Uninstall_Scripts" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="/es/Escuela_XUL/Apéndice_B:_Instalar_y_desinstalar_Scripts" title="es/Escuela XUL/Apéndice B: Instalar y desinstalar Scripts"> B: Instalar y desinstalar Scripts</a></li> + <li><a href="/es/Escuela_XUL/Apéndice_C:_Evitar_usar_eval_en_los_Add-ons" title="es/Escuela XUL/Apéndice C: Evitar usar eval en los Add-ons">Ap</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_C:_Avoid_using_eval_in_Add-ons" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="/es/Escuela_XUL/Apéndice_C:_Evitar_usar_eval_en_los_Add-ons" title="es/Escuela XUL/Apéndice C: Evitar usar eval en los Add-ons"> C: Evitar usar eval en los Add-ons</a></li> + <li><a href="/es/Escuela_XUL/Apéndice_D:_Cargar_Scripts" title="es/Escuela XUL/Apéndice D: Cargar Scripts">Ap</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_D:_Loading_Scripts" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="/es/Escuela_XUL/Apéndice_D:_Cargar_Scripts" title="es/Escuela XUL/Apéndice D: Cargar Scripts"> D: Cargar Scripts</a></li> + <li><a href="/es/Escuela_XUL/Apéndice_E:_DOM_e_inserción_HTML" title="es/Escuela XUL/Apéndice E: DOM e inserción HTML">Ap</a><a href="/es/Escuela_XUL/Apéndice_A:_Rendimiento_de_los_Add-ons" title="es/Escuela XUL/Apéndice A: Rendimiento de los Add-ons">éndice</a><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion" title="es/Escuela XUL/Apéndice E: DOM e inserción HTML"> E: DOM e inserción HTML</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/Appendix_F:_Monitoring_DOM_changes" title="XUL/School_tutorial/Appendix F: Monitoring DOM changes">Appendix F: Monitoreando cambios DOM</a></li> + </ul> + </dd> +</dl> + +<p>El proyecto Escuela <a href="/es/XUL" title="es/XUL">XUL</a> fue desarrollado por <a class="external" href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (Anteriormente Glaxstar). El proyecto es ahora publicado aquí bajo las <a href="https://developer.mozilla.org/Project:Copyrights" title="https://developer.mozilla.org/Project:Copyrights">siguientes licencias</a>. Su contenido ha sido necesariamente modificado de la fuente original.</p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/introducción_a_las_extensiones_de_firefox/index.html b/files/es/mozilla/tech/xul/escuela_xul/introducción_a_las_extensiones_de_firefox/index.html new file mode 100644 index 0000000000..758ef60e25 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/introducción_a_las_extensiones_de_firefox/index.html @@ -0,0 +1,128 @@ +--- +title: Introducción a las extensiones de Firefox +slug: Mozilla/Tech/XUL/Escuela_XUL/Introducción_a_las_extensiones_de_Firefox +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/Elementos_esenciales_de_una_extensión") }}</p> + +<h2 id="What's_a_Firefox_Extension">What's a Firefox Extension?</h2> + +<blockquote> +<p>Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.</p> +</blockquote> + +<p>Taken from the <a href="/es/Extensiones" title="es/Extensiones">Extensions page</a>.</p> + +<p>As described in the quoted text, an extension is a small application that adds something new to one or more Mozilla applications. This tutorial focuses on extensions for Firefox, but the same (or very similar) principles apply to creating extensions for other applications such as Thunderbird, Seamonkey, and Flock.</p> + +<p>It is also worth noting that there are differences between the definition of <em>extension</em> and <em>add-on</em>. All extensions are add-ons, but add-ons can also be themes, plugins, or language packs. This tutorial is about extension development, but themes and language packs are developed in a very similar way. Plugins are entirely different, and they will not be covered on this tutorial. You can read more about plugins and their development in the <a href="/en/Plugins" title="en/Plugins">Plugins page</a>.</p> + +<p>Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The <a class="link-https" href="https://addons.mozilla.org" title="https://addons.mozilla.org/">Mozilla Add-ons</a> repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1865" title="https://addons.mozilla.org/en-US/firefox/addon/1865">AdBlock Plus</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/722" title="https://addons.mozilla.org/en-US/firefox/addon/722">NoScript</a>), web application interaction (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3615" title="https://addons.mozilla.org/en-US/firefox/addon/3615">Delicious Bookmarks</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5202" title="https://addons.mozilla.org/en-US/firefox/addon/5202">eBay Companion</a>), web development (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a>), and child protection (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5881" title="https://addons.mozilla.org/en-US/firefox/addon/5881">Glubble For Families</a>). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).</p> + +<p>We'll begin by looking into a very simple extension.</p> + +<h2 id="The_Hello_World_Extension">The Hello World Extension</h2> + +<p>Our sample extensions and this tutorial in general are meant for Firefox version 3 and above, but most of it works on previous versions of Firefox as well. We'll try to make it clear when we're discussing a feature that only works on some versions of Firefox.</p> + +<p>We'll now begin with a basic "Hello World" extension. Let's start by installing the extension. Click on the link below.</p> + +<p><a href="/@api/deki/files/5139/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/5139/=xulschoolhello1.xpi">Install Hello World</a></p> + +<p>This will either trigger an install or a file download, depending on the Content-type the webserver is using to serve the file. The appropriate content type to trigger an install is <strong>application/x-<strong>xpinstall</strong></strong>. In this case a file download should occur.</p> + +<p>If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security measure that prevents sites from installing extensions without user consent. This is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. AMO is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.</p> + +<p>After downloading the file, you can drag and drop it into the Firefox content area, and the installation should begin.</p> + +<p>You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.</p> + +<p>Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons (except plugins) require a restart to complete, and there's no easy way to work around it. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes. There's a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=256509" title="https://bugzilla.mozilla.org/show_bug.cgi?id=256509">very old bug</a> that tracks this issue.</p> + +<p>Now, after restarting the browser, you'll see the Add-ons Manager window, showing the extension name, version, and a brief description.</p> + +<p><img alt="addonman.png" class="default internal" src="/@api/deki/files/4137/=addonman.png"></p> + +<p>Close the Add-ons window. Look at the main Firefox window and see if you notice anything different.</p> + +<p>Did you see it? There's a new menu on the main menu bar, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4138/=helloworldalert.png" style="height: 126px; width: 326px;"></p> + +<p>That's all the extension does. Now let's take a closer look at it.</p> + +<h2 id="Extension_Contents">Extension Contents</h2> + +<p>You may have noticed that the extension file you installed is named xulschoolhello1.xpi. <a href="/en/XPI" title="en/XPI">XPI</a> (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all major platforms, and this is the case for most extension XPIs. XPIs are simply compressed ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI link is clicked.</p> + +<p>To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the <a href="/@api/deki/files/4225/=xulschoolhello1.xpi" title="https://developer.mozilla.org/@api/deki/files/4225/=xulschoolhello1.xpi">install link</a>, and choose the Save Link As... option.</p> + +<p>Next, we'll decompress the XPI file. One way to do this is to rename the file so that it uses the <em>zip</em> extension instead of the <em>xpi</em>. Another way is to open the file using a ZIP tool. Most operating systems ship with a ZIP compression utility, and there are more advanced tools available online. Make your pick, and decompress the file in a convenient location. You should see a directory structure similar to this one:</p> + +<ul> + <li>xulschoolhello1 + <ul> + <li>chrome.manifest</li> + <li>install.rdf</li> + <li>chrome + <ul> + <li>xulschoolhello.jar</li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>The JAR file contains most of the code, so we'll need to extract the contents of that file as well. Just like XPIs, all you need is a ZIP utility to decompress the file. After doing that, you'll have something like this:</p> + +<ul> + <li>xulschoolhello1 + <ul> + <li>chrome.manifest</li> + <li>install.rdf</li> + <li>chrome + <ul> + <li>xulschoolhello.jar</li> + <li>xulschoolhello + <ul> + <li>content + <ul> + <li>browserOverlay.xul</li> + <li>browserOverlay.js</li> + </ul> + </li> + <li>locale + <ul> + <li>en-US + <ul> + <li>browserOverlay.dtd</li> + <li>browserOverlay.properties</li> + </ul> + </li> + </ul> + </li> + <li>skin + <ul> + <li>browserOverlay.css</li> + </ul> + </li> + </ul> + </li> + </ul> + </li> + </ul> + </li> +</ul> + +<p>That's a lot of files for something so simple! Well, don't worry, we'll shortly see the purpose of all of these files and realize this <em>is</em> quite simple. In the next section we'll inspect these files and see what they do.</p> + +<p>{{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/Elementos_esenciales_de_una_extensión") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html b/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html new file mode 100644 index 0000000000..f6fd9f2d96 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html @@ -0,0 +1,54 @@ +--- +title: Introduction +slug: Mozilla/Tech/XUL/Escuela_XUL/Introduction +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +<div>{{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> + +<p>Welcome to the XUL School Tutorial!</p> + +<p>This tutorial is meant to be the stepping stone that will turn you into a professional Firefox extension developer in no time. We have poured years of XUL experience into it, providing many solutions for problems extension developers commonly run into.</p> + +<p>XUL School was created by <a href="http://appcoast.com/" title="http://appcoast.com/">Appcoast</a> (formerly Glaxstar), one of the few companies dedicated to building high-quality Firefox extensions. A team of over a dozen XUL developers conformed Glaxstar at the time this tutorial was created, and the combined experiences of years creating Firefox extensions are reflected here.</p> + +<p>With this tutorial you'll learn how to develop Firefox extensions. You'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to solve them. In most cases we'll provide code samples that you can easily copy and adapt to your needs, as well as some working example extensions. The tutorial aims to be as brief as possible, often falling back on Mozilla documentation for more detailed information. You can think of it as a quick guide to the expansive world that is the Mozilla platform. Most links in this documentation are meant to be clicked and read.</p> + +<p>We'll start with a brief introduction to some key concepts, in case you're not familiar with Mozilla and Firefox.</p> + +<h2 id="Mozilla_and_Firefox">Mozilla and Firefox</h2> + +<p>The term <a href="http://en.wikipedia.org/wiki/Mozilla" title="http://en.wikipedia.org/wiki/Mozilla">Mozilla</a> can be used to refer to several concepts: the Mozilla project, the <a href="http://en.wikipedia.org/wiki/Mozilla_Foundation" title="http://en.wikipedia.org/wiki/Mozilla_Foundation">Mozilla Foundation</a>, the <a href="http://en.wikipedia.org/wiki/Mozilla_Corporation" title="http://en.wikipedia.org/wiki/Mozilla_Corporation">Mozilla Corporation</a> and the old <a href="http://en.wikipedia.org/wiki/Mozilla_Application_Suite" title="http://en.wikipedia.org/wiki/Mozilla_Application_Suite">Mozilla browser</a>. Even Firefox is sometimes referred to as "Mozilla". If you're unfamiliar with these terms, it's good that you take some time and learn a little about Mozilla. This will help you understand the culture that surrounds the Mozilla community.</p> + +<p>Mozilla has spawned several <a href="http://www.mozilla.org/projects/" title="http://www.mozilla.org/projects/">products and projects</a>, the most notable being the Mozilla Firefox web browser. Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.</p> + +<p>Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008. This tutorial was written after Firefox 3 was released, and has been updated with time. While most of it should still work for creating extensions in Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes. A release that is more than 6 months old is likely vulnerable to published security bugs.</p> + +<p>Firefox y otras aplicaciones Mozilla pueden ser vistas como composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. The user interface is built with technology known as <a href="/en-US/docs/XUL" title="XUL">XUL</a>, and the platform is known as <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a>.</p> + +<h2 id="XUL">XUL</h2> + +<p><a href="/en-US/docs/XUL" title="XUL">XUL</a> (pronounced "zool") is one of many technologies used for creating Mozilla-based products and extensions. It is only one part of the development landscape, but given that it's practically exclusive to Mozilla, it tends to be used to identify all Mozilla-related development. You'll sometimes read terms like "XUL applications" and "XUL extensions", but rarely will they refer to projects that are exclusively built with XUL. It usually means that the projects were built using Mozilla technologies. Even this project, called XUL School, covers several other technologies such as JavaScript, CSS, XBL and XPCOM.</p> + +<h2 id="XULRunner">XULRunner</h2> + +<p><a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> includes the <a href="/en-US/docs/Gecko" title="Gecko">Gecko rendering engine</a>, the <a href="/en-US/docs/Necko" title="Necko">Necko networking library</a>, and several other components that provide OS-independent file management, accessibility, and localization, among others. It is this very powerful platform that has allowed such a fast growth of the development community surrounding Mozilla and Firefox.</p> + +<p>XULRunner is available in binary form at the <a href="/en-US/docs/XULRunner" title="XULRunner">XULRunner</a> page, and it is the base for several projects, such as Songbird, Miro and Eudora. There's a very comprehensive list of XULRunner applications in the <a href="/en-US/docs/XULRunner_Hall_of_Fame" title="XULRunner Hall of Fame">XULRunner Hall of Fame</a>.</p> + +<h3 id="Gecko">Gecko</h3> + +<p>The <a href="/en-US/docs/Gecko" title="Gecko">Gecko engine</a> is the part of Firefox used to render web pages and its own user interface. You can identify the level of compatibility of web standards in <a href="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers" title="http://en.wikipedia.org/wiki/List_of_web_browsers#Gecko-based_browsers">Gecko-based browsers</a> looking at their <a href="http://en.wikipedia.org/wiki/User_agent" title="http://en.wikipedia.org/wiki/User_agent">User Agent</a> string, which should include the Gecko version. Gecko versions are somewhat independent from Firefox versions, and you can see a mapping of Firefox versions and Gecko versions at the <a href="/en-US/docs/Gecko" title="Gecko">Gecko page</a>. The User Agent String for Firefox at the time of this writing (in US English, Mac OS X) is:</p> + +<p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:<strong>25.0.1</strong>) Gecko/20100101 Firefox/25.0.1</p> + +<p>The highlighted section is the Gecko version: 25.0.1. You can read and copy the user agent string of any Firefox window, choosing "Help > Troubleshooting Information" from the main menu.</p> + +<h2 id="On_to_the_Tutorial">On to the Tutorial</h2> + +<p>With the basic concepts out of the way, we can now get right into extension development. You are probably still wondering what exactly is an extension, what can it do, and how can you make them. Well, this whole tutorial is devoted to explaining that to you.</p> + +<p>Welcome to the world of extension development. Now let's get to it.</p> + +<div>{{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}</div> + +<p><small>This tutorial was kindly donated to Mozilla by Appcoast.</small></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html b/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html new file mode 100644 index 0000000000..9c3f436636 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html @@ -0,0 +1,305 @@ +--- +title: Manejo de preferencias +slug: Mozilla/Tech/XUL/Escuela_XUL/Manejo_de_preferencias +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Handling_Preferences +--- +<blockquote> +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> +</blockquote> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Notificaciones_Observer", "Escuela_XUL/Almacenamiento_local") }}</p> + +<h2 id="Preferences_in_Firefox">Preferences in Firefox</h2> + +<p>Mozilla applications are highly customizable. Preferences are used to store settings and information to change their default behavior. To open the preferences window in Firefox, select the following from the main menu:</p> + +<ul> + <li>On Windows, Tools > Options</li> + <li>On Mac, Firefox > Preferences</li> + <li>On Linux, Edit > Preferences</li> +</ul> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Keep in mind the usage of the terms "Preferences" and "Options" in different platforms. If you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system. Tip: you can use <a href="/en/DOM/window.navigator.platform" title="en/DOM/window.navigator.platform">window.navigator.platform</a> in your chrome code to figure out the operating system Firefox is running on. You can use the <a href="/en/XPCOM_Interface_Reference/nsIAppShellService#Attributes" title="en/XPCOM Interface Reference/nsIAppShellService#Attributes">Hidden DOM Window</a> in non-chrome code.</div> +</div> +</div> + +<p>Firefox loads user preferences from a number of sources. Each source is a JS file that contains some special functions not available in regular code. The following files are used:</p> + +<ul> + <li>Default preferences: these are stored in the directory <em>defaults/pref</em> in the Firefox installation directory.</li> + <li>Current preferences: these are stored in the profile directory with the name <em>prefs.js</em>. This is where the user's settings are stored. This file is updated when preferences are modified by the user.</li> + <li>User preferences: the file <em>user.js</em> in the user's profile directory holds additional preferences the user has set. This file is never written to by Firefox, but you may wish to set preferences manually in this file to override other settings.</li> + <li><a href="/en/Automatic_Mozilla_Configurator/Locked_config_settings" title="en/Automatic Mozilla Configurator/Locked config settings">Lockfile settings</a>: these preferences are stored in a file that usually has the name <em>mozilla.cfg</em> or <em>netscape.cfg</em>. The file may be located on a network. It is intended to be used by an administrator or ISP to set settings centrally. In addition, certain preferences may be locked such that users cannot change them. Locked preferences are disabled in the Preferences window.</li> +</ul> + +<p>Firefox exposes its most common high-level preferences through the Preferences window and other parts of its UI. In reality there are thousands of other preferences Firefox handles that are not readily available to the user. These are hidden because they are too advanced or obscure for regular users to manage, and because the Preferences window should be as easy to use as possible. To access all other preferences, enter "about:config" into the Location Bar. This XUL page lists all the preferences defined in the Firefox installation, allowing you to change them as you please. As the warning message states, you should be very careful when changing preferences. Incorrect values can make Firefox behave oddly or break altogether.</p> + +<p>You can type on the "Filter" textbox to search for specific preferences. If you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. Right-clicking on the list reveals several options that allow you to modify preference values and add new ones. Preferences with non-default values are highlighted in bold. All changes done in about:config are saved to the <em>prefs.js</em> file.</p> + +<p>The list in about:config is not complete. Some Firefox preferences have no default value, so they are left out unless you add them manually. An extensive specification of Firefox preferences can be seen <a class="external" href="http://kb.mozillazine.org/Category:Preferences">in this page</a>. You don't need to know them by heart; if doing task X requires some preference, then it's better to look for an explanation on how to do X rather than diving into the preferences list and see if you can find the preference you need. MDC articles and other guides are usually good at specifying the preferences you'll need to use.</p> + +<h2 id="Adding_preferences_to_an_extension">Adding preferences to an extension</h2> + +<p>Extensions can read and write Firefox preferences and, most importantly, create and manage their own. The <a href="/en/Code_snippets/Preferences" title="en/Code snippets/Preferences">Preferences System</a> provides a simple, unified storage facility for name / value mappings. When your storage needs are more complicated than this, you'll need more advanced APIs that will be discussed in a section further ahead.</p> + +<p>To add preferences to your extension you should first create a JS preferences file that describes the preferences and their default values, although setting defaults is not required. As mentioned earlier, a preference with no default value can be set later on.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">We recommend that you include all of your extension preferences in the JS defaults file. It makes it easier to compile a list of the preferences your extensions handle, and to document what they do.</div> +</div> +</div> + +<p>The preferences file you need to create should be <em>defaults/preferences/yourextensionname.js</em>, under your extension root. The naming of the JS file is not compulsory, but it is the standard most extensions use.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">The purpose of the <em>defaults</em> directory is to hold non-code files your extension needs. In the past we have used this directory to store XSLT files for XML transformations and local storage template files (more on this later). It's the best place to put miscellaneous files your extension needs.</div> +</div> +</div> + +<p>Download this <a href="/@api/deki/files/5145/=HelloWorld5.zip" title="https://developer.mozilla.org/@api/deki/files/5145/=HelloWorld5.zip">sample Hello World using preferences</a>. There are a couple of additions in the Makefiles, to include the preference file <em>xulschoolhello.js</em>. The contents of the file are fairly simple:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">// Amount of messages shown to the user. +pref("extensions.xulschoolhello.message.count", 0);</pre> +</div> +</div> + +<p>This defines a preference we'll use to keep track of the amount of times we have displayed a greeting message to the user. Its default value is 0. You'll see this preference appear in about:config after installing the extension. Just type "xulschool" in the filter box to see your new preference.</p> + +<div class="note">Always begin your preference names with <em>extensions</em>, followed by some namespacing and finally the actual name of the preference. Name parts are normally separated by dots.</div> + +<p>Now let's look at how we actually manage the preference values.</p> + +<h2 id="Managing_Preferences_with_FUEL">Managing Preferences with FUEL</h2> + +<p><a href="/en/Toolkit_API/FUEL" title="en/FUEL">FUEL</a> is a JS library integrated into Firefox that was meant to facilitate extension development. It fell a little short of its goals, but it is useful for preference handling. Firefox-based applications like Flock include FUEL, and SeaMonkey includes a FUEL equivalent called <a href="/en/Toolkit_API/SMILE" title="en/Toolkit API/SMILE">SMILE</a> since version 2.</p> + +<p>We modified our JSM sample extension so that it uses a preference instead of an internal variable. The main difference in functionality is that after closing Firefox and reopening it, our extension remembers how many greetings have been displayed before. The original extension only kept track of the greetings shown in a browser session. This new version persists this number across sessions.</p> + +<p>Since the only reason we used non-chrome code in the JSM sample extension was to store the message count in a single location, we can easily modify this new extension so that it uses chrome code exclusively. There's no need for JavaScript Code Modules or XPCOM anymore. We're making this point because using the FUEL library from chrome code is slightly different thant using it from non-chrome code. The difference lies in how to get the "root" <a href="/en/Toolkit_API/extIApplication" title="en/FUEL/Application">Application object</a>:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">// chrome code. +Application.something + +// non-chrome code. +let application = + Cc["@mozilla.org/fuel/application;1"].getService(Ci.fuelIApplication); +application.something</pre> +</div> +</div> + +<p>In the chrome you have the global Application object ready to use, while in non-chrome code you need to get it as an XPCOM service. It <em>is</em> an XPCOM service, with the difference that it can be more easily accessed in the chrome.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">FUEL only works in Firefox 3 and above.</div> +</div> +</div> + +<p>The Application object has a <em>prefs</em> property of type <a href="/en/Toolkit_API/extIPreferenceBranch" title="en/FUEL/PreferenceBranch">PreferenceBranch</a>. You can use it to manage preferences easily.</p> + +<p>First, you get an object that represents your preference:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this._countPref = + application.prefs.get("extensions.xulschoolhello.message.count");</pre> +</div> +</div> + +<p>Then you can get or set its value using the <em>value</em> property.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * Returns the current message count. + * @return the current message count. + */ +get count() { return this._countPref.value; }, + +/** + * Increments the message count by one. + */ +increment : function() { + this._countPref.value++; +}</pre> +</div> +</div> + +<p>The <em>prefs</em> object also has methods that allow you to get and set preference values directly, but we prefer this approach.</p> + +<h4 id="Preference_Listeners">Preference Listeners</h4> + +<p>Sometimes you'll want to be notified when a preference changes its value. For example, if we wanted to have a display of the message count somewhere in the browser, we should use a preference listener to keep it up to date. This way we know we have the right value even if the user changes it manually in about:config.</p> + +<p>To do this in FUEL, add an event listener for the "change" event:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this._countPref.events.addListener("change", this);</pre> +</div> +</div> + +<p>The listener object should implement the <a href="/en/Toolkit_API/extIEventListener" title="en/FUEL/EventListener">EventListener</a> interface. Similarly to observers, all you need to do is have a <em>handleEvent</em> method in a JS object. Or you can use an anonymous function that takes an <a href="/en/Toolkit_API/extIEventItem" title="en/FUEL/EventItem">EventItem</a> object.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this._countPref.events.addListener("change", function(aEvent) { /* do stuff. */ });</pre> +</div> +</div> + +<p>Always remember to remove listeners when you don't need them anymore.</p> + +<h2 id="Managing_Preferences_with_XPCOM">Managing Preferences with XPCOM</h2> + +<p>The preferences system is implemented with XPCOM. FUEL is only a wrapper that gives the XPCOM services a friendlier face, so using either is pretty much the same. Using XPCOM is a little more verbose, as usual.</p> + +<p>We use the <a href="/en/XPCOM_Interface_Reference/nsIPrefBranch" title="en/NsIPrefBranch">Preferences Service</a> in order to get and set preference values:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this._prefService = + Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch); +// ... +get count() { + return this._prefService.getIntPref("extensions.xulschoolhello.message.count"); +}, +increment : function() { + let currentCount = + this._prefService.getIntPref("extensions.xulschoolhello.message.count"); + + this._prefService.setIntPref("extensions.xulschoolhello.message.count", currentCount + 1); +}</pre> +</div> +</div> + +<p>One important thing to keep in mind is that the "get" methods of the service can throw an exception if the preference is not found. If you are going to use XPCOM, you should always set a default value to your preferences, or use a try / catch block to prevent unhandled errors.</p> + +<h4 id="Preference_Listeners_2">Preference Listeners</h4> + +<p>The XPCOM way to add a listener was mentioned in the XPCOM section when describing the <em>QueryInterface</em> method:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this._prefService.QueryInterface(Ci.nsIPrefBranch2); +this._prefService.addObserver(prefName, this, false); +this._prefService.QueryInterface(Ci.nsIPrefBranch);</pre> +</div> +</div> + +<p>All the QI'ing is necessary because the <a href="/en/XPCOM_Interface_Reference/nsIPrefBranch2#addObserver()" title="en/NsIPrefBranch2#addObserver()">addObserver</a> method is in a different interface, and other than for adding and removing observers, we use the nsIPrefBranch interface for everything related to preferences.</p> + +<p>Then, create the observer method:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">observe : function(aSubject, aTopic, aData) { + if ("nsPref:changed" == aTopic) { + let newValue = aSubject.getIntPref(aData); + // do something. + } +},</pre> +</div> +</div> + +<p>Always remember to remove the observer when you don't need it anymore:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this._prefService.QueryInterface(Ci.nsIPrefBranch2); +this._prefService.removeObserver(prefName, this);</pre> +</div> +</div> + +<h2 id="Preference_Windows">Preference Windows</h2> + +<p>It's very common for extensions to have a few settings that their users can change to tailor them to their needs. Since there are some subtleties related to preference management, there are some facilities provided in XUL and Firefox that make this much easier to deal with.</p> + +<p>The standard way of opening a preferences window is to open the Add-ons Manager, select the add-on, and then click on the Preferences button. In order to have this button enabled in your extension you need to add the following line to <em>install.rdf</em>:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><em:optionsURL>chrome:<span class="code-comment">//xulschoolhello/content/preferencesWindow.xul</em:optionsURL></span></pre> +</div> +</div> + +<p>If you want to open this window from a different place in the UI, such as a menu item or a button in a toolbar, you need to take into account that the opening behavior of a Preferences window is different depending on the operating system. This is how we do it:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">openPreferences : function() { + if (null == this._preferencesWindow || this._preferencesWindow.closed) { + let instantApply = + Application.prefs.get("browser.preferences.instantApply"); + let features = + "chrome,titlebar,toolbar,centerscreen" + + (instantApply.value ? ",dialog=no" : ",modal"); + + this._preferencesWindow = + window.openDialog( + "<a class="external" rel="freelink">chrome://xulschoolhello/content/preferencesWindow.xul</a>", + "xulschoolhello-preferences-window", features); + } + + this._preferencesWindow.focus(); +},</pre> +</div> +</div> + +<p>This code is based on the code that opens Preference windows from the Add-ons Manager. It does 2 things:</p> + +<ol> + <li>Check if the Preferences window is already open. In that case, just give it focus.</li> + <li>Make the window modal in systems where the instant apply rule is not used. Notice that this is a preference that users can switch, so checking for the operating system is not good enough.</li> +</ol> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">The general philosophy in non-Windows systems is that a change in a preference applies immediately. Preference windows don't have any buttons, or just an OK or Close button. On Windows, changing preferences don't apply until the user click on the OK button. The user can click on the Cancel button and none of the changes performed in the window will apply. This is why it makes sense to have Preference windows be modal on Windows. This way the user is urged to apply or discard any changes instead of being able to ignore the Preferences window.</div> +</div> +</div> + +<p>For preferences windows you should always use the <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a> element instead of <a href="/en/XUL/window" title="en/XUL/window">window</a> in your XUL file. Firefox will know if it needs to add OK and Cancel buttons or not.</p> + +<p>In most cases, your preferences window will have a few options that can be displayed all at once. If you have many preferences, you can organize them using the <a href="/en/XUL/prefpane" title="en/XUL/prefpane">prefpane</a> element. This creates a visually appealing tabbed view, just like the one in the Firefox Preferences window. The <em>prefpane</em> is just a container, and you can have as many as you want. The tabs at the top of the window will need icons, and just like with toolbar buttons there are subtle differences between operating systems.</p> + +<p>The <em>prefwindow</em> allows you to use the <a href="/en/XUL/preferences" title="en/XUL/preferences">preferences</a> and <a href="/en/XUL/preference" title="en/XUL/preference">preference</a> elements, which facilitate preference handling. The <em>preferences</em> element is just a container, and you should have one per window, or one per <em>prefpane</em> if you have those. The element and its children are completely invisible, and their purpose is to list the preferences to be used in the window/pane.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><preferences> + <preference id=<span class="code-quote">"xulschoolhello-message-count-pref"</span> + name=<span class="code-quote">"extensions.xulschoolhello.message.count"</span> type=<span class="code-quote">"<span class="code-object">int</span>"</span> /> + <!-- More preference elements. --> + +</preferences></pre> +</div> +</div> + +<p>After you define the preferences you need, you associate them with the form elements in your window or pane using the <a href="/en/XUL/Attribute/preference" title="en/XUL/Attribute/preference">preference attribute</a>:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><textbox preference=<span class="code-quote">"xulschoolhello-message-count-pref"</span> type=<span class="code-quote">"number"</span> + min=<span class="code-quote">"0"</span> max=<span class="code-quote">"100"</span> /></pre> +</div> +</div> + +<p>In this case we use a numeric field to set the message count preference. Changing the value in the control will change the preference (depending on the instant apply rule), and vice versa. You may be able to create a Preferences window without a single line of JS code thanks to the <em>preference</em> element.</p> + +<p>Finally, groupboxes are a good idea to organize the contents of the window and preference panes. They are heavily stylized in the Firefox Preferences window, so you should include the same CSS file that is included in it (<a class="external" rel="freelink">chrome://browser/skin/preferences/preferences.css</a>). This way you don't have to rewrite all the CSS rules defined for Firefox. You should also look at the <em>class</em> values set to elements in the XUL file, so that your Preferences window is just like the one in Firefox and your extension is better integrated into the application and the native OS look and feel.</p> + +<p>{{ PreviousNext("Escuela_XUL/Notificaciones_Observer", "Escuela_XUL/Almacenamiento_local") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html b/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html new file mode 100644 index 0000000000..e280fda079 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html @@ -0,0 +1,244 @@ +--- +title: Montando un ambiente de desarrollo +slug: Mozilla/Tech/XUL/Escuela_XUL/Montando_un_ambiente_de_desarrollo +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Elementos_esenciales_de_una_extensión", "Escuela_XUL/Agregar_menus_y_submenus") }}</p> + +<h2 id="Getting_the_right_tools">Getting the right tools</h2> + +<p>There are 3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.</p> + +<p>In regards to code editing, there's no official Mozilla IDE. On the other hand, extensions use the same (or similar) languages that are used for web development, so most text editors and IDEs are up to the task. Most XUL tools and plugins you'll find online are merely templates that generate the folder structure for the project, and that's not much help.</p> + +<p>We recommend <a class="external" href="http://www.activestate.com/komodo_edit/" title="http://www.activestate.com/komodo_edit/">Komodo Edit</a>. It's free, open source, and cross-platform. It's based on the Mozilla XULRunner platform, so it has support for some of the particularities in Firefox extension development. Komodo Edit has automatic completion for XUL tags and attributes, and it supports <a href="/en/Mozilla_CSS_Extensions" title="en/Mozilla CSS Extensions">Mozilla's CSS extensions</a> (CSS values and properties beginning with "-moz"). It has an add-on system similar to the one in Firefox, and there are some Komodo extensions that provide additional help in extension development. That is more than what you can get with most other editors, so we recommend you to give it a try. All of our examples are handled with Komodo Edit, so if you see a <em>.kpf</em> file in an example you downloaded, this is a Komodo project file.</p> + +<p>For source control, we just recommend that you have it. We mostly use <a class="external" href="http://subversion.tigris.org/">Subversion</a>, but any other will do, and it won't be necessary for examples or exercises presented in this tutorial.</p> + +<p>To package XPI files, we use <a class="external" href="http://www.gnu.org/software/make/">make</a>. We chose <em>make</em> because this is the system used by Mozilla to build Firefox, and it is available for all operating systems. <em>make</em> is a default tool in most UNIX-based systems. It can be installed on Mac OS X as part of the XCode Tools package, and on Windows through <a class="external" href="http://www.cygwin.com/">cygwin</a>. In <em>cygwin</em> installations you'll have to explicitly check the <em>make</em> and <em>zip</em> utilities from the long list of packages to download and install.</p> + +<p>Also make sure that <em>make</em> is in the executable system path. After setting up <em>make</em>, you should be able to open a command line window, run "make -ver", and get the installed version of <em>make</em> as output.</p> + +<p>We recommend you set up <em>make</em> in your system, since our examples come with all the necessary files to build and install the resulting XPI using this tool. It will save you a lot of packaging time. Or you can create an equivalent system using batch, Ant or whatever you prefer.</p> + +<h2 id="Build_system">Build system</h2> + +<p>Let's start by downloading the project used to build the second version of Hello World, from the exercise in the last section.</p> + +<p><a href="/@api/deki/files/5142/=HelloWorld2.zip" title="https://developer.mozilla.org/@api/deki/files/5142/=HelloWorld2.zip">Hello World 2 Project</a>.</p> + +<p>Unzip the file anywhere you want. Inside the <em>HelloWorld2</em> directory, you'll see two directories: <em>bin</em> and <em>src</em>. The <em>bin</em> directory should be empty. This is where all the resulting build files will be created, and where you'll find the extension XPI file once you get it to build.</p> + +<p>Open the project file (<em>HelloWorld2.kpf</em>) from the <em>src</em> directory in Komodo Edit. In the Projects tab you should be able to see the directory structure inside the <em>src</em> directory. This structure should be familiar, as it is almost identical to the unpacked XPI from the previous section.</p> + +<p>The only notable additions are <em>Makefile</em> under src and <em>Makefile.in</em> under <em>chrome</em>. These are the files that <em>make</em> uses to build the XPI. You should take some time to read them and understand them, or at least identify the parts that you should change to get a project of your own going. This <a class="external" href="http://www.chemie.fu-berlin.de/chemnet/use/info/make/make_toc.html">GNU Make Manual</a> is a very good reference to get to know <em>make</em> and Makefiles.</p> + +<p>In most cases you'll only need to change the first lines in the file <em>Makefile</em>. These define the extension name (which will also be the name of the JAR file), the extension id (as specified in <em>install.rdf</em>) and the name of the profile directory where the extension will be installed during development and testing. More about this further ahead.</p> + +<p>Let's try and build the XPI from the command line first. Open the command line program in your system and navigate to the <em>src</em> directory in your project. Run the following command:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">make</pre> +</div> +</div> + +<p>That's it. If everything went well, you should see an output similar to this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">Creating chrome JAR file. + adding: content/browserOverlay.js (deflated 42%) + adding: content/browserOverlay.xul (deflated 59%) + adding: skin/browserOverlay.css (stored 0%) + adding: locale/en-US/browserOverlay.dtd (deflated 52%) + adding: locale/en-US/browserOverlay.properties (stored 0%) +Creating chrome JAR file. Done! +Creating XPI file. + adding: install.rdf (deflated 50%) + adding: chrome.manifest (deflated 60%) + adding: chrome/xulschoolhello.jar (deflated 30%) +Creating XPI file. Done! + +Build finished successfully.</pre> +</div> +</div> + +<p>If you inspect the <em>bin</em> directory, you should see the <em>xulschoolhello2.xpi</em> file, and a <em>build</em> directory with copies of the project files. The <em>build</em> directory is just a temporary location where files are copied before the final XPI is built. If you run <em>make</em> again, you'll only see the last line of the build process. That is because <em>make</em> can tell that the files in the <em>build</em> directory are up to date, and nothing needs to be done. Making changes on source files will make <em>make</em> run the necessary steps to build the XPI again.</p> + +<p>You can clean up the <em>bin</em> directory by just running the following command (again, from the <em>src</em> directory):</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">make clean</pre> +</div> +</div> + +<p>You can also run these commands from Komodo. Click on Tools > Run Command.... In the "Run" textbox you should type this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">bash -c <span class="code-quote">"make"</span></pre> +</div> +</div> + +<p>Or add "clean" for the clean command. The "bash -c" part forces Komodo to use <em>bash</em>, which for some reason can't be set properly as the default command shell. It isn't necessary to add this, but it's better so that it is consistent with the <em>make</em> command we'll see next.</p> + +<p>In the "Start in" textbox you should choose <em>%p</em>(directory path of active project). If you don't see this textbox, click on the "More" button. You also have the option to save the command, by clicking on the "Add to Toolbox" checkbox. To see the Toolbox, click on View > Tabs > Toolbox, from the main menu. With that, you should now have a very easy way to build your XPI, by just double clicking on the created commands.</p> + +<p>We can make it even better. Once you're testing and debugging your code, you'll find that constantly building and installing an XPI can be very tedious. This is the reason why we introduced "make install". This only works if your extension is already installed in a Firefox profile. Just like in the provided project, you need the add-on id and profile location set in the file <em>Makefile</em>. We use this information to locate the installation path of the extension and overwrite the installed files. If Firefox is open at the time you run "make install", you'll have to restart it in order to see the changes. It's still better than installing the XPI all over again.</p> + +<p>In order to set the profile location to the right value, you should read the <a class="external" href="http://support.mozilla.com/en-US/kb/Profiles">support article on profiles</a>, at the Mozilla Support site. We'll also delve deeper in this topic later on in this section.</p> + +<p>To make "make install" work on non-Windows systems, you need an extra step. The install process requires using an environment variable called <em>OSTYPE</em>, which is not exported. Long story short, if you want to run it from a command line, you need to run:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">export OSTYPE; make install</pre> +</div> +</div> + +<p>And in the command in Komodo, you should enter the following:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">bash -c <span class="code-quote">"export OSTYPE; make install"</span></pre> +</div> +</div> + +<p>The <em>export</em> command won't work correctly unless you use "bash -c".</p> + +<div class="note">The file <em>Makefile</em> specifies which profile folder the add-on will be reinstalled to. This is set in the <em>profile_dir</em> variable (set to "xulschool-dev" in this case). When creating a development profile for your add-on, make sure you choose an easy name for the profile folder, and set it in your <em>Makefile</em> in order to take advantage of the install command.</div> + +<h3 id="Building_IDL_files">Building IDL files</h3> + +<p>Some extensions require developing XPCOM components to add certain advanced functions. There's a section dedicated to XPCOM in this tutorial, but we'll briefly discuss the impact it has on building the extension. You can skip this section and keep it present as a reference in case you do need to use XPCOM in your project.</p> + +<p>XPCOM interfaces are defined using IDL files. These are text files that define the attributes and methods in one or more interfaces. These IDL files are compiled into binary form and included in the extension as XPT files.</p> + +<p>To compile an IDL file to XPT, you need a command line tool called <em>xpidl</em>. This tool is included in the Mozilla <a href="/en/Gecko_SDK" title="en/Gecko SDK">Gecko SDK</a>. If you need to compile IDLs, go to the SDK page and download a compiled version for your system. Also note any prerequisites you may need. If your system is not listed in the supported builds, you'll have to build the SDK yourself from the Mozilla source. Good luck with that.</p> + +<p>You should also set up your environment so that <em>xpidl.exe</em> (or just <em>xpidl</em> on other systems) is in the default executable path, and also add a variable called GECKO_SDK, that points to your SDK build:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">export GECKO_SDK=/path/to/your/sdk</pre> +</div> +</div> + +<p>Our build system should pick it up from there. To make it work in Komodo in Unix-based systems, we add the command to the <em>.bash_login</em> file in the home directory, and we modify the commands to this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">bash -c <span class="code-quote">". ~/.bash_login; make"</span></pre> +</div> +</div> + +<p>An example project with XPCOM components is included in the XPCOM section. There is also a mention about building C++ XPCOM, which is something much more complicated.</p> + +<h3 id="Signing_extensions">Signing extensions</h3> + +<p>In order to provide additional security for your users, you can choose to <a href="/en/Signing_an_extension" title="en/Signing an extension">add a signature to your extension</a>. The signature verifies that you are the author of this extension, and it can only be done if you have a valid certificate provided by a trusted Certificate Authority.</p> + +<p>The only noticeable difference for the user is that the XPI installation dialog will say that the extension was created by you, making the dialog a little easier to trust. It's not common to sign extensions because most users will trust the official add-ons site (AMO) rather than rely on extension signatures. On the other hand, it is standard practice for big companies to sign their extensions.</p> + +<p>You'll need to download some libraries in order to be able to sign your extension. Follow the <a href="/en/Signing_an_extension" title="en/Signing an extension"><span class="external">instructions</span></a>, and add something like the following to your Makefile:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"># The directory where the signature sources are located. +signature_dir := signature + +# The signing key /certificate file. +signature_extra_files := $(build_dir)/META-INF/manifest.mf \ + $(build_dir)/META-INF/zigbert.sf +# The signing key /certificate file. +signature_rsa_file = $(build_dir)/META-INF/zigbert.rsa# The signing key /certificate file. +signature_files := $(signature_extra_files) \ + $(signature_rsa_file) + +$(signature_files): $(build_dir) $(xpi_built) + @signtool -d $(signature_dir) -k $(cert_name) \ + -p $(cert_password) $(build_dir)</pre> +</div> +</div> + +<p>Keep in mind that your password should not be in your Makefiles, and you must be very careful with the certificate information. Ideally this should be handled by a single person, and only done near the end of the release process. You should also have a different <em>make</em> command, such as <em>make signed</em> in order to distinguish the signed and unsigned development builds.</p> + +<h2 id="Firefox_profile_management">Firefox profile management</h2> + +<p>It is good development practice to keep your test environment separate from everything else. You don't want unstable extensions to break your everyday Firefox profile, risking data loss. It's much better to have a different "version" of Firefox for testing. This is what Firefox profiles are for.</p> + +<p>You can learn about setting up multiple Firefox profiles in the Mozilla Support article <a class="external" href="http://support.mozilla.com/en-US/kb/Managing+profiles">Managing Profiles</a>. You can have as many profiles as you like. You can also mix them with multiple Firefox installations. For instance, you may want to test your extension in Firefox 3.5 and Firefox 3.6, or test it in a localized version of Firefox. You can install as many Firefox versions as you want, and mix profiles and versions.</p> + +<p>On Windows and Linux it's easy to create shortcuts for every profile you create, using the commands mentioned in the support article.</p> + +<p>For Mac OS X developers, there is also a way to set up "shortcuts". You can do this by opening the Automator application, choosing Run Shell Script and then entering the profile-loading script in the textbox:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile > /dev/<span class="code-keyword">null</span> &</pre> +</div> +</div> + +<p>You can change "/dev/null" to a file location, in case you want to see <em>dump</em> output from Firefox, or other extensions. The last <em>&</em> prevents Automator from waiting for your Firefox session to finish. Save this as an Application, not a Workflow. And you probably want to have these on your Desktop or Dock, for easy access.</p> + +<p>There are also some configuration changes you shloud make in your testing profiles, so that you get detailed error information in case something fails. The Firefox <a href="/en/Error_Console" title="en/Error Console">Error Console</a> (Tools > Error Console) normally displays JavaScript errors that occur on web pages, but with some tweaking you can get error information from your extension. Read this piece on <a href="/en/Setting_up_extension_development_environment#Development_preferences" title="en/Setting up extension development environment#Development preferences"><span class="external">Development preferences</span></a>.</p> + +<h2 id="Developer_extensions">Developer extensions</h2> + +<p>There's a wide variety of Firefox extensions that aid web development and add-on development. A good place to look for them is the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4">Mozilla Add-ons site</a>, and there's also a good <a href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions"><span class="external">development extension list</span></a> here. In this section we'll cover a few that we have found to be very useful.</p> + +<h3 id="DOM_Inspector">DOM Inspector</h3> + +<p>The <a href="/en/DOM_Inspector" title="en/DOM Inspector"><span class="external">DOM Inspector</span></a> used to be part of Firefox as an installer option, but since Firefox 3 it has been separated as another add-on you can add and remove. It's a very useful inspection tool that lets you look into the DOM of HTML and XUL documents, as well as applied CSS rules and associated JavaScript objects. <a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/Introduction to DOM Inspector">Introduction to DOM Inspector</a> is a good guide on how to get started using it.</p> + +<p>The DOM inspector is particularly useful in finding out how to overlay a window, and how to replace default CSS style rules. You can see the names of the files involved, which gives you a good starting point when looking into the <a class="external" href="http://mxr.mozilla.org/">Mozilla source</a>. You can even change styles, attributes and execute Javascript code in it, although that's not completely reliable.</p> + +<h3 id="JavaScript_Debugger">JavaScript Debugger</h3> + +<p>The name says it all. The <a href="/en/Venkman" title="en/Venkman">Venkman JavaScript Debugger</a> is a great way to trace execution of your JavaScript code.</p> + +<p>To debug extension and browser code, right-click on the Loaded Scripts panel and uncheck Exclude Browser Files. The list of loaded scripts will grow long to include all of the scripts in Firefox. Having our file naming conventions prove very useful in this case. You can set breakpoints, step in and out of methods, and even get profiling information from Javascript execution. You can inspect variables, keep track of watch expressions, and evaluate arbitrary JS at any point in execution.</p> + +<p>This extension has seen little maintenance in quite some time, so it is very buggy. It is specially unreliable when debugging code in Javascript XPCOM and XBL files. Nevertheless, it is a valuable tool when trying to figure out why a certain function is misbehaving.</p> + +<h3 id="Tamper_Data">Tamper Data</h3> + +<p><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/966" title="https://addons.mozilla.org/en-US/firefox/addon/966">Tamper Data</a> intercepts HTTP requests and their responses. It allows you to cancel them and even replace payload data before it is sent. There are several similar extensions, such as <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3829">Live HTTP Headers</a>, but Tamper Data is the one that we use the most. We'll cover more on HTTP debugging later on.</p> + +<h3 id="Firebug">Firebug</h3> + +<p>The <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug</a> extension includes pretty much all tools mentioned so far, but it's mostly focused on web development. The <a class="external" href="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide" title="http://getfirebug.com/wiki/index.php/Chromebug_User_Guide">Chromebug</a> extension helps in making Firebug more useful for extension development, but it may still not be powerful enough to replace all of the previously mentioned add-ons.</p> + +<p>On the other hand, Firebug has a very friendly, integrated user interface, and sees much more development that its counterparts. It's definitely worth a try.</p> + +<h3 id="Leak_Monitor">Leak Monitor</h3> + +<p>Memory leaks have always been a big criticism drawn against Firefox. Mozilla has proven with time that they take memory usage seriously, improving performance on several critical areas and removing all kinds of memory leaks.</p> + +<p>However, extensions are also capable of causing memory leaks. If you want your extension to be included in the Mozilla Add-ons site, you better not have any memory leaks. <a href="/en/Using_XPCOM_in_JavaScript_without_leaking" title="en/Using XPCOM in JavaScript without leaking"><span class="external">Using XPCOM in JavaScript</span></a> has some guidelines you should follow to avoid them. One of the most common errors developers make is to register a JS event listener or observer, and never removing it. The simple practice of always including removal code for everything you add makes a big difference.</p> + +<p>To make sure your extension doesn't leak, you should use the <a href="/en/Leak_Monitor" title="en/Leak Monitor"><span class="external">Leak Monitor extension</span></a> when testing it. Always test opening and closing windows. Leaks usually surface when doing this.</p> + +<h2 id="Exercise">Exercise</h2> + +<ul> + <li>Set up a new Firefox profile for XUL School. Make sure you can open and close your XUL School Firefox without having to close the instance of Firefox you use to browse normally (you <em>do</em> use Firefox, don't you?). Make any modifications you want to the XUL School project, and use <em>make</em> and <em>make install</em> to see the extension work with your changes.</li> + <li>Install DOM Inspector. Use it to locate the menu you created. Inspect the CSS rules Firefox applies to it by default. Look at the final, computed style for the menu items. Browse around the rest of the Firefox DOM, and try to figure out what the nodes correspond to in the Firefox UI.</li> + <li>Install the JavaScript Debugger. Add a breakpoint to your hello wold function and run it. Inspect the variables available in the scope. Run JavaScript code in the console to the right-hand side.</li> + <li>Install the Tamper Data extension. Open the Tamper Data window and go to a AJAX-heavy page such as Gmail or Facebook (don't click on the Start Tamper button, it's not necessary for this). Try to identify what is going on with some of the requests being sent.</li> +</ul> + +<p>Now that you know how to quickly monitor your project and test changes, we'll learn how to add new UI elements to Firefox, through overlays and new windows.</p> + +<p>{{ PreviousNext("Escuela_XUL/Elementos_esenciales_de_una_extensión", "Escuela_XUL/Agregar_menus_y_submenus") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html b/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html new file mode 100644 index 0000000000..efce29ae52 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html @@ -0,0 +1,94 @@ +--- +title: Notificaciones de usuario y alertas +slug: Mozilla/Tech/XUL/Escuela_XUL/Notificaciones_de_usuario_y_alertas +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/User_Notifications_and_Alerts +--- +<p>{{AddonSidebar}}</p> + +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Personalizar_elementos_XUL_con_XBL", "Escuela_XUL/Documentación_de_Mozilla") }}</p> + +<p>It is often the case that extensions need to notify users about important events, often requiring some response. Using modal dialogs and alerts is usually a bad idea. They interrupt the user's workflow, demanding immediate action before anything else can be done. Users will find them annoying and probably will learn to dismiss them as quickly as possible without even reading what they have to say. Or they will just get rid your add-on.</p> + +<p>This section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying.</p> + +<h2 id="The_notificationbox_element">The notificationbox element</h2> + +<p>You have probably seen these before. The "remember password" prompt is the one that shows up the most often. They are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons. This kind of notification is implemented with a <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a>.</p> + +<p>This kind on notification is very easy to implement, it doesn't interrupt the user and is easy to read and dismiss, so it is our recommended way of displaying alerts and notifications. There's a catch, though: these notifications are <em>inside</em> the current tab, so switching tabs will make a notification disappear. The notification shows up again when you come back to the tab that displayed it. This means that these notifications make the most sense when they are related to the page currently being displayed, such as a page trying to install an add-on, or a site you just entered a password on.</p> + +<p>Notification boxes are very easy to create, and are very customizable:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let nb = gBrowser.getNotificationBox(); +let acceptButton = new Object(); +let declineButton = new Object(); +let message = + this._bundle.getString("xulschoolhello.friendMessage.label"); +let that = this; + +acceptButton.label = + this._bundle.getString("xulschoolhello.acceptButton.label"); +acceptButton.accessKey = + this._bundle.getString("xulschoolhello.acceptButton.accesskey"); +acceptButton.popup = null; +acceptButton.callback = function() { that.acceptRequest(); }; +// similarly for decline button. +nb.appendNotification( + message, "xulschoolhello-friend-notification", + "<a class="external" rel="freelink">chrome://xulschoolhello/skin/friend-notification.png</a>", + nb.PRIORITY_INFO_HIGH, [ acceptButton, declineButton ]);</pre> +</div> +</div> + +<p>All browser tabs have a notification box by default, so you don't need to do any overlaying. The <em>notificationbox</em> elements can be obtained from the <em>gBrowser</em> object. In this case we don't pass any arguments to <a href="/en/XUL/tabbrowser#m-getNotificationBox" title="en/XUL/tabbrowser#m-getNotificationBox">getNotificationBox</a> so that we get the notification box that corresponds to the tab currently on display. The <a href="/en/XUL/notificationbox#m-appendNotification" title="en/XUL/notificationbox#m-appendNotification">appendNotification</a> method takes the message, id, image (32x32), level and buttons. The level argument determines the "strength" of the message, indicated by its background color when it is displayed. You should look for the level that better fits your message, and use the lowest applicable level, to prevent the user from getting used to dismissing high-level notifications. The buttons are represented by simple JS data objects. This is all explained in detail in the <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a> page.</p> + +<p>Notification boxes are designed to be easily dismissed. All notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked. Also, clicking on any of your custom buttons will cause the notification to be immediately closed, so you should only use notification boxes for single-step processes.</p> + +<h2 id="The_Alerts_Service">The Alerts Service</h2> + +<p>This is a very good option when you want to alert users about events without requiring input from them. Alerts are displayed in an OS-specific way, so their look is native. You can associate an action to the user clicking on the alert. Another advantage is that you use an XPCOM service to do this (<a href="/en/XPCOM_Interface_Reference/nsIAlertsService" title="en/XPCOM Interface Reference/nsIAlertsService">nsIAlertsService</a>), so you can easily trigger alerts from chrome and non-chrome code. On the other hand, alerts are displayed only temporarily</p> + +<p>Using the Alerts Service is similar to using notification boxes:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let alertsService = + Cc["@mozilla.org/alerts-service;1"].getService(Ci.nsIAlertsService); +let title = this._bundle.getString("xulschoolhello.greeting.title"); +let message = this._bundle.getString("xulschoolhello.greeting.label"); + +alertsService.showAlertNotification( + "<a class="external" rel="freelink">chrome://xulschoolhello/skin/hello-notification.png</a>", + title, message, true, "", this, "XULSchool Hello Message");</pre> +</div> +</div> + +<p>We pass <em>this</em> as an argument, assuming that <em>this</em> is an object that implements <a href="/en/XPCOM_Interface_Reference/nsIObserver" title="en/nsIObserver">nsIObserver</a>. We do this when we need to handle clicks on the alert box. The image can have any size, but it is recommended that you use a medium, fixed size.</p> + +<p>The main disadvantage of using alerts is that support for the Alerts Service is not guaranteed for all platforms and Firefox versions. Support for Windows has existed since Firefox 2. For Mac OS X, support was added on Firefox 3, and only through a third-party tool called Growl. On Linux systems, we have confirmed that it works on Firefox 3 on Ubuntu Linux, but we haven't tested all distributions and Firefox versions.</p> + +<p>Because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show information the user needs to know and can't get in any other way.</p> + +<h2 id="Custom_alerts">Custom alerts</h2> + +<p>Creating custom solutions for alerting the user is not complicated, given the advantages of XUL overlays and CSS positioning. However, these solutions are prone to be buggy and have accessibility issues. You should use the 2 alternatives mentioned above whenever possible. If none of those fit your needs then this is an acceptable solution.</p> + +<p>An easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user. The best locations for this kind of box are above and below the tab browser. Below is preferrable because it only cuts the bottom part of the current page, as opposed to pushing down all tabs and content. Notification boxes are a good guideline to what you should aim for: thin, informative and easy to dismiss.</p> + +<p>Another option is to also add a hidden box to the overlay, but use CSS positioning to locate it where you want. This usually means that the box will be hovering on top of the page's content, and there are a few things you must know about this. First of all, switching tabs will probably make your alert disappear. This is probably due to the fact that the browser tab box uses a deck internally, and that affects <a class="external" href="http://www.w3schools.com/Css/pr_pos_z-index.asp">z-indexing</a>. You'll have to code around this using tab events in order to know when to re-display your alert. Another problem you need to take into account is that transparency of floating XUL on the Mac OS version of Firefox 2 doesn't work. You'll end up with a box with a white background you can't get rid of . On Firefox 3 and above, this seems to have been corrected, using the <a href="/en/XUL/panel" title="en/XUL/panel">panel</a> element.</p> + +<p>The bottom right corner of the browser is the recommended location for an alert, because it normally doesn't block the part of the content where the user is reading, or the most important parts of page content, such as menus and titles.</p> + +<p>Remember this is not a recommended practice. Imagine having multiple extensions notifying you in their own custom way, probably even at the same time! This is not good from a UI perspective, so you consider custom alerts the very last resort.</p> + +<p>{{ PreviousNext("Escuela_XUL/Personalizar_elementos_XUL_con_XBL", "Escuela_XUL/Documentación_de_Mozilla") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html b/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html new file mode 100644 index 0000000000..497781a405 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html @@ -0,0 +1,378 @@ +--- +title: Objetos XPCOM +slug: Mozilla/Tech/XUL/Escuela_XUL/Objetos_XPCOM +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/XPCOM_Objects +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Uso_de_objetos_en_JavaScript", "Escuela_XUL/Notificaciones_Observer") }}</p> + +<h2 id="XPCOM">XPCOM</h2> + +<blockquote> +<p><strong>XPCOM</strong> is a cross platform component object model, similar to Microsoft COM.</p> +</blockquote> + +<p>Taken from the <a href="/en/XPCOM" title="en/XPCOM">XPCOM page</a>.</p> + +<p>Firefox can be seen as composed of two layers. The largest of the two is a compiled platform, mostly written in C++. On top of it lies the chrome, mostly written in XML, Javascript and CSS. In fact, you can separate the two. We often mention other "Mozilla based applications". Well, those are applications that, simply put, take the underlying platform with perhaps a few changes and additions, and then write their own chrome layer. This lower layer is called <a href="/en/XULRunner" title="en/XULRunner">XULRunner</a>, and it is a very powerful platform, providing a very robust development base for web-enabled, cross-platform applications. The fact that it allows to easily create OS-independent applications is a big selling point for XULRunner.</p> + +<p>XPCOM is the way in which the two layers (XULRunner and chrome) communicate. Most of the objects and functions in the lower layers are hidden from the chrome; those that need to be publicized are exposed through XPCOM components and interfaces. You can think of XPCOM as a reference to all the capabilities available on the lower layers of Firefox.</p> + +<p>Using XPCOM components is relatively simple, as you've seen in previous examples.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this.obsService = Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);</pre> +</div> +</div> + +<p>The <em>Cc</em> object (<a href="/en/Components.classes" title="en/Components.classes">Components.classes</a>) is an index to static objects and class definitions available through XPCOM. The string between the brackets is just an identifier, in this case corresponding to the Observer service. You'll usually know what string to use by reading examples and documentation. There is no comprehensive list of these (that we know of), and that's understandable since it would be a very long list, and it can be extended by add-ons. If you want to see the list in your current Firefox installation, just run the following code in the Error Console:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">var str = ""; for (var i in Components.classes) { str += i + "\n" }; str</pre> +</div> +</div> + +<p>A run on Firefox 3.6.2 with a few extensions installed yields 876 strings. That's quite a lot. Luckily, you'll only need to know a handful of those for extension development. The <em>@mozilla.org/</em> prefix is just a way to keep things namespaced. We would use something like <em>@xulschool.com/</em> to make our own components.</p> + +<p>Components are either services (static objects) or instances of classes, just like the objects we handle in JS. The method you call on <em>Cc["some-string"]</em> should either be <em>getService</em> or <em>createInstance</em>, depending on what you're asking for. In most cases it is very clear which one to call, but in case of doubt, look for documentation on it. Those two methods always receive the interface identifier as an argument.</p> + +<p>Similarly to <em>Cc</em>, <em>Ci</em> (<a href="/en/Components.interfaces" title="en/Components.interfaces">Components.interfaces</a>) is an index of available interfaces. A modified version of the last code snippet produces an even longer list of available interfaces. Just like in component identifiers, the <em>nsI</em> prefix is just a way of keeping things in order. The NS stands for Netscape, Mozilla's predecessor. The "I" stands for interface. Our interfaces should begin with something like <em>xsIHello</em>.</p> + +<p>An interface is just a definition of a set of attributes and methods that an object implementing it should have. XPCOM components can implement multiple interfaces, and they often do. Let's look at the Preference service as an example of this. We'll look at its documentation in a very old XUL site called <a class="external" href="http://www.xulplanet.com/">XUL Planet</a>. All of its documentation was planned to be migrated to MDC, but it looks like it was never finished and XUL Planet was discontinued. Their XPCOM documentation is better in terms of seeing the relationships between components and interfaces, so we'll use that.</p> + +<p>Another useful resource is <a class="external" href="http://www.oxymoronical.com/experiments/xpcomref/" title="http://www.oxymoronical.com/experiments/xpcomref/">this XPCOM reference</a>. This is generated from source, and it's kept relatively up to date. It shows the relationships between components and interfaces, but it's more of a source browser than a documentation reference.</p> + +<p>Stepping into the time machine, we see the <a class="external" href="http://web.archive.org/web/20080311100120/http://www.xulplanet.com/references/xpcomref/comps/c_preferencesservice1.html" title="http://web.archive.org/web/20080311100120/http://www.xulplanet.com/references/xpcomref/comps/c_preferencesservice1.html">Preferences Service component page</a>. Right at the top you can see a list of the interfaces it implements, with a link to a documentation page for each one of them. Then you'll see a list of all members of this object, with some documentation about it. It is particularly important to note that, for every member in the component, you'll see in what interface this member is defined. Clicking on the link for the <em>getBranch</em> method takes you to the <a class="external" href="http://web.archive.org/web/20080305031645/www.xulplanet.com/references/xpcomref/ifaces/nsIPrefService.html#method_getBranch" title="http://web.archive.org/web/20080305031645/www.xulplanet.com/references/xpcomref/ifaces/nsIPrefService.html#method_getBranch">nsIPrefService documentation page</a>, where you can see more details on the interface and the method. You can also see a list of what components implement this interface. All of this documentation is generated from the one present in the Firefox source files, so it's in general very complete and well written. It's a shame XUL Planet is no longer with us.</p> + +<p>Interfaces can be awkward to handle. If you want to call a method or use an attribute of interface X in a component, you first need to "cast" the component to interface X. This is done via the <em>QueryInterface</em> method that is included in all XPCOM components.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this._prefService = + Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch); + +this._prefValue = this._prefService.getBoolPref("somePreferenceName"); + +this._prefService.QueryInterface(Ci.nsIPrefBranch2); +this._prefService.addObserver("somePreferenceName", this, false); +this._prefService.QueryInterface(Ci.nsIPrefBranch);</pre> +</div> +</div> + +<p>This is a common piece of code you'll see when initializing components or JSM that rely on preferences. We use the Preferences Service to get and set preference values, such as the preference value we're getting on the fourth line of code. These methods are in the <em>nsIPrefBranch</em> interface. The <em>getService</em> and <em>createInstance</em> methods allow you to get the component already set to an interface. In many cases you only need to use one interface, and you won't have to worry about <em>QueryInterface</em>. But in this case we need to change the interface to <em>nsIPrefBranch2</em>, which is the one that includes the method that adds a preference observer. Then we change it back, because after that we only need to get and set preferences, and those methods are in <em>nsIPrefBranch</em>.</p> + +<div class="note">Trying to access methods or attributes without having the right interface set will result in an exception being thrown.</div> + +<h2 id="Passing_parameters">Passing parameters</h2> + +<p>Passing parameters to XPCOM methods is no different from other JS objects, with some exceptions. In general, you can rely on JavaScript's ability to transform values to the correct type, but it's usually best to pass the right type in the first place. This section is a quick guide on how to read XPCOM documentation, which basically amounts to understanding the syntax of <a href="/en/XPIDL" title="en/XPIDL">XPIDL</a>, the language used to specify XPCOM interfaces.</p> + +<p>At MDC, you'll see stuff like this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">void setCharPref(in string aPrefName, in string aValue);</pre> +</div> +</div> + +<p>One of the most important details to notice is that both paratemers have the <em>in</em> keyword. This specifies that these are input parameters, values that the method will use to perform its actions. When is a parameter not an <em>in</em> parameter? In some methods the <em>out</em> keyword is used for parameters that are return values in reality. This is done for certain value types that are not valid as return values in IDL, such as typed arrays.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">void getChildList(in string aStartingAt, out unsigned long aCount,[array, size_is(aCount), retval] out string aChildArray);</pre> +</div> +</div> + +<p>This method returns an array of strings. The first parameter is an input that tells the method where to start looking. The second one will hold the length of the return array, and the third parameter will hold the array itself. Note the metadata included in the square brackets, indicating that the parameter is an array, and that its size is determined by the <em>aCount</em> parameter. Here's one way to invoke this method:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let childArrayObj = new Object(); +let childArray; + +this._prefService.getChildList("", {}, childArrayObj); + +// .value holds the actual array. +childArray = childArrayObj.value;</pre> +</div> +</div> + +<p>The general rule for <em>out</em> parameters is that you can pass an empty object, and then you can get the result by accessing the <em>value</em> attribute in this object after the method call. The method will set <em>value</em> for you. Also, since JS arrays have the <em>length</em> attribute to get their length, there's no need for the second parameter to be used, so we just pass it an empty object that we won't use. The second parameter is only necessary for callers from within C++ code that use pointers instead of high-level arrays.</p> + +<p>Some commonly used XPCOM methods require other XPCOM types as parameters. The <em>addObserver</em> method in <em>nsIPrefBranch2</em> is an example of this.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">void addObserver(in string aDomain, in nsIObserver aObserver, in boolean aHoldWeak);</pre> +</div> +</div> + +<p>Luckily, you don't have to do anything special if you want to register your JS object as a preference observer. The <em>nsIObserver</em> has a single method <em>observe</em>, so all you need to do is have an <em>observe</em> method in your object and you'll be OK.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">XULSchool.PrefObserver = { + init: function() { + + this._prefService = + Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch2); + // pass 'this' as if it implemented nsIObserver. + this._prefService.addObserver( + "extensions.xulschoolhello.somePref", this, false); + }, + + observe : function(aSubject, aTopic, aData) { + // do stuff here. + } +};</pre> +</div> +</div> + +<p>Finally, here's a table summarizing the types you will most likely encounter in XPCOM interfaces, and how to handle them:</p> + +<table style="width: 100%;"> + <tbody> + <tr> + <th class="confluenceTh">JS type</th> + <th class="confluenceTh">IDL types</th> + <th class="confluenceTh">Notes</th> + </tr> + <tr> + <td class="confluenceTd">Strings</td> + <td class="confluenceTd">AUTF8String, string, wstring, char*, others</td> + <td class="confluenceTd">Historically there have been several string types in XPCOM. The currently favored type for most cases is <em>AUTF8String</em>. You can read more about it in the <a href="/En/Mozilla_internal_string_guide" title="En/Mozilla internal string guide">XPCOM String Guide</a>.</td> + </tr> + <tr> + <td class="confluenceTd">Integers</td> + <td class="confluenceTd">short, unsigned short, long, unsigned long, PRInt32, PRUInt32</td> + <td class="confluenceTd"><em>PRInt32</em> is the equivalent to <em>long</em>. Most <em>PR*</em> types have an easier to read equivalent, so it is better to use those.</td> + </tr> + <tr> + <td class="confluenceTd">Floating point</td> + <td class="confluenceTd">float</td> + <td class="confluenceTd"> </td> + </tr> + <tr> + <td class="confluenceTd">Boolean</td> + <td class="confluenceTd">boolean, PRBool</td> + <td class="confluenceTd"> </td> + </tr> + <tr> + <td class="confluenceTd">Void</td> + <td class="confluenceTd">void</td> + <td class="confluenceTd"> </td> + </tr> + <tr> + <td class="confluenceTd">Timestamps</td> + <td class="confluenceTd">PRTime</td> + <td class="confluenceTd">This type is used to pass timestamps measured in milliseconds, such as the output of the <em>getTime()</em> method in a Javascript Date object.</td> + </tr> + </tbody> +</table> + +<p>There are more details about XPIDL in the <a href="/en/XPIDL/Syntax" title="en/XPIDL/Syntax">XPDIL Syntax definition</a>.</p> + +<h2 id="Creating_Your_Own_Components">Creating Your Own Components</h2> + +<h3 id="JavaScript_XPCOM_Components">JavaScript XPCOM Components</h3> + +<p>As we've said before, we recommend using JSM whenever you can. Yet there are some cases where you don't have a choice and you have to create XPCOM components to add a specific feature. In these cases you can choose between compiled XPCOM components, written in C++, or JS XPCOM components. You should favor the latter, they are much less complicated to make and maintain.</p> + +<p>Most of the time you'll need 2 source files for a JS XPCOM component: the IDL interface file, and the implementation JS file. In your final extension XPI you'll need to include the JS implementation file, and the XPT file, which is a compiled version of your IDL file. You won't need the IDL or XPT files if your components only use pre-existing Firefox interfaces. In this case you may also find it easier to implement your component using JSM and the <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm" title="en/JavaScript code modules/XPCOMUtils.jsm">XPCOMUtils module</a>.</p> + +<p>Download this version of the <a href="/@api/deki/files/5144/=HelloWorld4.zip" title="https://developer.mozilla.org/@api/deki/files/5144/=HelloWorld4.zip">Hello World project with XPCOM</a> to see how XPCOM files are structured in the project and built. (Your build will probably break, we'll cover this later on.)</p> + +<p>In the <em>components</em> directory, the file <em>xsIHelloCounter.idl</em> has the following contents:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">#include "nsISupports.idl" + +/** + * Counter for the Hello World extension. Keeps track of how many times the + * hello world message has been shown. + */ +[scriptable, uuid(BD46F689-6C1D-47D0-BC07-BB52B546B8B5)] +interface xsIHelloCounter : nsISupports +{ + /* The maximum allowed count. */ + const short MAX_COUNT = 100; + + /* The current count. */ + readonly attribute short count; + + /** + * Increments the display count and returns the new count. + * @return the incremented count. + */ + short increment(); +};</pre> +</div> +</div> + +<p>The bits about <em>nsISupports</em> are common to most XPCOM interface definitions. <em>nsISupports</em> is the base interface for all interfaces, so it should always be included, except for cases where your interface extends another interface. In those cases you just need to replace <em>nsISupports</em> with the interface you're extending. You can also extend from multiple interfaces, by including a comma-separated list of interfaces instead of only one.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">[scriptable, uuid(BD46F689-6C1D-47D0-BC07-BB52B546B8B5)]</pre> +</div> +</div> + +<p>The <em>scriptable</em> qualifier says that this component can be accessed from JS code. This can also be specified on a per-method basis, which is something you'll see in some of the interfaces in Firefox, but it's not likely you'll have to do it in your own components. The second part defines a UUID for the interface. You must generate a new one for each interface, and you should change it every time the interface changes. In this case you're forced to use UUID, the email address format used for extension ids won't work.</p> + +<p>We included a constant, an attribute and a method to display examples of the 3, but this is clearly an overly elaborate way to keep a simple counter.</p> + +<p>You can define numeric and boolean constants in IDL files, but not string constants. This is a known limitation of XPIDL, and a simple workaround is to define a <em>readonly attribute</em> instead. This means you have to define a getter in the implementation file, though. You can access constants through a reference of the component, or directly from the interface:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">// these are equivalent. +max = Ci.xsIHelloCounter.MAX_COUNT; +max = counterReference.MAX_COUNT;</pre> +</div> +</div> + +<p>The implementation file, <em>xsHelloCounter.js</em>, is much longer. We'll analyze it piece by piece.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">const Cc = Components.classes; +const Ci = Components.interfaces; +const Cr = Components.results; +const Ce = Components.Exception;</pre> +</div> +</div> + +<p>You should be familiar with this already, although there are a couple of additions, <a href="/en/Components.results" title="en/Components.results">Components.results</a> and <a href="/en/Components.Exception" title="en/Components.Exception">Components.Exception</a>. They'll be used further ahead.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">const CLASS_ID = Components.ID("{37ED5D2A-E223-4386-9854-B64FD38932BF}"); +const CLASS_NAME = "Hello World Counter"; +const CONTRACT_ID = "@xulschool.com/counter;1";</pre> +</div> +</div> + +<p>These constants are used at the bottom, in the component registration code. They specify the details of the component, such as a unique UUID (you have to generate it too and it must be different from the IDL UUID), a descriptive name (this isn't used anywhere that we know of), and the contract ID, which is the string you use to get a reference to the component. The <em>";1"</em> at the end of the string is supposed to indicate the version of the component, although it shouldn't change much. It can be useful if there are multiple incompatible versions of the component installed at the same time.</p> + +<p>The implementation object itself should be easy to understand. The only aspects to take into account are that methods and attributes must have the same names as their IDL counterparts, and that the <em>QueryInterface</em> method is implemented:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">QueryInterface : function(aIID) { + if (!aIID.equals(Ci.xsIHelloCounter) && + !aIID.equals(Ci.nsISupports)) { + throw Cr.NS_ERROR_NO_INTERFACE; + } + + return this; +}</pre> +</div> +</div> + +<p>The method is very simple, it validates that the caller is requesting a supported interface, otherwise it throws an exception.</p> + +<p>The rest of the code looks long and complicated, but it is pretty much the same for all components, so you shouldn't worry too much about it. All you have to do to use it in other components is copy it and change some names. The purpose of this code is to register the component so that you can get references to it just like all other Firefox components. It is better read from bottom to top.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">function NSGetModule(aCompMgr, aFileSpec) { + return CounterModule; +}</pre> +</div> +</div> + +<p>This piece of code is the first one that Firefox looks for in all implementation files in the <em>components</em> directory. It simply returns the object that precedes it.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">var CounterModule = { + // registerSelf, unregisterSelf, getClassObject, canUnload +};</pre> +</div> +</div> + +<p>The only thing you may need to change here is when you need to use the <a href="/en/XPCOM_Interface_Reference/nsICategoryManager" title="en/nsICategoryManager">Category Manager</a>. The Category Manager is a service that allows you to register your component under categories that are either pre-existing or you make up. The service also allows you to get all components registered in a category and invoke methods on them. One common use for this service is registering a component as a <a href="/en/XPCOM_Interface_Reference/nsIContentPolicy" title="en/nsIContentPolicy">Content Policy</a>. With it you can detect and filter URL loads. This is covered further ahead in another section of the tutorial.</p> + +<p>The <em>add</em> and <em>delete</em> calls to the Category Manager would have to be done in the <em>registerSelf</em> and <em>unregisterSelf</em> methods:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">registerSelf : function(aCompMgr, aLocation, aLoaderStr, aType) { + + let categoryManager = + Cc[@mozilla.org/categorymanager;1].getService(Ci.nsICategoryManager); + + aCompMgr.QueryInterface(Ci.nsIComponentRegistrar); + aCompMgr.registerFactoryLocation( + CLASS_ID, CLASS_NAME, CONTRACT_ID, aLocation, aLoaderStr, aType); + categoryManager.addCategoryEntry( + "content-policy", "XULSchool Hello World", CONTRACT_ID, true, true); +},</pre> +</div> +</div> + +<p>In this case the component would need to implement <em>nsIContentPolicy</em>.</p> + +<p>And, finally, the factory object.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">var CounterFactory = { + /* Single instance of the component. */ + _singletonObj: null, + + createInstance: function(aOuter, aIID) { + if (aOuter != null) { + throw Cr.NS_ERROR_NO_AGGREGATION; + } + // in this case we need a unique instance of the service. + if (!this._singletonObj) { + this._singletonObj = MessageCounter; + } + + return this._singletonObj.QueryInterface(aIID); + } +};</pre> +</div> +</div> + +<p>If we wanted a class that can be instantiated, instead of a singleton service, the Factory would look like this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">var CounterFactory = { + + createInstance: function(aOuter, aIID) { + if (aOuter != null) { + throw Cr.NS_ERROR_NO_AGGREGATION; + } + + return (new Counter()).QueryInterface(aIID); + } +};</pre> +</div> +</div> + +<p>The instructions on how to build an IDL file are included in the section <a href="/en/XUL_School/Setting_Up_a_Development_Environment" title="en/XUL School/Setting Up a Development Environment">Setting up a Development Environment</a>.</p> + +<h2 id="C_XPCOM_Components">C++ XPCOM Components</h2> + +<p>You do not want to do this unless it's really necessary.</p> + +<p>There are few reasons you might need to use binary XPCOM. One of them is adding functionality to Firefox that it doesn't support natively. In that, you would either need to implement this feature for every platform, or limit your extension compatibility to the ones you'll support. You'll need to build a library file for each one of them: DLL for Windows, dylib for Mac (Intel and PPC) and .so for Linux and similar.</p> + +<p>We won't get into details about this because it's certainly not tutorial material. <a class="external" href="http://nerdlife.net/building-a-c-xpcom-component-in-windows/" title="http://nerdlife.net/building-a-c-xpcom-component-in-windows/">This blog post</a> details the XPCOM build set up. And you'll need to read the <a href="/En/Developer_Guide/Build_Instructions" title="en/Build Documentation">Build Documentation</a> thoroughly to understand how this all works.</p> + +<div class="note">If you need to interact with system libraries without really needing to create one of your own, you should consider using c-types instead. The <a href="/en/js-ctypes" title="en/JavaScript code modules/ctypes.jsm">c-types module</a> is a new bridge between JavaScript and native binaries, introduced in Firefox 3.7. With it, you can interact with existing system libraries without using XPCOM at all.</div> + +<p>{{ PreviousNext("Escuela_XUL/Uso_de_objetos_en_JavaScript", "Escuela_XUL/Notificaciones_Observer") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html b/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html new file mode 100644 index 0000000000..f01864d483 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html @@ -0,0 +1,544 @@ +--- +title: Personalizar elementos XUL con XBL +slug: Mozilla/Tech/XUL/Escuela_XUL/Personalizar_elementos_XUL_con_XBL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Custom_XUL_Elements_with_XBL +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p> </p> + +<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p> + +<blockquote> +<p><strong>XML Binding Language</strong> (<strong>XBL</strong>, sometimes also called Extensible Bindings Language) is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the <em>bound element</em>, acquires the new behavior specified by the binding.</p> +</blockquote> + +<p>Taken from the <a href="/en/XBL" title="en/XBL">XBL page</a>.</p> + +<p>This somewhat cryptic explanation describes a very simple concept: with XBL you can create your own custom elements. XBL is heavily used in XUL, but in theory it could be applied to any XML language. XBL was submitted to the <a class="external" href="http://w3.org/">W3C</a> for standardization, but for now it's used in XUL almost exclusively.</p> + +<p>With XBL you can define new elements and define their properties, attributes, methods and event handlers. Many complex elements such as tabs, buttons and input controls are implemented using XBL and simpler XUL elements. As explained earlier, XUL is really just boxes, text and images.</p> + +<p>We'll look into XBL using a modified version of the Hello World extension. Download the <a href="/@api/deki/files/5146/=HelloWorld6.zip" title="https://developer.mozilla.org/@api/deki/files/5146/=HelloWorld6.zip">Hello World XBL project</a>, build it and test it for a while. You should see a new item in the Hello World menu, that opens a Binding Test window where you can add "Persons" to a list.</p> + +<h2 id="XBL_Basics">XBL Basics</h2> + +<p>In order to create an XBL binding you'll need 2 files: the XBL file and a CSS file that binds an element name to your XBL declaration. If you look into the <em>content</em> directory, you'll see both files:</p> + +<ul> + <li><em>person.xml</em> - this is the main binding file. It holds all the code necessary to control the new element we created. We'll look into the code throughout the rest of this section. For now, just notice the opening part of the <em>binding</em> element: <em><binding id="person"></em>.</li> + <li><em>bindings.css</em> - this is the file that associates the element name to the XBL file. It associates the <em>xshelloperson</em> element name to the binding defined in the XBL file. Since you can have more than one binding per file, the "#person" part points to the id of the one we want. This CSS file is located in the content because it's not something we would normally want to be replaced by a skin, and it's not really defining style; it defines content behavior instead.</li> +</ul> + +<div class="note">If you use bindings on toolbar elements, remember to include the CSS file in the customize dialog, using the <em>style</em> directive in the <em>chrome.manifest</em> file.</div> + +<p>With those 2 files properly defined, we can now use the new element. If you look at file <em>bindingDialog.xul</em>, you'll see that the CSS stylesheet is included, which means that the <em>xshelloperson</em> tag can now be used just like any XUL tag. In this case we're adding the "Persons" dynamically, so you'll have to look into the JS file to see how <em>xshelloperson</em> elements are created and added to the DOM just like any other.</p> + +<pre class="brush: js">addPerson : function(aEvent) { + // ... + let person = document.createElement("xshelloperson"); + // ... + person.setAttribute("name", name); + person.setAttribute("greeting", greeting); + // ... + personList.appendChild(person); + // ... +}, +</pre> + +<p>This is where the advantage of XBL is obvious: we only need to create a single node and set some attributes. We didn't need to create a whole XUL structure that would require around 7 nodes <strong>every time</strong> a "Person" is created. XBL provides the encapsulation we needed to manage these nodes as a unit.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">As a bonus, you should look into the usage of <a href="/en/XPCOM_Interface_Reference/nsIFilePicker" title="en/NsIFilePicker">nsIFilePicker</a> to open a "Open File" dialog in a way that looks native for all systems.</div> +</div> +</div> + +<p>Now let's look into the XBL file, <em>p</em><em>erson.xml.</em></p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><bindings xmlns="http://www.mozilla.org/xbl" + xmlns:xbl="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></pre> +</div> +</div> + +<p>The <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a> element is the root of the document, and it's a container for <a href="/en/XUL/binding" title="en/XUL/binding">binding</a> elements. Notice how the default namespace for the document is XBL, and the XUL namespace is defined as "xul". You'll need to keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><binding id="person"></pre> +</div> +</div> + +<p>In general, you should only have one binding per file. Bindings tend to require many lines of code, and having more than one ends up making gigantic, unbrowsable files. On the other hand, if your bindings are small and have a strong relationship with each other, it makes sense to keep them together. As for the CSS file, it's usually good to have a single file declaring all bindings in your extension.</p> + +<h2 id="Content">Content</h2> + +<p>Under the <a href="/en/XBL/XBL_1.0_Reference/Elements#content" title="en/XBL/XBL 1.0 Reference/Elements#content">content</a> tag you define the XUL content that will be displayed for your element.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><content> + <xul:hbox> + <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> + <xul:vbox flex="1"> + <xul:label xbl:inherits="value=name" /> + <xul:description xbl:inherits="value=greeting" /> + </xul:vbox> + <xul:vbox> + <xul:button label="&xulshoolhello.remove.label;" + accesskey="&xulshoolhello.remove.accesskey;" + oncommand="document.getBindingParent(this).remove(event);" /> + </xul:vbox> + </xul:hbox> +</content></pre> +</div> +</div> + +<p>Our element is very simple, displaying an image, a couple of text lines and a button. Here are a couple of important things to notice:</p> + +<ul> + <li>The "xul:" namespace must be used for all XUL tags you have in your content.</li> + <li>The <em>xbl:inherits</em> attribute lets your inner XUL use the attributes that are set on the node. So, if you have this: <em><xshelloperson name="Pete" greeting="Good morning" image="" /></em>, then those attribute values are "inherited" to the content nodes that have this special attribute. The <em>value</em> attribute of the <em>xul:label</em> element would be "Pete".</li> + <li>The <em>oncommand</em> attribute of the button has some code you've probably never seen before: <em>document.getBindingParent(this)</em>. This code gets the DOM object that corresponds to the <em>xshelloperson</em> tag, allowing you access to its methods and properties. In this case we're calling the <em>remove</em> method, which we will discuss later on.</li> +</ul> + +<p>If you need to create a container element, or any other element that has child nodes, you can use the XBL <a href="/en/XBL/XBL_1.0_Reference/Elements#children" title="en/XBL/XBL 1.0 Reference/Elements#children">children</a> tag in your content to indicate the place where the child nodes will be inserted. The <em>includes</em> attribute gives you a little more flexibility with children, but it's rarely needed.</p> + +<p>One important thing to take into account is that you shouldn't use the <em>id</em> attribute in any <em>content</em> nodes. These nodes are part of the XUL DOM just like any other, and having an <em>id</em> attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same <em>id</em>. In order to work around this problem, the <em>anonid</em> attribute is used instead:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre> <xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" /></pre> +</div> +</div> + +<p>And then, in order to get a reference to the node from the JS code in your binding, we use the <a href="/en/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute" title="en/XBL/XBL 1.0 Reference/DOM Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a> DOM method:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let nameLabel = + document.getAnonymousElementByAttribute( + this, "anonid", "xulshoolhello-name-label");</pre> +</div> +</div> + +<h2 id="Implementation">Implementation</h2> + +<p>The <a href="/en/XBL/XBL_1.0_Reference/Binding_Implementations" title="en/XBL/XBL 1.0 Reference/Binding Implementations">implementation</a> section defines most of the scripting side of your element. Here you can define methods and properties, as well as a <a href="/en/XBL/XBL_1.0_Reference/Elements#constructor" title="en/XBL/XBL 1.0 Reference/Elements#constructor">constructor</a> and a <a href="/en/XBL/XBL_1.0_Reference/Elements#destructor" title="en/XBL/XBL 1.0 Reference/Elements#destructor">destructor</a> for your element. JavaScript code is enclosed in <em>CDATA</em> sections to prevent JS and XML syntax conflicts.</p> + +<h3 id="Properties_and_Fields">Properties and Fields</h3> + +<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#field" title="en/XBL/XBL 1.0 Reference/Elements#field">field</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#property" title="en/XBL/XBL 1.0 Reference/Elements#property">property</a> tags allow you to handle element variables and access them from outside of the element.</p> + +<p>A <em>field</em> holds a value that can be changed, except when the <em>readonly</em> attribute is set. It's very similar to a JS object variable, and we generally use a <em>field</em> for private variables inside of the element.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><field name="fieldName">defaultValue</field></pre> +</div> +</div> + +<p>From inside your binding methods, you can access fields with:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this.fieldName</pre> +</div> +</div> + +<p>You can also access them from outside of the element, if you have a reference to it:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">elementRef.fieldName</pre> +</div> +</div> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Just like with JS objects, all fields are publicly accessible, and we use a "_" to indicate a field is "private". </div> +</div> +</div> + +<p>A <em>property</em> is a little more robust. It is defined using a getter and setter method, allowing read-only and write-only properties, as well as more complex behavior. There are two properties defined in our binding, which are just meant for easier access to the two text attributes in the element. We use the shorthand version of the <em>property</em> tag:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><property name="name" onget="return this.getAttribute('name');" + onset="this.setAttribute('name', val);" /></pre> +</div> +</div> + +<p>There's a less compact version of the property tag that should be used if the getter or setter code involves more than one line of code:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><property name="name"> + <getter><![CDATA[ + return this.getAttribute('name'); + ]]></getter> + <setter><![CDATA[ + this.setAttribute('name', val); + ]]></setter> +</property></pre> +</div> +</div> + +<p>Properties can be accessed just the same as fields, and they're the ones we prefer for public members.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">When you add a node to a XUL document using an XBL binding, all normal DOM operations can be performed on it. You can move it around, delete it or clone it. But there is one thing you need to know about moving or cloning your node: <strong>all internal state in the node will be lost</strong>. This means that all your properties and fields will be reset. If you want some value to be preserved after such DOM operations, you must set it as an attribute and not an internal value.</div> +</div> +</div> + +<h3 id="Methods">Methods</h3> + +<p>Our "Person" binding has a single method that removes the item from the list:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><method name="remove"> + <parameter name="aEvent" /> + <body><![CDATA[ + this.parentNode.removeChild(this); + ]]></body> +</method></pre> +</div> +</div> + +<p>As you can see, it's very easy to define a method and the parameters it takes. You can also have a return value using the <em>return</em> keyword, just like on regular JS code. The method uses the parent node to remove the Person node. Simple enough.</p> + +<p>You can do almost anything from XBL code, including using XPCOM components, JS Code Modules and available chrome scripts. The main setback is that you can't have <em>script</em> tags defined in a binding, so you depend on the scripts that have been included in the XUL files that use the binding. Also unlike scripts, you can include stylesheets using the <a href="/en/XBL/XBL_1.0_Reference/Elements#stylesheet" title="en/XBL/XBL 1.0 Reference/Elements#stylesheet">stylesheet</a> XBL element. DTD and properties files can be handled just like in regular XUL.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">There are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic. Encapsulation mandates that you try to keep your XBL free of outside dependencies. That is, you shouldn't assume that script X will be included somewhere, because not including it will cause the binding to fail. This suggests that you should keep everything inside your binding. On the other hand, a binding is really just a presentation module. Most XUL elements have basic presentation logic, and any other functionality is processed elsewhere. Plus, XBL files are significantly harder to manage than regular JS files. We prefer to err on the side of simplicity and keep the XBL as simple as possible. If that means having outside dependencies, so be it. But you can still keep some separation and versatility by using custom events to communicate to the outside world. This way you reduce your dependency on specific scripts, and your tag behaves more like the rest.</div> +</div> +</div> + +<p>Just like fields and properties, methods are easy to invoke if you have a reference to the object that corresponds to the node.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">We have experienced problems when calling methods and setting properties on XBL nodes right after they are created and inserted to the document. This is likely due to some asynchronous operation related to node insertion. If you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well).</div> +</div> +</div> + +<h2 id="Handlers">Handlers</h2> + +<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#handlers" title="en/XBL/XBL 1.0 Reference/Elements#handlers">handlers</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#handler" title="en/XBL/XBL 1.0 Reference/Elements#handler">handler</a> XBL elements are used to define event handlers for the element. We have a "click" handler that displays the greeting when the "Person" element is clicked:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><handler phase="bubbling" event="click"><![CDATA[ + window.alert(this.greeting); +]]></handler></pre> +</div> +</div> + +<p>Handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing. In those cases you just add regular event attributes to the nodes inside the <em>content</em> tag.</p> + +<h2 id="Inheritance">Inheritance</h2> + +<p>Inheritance is one of the most powerful features of XBL. It allows you to create bindings that extend existing bindings, allowing lots of code reuse and subtle behavior modifications. All you need is to use the <em>extends</em> attribute of the binding element:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><binding id="manager" + extends="chrome://xulschoolhello/content/person.xml#person"></pre> +</div> +</div> + +<p>This gives you an exact copy of the "Person" binding that you can override as you please.</p> + +<p>You could, for instance, just add a <em>content</em> tag with significantly different XUL content, and leave the <em>implementation</em> alone. You do need to be careful about keeping all <em>anonid</em> attributes consistent, and even some DOM structure if the code does node traversal. Sadly, you can't override only some part of the content. If you want to override it, you have to override all of it.</p> + +<p>A more common inheritance use case is when you want to change the behavior of some methods and properties. You can leave the content alone by not including the <em>content</em> tag, and then just add the methods and properties you wish to override. All you need to do is match the names of the originals. All methods and properties that are not overriden will maintain their original behavior.</p> + +<p>With inheritance you could take the <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a> element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked. And all with very little additional code. Keep it in mind when creating your custom elements because it can save you lots of time.</p> + +<h2 id="Replacing_Existing_XUL_Elements">Replacing Existing XUL Elements</h2> + +<p>As seen in the beginning of this section, the actual binding process is determined by a simple CSS rule that associates the tag name with the binding. This means that you can change the binding for pretty much any element in Firefox by just adding a CSS rule! This is very powerful: it allows you to change almost any aspect of the interface of any XUL window. In conjuntion with inheritance, it's even easy to do. You can enrich the UI of a Firefox window by extending and replacing elements, which is what the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console²</a> extension does in order to improve the Error Console window.</p> + +<p>Replacing elements should always be a last resort solution, specially if it is done on the main browser window. It's very easy to break the UI of the application or other extensions if you do this the wrong way, so be very careful about it. If you only need to change some specific instances of an element, use very specific CSS rules.</p> + +<p>You can use the <a href="/en/CSS/-moz-binding" title="en/CSS/-moz-binding">-moz-binding</a> property with any CSS selector.</p> + +<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> + +<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p> + +<blockquote> +<p><strong>XML Binding Language</strong> (<strong>XBL</strong>, sometimes also called Extensible Bindings Language) is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the <em>bound element</em>, acquires the new behavior specified by the binding.</p> +</blockquote> + +<p>Taken from the <a href="/en/XBL" title="en/XBL">XBL page</a>.</p> + +<p>This somewhat cryptic explanation describes a very simple concept: with XBL you can create your own custom elements. XBL is heavily used in XUL, but in theory it could be applied to any XML language. XBL was submitted to the <a class="external" href="http://w3.org/">W3C</a> for standardization, but for now it's used in XUL almost exclusively.</p> + +<p>With XBL you can define new elements and define their properties, attributes, methods and event handlers. Many complex elements such as tabs, buttons and input controls are implemented using XBL and simpler XUL elements. As explained earlier, XUL is really just boxes, text and images.</p> + +<p>We'll look into XBL using a modified version of the Hello World extension. Download the <a href="/@api/deki/files/5146/=HelloWorld6.zip" title="https://developer.mozilla.org/@api/deki/files/5146/=HelloWorld6.zip">Hello World XBL project</a>, build it and test it for a while. You should see a new item in the Hello World menu, that opens a Binding Test window where you can add "Persons" to a list.</p> + +<h2 id="XBL_Basics_2">XBL Basics</h2> + +<p>In order to create an XBL binding you'll need 2 files: the XBL file and a CSS file that binds an element name to your XBL declaration. If you look into the <em>content</em> directory, you'll see both files:</p> + +<ul> + <li><em>person.xml</em> - this is the main binding file. It holds all the code necessary to control the new element we created. We'll look into the code throughout the rest of this section. For now, just notice the opening part of the <em>binding</em> element: <em><binding id="person"></em>.</li> + <li><em>bindings.css</em> - this is the file that associates the element name to the XBL file. It associates the <em>xshelloperson</em> element name to the binding defined in the XBL file. Since you can have more than one binding per file, the "#person" part points to the id of the one we want. This CSS file is located in the content because it's not something we would normally want to be replaced by a skin, and it's not really defining style; it defines content behavior instead.</li> +</ul> + +<div class="note">If you use bindings on toolbar elements, remember to include the CSS file in the customize dialog, using the <em>style</em> directive in the <em>chrome.manifest</em> file.</div> + +<p>With those 2 files properly defined, we can now use the new element. If you look at file <em>bindingDialog.xul</em>, you'll see that the CSS stylesheet is included, which means that the <em>xshelloperson</em> tag can now be used just like any XUL tag. In this case we're adding the "Persons" dynamically, so you'll have to look into the JS file to see how <em>xshelloperson</em> elements are created and added to the DOM just like any other.</p> + +<pre class="brush: js">addPerson : function(aEvent) { + // ... + let person = document.createElement("xshelloperson"); + // ... + person.setAttribute("name", name); + person.setAttribute("greeting", greeting); + // ... + personList.appendChild(person); + // ... +}, +</pre> + +<p>This is where the advantage of XBL is obvious: we only need to create a single node and set some attributes. We didn't need to create a whole XUL structure that would require around 7 nodes <strong>every time</strong> a "Person" is created. XBL provides the encapsulation we needed to manage these nodes as a unit.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">As a bonus, you should look into the usage of <a href="/en/XPCOM_Interface_Reference/nsIFilePicker" title="en/NsIFilePicker">nsIFilePicker</a> to open a "Open File" dialog in a way that looks native for all systems.</div> +</div> +</div> + +<p>Now let's look into the XBL file, <em>p</em><em>erson.xml.</em></p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><bindings xmlns="http://www.mozilla.org/xbl" + xmlns:xbl="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></pre> +</div> +</div> + +<p>The <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a> element is the root of the document, and it's a container for <a href="/en/XUL/binding" title="en/XUL/binding">binding</a> elements. Notice how the default namespace for the document is XBL, and the XUL namespace is defined as "xul". You'll need to keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><binding id="person"></pre> +</div> +</div> + +<p>In general, you should only have one binding per file. Bindings tend to require many lines of code, and having more than one ends up making gigantic, unbrowsable files. On the other hand, if your bindings are small and have a strong relationship with each other, it makes sense to keep them together. As for the CSS file, it's usually good to have a single file declaring all bindings in your extension.</p> + +<h2 id="Content_2">Content</h2> + +<p>Under the <a href="/en/XBL/XBL_1.0_Reference/Elements#content" title="en/XBL/XBL 1.0 Reference/Elements#content">content</a> tag you define the XUL content that will be displayed for your element.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><content> + <xul:hbox> + <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> + <xul:vbox flex="1"> + <xul:label xbl:inherits="value=name" /> + <xul:description xbl:inherits="value=greeting" /> + </xul:vbox> + <xul:vbox> + <xul:button label="&xulshoolhello.remove.label;" + accesskey="&xulshoolhello.remove.accesskey;" + oncommand="document.getBindingParent(this).remove(event);" /> + </xul:vbox> + </xul:hbox> +</content></pre> +</div> +</div> + +<p>Our element is very simple, displaying an image, a couple of text lines and a button. Here are a couple of important things to notice:</p> + +<ul> + <li>The "xul:" namespace must be used for all XUL tags you have in your content.</li> + <li>The <em>xbl:inherits</em> attribute lets your inner XUL use the attributes that are set on the node. So, if you have this: <em><xshelloperson name="Pete" greeting="Good morning" image="" /></em>, then those attribute values are "inherited" to the content nodes that have this special attribute. The <em>value</em> attribute of the <em>xul:label</em> element would be "Pete".</li> + <li>The <em>oncommand</em> attribute of the button has some code you've probably never seen before: <em>document.getBindingParent(this)</em>. This code gets the DOM object that corresponds to the <em>xshelloperson</em> tag, allowing you access to its methods and properties. In this case we're calling the <em>remove</em> method, which we will discuss later on.</li> +</ul> + +<p>If you need to create a container element, or any other element that has child nodes, you can use the XBL <a href="/en/XBL/XBL_1.0_Reference/Elements#children" title="en/XBL/XBL 1.0 Reference/Elements#children">children</a> tag in your content to indicate the place where the child nodes will be inserted. The <em>includes</em> attribute gives you a little more flexibility with children, but it's rarely needed.</p> + +<p>One important thing to take into account is that you shouldn't use the <em>id</em> attribute in any <em>content</em> nodes. These nodes are part of the XUL DOM just like any other, and having an <em>id</em> attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same <em>id</em>. In order to work around this problem, the <em>anonid</em> attribute is used instead:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre> <xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" /></pre> +</div> +</div> + +<p>And then, in order to get a reference to the node from the JS code in your binding, we use the <a href="/en/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute" title="en/XBL/XBL 1.0 Reference/DOM Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a> DOM method:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let nameLabel = + document.getAnonymousElementByAttribute( + this, "anonid", "xulshoolhello-name-label");</pre> +</div> +</div> + +<h2 id="Implementation_2">Implementation</h2> + +<p>The <a href="/en/XBL/XBL_1.0_Reference/Binding_Implementations" title="en/XBL/XBL 1.0 Reference/Binding Implementations">implementation</a> section defines most of the scripting side of your element. Here you can define methods and properties, as well as a <a href="/en/XBL/XBL_1.0_Reference/Elements#constructor" title="en/XBL/XBL 1.0 Reference/Elements#constructor">constructor</a> and a <a href="/en/XBL/XBL_1.0_Reference/Elements#destructor" title="en/XBL/XBL 1.0 Reference/Elements#destructor">destructor</a> for your element. JavaScript code is enclosed in <em>CDATA</em> sections to prevent JS and XML syntax conflicts.</p> + +<h3 id="Properties_and_Fields_2">Properties and Fields</h3> + +<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#field" title="en/XBL/XBL 1.0 Reference/Elements#field">field</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#property" title="en/XBL/XBL 1.0 Reference/Elements#property">property</a> tags allow you to handle element variables and access them from outside of the element.</p> + +<p>A <em>field</em> holds a value that can be changed, except when the <em>readonly</em> attribute is set. It's very similar to a JS object variable, and we generally use a <em>field</em> for private variables inside of the element.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><field name="fieldName">defaultValue</field></pre> +</div> +</div> + +<p>From inside your binding methods, you can access fields with:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this.fieldName</pre> +</div> +</div> + +<p>You can also access them from outside of the element, if you have a reference to it:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">elementRef.fieldName</pre> +</div> +</div> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Just like with JS objects, all fields are publicly accessible, and we use a "_" to indicate a field is "private". </div> +</div> +</div> + +<p>A <em>property</em> is a little more robust. It is defined using a getter and setter method, allowing read-only and write-only properties, as well as more complex behavior. There are two properties defined in our binding, which are just meant for easier access to the two text attributes in the element. We use the shorthand version of the <em>property</em> tag:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><property name="name" onget="return this.getAttribute('name');" + onset="this.setAttribute('name', val);" /></pre> +</div> +</div> + +<p>There's a less compact version of the property tag that should be used if the getter or setter code involves more than one line of code:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><property name="name"> + <getter><![CDATA[ + return this.getAttribute('name'); + ]]></getter> + <setter><![CDATA[ + this.setAttribute('name', val); + ]]></setter> +</property></pre> +</div> +</div> + +<p>Properties can be accessed just the same as fields, and they're the ones we prefer for public members.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">When you add a node to a XUL document using an XBL binding, all normal DOM operations can be performed on it. You can move it around, delete it or clone it. But there is one thing you need to know about moving or cloning your node: <strong>all internal state in the node will be lost</strong>. This means that all your properties and fields will be reset. If you want some value to be preserved after such DOM operations, you must set it as an attribute and not an internal value.</div> +</div> +</div> + +<h3 id="Methods_2">Methods</h3> + +<p>Our "Person" binding has a single method that removes the item from the list:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><method name="remove"> + <parameter name="aEvent" /> + <body><![CDATA[ + this.parentNode.removeChild(this); + ]]></body> +</method></pre> +</div> +</div> + +<p>As you can see, it's very easy to define a method and the parameters it takes. You can also have a return value using the <em>return</em> keyword, just like on regular JS code. The method uses the parent node to remove the Person node. Simple enough.</p> + +<p>You can do almost anything from XBL code, including using XPCOM components, JS Code Modules and available chrome scripts. The main setback is that you can't have <em>script</em> tags defined in a binding, so you depend on the scripts that have been included in the XUL files that use the binding. Also unlike scripts, you can include stylesheets using the <a href="/en/XBL/XBL_1.0_Reference/Elements#stylesheet" title="en/XBL/XBL 1.0 Reference/Elements#stylesheet">stylesheet</a> XBL element. DTD and properties files can be handled just like in regular XUL.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">There are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic. Encapsulation mandates that you try to keep your XBL free of outside dependencies. That is, you shouldn't assume that script X will be included somewhere, because not including it will cause the binding to fail. This suggests that you should keep everything inside your binding. On the other hand, a binding is really just a presentation module. Most XUL elements have basic presentation logic, and any other functionality is processed elsewhere. Plus, XBL files are significantly harder to manage than regular JS files. We prefer to err on the side of simplicity and keep the XBL as simple as possible. If that means having outside dependencies, so be it. But you can still keep some separation and versatility by using custom events to communicate to the outside world. This way you reduce your dependency on specific scripts, and your tag behaves more like the rest.</div> +</div> +</div> + +<p>Just like fields and properties, methods are easy to invoke if you have a reference to the object that corresponds to the node.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">We have experienced problems when calling methods and setting properties on XBL nodes right after they are created and inserted to the document. This is likely due to some asynchronous operation related to node insertion. If you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well).</div> +</div> +</div> + +<h2 id="Handlers_2">Handlers</h2> + +<p>The <a href="/en/XBL/XBL_1.0_Reference/Elements#handlers" title="en/XBL/XBL 1.0 Reference/Elements#handlers">handlers</a> and <a href="/en/XBL/XBL_1.0_Reference/Elements#handler" title="en/XBL/XBL 1.0 Reference/Elements#handler">handler</a> XBL elements are used to define event handlers for the element. We have a "click" handler that displays the greeting when the "Person" element is clicked:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><handler phase="bubbling" event="click"><![CDATA[ + window.alert(this.greeting); +]]></handler></pre> +</div> +</div> + +<p>Handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing. In those cases you just add regular event attributes to the nodes inside the <em>content</em> tag.</p> + +<h2 id="Inheritance_2">Inheritance</h2> + +<p>Inheritance is one of the most powerful features of XBL. It allows you to create bindings that extend existing bindings, allowing lots of code reuse and subtle behavior modifications. All you need is to use the <em>extends</em> attribute of the binding element:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre><binding id="manager" + extends="chrome://xulschoolhello/content/person.xml#person"></pre> +</div> +</div> + +<p>This gives you an exact copy of the "Person" binding that you can override as you please.</p> + +<p>You could, for instance, just add a <em>content</em> tag with significantly different XUL content, and leave the <em>implementation</em> alone. You do need to be careful about keeping all <em>anonid</em> attributes consistent, and even some DOM structure if the code does node traversal. Sadly, you can't override only some part of the content. If you want to override it, you have to override all of it.</p> + +<p>A more common inheritance use case is when you want to change the behavior of some methods and properties. You can leave the content alone by not including the <em>content</em> tag, and then just add the methods and properties you wish to override. All you need to do is match the names of the originals. All methods and properties that are not overriden will maintain their original behavior.</p> + +<p>With inheritance you could take the <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a> element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked. And all with very little additional code. Keep it in mind when creating your custom elements because it can save you lots of time.</p> + +<h2 id="Replacing_Existing_XUL_Elements_2">Replacing Existing XUL Elements</h2> + +<p>As seen in the beginning of this section, the actual binding process is determined by a simple CSS rule that associates the tag name with the binding. This means that you can change the binding for pretty much any element in Firefox by just adding a CSS rule! This is very powerful: it allows you to change almost any aspect of the interface of any XUL window. In conjuntion with inheritance, it's even easy to do. You can enrich the UI of a Firefox window by extending and replacing elements, which is what the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console²</a> extension does in order to improve the Error Console window.</p> + +<p>Replacing elements should always be a last resort solution, specially if it is done on the main browser window. It's very easy to break the UI of the application or other extensions if you do this the wrong way, so be very careful about it. If you only need to change some specific instances of an element, use very specific CSS rules.</p> + +<p>You can use the <a href="/en/CSS/-moz-binding" title="en/CSS/-moz-binding">-moz-binding</a> property with any CSS selector.</p> + +<p>{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/sitios_útiles_de_la_comunidad_mozilla/index.html b/files/es/mozilla/tech/xul/escuela_xul/sitios_útiles_de_la_comunidad_mozilla/index.html new file mode 100644 index 0000000000..02cd9bfa0f --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/sitios_útiles_de_la_comunidad_mozilla/index.html @@ -0,0 +1,46 @@ +--- +title: Sitios útiles de la comunidad Mozilla +slug: Mozilla/Tech/XUL/Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Useful_Mozilla_Community_Sites +--- +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p> + +<p>{{ Previous("Escuela_XUL/Documentación_de_Mozilla") }}</p> + +<p>The Mozilla Community is very rich and active. It's a very powerful tool you have when developing on top of the Mozilla platform, and you should take advantage of it in order to create a truly successful add-on .</p> + +<h2 id="AMO">AMO</h2> + +<p><a class="link-https" href="https://addons.mozilla.org/" title="https://addons.mozilla.org/">AMO</a> (Mozilla Add-ons) is the official Mozilla repository for add-ons. It allows you to upload, search and download all types of add-ons for Mozilla applications. This is the best way to get your extension to users from all around the world.</p> + +<p>Adding your extension to AMO is easy. All you need is your XPI, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. But this won't make your extension public right away. AMO has a <a class="external" href="http://blog.mozilla.com/addons/2010/02/15/the-add-on-review-process-and-you/" title="http://blog.mozilla.com/addons/2010/02/15/the-add-on-review-process-and-you/">Review Process</a> that prevents malicious, insecure or low quality extensions to make it to the public site. Your extension begins in a sandbox with limited access, and once you nominate it an editor will review it and see if it is appropriate for the public AMO site, where everyone can see it and install it. The review process often takes a few weeks. Just be patient and make sure your extension follows <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/policies/" title="https://addons.mozilla.org/en-US/developers/docs/policies/">AMO's policies</a> when you nominate it. You can still get a good number of downloads while being in the sandbox.</p> + +<p>One of the main advantages of using AMO is that it handles updates automatically for published add-ons. You just need to upload a new version of your extension, and once it's approved it will be pushed as an update to all your users. If you decide to host your own extension, you'll have to learn about the <a href="/en/Extension_Versioning,_Update_and_Compatibility#Update_RDF_Format" title="en/Extension Versioning, Update and Compatibility#Update RDF Format">update system</a> in order to push your own updates.</p> + +<h2 id="Babelzilla">Babelzilla</h2> + +<p><a class="external" href="http://www.babelzilla.org/" title="http://www.babelzilla.org/">Babelzilla</a> is a worldwide community of localizers. Developers submit their extensions using the Web Translation System (WTS) and volunteers around the world translate them to different languages. The community is very active, and you can be sure to get translations for the most commonly used languages within a few days of submitting your extension. You'll also receive feedback that you wouldn't notice by testing only in one language, which can reveal other bugs in your locale handling.</p> + +<p>There's a significant portion of users that use a localized version of Firefox, so you shouldn't neglect them. Using Babelzilla takes little time and is very valuable.</p> + +<h2 id="Mozdev">Mozdev</h2> + +<p><a class="external" href="http://www.mozdev.org/" title="http://www.mozdev.org/">mozdev.org</a> provides free project hosting and software development tools for Mozilla applications and add-ons. It is the only hosting service tailored to the needs of the Mozilla community.</p> + +<p>It offers many necessary services such as bug tracking, source code repositories, download mirrors and many communication tools. There are other free hosting sites such as Souceforge and Google Code that are also very good, but not as specialized as Mozdev. You should pick the one that best fits your development needs.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>That's it!</p> + +<p>This is the end of the XUL School Tutorial. Hopefully this guide has helped you get started with add-on development and you're on your way to joining the large Mozilla add-ons developer community. The sheer volume of material can be overwhelming, but you can always come back and use this tutorial as a reference for your future development. Now all you need is a <a class="link-https" href="https://forums.addons.mozilla.org/viewforum.php?f=28" title="https://forums.addons.mozilla.org/viewforum.php?f=28">good idea</a> (in case you didn't have one already) and get started.</p> + +<p>Happy coding!</p> + +<p>{{ Previous("Escuela_XUL/Documentación_de_Mozilla") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html b/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html new file mode 100644 index 0000000000..ceca9d687d --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html @@ -0,0 +1,338 @@ +--- +title: Uso de objetos en JavaScript +slug: Mozilla/Tech/XUL/Escuela_XUL/Uso_de_objetos_en_JavaScript +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/JavaScript_Object_Management +--- +<p>{{AddonSidebar}}</p> + +<div class="blockIndicator warning"> +<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> +</div> + +<p>{{LegacyAddonsNotice}}</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_laterales", "Escuela_XUL/Objetos_XPCOM") }}</p> + +<h2 id="Chrome_JavaScript">Chrome JavaScript</h2> + +<p>In this section we'll look into how to handle JavaScript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.</p> + +<p>The first step to good JavaScript object management is having a namespace that you know will not conflict with Firefox code or other extensions. Namespace declaration is best located in a file of its own, so that you have this one JS file that should be included in all of your XUL files.</p> + +<p>We'll be using the placeholder <span class="namespace-name" style="color: gray;">〈Namespace〉</span> below. This needs to be replaced with an identifier name which is unique to your add-on. If your add-on is called <em>Sergeant Pepper</em>, for instance, then <code>SgtPepper</code> would be a good namespace name.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * <span class="namespace-name" style="color: gray;">〈Namespace〉</span> namespace. + */ +if (typeof <span class="namespace-name" style="color: gray;">〈Namespace〉</span> == "undefined") { + var <span class="namespace-name" style="color: gray;">〈Namespace〉</span> = {}; +}; +</pre> +</div> +</div> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">The naming standard that we normally follow is that the first part of the namespace corresponds to the development group (or company), and the second to the specific project. However, most extensions are small projects by individuals, so these examples follow a more practical approach of having just one namespace with the project name.</div> +</div> +</div> + +<p>Notice how the <span class="namespace-name" style="color: gray;">〈Namespace〉</span> namespace is declared using <em>var</em>. We need the namespace to be a global object that it can be used everywhere in the window chrome.</p> + +<p>You can include functions in any namespace, since namespaces are just regular JS objects. That should come in handy when you have general utility functions or properties that you want to use across all objects within the namespace. For instance, there are frequently used XPCOM services such as the Observer service that can be included as members in the namespace:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * <span class="namespace-name" style="color: gray;">〈Namespace〉</span> namespace. + */ +if (typeof <span class="namespace-name" style="color: gray;">〈Namespace〉</span> == "undefined") { + var <span class="namespace-name" style="color: gray;">〈Namespace〉</span> = { + /** + * Initializes this object. + */ + init : function() { + this.obsService = + Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService); + } + }; + + /** + * Constructor. + */ + (function() { + this.init(); + }).apply(<span class="namespace-name" style="color: gray;">〈Namespace〉</span>); +}; +</pre> +</div> +</div> + +<p>JS objects can also be treated as string-indexed arrays:</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">// equivalent. +<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.Hello = {}; +<span class="namespace-name" style="color: gray;">〈Namespace〉</span>["Hello"] = {}; + +// equivalent. +<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.Hello.init(); +<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.Hello["init"](); +</pre> +</div> +</div> + +<p>This is very useful in cases where you have to set attributes or functions with dynamically generated names. It's one of the funky properties of JavaScript: all objects are nothing more than name / value mappings. You can add or replace functions and attributes to any Javascript object, at any moment you want. This is an odd, but powerful feature that comes in handy at times when things get complicated. For instance, you could replace a method in any object in the Firefox chrome, so that it behaves differently than how it normally does. This should be a last resort option, but it is very useful at times.</p> +</div> +</div> + +<p>You usually need only one JS file to control a XUL window, since the code required is normally not that much. If you have complex behavior that requires too much code, look for ways to divide it into multiple objects and files. You can include as many scripts in a XUL window as you need.</p> + +<p>To initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window. The <a href="/en/XUL/Attribute/onload" title="en/XUL/Attribute/onload">load event</a> is fired after the DOM on the window has loaded completely, but before it's displayed to the user. This allows you to manipulate and possibly change elements in the window without the user noticing the changes.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * Controls the browser overlay <span class="code-keyword">for</span> the Hello World extension. + */ +<span class="namespace-name" style="color: gray;">〈Namespace〉</span>.BrowserOverlay = { + /** + * Initializes this object. + */ + init : function(aEvent) { + this._stringBundle = document.getElementById("xulschoolhello-string-bundle"); + // you can make changes to the window DOM here. + } + // more stuff +}; + +window.addEventListener( + "load", function() { <span class="namespace-name" style="color: gray;">〈Namespace〉</span>.BrowserOverlay.init(); }, false); +</pre> +</div> +</div> + +<p>There are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs. The window has to finish loading before it can do any of these things. They are bad UI practices anyway and you should avoid them. If you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">init : function(aEvent) { + let that = this; + + this._stringBundle = document.getElementById("xs-hw-string-bundle"); + window.setTimeout( + function() { + window.alert(that._stringBundle.getString("xulschoolhello.greeting.label")); }, 0); +} +</pre> +</div> +</div> + +<p>The <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">setTimeout</a> function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter. In this case we set the delay to 0, which means the function should be executed as soon as possible. Firefox has a minimum delay of 10-15ms (taken from <a class="external" href="http://ejohn.org/blog/analyzing-timer-performance/">this blog post</a>), so it won't really run instantly. It is more than enough to let the window finish its load.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Use <a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout">window.setTimeout</a> and <a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval">window.setInterval</a> to control timed code execution. In case you're using JavaScript Code Modules or XPCOM objects, where a window object is not readily available, use an <a href="/en/XPCOM_Interface_Reference/nsITimer" title="en/nsITimer">nsITimer</a> instead. </div> +</div> +</div> + +<div class="note"><a class="external" href="http://dbaron.org/log/20100309-faster-timeouts" title="http://dbaron.org/log/20100309-faster-timeouts">This post</a> suggests a way to achieve a true zero ms timeout, as a simple way to achieve parallelism in JS code.</div> + +<p>Notice the way we send callback functions as parameters, and the use of an alternate reference for <em>this</em> which we always name <em>that</em>. This is all necessary due to a JavaScript feature (quirk would be a better word for it) called <a href="/en/JavaScript/Reference/Operators/Special/this" title="en/Core JavaScript 1.5 Reference/Operators/Special Operators/this Operator">Method Binding</a>. The consequence of doing this wrong is to have a <em>this</em> reference that doesn't do what you expected it to do. There are a few workarounds for this, and we use the ones we have found to be the most elegant and clear to read.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">The general guideline we follow is this: whenever you have to set a callback function parameter, wrap it in an anonymous function. That is, something like <em>function() { /* your code, usually a single function call. */ }</em>. If you have to use a reference to <em>this</em> inside the function, declare a variable called <em>that</em> that equals <em>this</em>, and use <em>that</em> in the anonymous function.</div> +</div> +</div> + +<p>JavaScript has a host of features that make it extremely flexible, but it also has some disadvantages, as it is not as strict as other languages, such as Java. A clear example of this is the fact that there are no <em>private</em> or <em>public</em> keywords that allow you to protect object members. As a alternative for this, a naming standard is frequently used to distinguish private and public members. There's no scope enforcement whatsoever, but this standard give others the chance to "play nice" and don't use private members.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Use "<em>_"</em> at the beginning of private attributes and methods in JS objects. For example: <em>_stringBundle</em>, <em>_createUserNode()</em>.</div> +</div> +</div> + +<h3 id="Exercise">Exercise</h3> + +<p>Here's a short exercise to test a particular aspect of the chrome. Modify the Hello World extension so that the message says how many times it has been displayed. The message could say something like "Hello! This message has been shown 5 times." Keep the counter as a variable in the <em>BrowserOverlay</em> object, and increment it every time the message is going to be shown.</p> + +<p>Once you have this working right, try the following: open the message a few times, so that the number increments. Now open a new window and display the message from the new window. What do you think will happen? What will the count be this time?</p> + +<p>You probably didn't expect this, but the count was reset in the new window. Each window keeps its own counter, and now the extension is not behaving as expected. This is a fundamental lesson: <strong>the chrome is not global, it's window-specific.</strong> All of your scripts and objects are replicated for each window, and they work independently from each other. This is an issue that is very easy to overlook, since most Firefox users, specially power users, have a single window open at all times. You have to make sure you test your extension with multiple windows open; never assume everything will work the same as with a single window.</p> + +<p>Now, in most cases you'll need to coordinate data in a way that it is consistent for all open Firefox windows. There are several ways in which you can do this. Preferences is one of them, and they are covered in another section of this tutorial. Two other ways are JavaScript Code Modules (Firefox 3 and above), and XPCOM.</p> + +<h2 id="JavaScript_Code_Modules">JavaScript Code Modules</h2> + +<p><a href="/en/JavaScript_code_modules/Using" title="en/Using JavaScript code modules">JavaScript Code Modules</a> (also known as JSM) are new to Firefox 3, and they're the best tool for keeping everything in sync between windows. They're very simple to set up. The first thing you need to do is add an entry in the <em>chrome.manifest</em> file:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">resource xulschoolhello modules/ +</pre> +</div> +</div> + +<p>Javascript code modules are accessed with the <em>resource</em> protocol, which is very similar to the <em>chrome</em> protocol. Just like with the chrome, we define the package name and then a path. To keep things simple, just locate the JSM files in a <em>modules</em> directory under the root of our project. In order to access a file <em>messageCount.js</em> in this directory, the URL would be:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java">resource:<span class="code-comment">//xulschoolhello/messageCount.js</span> +</pre> +</div> +</div> + +<p>Code modules are regular JS files, so there's nothing new in regards to naming or file types. Mozilla has adopted a standard of using the extension <em>.jsm</em> for these files, but they say <em>.js</em> is fine as well. To keep things simple, specially regarding code editors and default file associations in the developer's system, we have decided to stick with <em>.js</em>.</p> + +<p>Download this version of the <a href="/@api/deki/files/5143/=HelloWorld3.zip" title="https://developer.mozilla.org/@api/deki/files/5143/=HelloWorld3.zip">Hello World project with JSM</a> to see the changes you need to make to the build system in order to include the files in the <em>modules</em> folder. They are minimal, and we add a very small <em>Makefile.in</em> file in the <em>modules</em> directory, just to keep everything separated and organized.</p> + +<p>With the setup out of the way, let's get to it. What are JavaScript Code Modules?</p> + +<p>A JavaScript Code Module is a regular JS file that specifies which of the declared elements in it are public. All module files should begin with the a declaration like this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="code-java"><span class="code-keyword">var</span> EXPORTED_SYMBOLS = [ <span class="code-quote">"<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>"</span> ]; +</pre> +</div> +</div> + +<p>EXPORTED_SYMBOLS is a special identifier that tells Firefox that this file is only publishing the object named <em><span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span></em>. Several objects, functions and variables can be declared on this file, but the only object visible from the outside will be <em><span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span></em>, which is a namespace in our case. Because of namespacing, we don't need to worry much about what to export, usually we just need the namespace object. All of the objects inside of it are exported as well, since they are members of the <em><span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span></em> object.</p> + +<p>Module files can be imported to a chrome script or to other code modules with the following line:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">Components.utils.import("<a class="external" rel="freelink">resource://xulschoolhello/messageCount.js</a>"); +</pre> +</div> +</div> + +<div class="note">When using <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a>, code modules must be loaded using a <strong>file:</strong> or <strong>resource:</strong> URL pointing to a file on the disk. In particular, <strong>chrome:</strong> URLs (even those that point to a file outside a jar archive) are not valid.</div> + +<p>To get a better idea, let's look at the code of the modified Hello World example. We have defined two files, one to declare namespaces and another one for the message count functionality mentioned in the previous exercise.</p> + +<p>Here again we're using a placeholder, <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>, for the identifier name that you'll need to choose.</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">var EXPORTED_SYMBOLS = [ "<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>" ]; + +const { classes: Cc, interfaces: Ci } = Components; + +/** + * <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span> namespace. + */ +var <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span> = {}; +</pre> +</div> +</div> + +<p>This should all be familiar enough. We're declaring the namespace we'll use at the module level. We need a separate namespace for the chrome because the chrome namespace objects are repeated for each window, while the module namespace objects are unique for all windows. Setting window-specific data on code modules will lead to nothing but problems, so be careful when deciding what should be chrome and what shouldn't be. We needn't test for the pre-existence of our namespace object here, as modules are given their own namespace.</p> + +<p>The 2 declared constants above are used to reduce code size. We frequently need to use XPCOM components in our code, so instead of doing this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this.obsService = + Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService); +</pre> +</div> +</div> + +<p>It's better to do this:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">this.obsService = + Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService); +</pre> +</div> +</div> + +<p>These 2 constants don't need to be defined in the overlay because they are already defined globally in the <em>browser.js</em> file in Firefox. We only need to define them when we're making windows of our own, or when we're working with code outside of the chrome (or porting your code to SeaMonkey, which doesn't have those constants declared in the main window).</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">Include the Cc and Ci constants in all XUL windows that are not overlays, all JSM files, and all XPCOM components (see further ahead). Do this even if you don't need them now. It's better to just make a habit out of it.</div> +</div> +</div> + +<p>This is a point that is worth highlighting: modules work outside of the window scope. Unlike scripts in the chrome, modules don't have access to objects such as <em>window</em>, <em>document</em>, or other global functions, such as <em>openUILink</em>. These are all UI components and UI operations anyway, so they are better done in the chrome.</p> + +<div class="panel" style="border-width: 1px;"> +<div class="panelContent"> +<div class="note">As a general guideline, we keep all of our business logic in JSM, available through service objects, and chrome scripts are limited to handle presentation logic.</div> +</div> +</div> + +<p>We handle most of our code through static objects, singleton objects that don't require instantiation. But it is sometimes necessary to define classes and be able to create multiple instances. Common cases include interacting with a local database or a remote API. Data will often be translated into arrays of entities, and those are better represented through classes. One way to define a class is as follows:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">/** + * User class. Represents a Hello World user (whatever that may be). + */ +<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>.User = function(aName, aURL) { + this._name = aName; + this._url = aURL; +}; + +/** + * User class methods. + */ +<span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>.User.prototype = { + /* The name of the user. */ + + _name : null, + /* The URL of the user. */ + + _url : null, + + /** + * Gets the user name. + * @<span class="code-keyword">return</span> the user name. + */ + get name() { + return this._name; + }, + + /** + * Gets the user URL. + * @return the user URL. + */ + get url() { + return this._url; + } +}; +</pre> +</div> +</div> + +<p>In this example we defined a fictitious <em>User</em> class for the Hello World extension. Using the function keyword to define a class is odd, but this is just the JavaScript way: functions are also objects. The definition of the class acts as a constructor as well, and then you can define all other members using the <em>prototype</em> attribute. In this case we defined "getter" properties for the <em>name</em> and <em>url</em> members. This way we have immutable instances of our class. Well, only if consumers of the class play nice and don't change anything they shouldn't.</p> + +<p>Creating an instance and using it is simple enough:</p> + +<div class="code panel" style="border-width: 1px;"> +<div class="codeContent panelContent"> +<pre class="brush: js">let user = new <span class="namespace-name" style="color: gray;">〈ModuleNamespace〉</span>.User("Pete", "<a class="external" href="http://example.com/pete" rel="freelink">http://example.com/pete</a>"); + +window.alert(user.name); +</pre> +</div> +</div> + +<p>This is something you can do with JS in general. You can use it in JSM, chrome, even on regular web pages. Since entities tend to be used all throughout an application, we think that having those classes defined at the module level is the best approach.</p> + +<p>JSM is the best solution to handle objects that are window-independent. In the following section we'll discuss XPCOM, which is an older alternative to JSM and one of the foundations of Mozilla applications. You shouldn't skip that section because there are many common situations in extension development where you'll <em>have</em> to use XPCOM, maybe even implement XPCOM components of your own.</p> + +<p>{{ PreviousNext("Escuela_XUL/Agregar_barras_laterales", "Escuela_XUL/Objetos_XPCOM") }}</p> + +<p><span style="font-size: small;">This tutorial was kindly donated to Mozilla by Appcoast.</span></p> diff --git a/files/es/mozilla/thunderbird/index.html b/files/es/mozilla/thunderbird/index.html new file mode 100644 index 0000000000..7e7c314908 --- /dev/null +++ b/files/es/mozilla/thunderbird/index.html @@ -0,0 +1,91 @@ +--- +title: Thunderbird +slug: Mozilla/Thunderbird +translation_of: Mozilla/Thunderbird +--- +<p><strong>Thunderbird</strong> es la aplicación de mensajeria de Mozilla. Estas páginas documentan Thunderbird y tambien brindan enlaces a documentación acerca de <a href="/Special:Tags?tag=MailNews&language=en" title="Special:Tags?tag=MailNews&language=en">MailNews</a> backend el cual es usado en otros proyectos como <a class="external" href="http://wiki.mozilla.org/Penelope">Eudora/Penelope</a>, <a class="external" href="http://www.seamonkey-project.org/">Seamonkey</a>, <a class="external" href="http://nkreeger.com/correo/">Correo</a>, etc. </p> +<p>Thunderbird es el hermano menor de Firefox, y esta construido sobre la misma plataforma técnica que el navegador web. En desarrollo por varios años, y actualmente es uno de los más populares clientes de correo electrónico de código abierto, es utilizado por millones de personas pot todo el mundo para reunir todas las cuentas de correo electrónico, grupo de noticias y alimentar la lectura en un conocido entorno de alta productividad. (A partir de principios del 2007 hasta principios del 2011 Thunderbird fue desarrollado por <a class="link-https" href="https://en.wikipedia.org/wiki/Mozilla_Messaging" title="https://en.wikipedia.org/wiki/Mozilla_Messaging">Mozilla Messaging</a>, una subsidiaria que era propiedad de Mozilla.)</p> +<dl> + <dd> + </dd> +</dl> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=Thunderbird&language=en" title="Special:Tags?tag=Thunderbird&language=en">Documentación</a></h2> + <dl> + <dt> + <a class="internal" href="/en/Simple_Thunderbird_build" title="en/Simple Thunderbird build">Construyendo Thunderbird</a></dt> + <dd> + <small>Información acerca de la construcción de Thunderbird con el repositorio <a href="/en/comm-central" title="en/comm-central">comm-central</a>. También hay informació acerca de <a href="/en/How_comm-central's_build_system_works" title="en/How_comm-central's_build_system_works">how comm-central works</a>, como el <a class="internal" href="/en/Mailnews_and_Mail_code_review_requirements" title="en/Mailnews and Mail code review requirements">review process works</a> y como usar el <a href="/en/Using_the_Mozilla_symbol_server" title="en/Using the Mozilla symbol server">Mozilla symbol server</a> para ayudar con la depuración</small></dd> + <dt> + <a href="/en/MailNews_Protocols" title="en/MailNews_Protocols">Protocolos MailNews</a></dt> + <dd> + Rigurosa documentación acerca de los protocolos de correo..</dd> + <dt> + <a href="/en/DB_Views_(message_lists)" title="en/DB_Views_(message_lists)">Vista de Base de Datos</a></dt> + <dd> + <small>Informació backend acerca de {{ Interface("nsIMsgDBView") }} e interfaces relacionadas.</small>.</dd> + <dt> + <a class="internal" href="/en/Thunderbird/Thunderbird_API_documentation" title="en/Thunderbird/Thunderbird API documentation">Documentación de la API de Thunderbird</a></dt> + <dd> + Documentación de la API de thunderbird</dd> + <dt> + <a href="/en/Extensions/Thunderbird" title="en/Extensions/Thunderbird/">Extensión de la documentación</a></dt> + <dd> + <small>Tutoriales y consejor para la creació de extensiones de Thunderbird</small></dd> + <dt> + <a class="internal" href="/en/Thunderbird/Thunderbird_Automated_Testing" title="en/Thunderbird/Thunderbird Automated Testing">Pruebas Automatizadas</a></dt> + <dd> + <small>Detalles de las facilidades de las pruebas automatizadas de Thunderbird</small></dd> + <dt> + <a class="internal" href="/en/Thunderbird/Thunderbird_in_the_Enterprise" title="Thunderbird in the Enterprise">Thunderbird en la Empresa</a></dt> + <dd> + Ayuda con la implementación de Thunderbird en las grandes organizaciones</dd> + </dl> + <dl> + </dl> + </td> + <td> + <h2 id="Community" name="Community">Comunidad</h2> + <ul> + <li>El apoyo se maneja en <a class="external" href="http://getsatisfaction.com/mozilla_messaging" title="http://getsatisfaction.com/mozilla_messaging">getsatisfaction</a>.</li> + </ul> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Preguntas de extensiones se discuten con frecuencia en el grupo dev-apps-thunderbird:</p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ DiscussionList("dev-apps-thunderbird", "mozilla.dev.apps.thunderbird") }}</p> + <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none;"> + <li>Los debates de desarrollo ocurren en la lista de correo tb-planning:</li> + <li><a class="link-https" href="https://mail.mozilla.org/listinfo/tb-planning" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://mail.mozilla.org/listinfo/tb-planning">suscripción</a></li> + <li><a class="link-https" href="https://mail.mozilla.org/pipermail/tb-planning/" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://mail.mozilla.org/pipermail/tb-planning/">archivos</a></li> + </ul> + <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none;"> + <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=50" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">Foro Mozillazine</a></li> + <li><a class="external" href="http://www.mozillamessaging.com/" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">Página web de Mozilla Messaging</a></li> + <li><a class="link-irc" href="irc://irc.mozilla.org/thunderbird" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">#thunderbird on irc.mozilla.org</a> (para Usuarios)</li> + <li><a class="link-irc" href="irc://irc.mozilla.org/maildev" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">#maildev on irc.mozilla.org</a> (para Desarrolladores)</li> + <li>una lista de todos los <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">canales de comunicación de Thunderbird</a></li> + </ul> + <h2 id="Herramientas">Herramientas</h2> + <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none;"> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">Extensión de la extensión del desarrollador</a></li> + <li><a href="/en/DOM_Inspector" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/DOM_Inspector">Inspector DOM</a></li> + </ul> + <h2 id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h2> + <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + <a href="/en/Extensions" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="en/Extensions">Extensiones</a></dd> + </dl> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +<p><br> + <span class="comment">Categories</span></p> +<p><span class="comment">Interwiki Language Links</span></p> diff --git a/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html b/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html new file mode 100644 index 0000000000..681280ec5e --- /dev/null +++ b/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html @@ -0,0 +1,37 @@ +--- +title: Thunderbird en la empresa +slug: Mozilla/Thunderbird/Thunderbird_in_the_Enterprise +tags: + - empresa + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_in_the_Enterprise +--- +<p>Muchas organizaciones utilizan Mozilla Thunderbird como su cliente de correo. Esta página enlaza a documentos en la red de desarrolladores de mozilla (Mozilla Developer Network) y en cualquier sitio en la red que sea relevante al desarrollo de Mozilla Thunderbird en la empresa.</p> + +<ul> + <li> + <p style="margin-bottom: 0cm;">Desarrollando Mozilla Thunderbird en la empresa</p> + </li> + <li> + <p style="margin-bottom: 0cm;"><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;">Autoconfiguración</span></font></span></font></p> + </li> + <li> + <p style="margin-bottom: 0cm;"><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;">Actualizando Mozilla Thunderbird en la empresa</span></font></span></font></p> + </li> + <li> + <p style="margin-bottom: 0cm;"><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;"><span style="background: transparent;">Configuraciones prefereidas de Mozilla Thunderbird en la empresa</span></span></font></span></font><font color="#000000"><span style="background: transparent;"> </span></font></p> + </li> + <li> + <p><font color="#000080"><span lang="zxx"><font color="#000000"><span style="text-decoration: none;">Tips para Mozilla Thunderbird</span></font></span></font></p> + </li> +</ul> + +<p>La lista de correo <a class="external" href="http://groups.google.com/group/tb-enterprise" title="http://groups.google.com/group/tb-enterprise">tb-enterprise</a> está disponible para discutir acerca de Thunderbird en la empresa.</p> + +<p>A continuación, se presenta información útil sobre Mozilla en la Empresa en:</p> + +<ul> + <li> + <p>Michael Kaply ha escrito una serie de blogs que describen numerosos aspectos de la configuración de Mozilla Firefox para la empresa. Alguna de esta información versa sobre Thunderbird. Fíjese en su página "<a class="external" href="http://mike.kaply.com/?s=customizing+firefox" title="http://mike.kaply.com/?s=customizing+firefox">Customizing Firefox</a>" .</p> + </li> +</ul> diff --git a/files/es/mozilla/toolkit_version_format/index.html b/files/es/mozilla/toolkit_version_format/index.html new file mode 100644 index 0000000000..9d4de58b0b --- /dev/null +++ b/files/es/mozilla/toolkit_version_format/index.html @@ -0,0 +1,61 @@ +--- +title: Formato para la versión del Toolkit +slug: Mozilla/Toolkit_version_format +tags: + - Toolkit API +translation_of: Mozilla/Toolkit_version_format +--- +<p>Este documento es una referencia para el formato de versión, tal como se usa en Firefox 1.5 (<a href="es/XULRunner">XULRunner</a> 1.8) y posteriores. Este formato se usa por el administrador de extensiones, la actualización de software y otras partes de la plataforma. Las versiones en, al menos, los siguientes lugares deben ser conformes a este formato:</p> +<ul> + <li>La <a href="es/Instalar_el_manifest#version">versión</a> del complemento y la <a href="es/Instalar_el_manifest#targetApplication">aplicación de destino</a> en el manifiesto de <a href="es/Instalar_el_manifest">instalación</a> y de <a href="es/Instalar_el_manifest#updateURL">actualización</a>.</li> + <li>Las siguientes preferencias: <code>app.extensions.version</code>, <code>extensions.lastAppVersion</code>.</li> + <li>Versiones devueltas por <a href="es/NsIXULAppInfo">nsIXULAppInfo</a>.</li> + <li><a href="es/XUL_Application_Packaging"><code>application.ini</code></a> en aplicaciones <a href="es/XULRunner">XULRunner</a>.</li> + <li><a href="es/Chrome_Registration#appversion">Modificador appversion</a> en los <a href="es/Chrome_Registration">manifiestos de chrome</a>.</li> +</ul> +<p>Puede usar <a href="es/NsIVersionComparator">nsIVersionComparator</a> para comparar versiones de su aplicación.</p> +<p>Véase {{ Anch("Formatos de versión previas") }} más abajo para una descripción del formato de versión anterior usado en Firefox/Thunderbird 1.0.</p> +<h3 id="Formato_de_versi.C3.B3n" name="Formato_de_versi.C3.B3n">Formato de versión</h3> +<p>Una <b>cadena de versión</b> consiste en una o más <i>partes de versión</i>, separadas con puntos.</p> +<p>Cada <b>parte de versión</b> es en sí misma interpretada como una secuencia de cuatro partes: <tt><número-a><cadena-b><número-c><cadena-d></tt>. Cada una de las partes es opcional. Los números son enteros en base 10 (pueden ser negativos); las cadenas son ASCII.</p> +<p>Algunos ejemplos de partes de versión válidas:</p> +<ul> + <li><tt>0</tt> (como en <tt>1.0</tt>): <tt><número-a>=0</tt></li> + <li><tt>5a</tt> (como en <tt>1.5a</tt>): <tt><número-a>=5</tt>, <tt><cadena-b>=a</tt></li> + <li><tt>5pre4</tt> (como en <tt>3.5pre4</tt>): <tt><número-a>=5</tt>, <tt><cadena-b>=pre</tt>, <tt><número-c>=4</tt></li> + <li><tt>*</tt> (como en <tt>1.0.*</tt>): <tt><cadena-b>=*</tt></li> +</ul> +<p>Se aplican algunas reglas especiales de interpretación con el fin de proporcionar compatibilidad hacia atrás y legibilidad:</p> +<ul> + <li>si la parte de versión es un solo asterisco, se interpreta como un número infinitamente largo:<br> + <tt>1.5.0.*</tt> es lo mismo que <tt>1.5.0.<i>(infinito)</i></tt></li> + <li>si cadena-b es un signo más, número-a se incrementa para ser compatible con el formato de versión de Firefox 1.0.x:<br> + <tt>1.0+</tt> es lo mismo que <tt>1.1pre</tt></li> +</ul> +<p>La lógica tras el particionado de una parte de versión en una secuencia de cadenas y números es que, cuando se comparan partes de versión, las partes numéricas se comparan como números, por ejemplo: '1.0pre1' < '1.0pre10', mientras que las cadenas se comparan byte a byte. Véase la siguiente sección para obtener detalles sobre cómo se comparan las versiones.</p> +<h3 id="Comparar_versiones" name="Comparar_versiones">Comparar versiones</h3> +<p>Cuando se comparan dos cadenas de versión, sus partes de versión se comparan de izquierda a derecha. Una parte de versión vacía o no presente equivale a <code>0</code>.</p> +<p>Si en algún punto una parte de una cadena de versión es mayor que la parte correspondiente de otra cadena de versión, entonces la primera cadena de versión es mayor que la otra.</p> +<p>En caso contrario, las cadenas de versión son iguales. Observe que, puesto que las partes de versión no presentes se tratan como si fueran <code>0</code>, las siguientes cadenas de versión son iguales: <code>1</code>, <code>1.0</code>, <code>1.0.</code>, <code>1.0.0</code>, e incluso <code>1.0...</code></p> +<h4 id="Comparar_partes_de_versi.C3.B3n" name="Comparar_partes_de_versi.C3.B3n">Comparar partes de versión</h4> +<p>Las partes de versión también se comparan de izquierda a derecha; las partes A y C se comparan como números, mientras que las partes B y D se comparan byte a byte. Una parte de tipo cadena que exista es siempre menor que una parte de tipo cadena no existente (<tt>1.6a</tt> es menor que <tt>1.6</tt>).</p> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> +<pre class="eval">1.-1 +< 1 == 1. == 1.0 == 1.0.0 +< 1.1a < 1.1aa < 1.1ab < 1.1b < 1.1c +< 1.1whatever +< 1.1pre == 1.1pre0 == 1.0+ +< 1.1pre1a < 1.1pre1aa < 1.1pre1b < 1.1pre1 +< 1.1pre2 +< 1.1pre10 +< 1.1.-1 +< 1.1 == 1.1.0 == 1.1.00 +< 1.10 +< 1.* < 1.*.1 +< 2.0 +</pre> +<h3 id="Formatos_de_versi.C3.B3n_previas" name="Formatos_de_versi.C3.B3n_previas">Formatos de versión previas</h3> +<p>Firefox y Thunderbird 1.0 usaban un formato de versión más simple, en concreto</p> +<pre class="eval">mayor[.menor[.publicación[.compilación]]][+] +</pre> +<p>donde <tt>{{ mediawiki.external('..') }}</tt> designa un componente opcional y <tt>mayor</tt>, <tt>menor</tt>, <tt>publicación</tt> y <tt>compilación</tt> son todos enteros no negativos.</p> diff --git a/files/es/mozilla/working_with_windows_in_chrome_code/index.html b/files/es/mozilla/working_with_windows_in_chrome_code/index.html new file mode 100644 index 0000000000..74ac175a82 --- /dev/null +++ b/files/es/mozilla/working_with_windows_in_chrome_code/index.html @@ -0,0 +1,386 @@ +--- +title: Trabajar con ventanas desde código chrome +slug: Mozilla/Working_with_windows_in_chrome_code +tags: + - Extensions + - páginas_a_traducir +translation_of: Mozilla/Working_with_windows_in_chrome_code +--- +<p>Este artículo describe el trabajo con múltiples ventanas en código chrome Mozilla (aplicaciones XUL y extensiones). Contiene trucos y código de ejemplo para abrir nuevas ventanas, encontrar las ventanas ya abiertas, y pasar datos entre diferentes ventanas.</p> + +<h3 id="Abrir_ventanas">Abrir ventanas</h3> + +<p>Para abrir una ventana nueva, solemos usar la llamada DOM window.open o window.openDialog, así:</p> + +<pre class="eval">var win = window.open("<a class="external" rel="freelink">chrome://myextension/content/about.xul</a>", + "aboutMyExtension", "chrome,centerscreen"); +</pre> + +<p>El primer parámetro de window.open es la URI del archivo XUL que describe la ventana y su contenido.</p> + +<p>El segundo parámetro es el nombre de la ventana. El nombre de la ventana puede ser usado en enlaces o formularios como el atributo target. Esto es diferente del título de ventana visible por el usuario, que es especificado usando XUL.</p> + +<p>El tercer, y opcional, parámetro es una lista de las características especiales que la ventana debería tener.</p> + +<p>La función window.openDialog funciona de forma similar, pero te permite especificar argumentos opcionales que pueden ser referenciados desde el código JavaScript. También maneja las funciones de ventana de forma un poco distinta, suponiendo siempre que la funcionalidad dialog es especificada.</p> + +<p>Si el objeto Window no está disponible (por ejemplo, al abrir una ventana desde código de componente XPCOM), puedes querer usar la interfaz nsiWindowWatcher. Sus parámetros son similares a window.open. En realidad, la implementación de window.open llama a métodos de nsiWindowWatcher.</p> + +<pre class="eval">var ww = Components.classes["@mozilla.org/embedcomp/window-watcher;1"] + .getService(Components.interfaces.nsIWindowWatcher); +var win = ww.openWindow(null, "<a class="external" rel="freelink">chrome://myextension/content/about.xul</a>", + "aboutMyExtension", "chrome,centerscreen", null); +</pre> + +<h3 id="Window_object" name="Window_object">Window object</h3> + +<p>Note the <code>win</code> variable in the above section, which is assigned the return value of <code>window.open</code>. It can be used to access the opened window. The return value of <code>window.open</code> (and similar methods) is a <code><a class="external" href="http://xulplanet.com/references/objref/Window.html">Window</a></code> object (usually <code><a class="external" href="http://xulplanet.com/references/objref/ChromeWindow.html">ChromeWindow</a></code>), of the same type that the <code>window</code> variable.</p> + +<p>Technically speaking, it implements a number of interfaces, including <code><a href="/es/NsIDOMJSWindow" title="es/NsIDOMJSWindow">nsIDOMJSWindow</a></code> and <code><a href="/es/NsIDOMWindowInternal" title="es/NsIDOMWindowInternal">nsIDOMWindowInternal</a></code>, but it also contains the user-defined properties for global variables and functions of the window. So, for example, to access the DOM document corresponding to the window, you can use <code><a href="/es/DOM/window.document" title="es/DOM/window.document">win.document</a></code>.</p> + +<p>Note however, that the <code>open()</code> call returns <em>before</em> the window is fully loaded, so some calls, like <code><a href="/es/DOM/document.getElementById" title="es/DOM/document.getElementById">win.document.getElementById()</a></code> will fail. To overcome this difficulty, you can move the initialization code to a <code>load</code> handler of the window being opened or pass a callback function, as described <a href="#callback">below</a>.</p> + +<p>You can get a <code>Window</code> object from a document using <code><a href="/es/DOM/document.defaultView" title="es/DOM/document.defaultView">document.defaultView</a></code>.</p> + +<h3 id="Content_windows" name="Content_windows">Content windows</h3> + +<p>When a XUL window contains a widget capable of displaying a page, such as <code><browser></code> or <code><iframe></code>, the document in that widget is, naturally, separate from the document of the chrome window itself. There also is a <code>Window</code> object for each sub-document, although there's no window in a common sense for the sub-document.</p> + +<p>The same holds for chrome windows opened inside a tab of <code><tabbrowser></code>. The elements above the chrome document opened in the tab are separate from your chrome document.</p> + +<p>The following two subsections describe how to cross chrome-content boundaries in either way, i.e. accessing elements which are ancestors of your chrome document, or accessing elements which are descendants of your chrome document (but nevertheless in a different context).</p> + +<h4 id="Accessing_content_documents" name="Accessing_content_documents">Accessing content documents</h4> + +<p>Assume you have a document loaded in a <code><tabbrowser></code>, <code><browser></code>, or <code><iframe></code> element inside your document. You can use <code>browser.contentDocument</code> to access that document and <code>browser.contentWindow</code> to the <code>Window</code> object of that document.</p> + +<p>You should be aware of <a href="/es/XPCNativeWrapper" title="es/XPCNativeWrapper">XPCNativeWrappers</a> when working with <a href="/es/XPCNativeWrapper#What_is_a_trusted_window.3F" title="es/XPCNativeWrapper#What_is_a_trusted_window.3F">untrusted content</a>. With XPCNativeWrappers turned on (which is the default in Firefox 1.5+), your extension can safely access the DOM of the content document, but not the content JavaScript. Bypassing XPCNativeWrapper to work with content JavaScript directly can lead to security problems.</p> + +<p>See <a href="/es/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="es/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a> if you need to interact with the content page.</p> + +<h5 id="The_content_shortcut" name="The_content_shortcut">The <code>content</code> shortcut</h5> + +<p>In case of <code><browser type="content-primary"/></code>, you can use the <a href="/es/DOM/window.content" title="es/DOM/window.content">content</a> shortcut property to accesss the <code>Window</code> object of the content document. For example:</p> + +<pre class="eval">// alerts the title of the document displayed in the content-primary widget + +alert(content.document.title); +</pre> + +<p>For example, you can use <code>content.document</code> in a <code>browser.xul</code> overlay to access the web page in the selected tab in a Firefox window.</p> + +<div class="note">Some examples use <code>_content</code> instead of <code>content</code>. The former has been deprecated for a while, and you should use <code>content</code> in the new code.</div> + +<h4 id="Accessing_a_document_in_the_sidebar" name="Accessing_a_document_in_the_sidebar">Accessing a document in the sidebar</h4> + +<p>Firefox has a sidebar, which is implemented as a <code><browser></code> element with id="sidebar". To access the elements and variables inside the sidebar, you need to use <code>document.getElementById("sidebar").contentDocument</code> or <code>.contentWindow</code>, like when {{ Anch("Accessing content documents") }}.</p> + +<p>For more sidebar tips, see <a href="/es/Code_snippets/Sidebar" title="es/Code_snippets/Sidebar">Code snippets:Sidebar</a>.</p> + +<h4 id="Accessing_the_elements_of_the_top-level_document_from_a_child_window" name="Accessing_the_elements_of_the_top-level_document_from_a_child_window">Accessing the elements of the top-level document from a child window</h4> + +<p>The opposite case is when you want to access the chrome document from a privileged script loaded in a <code><browser></code> or an <code><iframe></code>.</p> + +<p>A typical case when this can be useful is when your code runs in the sidebar in the main Firefox window and you want to access the elements in the main browser window.</p> + +<p>The DOM tree, as shown by the <a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a>, can look like this:</p> + +<pre class="eval">#document + window main-window + ... + browser + #document + window myExtensionWindow +</pre> + +<p>where the child window is where your code runs in.</p> + +<p>Your task is to access elements above your chrome document, i.e. to break out of your chrome window and access the ancestors. This can be done using the following statement:</p> + +<pre class="eval">var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor) + .getInterface(Components.interfaces.nsIWebNavigation) + .QueryInterface(Components.interfaces.nsIDocShellTreeItem) + .rootTreeItem + .QueryInterface(Components.interfaces.nsIInterfaceRequestor) + .getInterface(Components.interfaces.nsIDOMWindow) +</pre> + +<p>This allows you to cross the chrome-content boundaries, and returns the main window object.</p> + +<h3 id="Finding_already_opened_windows" name="Finding_already_opened_windows">Finding already opened windows</h3> + +<p>The window mediator XPCOM component (<a href="/es/NsIWindowMediator" title="es/NsIWindowMediator">nsIWindowMediator</a> interface) provides information about existing windows. Two of its methods are often used to obtain information about currently open windows: <code>getMostRecentWindow</code> and <code>getEnumerator</code>. Please refer to the <a href="/es/NsIWindowMediator" title="es/NsIWindowMediator">nsIWindowMediator</a> page for more information and examples of using <code>nsIWindowMediator</code>. <span class="comment">=== Example: Opening a window only if it's not opened already === XXX TBD</span></p> + +<h3 id="Passing_data_between_windows" name="Passing_data_between_windows">Passing data between windows</h3> + +<p>When working with multiple windows, you often need to pass information from one window to another. Since different windows have separate DOM documents and global objects for scripts, you can't just use one global JavaScript variable in scripts from different windows.</p> + +<p>There are several techniques of varying power and simplicity that can be used to share data. We'll demonstrate them from the simplest to the most complex in the next few sections.</p> + +<h4 id="Example_1:_Passing_data_to_window_when_opening_it_with_openDialog" name="Example_1:_Passing_data_to_window_when_opening_it_with_openDialog">Example 1: Passing data to window when opening it with <code>openDialog</code></h4> + +<p>When you open a window using <code><a href="/es/DOM/window.openDialog" title="es/DOM/window.openDialog">window.openDialog</a></code> or <code>nsIWindowWatcher.openWindow</code>, you can pass an arbitrary number of <em>arguments</em> to that window. Arguments are simple JavaScript objects, accessible through <code><a href="/es/DOM/window.arguments" title="es/DOM/window.arguments">window.arguments</a></code> property in the opened window.</p> + +<p>In this example, we're using <code>window.openDialog</code> to open a progress dialog. We pass in the current status text as well as the maximum and current progress values. Note that using <code>nsIWindowWatcher.openWindow</code> is a bit less trivial . <span class="comment">TODO: link to <a href="/es/How_To_Pass_an_XPCOM_Object_to_a_New_Window" title="es/How_To_Pass_an_XPCOM_Object_to_a_New_Window">How To Pass an XPCOM Object to a New Window</a> when it has a more useful example</span></p> + +<p>Opener code:</p> + +<pre class="eval">window.openDialog("<a class="external" rel="freelink">chrome://test/content/progress.xul</a>", + "myProgress", "chrome,centerscreen", + {status: "Reading remote data", maxProgress: 50, progress: 10} ); +</pre> + +<p><code>progress.xul</code>:</p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window onload="onLoad();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +<script><![CDATA[ + var gStatus, gProgressMeter; + var maxProgress = 100; + function onLoad() { + gStatus = document.getElementById("status"); + gProgressMeter = document.getElementById("progressmeter"); + + if("arguments" in window && window.arguments.length > 0) { + maxProgress = window.arguments[0].maxProgress; + setProgress(window.arguments[0].progress); + setStatus(window.arguments[0].status); + } + } + + function setProgress(value) { + gProgressMeter.value = 100 * value / maxProgress; + } + + function setStatus(text) { + gStatus.value = "Status: " + text + "..."; + } +]]></script> + +<label id="status" value="(No status)"/> +<hbox> + <progressmeter id="progressmeter" mode="determined"/> + <button label="Cancel" oncommand="close();"/> +</hbox> + +</window> +</pre> + +<h4 id="Example_2:_Interacting_with_the_opener" name="Example_2:_Interacting_with_the_opener">Example 2: Interacting with the opener</h4> + +<p>Sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window. You can find the window's opener using its <a href="/es/Window.opener" title="es/Window.opener">window.opener</a> property or via a callback function passed to the window in a way described in the previous section.</p> + +<p>Let's add code to the previous example to notify the opener when the user presses Cancel on the progress dialog.</p> + +<ul> + <li><strong>Using <code>window.opener</code>.</strong> The <code>opener</code> property returns its window's opener; that is, the {{ Anch("Window object") }} that opened it.</li> +</ul> + +<p>If we're sure the window that opened the progress dialog declares the <code>cancelOperation</code> function, we can use <code>window.opener.cancelOperation()</code> to notify it, like this:</p> + +<pre class="eval"><button label="Cancel" oncommand="<strong>opener.cancelOperation();</strong> close();"/> +</pre> + +<ul> + <li><strong>Using a callback function.</strong> Alternatively, the opener window can pass a callback function to the progress dialog in the same way we passed the status string in the previous example:</li> +</ul> + +<pre class="eval">function onCancel() { + alert("Operation canceled!"); +} + +... + +window.openDialog("<a class="external" rel="freelink">chrome://test/content/progress.xul</a>", + "myProgress", "chrome,centerscreen", + {status: "Reading remote data", maxProgress: 50, progress: 10}, + <strong>onCancel</strong>); +</pre> + +<p>The progress dialog can then run the callback like this:</p> + +<pre class="eval"><button label="Cancel" oncommand="<strong>window.arguments[1]();</strong> close();"/> +</pre> + +<h4 id="Example_3:_Using_nsIWindowMediator_when_opener_is_not_enough" name="Example_3:_Using_nsIWindowMediator_when_opener_is_not_enough">Example 3: Using <code>nsIWindowMediator</code> when <code>opener</code> is not enough</h4> + +<p>The <code>window.opener</code> property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places. In more complicated cases you need to use the <code><a href="/es/NsIWindowMediator" title="es/NsIWindowMediator">nsIWindowMediator</a></code> interface, introduced above.</p> + +<p>One case in which you might want to use <code>nsIWindowMediator</code> is in an extension's Options window. Suppose you're developing a browser extension that consists of a browser.xul overlay and an Options window. Suppose the overlay contains a button to open the extension's Options window which needs to read some data from the browser window. As you may remember, Firefox's Extension Manager can also be used to open your Options dialog.</p> + +<p>This means the value of <code>window.opener</code> in your Options dialog is not necessarily the browser window -- instead, it might be the Extension Manager window. You could check the <code>location</code> property of the <code>opener</code> and use <code>opener.opener</code> in case it's the Extension Manager window, but a better way is to use <code>nsIWindowMediator</code>:</p> + +<pre class="eval">var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"] + .getService(Components.interfaces.nsIWindowMediator); +var browserWindow = wm.getMostRecentWindow("navigator:browser"); +// read values from |browserWindow| +</pre> + +<p>You might be tempted to use a similar technique to apply the changes the user made in the Options dialog, but a better way to do that is to use <a class="external" href="http://kb.mozillazine.org/Dev_:_Using_preferences#Using_preferences_observers">preferences observers</a>.</p> + +<h3 id="Advanced_data_sharing" name="Advanced_data_sharing">Advanced data sharing</h3> + +<p>The above code is useful when you need to pass data from one window to another or to a set of windows, but sometimes you just want to share a JavaScript variable in common between different windows. You could declare a local variable in each window along with corresponding setter functions to keep the "instances" of the variable in sync across windows, but fortunately, there's a better way.</p> + +<p>To declare a shared variable, we need to find a place that exists while the application is running and is easily accessible from the code in different chrome windows. There are actually a few such places.</p> + +<h4 id="Using_JavaScript_code_modules" name="Using_JavaScript_code_modules">Using JavaScript code modules</h4> + +<p><a href="/es/Using_JavaScript_code_modules" title="es/Using_JavaScript_code_modules">JavaScript code modules</a> {{ Fx_minversion_inline(3) }} is a simple method for creating shared global singleton objects that can be imported into any other JavaScript scope. The importing scope will have access to the objects and data in the code module. Since the code module is cached, all scopes get the same instance of the code module and can share the data in the module. See <a href="/es/Components.utils.import" title="es/Components.utils.import">Components.utils.import</a> for more information.</p> + +<ul> + <li>Pros: + <ul> + <li>It's the "right way"</li> + <li>Very simple to make and import.</li> + <li>No need to build an XPCOM component.</li> + </ul> + </li> + <li>Cons: + <ul> + <li>Only works in Firefox 3 or newer.</li> + <li>The scope is shared between modules and the importing scope, so you have to worry about name collisions.</li> + <li>You can't use the <code><a href="/es/DOM/window" title="es/DOM/window">window</a></code> object, its members, like <code>alert</code> and <code>open</code>, and many other objects available from inside a window. The functionality isn't lost, however -- you just have to use the XPCOM components directly instead of using convenient shortcuts. Of course, this doesn't matter if you just store data in the component.</li> + </ul> + </li> +</ul> + +<h4 id="Using_an_XPCOM_singleton_component" name="Using_an_XPCOM_singleton_component">Using an XPCOM singleton component</h4> + +<p>The cleanest and most powerful way to share data is to define your own XPCOM component (you can <a href="/es/How_to_Build_an_XPCOM_Component_in_Javascript" title="es/How_to_Build_an_XPCOM_Component_in_Javascript">write one in JavaScript</a>) and access it from anywhere using a <code>getService</code> call:</p> + +<pre class="eval">Components.classes["@domain.org/mycomponent;1"].getService(); +</pre> + +<ul> + <li>Pros: + <ul> + <li>It's the "right way".</li> + <li>You can store arbitrary JavaScript objects in the component.</li> + <li>The scope is not shared between components, so you don't have to worry about name collisions.</li> + <li>Works in older versions of Firefox.</li> + </ul> + </li> + <li>Cons: + <ul> + <li>You can't use the <code><a href="/es/DOM/window" title="es/DOM/window">window</a></code> object, its members, like <code>alert</code> and <code>open</code>, and many other objects available from inside a window. The functionality isn't lost, however -- you just have to use the XPCOM components directly instead of using convenient shortcuts. Of course, this doesn't matter if you just store data in the component.</li> + <li>Learning to create XPCOM components takes time.</li> + </ul> + </li> +</ul> + +<p>There are several articles and books about creating XPCOM components online.</p> + +<h4 id="Using_FUEL_Application_object" name="Using_FUEL_Application_object">Using FUEL Application object</h4> + +<p>The FUEL JavaScript library {{ Fx_minversion_inline(3) }} has a simple method for sharing data between windows. The <code>Application</code> object supports a <code>storage</code> property which can be used to store data globally. This method is a simplified form of the XPCOM singleton method.</p> + +<pre class="eval">Application.storage.set(keyname, data); + +var data = Application.storage.get(keyname, default); + +where: keyname is a string used to identify the data + data is the data + default is the data value to return if keyname does not exists +</pre> + +<ul> + <li>Pros: + <ul> + <li>Its the "right way".</li> + <li>You can store arbitrary JavaScript objects in the component.</li> + <li>The scope is not shared between components, so you don't have to worry about name collisions.</li> + <li>No need to build an XPCOM component.</li> + </ul> + </li> + <li>Cons: + <ul> + <li>Only works in Firefox 3 or newer.</li> + <li>You can't use the <code><a href="/es/DOM/window" title="es/DOM/window">window</a></code> object, its members, like <code>alert</code> and <code>open</code>, and many other objects available from inside a window. The functionality isn't lost, however -- you just have to use the XPCOM components directly instead of using convenient shortcuts. Of course, this doesn't matter if you just store data in the component.</li> + </ul> + </li> +</ul> + +<h4 id="Storing_shared_data_in_preferences" name="Storing_shared_data_in_preferences">Storing shared data in preferences</h4> + +<p>If you just need to store a string or a number, writing a whole XPCOM component may be an unnecessary complication. You can use the <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIPrefService.html">preferences service</a> in such cases.</p> + +<ul> + <li>Pros: + <ul> + <li>Quite easy to use for storing simple data.</li> + </ul> + </li> + <li>Cons: + <ul> + <li>Can't easily be used to store complex data.</li> + <li>Abusing the preferences service and not cleaning up after yourself can cause <code>prefs.js</code> to grow large and slow down application startup.</li> + </ul> + </li> +</ul> + +<p>See <a href="/es/Code_snippets/Preferences" title="es/Code_snippets/Preferences">Code snippets:Preferences</a> for detailed description of the preferences system and example code.</p> + +<p>Example:</p> + +<pre class="eval">var prefs = Components.classes["@mozilla.org/preferences-service;1"] + .getService(Components.interfaces.nsIPrefService); +var branch = prefs.getBranch("extensions.myext."); +var var1 = branch.getBoolPref("var1"); // get a pref +</pre> + +<h4 id="The_hidden_window_hack" name="The_hidden_window_hack">The hidden window hack</h4> + +<p>Some extension authors use the special <em>hidden window</em> to store their data and code. The hidden window is similar to a regular window, but unlike any other window, it's available the whole time the application is running, and isn't visible to user. The document loaded into this window is <code><a class="external" rel="freelink">chrome://browser/content/hiddenWindow.xul</a></code> on Macs where it is used to implement the menus and <code><a class="external" rel="freelink">resource://gre/res/hiddenWindow.html</a></code> on other operating systems. Eventually this window will be removed for operating systems where it isn't needed ({{ Bug(71895) }}).</p> + +<p>A reference to the hidden window can be obtained from the nsIAppShellService interface. As any other DOM object it allows you to set custom properties:</p> + +<pre class="eval">var hiddenWindow = Components.classes["@mozilla.org/appshell/appShellService;1"] + .getService(Components.interfaces.nsIAppShellService) + .hiddenDOMWindow; +hiddenWindow.myExtensionStatus = "ready"; +</pre> + +<p>However, objects put into the hidden window will still belong to the window that created them. If a method of such an object accesses properties of the <code>window</code> object like <code>XMLHttpRequest</code> you might be confronted with an error message because the original window has been closed. To avoid this you can load the objects with a script file into the hidden window:</p> + +<pre class="eval">var hiddenWindow = Components.classes["@mozilla.org/appshell/appShellService;1"] + .getService(Components.interfaces.nsIAppShellService) + .hiddenDOMWindow; +hiddenWindow.Components.classes["@mozilla.org/moz/jssubscript-loader;1"] + .getService(Components.interfaces.mozIJSSubScriptLoader) + .loadSubScript("<a class="external" rel="freelink">chrome://my-extension/content/globalObject.js</a>"); +hiddenWindow.myExtensionObject.doSomething(); +</pre> + +<p>With <code>globalObject.js</code> containing something like:</p> + +<pre class="eval">var myExtensionObject = { + doSomething: function() { + return new XMLHttpRequest(); + } +} +</pre> + +<ul> + <li>Pros: + <ul> + <li>If you are running code in the hidden window, the <code>window</code> object and its properties are available, unlike the component case.</li> + <li>You can store arbitrary JavaScript objects in the hidden window.</li> + </ul> + </li> + <li>Cons: + <ul> + <li>It's a hack.</li> + <li>The same window is accessed by different extensions, you have to use long variable names to avoid conflicts.</li> + <li>The hidden window may be removed from Windows/Linux builds.</li> + </ul> + </li> +</ul> + +<h3 id="See_also" name="See_also">See also</h3> + +<ul> + <li><a href="/es/Code_snippets/Dialogs" title="es/Code_snippets/Dialogs">Code snippets:Dialogs</a></li> +</ul> diff --git a/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html b/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html new file mode 100644 index 0000000000..b8858b9411 --- /dev/null +++ b/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html @@ -0,0 +1,111 @@ +--- +title: Cambios XPCOM en Gecko 2.0 +slug: Mozilla/XPCOM/XPCOM/Cambios_XPCOM_en_Gecko_2.0 +tags: + - Gecko 2.0 + - XPCOM + - para_revisar +--- +<p></p> +<p></p><div class="blockIndicator draft"> + <p><strong>Borrador</strong><br> + Esta página no está completa.</p> + +</div><p></p> +<p>Han tenido lugar una serie de cambios que afectan la compatibilidad de componentes XPCOM en Gecko 2. Este artículo detalla esos cambios y provee sugerencias sobre cómo actualizar tu código.</p> +<h2 id="Se_acabaron_las_interfaces_inmovilizadas">Se acabaron las interfaces inmovilizadas</h2> +<p>Se acabaron las interfaces inmovilizadas; a partir de ahora, todas las interfaces está sujetas a cambios. Se actualizará la documentación según permita el tiempo eliminar las referencias a las interfaces que estén "inmovilizadas " o "no inmovilizadas".</p><h2 id="Registro_de_componentes">Registro de componentes</h2> +<p>La manera en que los componentes XPCOM son registrados cambió en Gecko 2. Antes de Gecko 2, durante el registro de un componente, todos los binarios y ficheros del componente JavaScript eran cargados y llamados, pidiéndoles que se registraran a sí mismos. Si usabas <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm" title="en/JavaScript code modules/XPCOMUtils.jsm">XPCOMUtils.jsm</a>, algo de esto estaba oculto, pero eso pasaba.</p> +<p>Comenzando en Gecko 2, como sea, los componentes son registrados usando archivos manifest, similar a como chrome es registrado. De hecho, el mismo archivo <a href="/en/Chrome_Registration" title="en/chrome.manifest">chrome manifest</a> será usado para registrar componentes.</p> +<p><strong>Todos los componentes XPCOM</strong> necesitarán ser actualizados para soportar esto. Como sea, es muy fácil hacerlo, y se puede actualmente soportar ambos tipos de registro para conservar la compatibilidad hacia atrás.</p> +<h3 id="Manifestos_de_componentes">Manifestos de componentes</h3> +<p>Todo registro de componentes es controlado a través de archivos manifest. Para extensiones, esto es el mismo <code>chrome.manifest</code> actualmente usado para registrar chrome.</p> +<h3 id="Archivos_XPT">Archivos XPT</h3> +<p>La ruta de los archivos XPT debe ser listada explicitamente en un manifest usando una directiva <code>interfaces</code> directive:</p> +<pre>interfaces components/mycomponent.xpt</pre> +<h3 id="Componentes_JavaScript">Componentes JavaScript</h3> +<p>El registro de información para componentes JavaScript ya no está dentro del componente mismo; en cambio, está alojado en el manifest. El componente es cargado solo cuando el administrador de XPCOM necesita crear un componente.</p> +<p><code>chrome.manifest</code>:</p> +<pre># The {classID} here must match the classID in mycomponent.js +component {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8} components/mycomponent.js +contract @foobar/mycomponent;1 {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8} +category profile-after-change MyComponent @foobar/mycomponent;1 +</pre> +<p>El código javascript ya no exporta una función <code><a href="/en/NSGetModule" title="en/NSGetModule">NSGetModule()</a></code>. Ahora debe exportar una función <a href="/en/NSGetFactory" title="en/NSGetFactory"><code>NSGetFactory()</code></a>, la cual acepta un ID de contrato como parámetro.</p> +<p>Por ejemplo en el código JavaScript de tu componente:</p> +<pre>Components.utils.import("resource://gre/modules/XPCOMUtils.jsm"); + +function myComponent() { +} +myComponent.prototype = { + // this must match whatever is in chrome.manifest! + classID: Components.ID("{e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8}"), + + QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIMyComponent]), + + /* nsIMyComponent implementation goes here */ + ... +}; + +// The following line is what XPCOM uses to create components. Each component prototype +// must have a .classID which is used to create it. +const NSGetFactory = XPCOMUtils.generateNSGetFactory([myComponent]); +</pre> +<p>Un componente puede implemente compatibilidad hacia atrás con Gecko 1.9.2 dinámicamente detectando cuál de los simbolos son exportados por XPCOMUtils.jsm y exportando la función correcta:</p> +<pre>/** +* XPCOMUtils.generateNSGetFactory was introduced in Mozilla 2 (Firefox 4). +* XPCOMUtils.generateNSGetModule is for Mozilla 1.9.2 (Firefox 3.6). +*/ +if (XPCOMUtils.generateNSGetFactory) + var NSGetFactory = XPCOMUtils.generateNSGetFactory([mySample]); +else + var NSGetModule = XPCOMUtils.generateNSGetModule([mySample]);</pre> +<h3 id="Componentes_binarios">Componentes binarios</h3> +<p>Los componentes binarios deben ser listados explicitamente en un manifest usando una directiva <code>binary-component</code>:</p> +<pre>binary-component components/mycomponent.dll +</pre> +<p>C++ en el componente debe ser cambiado: un componente binario ya no exporta la función <code><a href="/en/NSGetModule" title="en/NSGetModule">NSGetModule()</a></code>. En cambio, exporta un simbolo de datos <a href="/en/XPCOM/NSModule" title="en/XPCOM/NSModule"><code>NSModule</code></a> el cual apunta a la estructura <code>mozilla::Module</code>. Para más información acerca de la estructura <code>mozilla::Module</code>, mira la cabecera <a class=" external" href="http://mxr.mozilla.org/mozilla-central/source/xpcom/components/Module.h" title="http://mxr.mozilla.org/mozilla-central/source/xpcom/components/Module.h">Module.h</a>. Para un ejemplo actual de implementación de módulos dinámicos, mira <a class=" external" href="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp" title="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp">nsSampleModule.cpp</a>.</p> +<p>Notese que <code>nsIGenericFactory.h</code> ha sido eliminado. Referencias a <code>nsIGenericFactory.h</code> deben ser reemplazadas con <code>mozilla/ModuleUtils.h</code>.</p> +<p>Es posible para un componente binario ser compatible con Mozilla 1.9.2 y Mozilla 2.0 usando un macro extra<code>NS_IMPL_MOZILLA192_NSGETMODULE</code>. mira <a class=" external" href="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp" title="http://mxr.mozilla.org/mozilla-central/source/xpcom/sample/nsSampleModule.cpp">nsSampleModule.cpp</a> para más detalles.</p> +<h3 id="Subdirectorios_específicos_de_plataforma">Subdirectorios específicos de plataforma</h3> +<p>El sistema component/chrome usado para mirar en los subdirectorios específicos de plataforma de una extensión, del tipo <code>platform/WINNT_x86-msvc/chrome.manifest</code> en Windows. Ya no está soportado. Puedes usar las directivas de registro chrome, OS y ABI para lograr el mismo efecto:</p> +<pre>binary-component components/windows/mycomponent.dll ABI=WINNT_x86-msvc +binary-component components/mac/mycomponent.dylib ABI=Darwin_x86-gcc3 +binary-component components/mac/mycomponent64.dylib ABI=Darwin_x86-64-gcc3 +binary-component components/linux/mycomponent.so ABI=Linux_x86-gcc3 +</pre> +<h2 id="Registro_de_categoría">Registro de categoría</h2> +<p>Anterior a Gecko 2, las extensiones podían escuchar las <a href="/en/Observer_Notifications" title="en/Observer Notifications">notificaciones</a> para el <code>xpcom-startup</code> y <code>app-startup</code> durante el inicio, y realizar acciones durante. Este ya no es el caso. Las más temprana notificacion de inicio que puede recibir una extensión es <code>profile-after-change</code>, la cual tiene siempre que ser una notificación recomendad para observar. Esto es debido a que está entre las notificaciones más tempranas que ocurren despues de que la carpeta de perfil(y por lo tanto preferencias y otros servicios) está disponible.</p> +<h3 id="Qué_necesitas_cambiar">Qué necesitas cambiar</h3> +<p>Si tu extension actualmente observa aún a <code>xpcom-startup</code> ó <code>app-startup</code>, necesitas actualizar tu código para observer en vez a <code>profile-after-change</code>.</p> +<p>Usualmente, las extensiones observaban <code>app-startup</code> porqué en el pasado, necesitabas cargar <code>app-startup</code> con el fin de poder registrarse para observar <code>profile-after-change</code> en primer lugar. A partir de <span title="(Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)">Gecko 1.9.1</span>, este ya no es el caso, como sea; tu puedes registrar ahora <code>profile-after-change</code> usando el administrador de categoría. Mira <a href="/en/XPCOM/Receiving_startup_notifications" title="en/XPCOM/Receiving startup notifications">Recibiendo notificaciones de inicio</a> para más detalles.</p> +<p>Para agregar una entrada de categoria, debes insertar la siguiente linea a tu chrome.manifest:</p> +<pre>category profile-after-change MyComponent @foobar/mycomponent;1 +</pre> +<div class="warning"><strong>Importante</strong>: Formalmente, el id de contrado de la entrada de categoría era prefijada con "<code>service,"</code> si el componente era implementado como un servicio. Este prefijo necesita ser eliminado cuando migres a chrome.manifest.</div> +<h3 id="Nombres_de_categoría_cambiados">Nombres de categoría cambiados</h3> +<p>El administrador de categoría en XPCOM es usado para registrar ciertos objetos auxiliares globales. Como chrome.manifest es un formato de espacio delimitado, los nombres de categoría con espacios no pueden ser registrados. Por lo tanto las siguientes categorías han cambiado:</p> +<table class="standard-table"> <thead> <tr> <th scope="col">Nombre anterior</th> <th scope="col">Nuevo nombre</th> </tr> <tr> <td><code>JavaScript global constructor</code></td> <td><code>Javascript-global-constructor</code></td> </tr> <tr> <td><code>JavaScript global constructor prototype alias</code></td> <td><code>JavaScript-global-constructor-prototype-alias</code></td> </tr> </thead> <tbody> <tr> <td><code>JavaScript global property</code></td> <td><code>JavaScript-global-property</code></td> </tr> <tr> <td><code>JavaScript global privileged property</code></td> <td><code>JavaScript-global-privileged-property</code></td> </tr> <tr> <td><code>JavaScript global static nameset</code></td> <td><code>JavaScript-global-static-nameset</code></td> </tr> <tr> <td><code>JavaScript global dynamic nameset</code></td> <td><code>JavaScript-global-dynamic-nameset</code></td> </tr> <tr> <td><code>JavaScript DOM class</code></td> <td><code>JavaScript-DOM-class</code></td> </tr> <tr> <td><code>JavaScript DOM interface</code></td> <td><code>JavaScript-DOM-interface</code></td> </tr> <tr> <td><code>XSLT extension functions</code></td> <td><code>XSLT-extension-functions</code></td> </tr> </tbody> +</table> +<h3 id="¿Pero_por_qué">¿Pero por qué?</h3> +<p>Previamente, cuando fuera Gecko detectaba que la versión de la aplicación habia cambiado, o una o mas extensiones eran agregadas o eliminadas, activadas o desactivadas, era necesario para tratar todos los registros de componentes existentes, reiniciar la aplicación(Lo que llamamos "Reinicio de administrador de extensiones"), durante su proceso de arranque. Esto fue necesario para asegurar que los componentes que ya no estuvieran disponibles fueran eliminados apropiadamente, y para re-registrar todo, cargando algun nuevo componente que se necesitara.</p> +<p>En teoría, estos es invisible para el usuario, pero es un proceso costoso, ya que cada componente necesita ser cargado y ejecutado, luego descargado, luego recargado de nuevo durante el reinicio.</p> +<p>Además de eso, con el trabajo que estamos haciendo en el soporte multihilo para Firefox, el contenido de los procesos también necesita registrar componentes en una base por proceso, o de alguna manera para compartir la cache de un componente con el proceso chrome.</p> +<p>Los cambios para el modelo de registro de componentes permite este llamado Reinicio de administrador de extensiones volverse una cosa del pasado. En lugar de confiar en una potencial caché de componentes en el arranque, nosotros leemos los registros de componentes de la aplicación fuera de su archivo manifest y cargamos esos componentes. Esto obtiene suficiente de XPCOM cargado y en ejecución con lo que podemos cargar el administrador de extensiones y realizar la instalación, desinstalación y acualización necesaria de algunas extensiones instaladas.</p> +<p>Hecho esto, las extensiones pueden ser cargadas simplemente leyendo su manifesto, cargando sus componentes y continuando el proceso de arranque, todo sin tener que reiniciar el navegador.</p> +<p>Los contenidos de procesos en Electrolysis pueden simplemente leer el registro del componente durante el arranque.</p> +<p> </p> +<h2 id="Cambios_en_los_contenedores_XPCNativeWrapper">Cambios en los contenedores XPCNativeWrapper</h2> +<h3 id="No_se_pueden_desactivar_del_manifiesto_los_contenedores_XPCNativeWrapper">No se pueden desactivar del manifiesto los contenedores XPCNativeWrapper</h3> +<p>Ya no se admite la especificación de <code>xpcnativewrappers=no</code> en tu manifiesto. El objetivo de ésta fue siempre ofrecer una solución alternativa a corto plazo que permitiera que las extensiones continuaran funcionando mientras que los autores actualizaban el código para usar los contenedores XPCNativeWrapper.</p> +<p>Si tu agregado/complemento depende de un enlace XBL adjunto a los objetos de contenido - por ejemplo, la capacidad para llamar a las funciones u obtener y establecer las propiedades creadas por el enlace XBL - tendrás que usar la propiedad de los contenedores XPCNativeWrapper <code>wrappedJSObject</code> para tener acceso a los objetos ajustados.</p> +<p>Si necesitas poder llamar a las funciones o tener acceso a las propiedades definidas por el contenido web, tendrás que hacer esto también. Puede ser el caso si, por ejemplo, has escrito una extensión que añade a un servicio de correo web un botón eliminar y el servicio define una función <code>window.delete()<span style="font-family: Verdana,Tahoma,sans-serif;"> que tienes que llamar.</span></code></p> +<p>Si, por otro lado, lo único que haces con el contenido es tener acceso a métodos y propiedades DOM, no habrás tenido que usar <code>xpcnativewrappers=no<span style="font-family: Verdana,Tahoma,sans-serif;"> y simplemente deberías eliminarlo de tu manifiesto.</span></code></p> +<h3 id="Cambios_varios_en_los_contenedores_XPCNativeWrapper">Cambios varios en los contenedores XPCNativeWrapper</h3> +<ul> <li>Ya no se lanza una excepción de seguridad al usar el operador <a href="../../../../en/JavaScript/Reference/Operators/Special_Operators/delete_Operator" rel="internal"><code>delete</code></a> en las propiedades "expando" de un contenedor XPCNativeWrapper.</li> +</ul><h2 id="Cambios_en_XPCOMUtils.jsm">Cambios en XPCOMUtils.jsm</h2> +<p>Se ha actualizado el módulo de código <a href="/en/JavaScript_code_modules/XPCOMUtils.jsm" title="en/JavaScript/Code modules/XPCOMUtils.jsm"><code>XPCOMUtils.jsm</code></a> para permitir que especifiques las ID de las aplicaciones en las que deseas registrar tu componente.</p><h2 id="Captadores_de_servicios_XPCOM">Captadores de servicios XPCOM</h2> +<p>Una serie de servicios XPCOM que se usan habitualmente disponen ahora de funciones de captadores de servicios en el <a href="/en/XPCOM/mozilla::services_namespace" title="en/XPCOM/mozilla::services namespace">mozilla::services namespace</a>; facilitan en gran medida el acceso a estos servicios desde el código C++.</p><h2 id="Consulta_también">Consulta también</h2> +<ul> <li><a class=" external" href="http://blog.mozilla.com/addons/2010/06/14/multiple-breaking-changes-are-coming-for-components-in-extensions/" title="http://blog.mozilla.com/addons/2010/06/14/multiple-breaking-changes-are-coming-for-components-in-extensions/">Multiple breaking changes are coming for components in extensions</a></li> +</ul> +<p></p> diff --git a/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html b/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html new file mode 100644 index 0000000000..4c57aa57e9 --- /dev/null +++ b/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html @@ -0,0 +1,33 @@ +--- +title: El administrador de hilos +slug: Mozilla/XPCOM/XPCOM/El_administrador_de_hilos +tags: + - Firefox 3 +translation_of: Mozilla/Tech/XPCOM/The_Thread_Manager +--- +<p></p> + +<p>El administrador de hilos, introducido en Firefox 3, ofrece un mecanismo simple de utilizar para crear hilos y enviarles eventos para que los procese.</p> + +<h3 id="Interfaces" name="Interfaces">Interfaces</h3> + +<p>Existen varias interfaces que proveen el soporte multihilo:</p> + +<dl> + <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadManager" title="">nsIThreadManager</a></code></dt> + <dd>El administrador de hilos en sí mismo te permite crear hilos.</dd> + <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThread" title="">nsIThread</a></code></dt> + <dd>La interfaz <code>nsIThread</code> encapsula un sistema de hilos funcional, proveyendo un acceso multi-plataforma sencillo al multihilo desde tu código.</dd> + <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadPool" title="">nsIThreadPool</a></code></dt> + <dd>Un pool de hilos provee un conjunto limitado de "hilos de trabajo". Cuando envies un evento al pool, el pool elije un hilo de trabajo disponible para procesar el evento.</dd> + <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadInternal" title="">nsIThreadInternal</a></code></dt> + <dd>Una subclase de <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThread" title="">nsIThread</a></code> que es implementada por el objeto XPCOM de hilo para agregar soporte de observadores de la actividad de envíos al hilo.</dd> + <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadObserver" title="">nsIThreadObserver</a></code></dt> + <dd>Provee la habilidad de monitorear el hilo, recibir notificaciones cuando se le envían eventos y cuando terminan de ser procesados.</dd> + <dt><code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadEventFilter" title="">nsIThreadEventFilter</a></code></dt> + <dd>Esta interfaz es usada por el método <code><a href="/es/NsIThreadInternal#pushEventQueue.28.29" title="es/NsIThreadInternal#pushEventQueue.28.29">pushEventQueue()</a></code> en <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadInternal" title="">nsIThreadInternal</a></code> para permitir el filtrado de eventos.</dd> +</dl> + +<h3 id="Usando_el_administrador_de_hilos">Usando el administrador de hilos</h3> + +<p>Para usar el Administrador de Hilos, necesitas encapsular cada porción de código de trabajo en un objeto XPCOM <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRunnable" title="">nsIRunnable</a></code>. Puedes escribir el objeto totalmente en javascript, no es excesivamente dificil hacerlo.</p> diff --git a/files/es/mozilla/xpcom/xpcom/index.html b/files/es/mozilla/xpcom/xpcom/index.html new file mode 100644 index 0000000000..9cb2755097 --- /dev/null +++ b/files/es/mozilla/xpcom/xpcom/index.html @@ -0,0 +1,83 @@ +--- +title: XPCOM +slug: Mozilla/XPCOM/XPCOM +tags: + - Todas_las_Categorías + - XPCOM +translation_of: Mozilla/Tech/XPCOM +--- +<div class="callout-box"> + <strong>Introducción a XPCOM (en)</strong><br> + <p>Tutorial en cinco partes de <a class="external" href="http://www-128.ibm.com/developerworks">IBM developer Works</a>: <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom.html">Parte I</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom2.html">Parte II</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom3.html">Parte III</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom4/index.html">Parte IV</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom5.html">Parte V</a></p> +</div> +<div> + <strong> XPCOM </strong>(cross platform component object model) es un COM multi-plataforma, similar a Microsoft COM. Gracias a sus múltiples "<a href="https://developer.mozilla.org/en-US/docs/XPCOM/Language_Bindings">language bindings</a>", los componentes XPCOM pueden ser usados e implementados no sólo en C/C<sup>++</sup>, sino también en diversos lenguajes tales como JavaScript, Java y Python. La definición de interfaces en XPCOM ha desarrollado su propio dialecto IDL, el <a href="https://developer.mozilla.org/en-US/docs/XPIDL">XPIDL</a>.</div> +<div> + </div> +<div> + Así mismo, XPCOM proporciona un conjunto básico de componentes; por ejemplo, las estructuras básicas: cadenas, matrices, etc. La mayoría de los componentes XPCOM no forman parte de este conjunto básico sino que son proporcionados por otras partes de la plataforma (p.e. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko?redirectlocale=en-US&redirectslug=Gecko">Gecko</a> o <a href="https://developer.mozilla.org/en-US/docs/Necko">Necko</a>), por una aplicación o por una extensión.</div> +<p> </p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=XPCOM&language=es" title="Special:Tags?tag=XPCOM&language=es">Documentación</a></h4> + <dl> + <dt> + <a href="/es/Tutorial_de_XUL/Interfaces_XPCOM" title="es/Tutorial_de_XUL/Interfaces_XPCOM">Intrefaces XPCOM</a></dt> + <dd> + <small>En esta sección, vamos a echar un pequeño vistazo a XPCOM (Cross-platform Component Object Model o Modelo de Objeto de Componentes Multiplataforma), el sistema de objetos que utiliza Mozilla.</small></dd> + </dl> + <dl> + <dt> + <a href="/en/Creating_XPCOM_Components" title="en/Creating_XPCOM_Components">Creating XPCOM Components (en)</a></dt> + <dd> + <small>Este manual proporciona informacion sobre como contruir un componente XPCOM que controle el comportamiento de navegación.</small></dd> + </dl> + <dl> + <dt> + <a href="/es/Cómo_crear_un_componente_XPCOM_en_JavaScript" title="es/Cómo_crear_un_componente_XPCOM_en_JavaScript">Cómo crear un componente XPCOM en JavaScript</a></dt> + <dd> + <small>This is a "Hello World" tutorial for creating an XPCOM component in JavaScript. This tutorial does not describe how and why XPCOM works the way it does, or what every bit of the example code does.</small></dd> + </dl> + <dl> + <dt> + <a class="external" href="http://www.mozilla.org/scriptable/avoiding-leaks.html">Usando XPCOM en JavaScript sin perdidas (en)</a></dt> + <dd> + <small>Usando XPCOM en JavaScript (tambien llamado XPConnect) es una forma donde la adminsitracion de memoria no es la mas indicada. Apesar de esto, es facil escribir codigo en JavaScript que tenga perdidas, ya que algunos objetos con los que tratas en el fondo estan includos en la referencia.</small></dd> + </dl> + <p><span class="comment">; <a href="/es/XPCOM:Cadenas" title="es/XPCOM:Cadenas"> XPCOM</a>: <small>Referencia sobre las cadenas en XPCOM.</small> ; <a href="/es/XPCOM_Glue" title="es/XPCOM Glue">XPCOM Glue</a><br /> : <small>El XPCOM Glue permite usar las funciones y clases de la utilidad XPCOM, sin tener dependencia de partes del XPCOM (xpcom_core.{dll,so,dylib}).</small></span> <span class="alllinks"><a href="/Special:Tags?tag=XPCOM&language=es" title="Special:Tags?tag=XPCOM&language=es">Ver todos...</a></span></p> + </td> + <td> + <h4 id="Comunidad" name="Comunidad">Comunidad</h4> + <ul> + <li>En MozillaES + <ul> + <li><a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&Itemid=122&page=viewforum&f=15">Desarrollo</a> Mozilla y <a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&Itemid=122&page=viewforum&f=2">herramientas</a>.</li> + </ul> + </li> + </ul> + <ul> + <li><a class="external" href="http://torresburriel.com/mailman/listinfo/xul_torresburriel.com">Lista sobre XUL en español</a></li> + </ul> + <ul> + <li>Los foros de Mozilla en inglés.</li> + </ul> + <p></p><ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xpcom"> como lista de correo</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom"> como grupo de noticias</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom/feeds"> como RSS</a></li> +</ul><p></p> + <p> </p> + <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4> + <dl> + <dd> + <a href="/es/XUL" title="es/XUL">XUL</a>, <a href="/es/JavaXPCOM" title="es/JavaXPCOM">JavaXPCOM</a>, <a href="/es/PyXPCOM" title="es/PyXPCOM">PyXPCOM</a>, <a href="/es/XPConnect" title="es/XPConnect">XPConnect</a>, <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>.</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p></p> |