From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../introduction_to_extensions/index.html | 159 +++++++++++++++++++++ .../index.html | 78 ++++++++++ 2 files changed, 237 insertions(+) create mode 100644 files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html create mode 100644 files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html (limited to 'files/es/firefox_addons_developer_guide') 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 +--- +
+ {{ Draft() }}
+

{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}

+
+ Note: If you want contribute to this document please following guidelines from the Contribute page.
+

Este documento fue escrito por Hideyuki Emura y publicado originalmente en japonés para el Firefox Developers Conference Summer 2007. Emura-san es un coautor de Firefox 3 Hacks (O'Reilly Japan, 2008.)

+

Introducción

+

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.

+

¿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

+

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.

+

Acerca de las extensiones

+

Administrador de complementos

+

El administrador de complementos de firefox es una excelente manera para manejar las extensiones y es muy fácil de usar.

+

+

El Administrador de complementos se encarga de las siguientes tareas:

+ +

Características del entorno de desarrollo

+

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.

+

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.

+

É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. (https://addons.mozilla.org).

+

¿Qué podemos hacer con las extensiones?

+

Echemos un vistazo a que características pueden añadir las extensiones y algunos ejemplos reales de ellas.

+

Extensiones solo con una función.

+

{{ TODO("Update this") }}.

+

Éstas son extensiones relativamente simples que añaden solo una función.

+
+
+ Enlace de texto
+
+ Makes it so that double-clicking on an unlinked URL follows that URL.
+
+ Botón para abrir pestañas cerradas
+
+ Añade un botón en la barra de herramientas para volver a abrir las pestañas cerradas más recientemente en el menú del historial.
+
+
+
+ 1211576231.png
+
+
+
+ Barra de la dirección
+
+
+ Separa el dominio y la ruta de acceso de una URL para facilitar su lectura en la barra de direcciones.
+
+
+ locationbar.png
+
+

Feature enhancing extensions

+

{{ TODO("Update this") }}.

+

These extensions enhance features that already exist in Firefox.

+
+
+ Tab Mix Plus
+
+ Offers detailed tab-related settings.
+
+ PrefBar
+
+ Gives access to numerous preferences from the toolbar.PrefBar.png
+
+ NoScript
+
+ Enables and disables JavaScript execution on a site-by-site basis.
+
+

Web application integration extensions

+

{{ TODO("Update this") }}.

+

The use the APIs of certain web applications to provide certain pieces of information.

+

Forecastfox.png

+

New feature extensions

+

{{ TODO("Update this") }}.

+

Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.

+
+
+ GreaseMonkey
+
+ UserChrome.js
+
+ Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.
+
+
+
+ Adblock Plus
+
+ Blocks the display of unwanted advertisements on web pages.
+
+ All-in-One Gestures
+
+ Adds mouse-gesture functionality.
+
+

Application level extensions

+

{{ TODO("Update this") }}.

+

These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.

+

Firebug.gif

+

One-trick gag extensions

+

{{ TODO("Update this") }}.

+

There are a number of one-trick gag extensions that aren’t very useful.

+

Shiitake Mushroom (1).png

+

This is a very brief survey of a few extensions, but there are many other unique extensions available.

+

Table 1: Advanced customization methods for Firefox

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Customization MethodDoes it work for web sites?Does it work for Firefox?
User style sheets (change appearance through CSS) +

Yes; you can change the userContent.css file, or use the Stylish extension.

+ 		+

Yes; you can change the userChrome.css file, or use the Stylish extension.

+
User scripts (change appearance and functionality through JavaScript) +

Yes; you can use the GreaseMonkey extension or "bookmarklets."

+ 		+

Yes; you can change userChrome.js to add functionality through JavaScript.

+
Extensions (these can do anything)YesYes
Theming (this changes the look of the browser)NoYes
+

Vamos a construir una extensión

+

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.

+

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.

+

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.

+
+
+ 1 One of the authors of this special edition, Piro, is world-famous as one of the original developers.
+
+

{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}

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 +--- +

{{ Draft() }} {{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}

+

This document was authored by Hiroshi Shimoda of Clear Code Inc. and was originally published in Japanese for the Firefox Developers Conference Summer 2007. Shimoda-san is a co-author of Firefox 3 Hacks (O'Reilly Japan, 2008).

+

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.

+

Tecnologías utilizadas para desarrollar extensiones para Firefox

+

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.

+

El rol de cada tecnología

+

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.

+

Figure 1: rol de cada tecnología en firefox.

+

+

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 Capítulo 5.

+

Conocimientos básicos requeridos

+

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.
+ Para más información sobre estas tecnologías, por favor consulte otras fuentes.

+ +

XML: A text-based structural language

+

 XML, siglas en inglés de eXtensible Markup Language ('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).

+

Listing 1: XML syntax

+
<elementname someattribute="somevalue">
+  content
+</elementname>
+

As shown in Listing 1, XML uses elements, which consist of an opening tag, a closing tag, and content.

+
+ Note: Elements that take no content can be expressed in compact form as <elementname/>.
+

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.

+

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 "http://www.w3.org/1999/xhtml" ; for SVG is it "http://www.w3.org/2000/svg".

+

CSS: A style language to alter the display of XML documents

+

Like XML, Cascading Style Sheets (CSS) is a technical specification 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.

+

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.

+

Listing 2: CSS code sample

+
body {
+  color: black;
+  background-color: white;
+}
+p {
+  margin-bottom: 1em;
+  text-indent: 1em;
+}
+
+

JavaScript: The world's most misunderstood language

+

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.

+

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.

+

Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed AJAX (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.

+

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.

+

Firefox 3.5 includes a number of extensions to the specification standardized in ECMAScript 3rd Edition, and can use JavaScript 1.7 and JavaScript 1.8.

+

Listing 3: An example of a class definition in JavaScript

+
function MyClass() {
+}
+MyClass.prototype = {
+  property1 : true,
+  property2 : 'string',
+  method : function() {
+    alert('Hello, world!');
+  }
+};
+var obj = new MyClass();
+obj.method();
+
+

DOM: An API for manipulating XML documents

+

The Document Object Model (DOM) is a technical standard 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 innerHTML 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.

+

In addition, XUL lacks any equivalent for the innerHTML property, so if it weren’t for the DOM, dynamic processing would be impossible.

+

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.

+

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.

+

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 MDC documentation.

+

Listing 4: An example manipulation using the DOM

+
var bar = document.getElementById('toolbar');
+bar.removeChild(bar.childNodes[1]);
+bar.appendChild(document.createElement('button'));
+bar.lastChild.setAttribute('label', 'Hello!');
+
+

{{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}

-- cgit v1.2.3-54-g00ecf