diff options
Diffstat (limited to 'files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html')
-rw-r--r-- | files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html | 214 |
1 files changed, 0 insertions, 214 deletions
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 deleted file mode 100644 index 04c901f4f9..0000000000 --- a/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -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> |