diff options
Diffstat (limited to 'files/es/firefox_addons_developer_guide')
| -rw-r--r-- | files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html | 159 | ||||
| -rw-r--r-- | files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html | 78 |
2 files changed, 237 insertions, 0 deletions
diff --git a/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html b/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html new file mode 100644 index 0000000000..1261f4d562 --- /dev/null +++ b/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html @@ -0,0 +1,159 @@ +--- +title: 'Capítulo 1: Introducción a las extensiones.' +slug: Firefox_addons_developer_guide/Introduction_to_Extensions +--- +<div> + {{ Draft() }}</div> +<p>{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}</p> +<div class="note"> + <strong>Note: </strong>If you want contribute to this document please following guidelines from the <a class="internal" href="/en-US/docs/Firefox_addons_developer_guide/Contribute" title="En/Firefox_addons_developer_guide/Contribute">Contribute</a> page.</div> +<p><em>Este documento fue escrito por </em><a class="external" href="http://level.s69.xrea.com/mozilla/" title="http://level.s69.xrea.com/mozilla/"><em>Hideyuki Emura</em></a><em> y publicado originalmente en japonés para el </em><a class="link-https" href="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English" title="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English"><em>Firefox Developers Conference Summer 2007</em></a><em>. Emura-san es un coautor de <a class="external" href="http://www.oreilly.co.jp/books/9784873113753/index.html" title="http://www.oreilly.co.jp/books/9784873113753/index.html">Firefox 3 Hacks</a> (O'Reilly Japan, 2008.)</em></p> +<h2 id="Introducción">Introducción</h2> +<p>Si estás leyendo esta guía, probablemente has utilizado firefox antes. Tal vez la primera vez que viste firefox, es posible que te hayas sorprendido al ver que tiene una estructurara mucho más simple que otros navegadores con muchas funciones, como Opera o Safari.</p> +<p>¿Qué características son consideradas estándar para los navegadores en estos días? Tal vez cosas como controles de pestañas, movimientos del ratón, barras de herramientas y botones, un lector de feed, integración con una variedad de aplicaciones web, o herramientas sofisticadas para ayudar al diseño web. Pero nosotros no teníamos la intención de crear un navegador todo-en uno que pueda satisfacer a todos</p> +<p>En cambio, Firefox puede soportar estas características a través de las extensiones. El núcleo del navegador se limita a las funciones básicas, algo que puede hacer sentirse cómodo a un principiante, pero los usuarios que quieren algo más pueden instalar las extensiones.</p> +<h2 id="Acerca_de_las_extensiones">Acerca de las extensiones</h2> +<h3 id="Administrador_de_complementos">Administrador de complementos</h3> +<p>El administrador de complementos de firefox es una excelente manera para manejar las extensiones y es muy fácil de usar.</p> +<p><img alt="" class="internal" src="/@api/deki/files/3818/=addons-manager.png" style="width: 563px; height: 462px;"></p> +<p>El Administrador de complementos se encarga de las siguientes tareas:</p> +<ul> + <li>Instalaciones y desintalaciones seguras de complementos.</li> + <li>Verifica que el complemento sea compatible con la versión de firefox que estás usando.</li> + <li>Maneja listas blancas de sitios de confianza para la instalación de complementos.</li> + <li>Ayuda a solucionar problemas de complementos inhabilitándolos y faciliar un modo seguro.</li> + <li>Confirma y ejecuta actualizaciones.</li> + <li>Provee acceso a los diálogos de configuración del complemento.</li> + <li>Provee acceso a las páginas web de asistencia de los complementos.</li> +</ul> +<h3 id="Características_del_entorno_de_desarrollo">Características del entorno de desarrollo</h3> +<p>Inicialmente, no había suficiente documentación disponible, y los desarrolladores de extensiones quedaron en gran medida a su suerte; sin embargo, ahora hay un cuantioso depósito de conocimiento.</p> +<p>Debido a que Firefox y sus extensiones están diseñadas para soportar multiples idiomas, excelentes extensiones vienen de todo el mundo, y pueden ser localizadas rápidamente por cualquier persona que esté interesada.</p> +<p>Ésto facilita el uso y el desarrollo de extensiones; este hecho, combinado con la popularidad creciente de firefox, ha creado un búcle de realimentación positiva, y un crecimiento explosivo del número de usuarios y desarrolladores de las extensiones. Hay ahora más de 7000 extensiones y temas publicados en la página web de complementos de firefox. (<a class="link-https" href="https://addons.mozilla.org" rel="freelink">https://addons.mozilla.org</a>).</p> +<h2 id="¿Qué_podemos_hacer_con_las_extensiones">¿Qué podemos hacer con las extensiones?</h2> +<p>Echemos un vistazo a que características pueden añadir las extensiones y algunos ejemplos reales de ellas.</p> +<h3 id="Extensiones_solo_con_una_función.">Extensiones solo con una función.</h3> +<p>{{ TODO("Update this") }}.</p> +<p>Éstas son extensiones relativamente simples que añaden solo una función.</p> +<dl> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/1939/" title="https://addons.mozilla.org/firefox/1939/">Enlace de texto</a></dt> + <dd> + Makes it so that double-clicking on an unlinked URL follows that URL.</dd> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/3082/" title="https://addons.mozilla.org/firefox/3082/">Botón para abrir pestañas cerradas</a></dt> + <dd> + <span id="Dst[0][0:3:0:4]">Añade</span><span> </span><span id="Dst[0][5:5:6:7]">un</span><span> </span><span id="Dst[0][15:20:9:13]">botón</span><span> en la </span><span id="Dst[0][7:13:18:38]">barra de herramientas</span><span> </span><span id="Dst[0][22:23:40:43]">para</span><span> </span><span id="Dst[0][25:31:45:58]">volver a abrir</span><span> </span><span id="Dst[0][33:35:60:62]">las</span><span> </span><span id="Dst[0][58:61:64:71]">pestañas</span><span> </span><span id="Dst[0][51:56:73:80]">cerradas</span><span> </span><span id="Dst[0][42:49:86:98]">más recientemente</span><span> </span><span id="Dst[0][63:64:100:101]">en</span><span> </span><span id="Dst[0][66:68:103:104]">el</span><span> </span><span id="Dst[0][78:81:106:109]">menú del</span><span> </span><span id="Dst[0][70:76:111:119]">historial.</span></dd> +</dl> +<dl> + <dd> + <img alt="1211576231.png" class="internal default" src="/@api/deki/files/3316/=1211576231.png" style="width: 340px; height: 317px;"></dd> +</dl> +<dl> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/4014/" title="https://addons.mozilla.org/firefox/4014/">Barra de la dirección</a></dt> + <dd> + <div> + <span id="Dst[0][0:8:0:5]">Separa</span><span> </span><span id="Dst[0][18:23:18:24]">el dominio</span><span> </span><span id="Dst[0][25:27:26:26]">y</span><span> la ruta de </span><span id="Dst[0][29:32:36:41]">acceso</span><span> de una URL para facilitar su lectura </span><span id="Dst[0][34:35:43:44]">en</span><span> </span><span id="Dst[0][37:39:46:47]">la</span><span> </span><span id="Dst[0][50:52:49:53]">barra</span><span> de </span><span id="Dst[0][41:48:58:68]">direcciones</span><span>.</span></div> + </dd> + <dd> + <img alt="locationbar.png" class="internal default" src="/@api/deki/files/3317/=locationbar.png" style="width: 200px; height: 150px;"></dd> +</dl> +<h3 id="Feature_enhancing_extensions">Feature enhancing extensions</h3> +<p>{{ TODO("Update this") }}.</p> +<p>These extensions enhance features that already exist in Firefox.</p> +<dl> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/1122/" title="https://addons.mozilla.org/firefox/1122/">Tab Mix Plus</a></dt> + <dd> + Offers detailed tab-related settings.</dd> + <dt> + <a class="external" href="http://prefbar.mozdev.org/" title="http://prefbar.mozdev.org/">PrefBar</a></dt> + <dd> + Gives access to numerous preferences from the toolbar.<img alt="PrefBar.png" class="internal default" src="/@api/deki/files/3371/=PrefBar.png" style="width: 843px; height: 113px;"></dd> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/722/" title="https://addons.mozilla.org/firefox/722/">NoScript</a></dt> + <dd> + Enables and disables JavaScript execution on a site-by-site basis.</dd> +</dl> +<h3 id="Web_application_integration_extensions">Web application integration extensions</h3> +<p>{{ TODO("Update this") }}.</p> +<p>The use the APIs of certain web applications to provide certain pieces of information.</p> +<p><img alt="Forecastfox.png" class="internal default" src="/@api/deki/files/3372/=Forecastfox.png" style="width: 359px; height: 94px;"></p> +<h3 id="New_feature_extensions">New feature extensions</h3> +<p>{{ TODO("Update this") }}.</p> +<p>Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.</p> +<dl> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/748/" title="https://addons.mozilla.org/firefox/748/">GreaseMonkey</a></dt> + <dt> + <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=397735" title="http://forums.mozillazine.org/viewtopic.php?t=397735">UserChrome.js</a></dt> + <dd> + Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.</dd> +</dl> +<dl> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/1865/" title="https://addons.mozilla.org/firefox/1865/">Adblock Plus</a></dt> + <dd> + Blocks the display of unwanted advertisements on web pages.</dd> + <dt> + <a class="link-https" href="https://addons.mozilla.org/firefox/12/" title="https://addons.mozilla.org/firefox/12/">All-in-One Gestures</a></dt> + <dd> + Adds mouse-gesture functionality.</dd> +</dl> +<h3 id="Application_level_extensions">Application level extensions</h3> +<p>{{ TODO("Update this") }}.</p> +<p>These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.</p> +<p><img alt="Firebug.gif" class="internal default" src="/@api/deki/files/3373/=Firebug.gif" style="width: 712px; height: 336px;"></p> +<h3 id="One-trick_gag_extensions">One-trick gag extensions</h3> +<p>{{ TODO("Update this") }}.</p> +<p>There are a number of one-trick gag extensions that aren’t very useful.</p> +<p><img alt="Shiitake Mushroom (1).png" class="internal default" src="/@api/deki/files/3375/=Shiitake%20Mushroom%20(1).png" style="width: 200px; height: 150px;"></p> +<p>This is a very brief survey of a few extensions, but there are many other unique extensions available.</p> +<p><strong>Table 1: Advanced customization methods for Firefox</strong></p> +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Customization Method</td> + <td class="header">Does it work for web sites?</td> + <td class="header">Does it work for Firefox?</td> + </tr> + <tr> + <td>User style sheets (change appearance through CSS)</td> + <td> + <p>Yes; you can change the <code>userContent.css</code> file, or use the Stylish extension.</p> + </td> + <td> + <p>Yes; you can change the <code>userChrome.css</code> file, or use the Stylish extension.</p> + </td> + </tr> + <tr> + <td>User scripts (change appearance and functionality through JavaScript)</td> + <td> + <p>Yes; you can use the GreaseMonkey extension or "bookmarklets."</p> + </td> + <td> + <p>Yes; you can change <code>userChrome.js</code> to add functionality through JavaScript.</p> + </td> + </tr> + <tr> + <td>Extensions (these can do anything)</td> + <td>Yes</td> + <td>Yes</td> + </tr> + <tr> + <td>Theming (this changes the look of the browser)</td> + <td>No</td> + <td>Yes</td> + </tr> + </tbody> +</table> +<h2 id="Vamos_a_construir_una_extensión">Vamos a construir una extensión</h2> +<p>La tabla 1 muestra varias opciones de personalización disponibles para un usuario en firefox. Los usuarios tienen opciones de personalicación Flexibles, usando CSS en las hojas de estilo del usuario y javaScript/DOM en los script del usuario.</p> +<p>En adición a CSS y Javascript, las extensiones pueden tomar ventajas de las tecnologías XUL y XPCOM para características más sofisticadas. Temas, los cuales pueden alterar la apariencia de firefox, son un tipo de complemento.</p> +<p>Para crear una extension, necesitas una idea y sólo un poco de abilidad programando. Los siguientes capítulos explicaremos con detalles las tecnicas para escribir extensiones.</p> +<div class="footnotes"> + <div class="note" id="footnote1"> + <a href="#from_footnote1">1</a> One of the authors of this special edition, Piro, is world-famous as one of the original developers.</div> +</div> +<p>{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}</p> diff --git a/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html b/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html new file mode 100644 index 0000000000..92188c9df8 --- /dev/null +++ b/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html @@ -0,0 +1,78 @@ +--- +title: 'Chapter 2: Technologies used in developing extensions' +slug: Firefox_addons_developer_guide/Technologies_used_in_developing_extensions +--- +<p>{{ Draft() }} {{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}</p> +<p><em>This document was authored by <a class="external" href="http://piro.sakura.ne.jp/" title="http://piro.sakura.ne.jp/">Hiroshi Shimoda</a> of </em><a class="external" href="http://www.clear-code.com/" title="http://www.clear-code.com/"><em>Clear Code Inc.</em></a><em> and was originally published in Japanese for the </em><a class="link-https" href="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English" title="https://wiki.mozilla.org/Japan/FxDevCon/Summer2007/English"><em>Firefox Developers Conference Summer 2007</em></a><em>. Shimoda-san </em><em>is a co-author of <a class="external" href="http://www.oreilly.co.jp/books/9784873113753/index.html" title="http://www.oreilly.co.jp/books/9784873113753/index.html">Firefox 3 Hacks</a> (O'Reilly Japan, 2008).</em></p> +<p>Antes de sumergirse en una explicación, rápidamente nos introduciremos en las tecnologías utilizadas para desarrollar extensiones en firefox. Nosotros también conoceremos los conocimientos míminos que se necesitan para desarrollar una extensión para firefox.</p> +<h2 id="Tecnologías_utilizadas_para_desarrollar_extensiones_para_Firefox">Tecnologías utilizadas para desarrollar extensiones para Firefox</h2> +<p>Firefox y sus extensiones están ambos basados en el desarrollo con tecnologías ampliamente usadas en la web. Su estructura es similar a la de HTML dynamico usado en algunas páginas webs, or el HTML de aplicaciones usado en Windows. Si tienes experiencia desarrollando HTML dinamico, Tú probablemente lo encontrarás relativamente fácil desarrollar una extensión para Firefox.</p> +<h2 id="El_rol_de_cada_tecnología">El rol de cada tecnología</h2> +<p>Firefox está construido en gran parte con cuatro tecnologías: XUL, CSS, Javascript y XPCOM. Las extensiones también están construidas usando esas cuatros tecnologías.</p> +<p><strong>Figure 1: rol de cada tecnología en firefox.</strong></p> +<p><img alt="" class="internal" src="/@api/deki/files/3762/=chap2_fig1.png" style="width: 740px; height: 350px;"></p> +<p>En addition a esas tecnologías, el desarrollo de una extensión requerira que aprendas sobre como otorgar priviligos para vence priviligios de restricciones de seguridad en el código que escribistes, y como insertar tu codigo dentro de Firefox UI. Estos errores son discutidos en el <a class="internal" href="/En/Firefox_addons_developer_guide/Let's_build_a_Firefox_extension" title="En/Firefox addons developer guide/Let's build a Firefox extension">Capítulo 5</a>.</p> +<h2 id="Conocimientos_básicos_requeridos">Conocimientos básicos requeridos</h2> +<p>En el interest de brevedad, Vamos a omitir explicaciones de tecnologías, y nos enfocaremos en la introducción de nuevas tecnologías que necesitarás entender para desarrollar para Firefox. Asumimos que tu tienes esperiencia desarrollando con HTML dinamico, así como de los temas a continuación.<br> + Para más información sobre estas tecnologías, por favor consulte otras fuentes.</p> +<ul> + <li><a class="internal" href="/en/XML" title="En/XML">XML codificación</a></li> + <li><a class="internal" href="/en/CSS" title="En/CSS">CSS coding</a></li> + <li><a class="internal" href="/en/JavaScript" title="En/JavaScript">Basic JavaScript syntax</a></li> +</ul> +<h3 id="XML_A_text-based_structural_language">XML: A text-based structural language</h3> +<p> XML, siglas en inglés de <a class="external" href="http://www.w3.org/TR/REC-xml/" title="http://www.w3.org/TR/REC-xml/">eXtensible Markup Language</a> ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de datos, siendo útil cuando varias aplicaciones se deben comunicar entre sí o integrar información. (Bases de datos Silberschatz).</p> +<p><strong>Listing 1: XML syntax</strong></p> +<pre class="brush: xml"><elementname someattribute="somevalue"> + content +</elementname></pre> +<p>As shown in Listing 1, XML uses elements, which consist of an opening tag, a closing tag, and content.</p> +<div class="note" id="footnote2"> + <strong>Note: </strong>Elements that take no content can be expressed in compact form as <code><elementname/>.</code></div> +<p>An element can include other elements as well as text in its content, and all information is structured as a tree. As in all trees, elements can have children (elements contained within them) and parents (elements that contain them). Attributes can also be added to opening tags, each with a value.</p> +<p>As the "extensible" part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a "namespace URI" identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"</code> ; for SVG is it "<code><a class="external" href="http://www.w3.org/2000/svg" rel="freelink">http://www.w3.org/2000/svg</a></code>".</p> +<h3 id="CSS_A_style_language_to_alter_the_display_of_XML_documents">CSS: A style language to alter the display of XML documents</h3> +<p>Like XML, Cascading Style Sheets (CSS) is a <a class="external" href="http://www.w3.org/Style/CSS/" title="http://www.w3.org/Style/CSS/">technical specification</a> established by the W3C; it is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data can be reused better than it is when structural and stylistic markup are both embedded in HTML.</p> +<p>There are three CSS specifications (Level 1 through Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.</p> +<p><strong>Listing 2: CSS code sample</strong></p> +<pre class="brush: css">body { + color: black; + background-color: white; +} +p { + margin-bottom: 1em; + text-indent: 1em; +} +</pre> +<h3 id="JavaScript_The_world's_most_misunderstood_language">JavaScript: The world's most misunderstood language</h3> +<p>JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.</p> +<p>Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.</p> +<p>Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed <a class="internal" href="/en/AJAX" title="En/AJAX">AJAX</a> (Asynchronous JavaScript and XML); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.</p> +<p>JavaScript is a prototype-based object-oriented language, and as shown in Listing 3, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.</p> +<p>Firefox 3.5 includes a number of extensions to the specification standardized in ECMAScript 3rd Edition, and can use <a class="internal" href="/en/New_in_JavaScript_1.7" title="En/New in JavaScript 1.7">JavaScript 1.7</a> and <a class="internal" href="/en/New_in_JavaScript_1.8" title="En/New in JavaScript 1.8">JavaScript 1.8</a>.</p> +<p><strong>Listing 3: An example of a class definition in JavaScript</strong></p> +<pre class="brush: js">function MyClass() { +} +MyClass.prototype = { + property1 : true, + property2 : 'string', + method : function() { + alert('Hello, world!'); + } +}; +var obj = new MyClass(); +obj.method(); +</pre> +<h3 id="DOM_An_API_for_manipulating_XML_documents">DOM: An API for manipulating XML documents</h3> +<p>The <a class="internal" href="/en/DOM" title="En/DOM">Document Object Model</a> (DOM) is a <a class="external" href="http://www.w3.org/DOM/" title="http://www.w3.org/DOM/">technical standard</a> promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the <code>innerHTML</code> property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript's object-oriented nature.</p> +<p>In addition, XUL lacks any equivalent for the <code>innerHTML</code> property, so if it weren’t for the DOM, dynamic processing would be impossible.</p> +<p>There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.</p> +<p>With the DOM, the contents of an XML document are handled as a "DOM tree," a collection of element nodes and other nodes. Listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.</p> +<p>We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the <a class="internal" href="/en/XUL_Tutorial/Document_Object_Model" title="En/XUL Tutorial/Document Object Model">MDC documentation</a>.</p> +<p><strong>Listing 4: An example manipulation using the DOM</strong></p> +<pre class="brush: js">var bar = document.getElementById('toolbar'); +bar.removeChild(bar.childNodes[1]); +bar.appendChild(document.createElement('button')); +bar.lastChild.setAttribute('label', 'Hello!'); +</pre> +<p>{{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}</p> |