diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-06 12:07:28 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-06 12:07:28 -0400 |
| commit | 4f70db6399a732ca7571c6c8cb952be7c9a85763 (patch) | |
| tree | 3a8b67ddf3790f32902d686e4939abedb7c97578 /files/es/orphaned | |
| parent | a0526cb59dfc2de8f87f12e09d9fa6bf2fca6c92 (diff) | |
| download | translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.gz translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.tar.bz2 translated-content-4f70db6399a732ca7571c6c8cb952be7c9a85763.zip | |
delete conflicting/orphaned in es (#1418)
Diffstat (limited to 'files/es/orphaned')
140 files changed, 0 insertions, 16769 deletions
diff --git a/files/es/orphaned/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html b/files/es/orphaned/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html deleted file mode 100644 index f4c2d0d435..0000000000 --- a/files/es/orphaned/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Actualizar extensiones para Firefox 3 -slug: >- - orphaned/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 -tags: - - Firefox 3 -original_slug: Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 ---- -<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> Este artículo ofrece información que será de utilidad para desarrolladores que deseen actualizar sus extensiones, con el propósito de que éstas funcionen correctamente con Firefox 3.</p> - -<p>Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es un empuje al campo <code>maxVersion</code> en el manifiesto de instalación, y la extensión está disponible en el servidor <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a>, ¡no necesitas actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para ajustar <code>maxVersion</code>. De esta manera, puedes evitar el trabajo de tener que volver a revisar tu extensión.</p> - -<h3 id="Paso_1_Actualiza_el_manifiesto_de_instalaci.C3.B3n" name="Paso_1:_Actualiza_el_manifiesto_de_instalaci.C3.B3n">Paso 1: Actualiza el manifiesto de instalación</h3> - -<p>El primer paso <span style='font-family: "Times New Roman"; font-size: 12pt;'>—</span>y para muchas extensiones, el único que será necesario<span style='font-family: "Times New Roman"; font-size: 12pt;'>—</span> es actualizar el archivo <code>install.rdf</code> dentro del manifiesto <a href="/es/Manifiesto_de_instalaci%C3%B3n" title="es/Manifiesto_de_instalación">install manifest</a> para indicar la compatibilidad con Firefox 3.</p> - -<p>Simplemente encuentra la línea que indica el número de la versión máxima compatible de Firefox, lo que para Firefox 2 es algo como:</p> - -<pre class="eval"> <span class="nowiki"><em:maxVersion>2.0.*</em:maxVersion></span> -</pre> - -<p>Cámbiala para indicar compatibilidad con Firefox 3:</p> - -<pre class="eval"> <span class="nowiki"><em:maxVersion>3.0.*</em:maxVersion></span> -</pre> - -<p>A continuación, reinstala la extensión.</p> - -<p>Recuerda que en Firefox 3 no necesitas incluir el ".0" extra en el número de versión, con lo que, en lugar de usar "3.0.0.*", sólo necesitas usar "3.0.*".</p> - -<div class="note"> -<p><strong>Nota:</strong> Ten en cuenta que actualmente, se esperan muchos cambios en Firefox 3. Estos cambios podrían romper algunas extensiones, por lo que no deberías ofrecer una nueva versión con <code>maxVersion</code> <code>3.0.*</code> a los usuarios, hasta que salgan las versiones RC (release candidate). Durante el periodo Beta, deberías usar <code>maxVersion</code> <code>3.0b5</code>.</p> -</div> - -<p>Ha habido (y continuará habiendo) una serie de cambios en la API que muy probablemente romperá algunas extensiones. Aún estamos trabajando para hacer una lista de todos estos cambios.</p> - -<div class="note"> -<p><strong>Nota:</strong> Si tu extensión aún usa un script <code><a href='\"es/Install.js\"'>Install.js</a></code> en lugar de un <a href='\"es/Install_Manifests\"'>install manifest</a>, necesitas hacer la transición a un manifiesto de instalación ahora. Firefox 3 ya no implementa scripts <code>install.js</code> en archivos XPI.</p> -</div> - -<h4 id="Agregar_localizaciones_al_manifiesto_de_instalaci.C3.B3n" name="Agregar_localizaciones_al_manifiesto_de_instalaci.C3.B3n">Agregar localizaciones al manifiesto de instalación</h4> - -<p>Firefox 3 tiene tres nuevas propiedades en el manifiesto de instalación para especificar descripciones de localización. Los métodos antiguos aún funcionan. Sin embargo, los nuevos permiten que Firefox escoja la localización aún cuando la extensión esté deshabilitada o pendiente de instalación. Visita <a href="/es/Localizing_extension_descriptions" title="es/Localizing_extension_descriptions">Localizing extension descriptions</a> para más detalles.</p> - -<h3 id="Paso_2_Aseg.C3.BArate_de_suministrar_actualizaciones_seguras" name="Paso_2:_Aseg.C3.BArate_de_suministrar_actualizaciones_seguras">Paso 2: Asegúrate de suministrar actualizaciones seguras</h3> - -<p>Si tienes la extensión en tu propio servidor y no en un servidor seguro como <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a>, debes suministrar un método para la descarga segura de la extensión. Esto puede hacerse manteniendo un servidor SSl, o usando claves criptográficas para firmar la información de la extensión. Lee <a href="/es/Extension_Versioning,_Update_and_Compatibility#Securing_Updates" title="es/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">Securing Updates</a> para más información.</p> - -<h3 id="Paso_3_Manejate_con_los_cambios_en_los_API" name="Paso_3:_Manejate_con_los_cambios_en_los_API">Paso 3: Debes estar al tanto de los cambios en las API</h3> - -<p>Muchas API han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:</p> - -<h4 id="DOM" name="DOM">DOM</h4> - - -<p>Nodes from external documents should be cloned using <a href="/es/docs/Web/API/Document/importNode" title="Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual."><code>document.importNode()</code></a> (or adopted using <a href="/es/docs/Web/API/Document/adoptNode" title="Adopta un nodo extreno. El nodo y sub subnodos son quitados del documento en que se encuentra y su nuevo ownerDocument se cambia por el actual. El nodo puede entoces ser insertado en el documento actual."><code>document.adoptNode()</code></a>) before they - can be inserted into the current document. For more on the <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> issues, see the - <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> - - <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many - sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for - improved future compatibility.</p> - -<h4 id="Marcadores__Historial" name="Marcadores_&_Historial">Marcadores e Historial</h4> - -<p>Si tu extensión accede a los marcadores o al historial de alguna forma, necesitarás un gran esfuerzo para hacerla compatible con Firefox 3. Los API antiguos que accedian a esta información, han sido reemplazados por la nueva arquitectura <a href="/es/Cat%C3%A1logo" title="es/Catálogo">Catálogo</a>. Ver <a href="/es/Gu%C3%ADa_para_la_migraci%C3%B3n_a_cat%C3%A1logo" title="es/Guía_para_la_migración_a_catálogo">Guía para la migración a catálogo</a> para más detalles de cómo actualizar tus extensiones en el uso de las API de catálogo.</p> - -<h4 id="Administrador_de_descargas" name="Administrador_de_descargas">Administrador de descargas</h4> - -<p>El API del administrador de descargas ha cambiado ligeramente debido a la transición desde el uso del almacén de datos RDF al uso del API <a href="/es/Storage" title="es/Storage">Storage</a>. Esto debería ser una transición pequeña y fácil. Adicionalmente, el API para vigilar los procesos de descarga ha cambiado para que maneje varias escuchas de descarga. Ver <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>, <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>, y <a href="/es/Vigilar_descargas" title="es/Vigilar_descargas">Monitoring downloads</a> para más información.</p> - -<h4 id="Administrador_de_contrase.C3.B1as" name="Administrador_de_contrase.C3.B1as">Administrador de contraseñas</h4> - -<p>Si tu extensión accede a información de identidad de usuario del Administrador de Contraseñas, necesitará ser actualizada para usar el nuevo API Administrador de Contraseñas.</p> - -<ul> - <li>El artículo <a href="/es/Using_nsILoginManager" title="es/Using_nsILoginManager">Using nsILoginManager</a> incluye ejemplos, que incluyen una demostración de cómo debes escribir extensiones que trabajen tanto con el Administrador de Contraseñas (Password Manager) como con el Administrador de Registro (Login Manager) para que ambos trabajen con Firefox 3 y versiones anteriores.</li> - <li><code><a href="/es/NsILoginInfo" title="es/NsILoginInfo">nsILoginInfo</a></code></li> - <li><code><a href="/es/NsILoginManager" title="es/NsILoginManager">nsILoginManager</a></code></li> -</ul> - -<p>También puedes sobre-escribir el almacén del administrador de contraseñas interno si quieres ofrecer tu propio almacén en tu extensión. Ver <a href="/es/Creating_a_Login_Manager_storage_module" title="es/Creating_a_Login_Manager_storage_module">Creating a Login Manager storage module</a> para más detalles.</p> - -<h4 id="Ventanas_emergentes_.28Men.C3.BAs.2C_Men.C3.BAs_contextuales.2C_Tooltips_y_Paneles.29" name="Ventanas_emergentes_.28Men.C3.BAs.2C_Men.C3.BAs_contextuales.2C_Tooltips_y_Paneles.29">Ventanas emergentes (Menús, Menús contextuales, Tooltips y Paneles)</h4> - -<p>En Firefox 3, se ha modificado sustancialmente el sistema XUL de ventanas emergentes. El sistema de ventanas emergentes, contempla ahora, menús, menús contextuales y paneles. Se ha creado una guía a <a href="/es/XUL/PopupGuide" title="es/XUL/PopupGuide">using Popups</a>, detallando cómo funciona este sistema. Una cosa a tener en cuenta, es que se desaconseja el uso de <code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> en favor de los nuevos <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> y <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/es/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span></code>.</p> - -<h4 id="Autocompletado" name="Autocompletado">Autocompletado</h4> - -<p>El método <code><a href="/es/NsIAutoCompleteController#handleEnter.28.29" title="es/NsIAutoCompleteController#handleEnter.28.29">handleEnter()</a></code> del interfaz <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAutoCompleteController" title="">nsIAutoCompleteController</a></code> ha cambiado para aceptar un argumento que indique si el texto ha sido seleccionado en una ventana de Autocompletado o por que el usuario ha pulsado Intro después de teclear algún texto.</p> - -<h4 id="Analizador_del_DOM_.28DOMParser.29" name="Analizador_del_DOM_.28DOMParser.29">Analizador del DOM (DOMParser)</h4> - -<ul> - <li>Cuando se inicia una instancia del <code>DOMParser</code>, se hereda el código de la llamada principal y los códigos <code>documentURI</code> y <code>baseURI</code> de la ventana del constructor de donde viene.</li> - <li>Si elllamante tiene privilegios UniversalXPConnect, puede pasar parámetros a <code>new DOMParser()</code>. Si se pasan menos de tres parámetros, los parámetros restantes se pasarán con el valor <code>null</code>. - <ul> - <li>El primer parámetro es el principal a usar; esto sobre-escribe el valor heredado del principal.</li> - <li>El segundo parámetro es la <code>documentURI</code> a usar.</li> - <li>El tercer parámetro es la <code>baseURI</code> a usar.</li> - </ul> - </li> - <li>Si inicias un <code>DOMParser</code> usando un contrato como <code>createInstance()</code>, y no llamas al método <code>init()</code> de <code>DOMParser</code>, al intentar iniciar la operación de análisis, se creará automáticamente una <code>DOMParser</code> con un principal nulo y un puntero <code>null</code> a <code>documentURI</code> y <code>baseURI</code>.</li> -</ul> - -<h4 id="Interfaces_eliminados" name="Interfaces_eliminados">Interfaces eliminados</h4> - -<p>Los siguientes interfaces han sido eliminados en Gecko 1.9, que es el motor de Firefox 3. Si tu extensión hace uso de cualquiera de estos interfaces, necesitas actualizar tu código:</p> - -<ul> - <li><code>nsIDOMPaintListener</code></li> - <li><code>nsIDOMScrollListener</code></li> - <li><code>nsIDOMMutationListener</code></li> - <li><code>nsIDOMPageTransitionListener</code></li> - <li><code>nsICloseAllWindows</code> (see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=386200" title='FIXED: SeaMonkey only: no "view cert button" in untrusted cert error dialog'>error 386200</a>)</li> -</ul> - -<h3 id="Paso_4_Comprueba_los_cambios_importantes_en_el_chrome" name="Paso_4:_Comprueba_los_cambios_importantes_en_el_chrome">Paso 4: Comprueba los cambios importantes en el chrome</h3> - -<p>Ha habido un cambio pequeño en el chrome que puede requerir cambis en tu código. Se ha añadido un nuevo <code>vbox</code> llamado "browser-bottombox", que integra la barra de búsqueda y la barra de estado en la parte baja de la ventana del navegador. Aunque esto no afecta a la apariencia de la pantalla, puede que afecte a tu extensión si está hace uso de los elementos descritos.</p> - -<p>Por ejemplo, si has recubierto algún elemento del chrome antes de la barra de estado de esta manera:</p> - -<pre><window id="main-window"> - <something insertbefore="status-bar" /> -</window> -</pre> - -<p>Debes cambiar tu código a algo como:</p> - -<pre><vbox id="browser-bottombox"> - <something insertbefore="status-bar" /> -</vbox> -</pre> - -<p>O usar la siguiente técnica para hacer que el recubrimiento funciones tanto en Firefox 2 como Firefox 3:</p> - -<pre><window id="main-window"> - <vbox id="browser-bottombox" insertbefore="status-bar"> - <something insertbefore="status-bar" /> - <vbox> -</window> -</pre> - -<div class="note"> -<p><strong>Nota:</strong> Este cambio es efectivo a partir de Firefox 3 beta 4.</p> -</div> - -<h3 id="Otros_cambios" name="Otros_cambios">Otros cambios</h3> - -<p><em>Añade los cambios sencillos que tengas que realizar al actualizar tu extensión para que funciones con Firefox 3.</em></p> - -<ul> - <li><code><a class="external" rel="freelink">chrome://browser/base/utilityOverlay.js</a></code> ya no está implementado por razones de seguridad. Si estabas usando esto, debes cambiarlo a <code><a class="external" rel="freelink">chrome://browser/content/utilityOverlay.js</a></code>.</li> - <li>Las implementaciones de <code><a href="/es/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule" title="">nsIAboutModule</a></code> ahora requieren implementar el método <code>getURIFlags</code>. Ver <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl" rel="custom">nsIAboutModule.idl</a> para más información. Esto afecta a las extensiones que ofezcan nuevas URI del tipo <code>about:</code>. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=337746" title='FIXED: [FIX]Move "safe about" hardcoding out of security manager'>error 337746</a>)</li> - <li>El elemento <code><a href="/es/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> ya no forma parte de "toolkit" (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=339964" title="FIXED: move tabbrowser.xml out of mozilla/toolkit and into mozilla/browser">error 339964</a>). Esto significa que este elemento ya no está visible en las aplicaciones o extensiones XUL. Este elmento sigue siendo parte de la ventana principal de Firefox (browser.xul).</li> - <li>Cambios en <a href="/es/NsISupports_proxies" title="es/NsISupports_proxies">nsISupports proxies</a></li> -</ul> - -<p>Es necesario documentar los interfaces a y los relacionados con sus hilos.</p> - -<ul> - <li>Si usas instrucciones de proceso XML, tales como <code><?xml-stylesheet ?></code> en tus archivos XUL, ten en cuenta los cambios expuestos en <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=319654" title="FIXED: Processing instructions in XUL are not added to the content model">error 319654</a>: - - <ol> - <li>Se añade al DOM del documento XUL, los XML PIs. Esto significa que <a href="/es/docs/Web/API/Document/firstChild" title="La documentación acerca de este tema no ha sido escrita todavía . ¡Por favor considera contribuir !"><code>document.firstChild</code></a> no tiene garantía de ser el elemento raiz. Si necesitas referenciar el documento raiz en tu script, usa <a href="/es/docs/Web/API/Document/documentElement" title="Solo-lectura"><code>document.documentElement</code></a> en su lugar.</li> - <li>Las instrucciones de proceso <code><?xml-stylesheet ?></code> y <code><?xul-overlay ?></code> no tienen ahora efecto fuera del prologo del documento.</li> - </ol> - </li> - <li>Cuando se carga contenido web (se carga la página en el navegador) no se inicia <code>window.addEventListener("load", myFunc, true)</code>. Esto ocurre por que <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">error 296639</a> cambia la forma de comunicación entre las ventanas internas y externas. La forma fácil de corregir esto, es usar <code>gBrowser.addEventListener("load", myFunc, true)</code>, según se describe <a href="/es/Code_snippets/Tabbed_browser#Detecting_page_load" title="es/Code_snippets/Tabbed_browser#Detecting_page_load">aquí</a> y que funciona también en Firefox 2.</li> - <li><code>content.window.getSelection()</code> ofrece un objeto (que puede ser convertido en cadena con <code>toString()</code>), mientras que se desaconseja el uso de <code>content.document.getSelection()</code> que devuelve una cadena</li> - <li>Se desaconseja, a partir de Firefox 2, el uso de <code>event.preventBubble()</code> y por tanto ha desaparecido en Firefox 3. En su lugar, usa <a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a>, que también funciona en Firefox 2.</li> - <li>Los contadores de tiempo que se inician usando <code>setTimeout()</code>, ahora están bloqueados por las ventanas en modo 'modal' por el ajuste hecho por <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=52209" title="FIXED: JS timers can fire while a modal dialog is open">error 52209</a>. En su lugar, deberías usar <code>nsITimer</code>.</li> - <li>Si tu extensión necesita permitir una fuente no fiable (por ejemplo un sitio web) para acceder al chrome de la extensión, debes usar el nuevo flag <a href="/es/Chrome_Registration#contentaccessible" title="es/Chrome_Registration#contentaccessible"><code>contentaccessible</code> flag</a>.</li> -</ul> diff --git a/files/es/orphaned/actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_mozilla/index.html b/files/es/orphaned/actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_mozilla/index.html deleted file mode 100644 index 37200af055..0000000000 --- a/files/es/orphaned/actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_mozilla/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla -slug: >- - orphaned/Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla -tags: - - Complementos - - Todas_las_Categorías - - extensiones -original_slug: Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla ---- -<p> </p> -<p>Este artículo muestra cómo coger una extensión existente y actualizarla para que pueda ser utilizada en otras aplicaciones de Mozilla. Utilizaremos como base la extensión de visualización de stocks creada en los artículos anteriores de esta serie, actualizándola para que pueda ser utilizada en Thunderbird y Sunbird (las anteriores versiones sólo funcionaban en Firefox).</p> -<p>Si aún no has creado una extensión o te gustaría refrescar la memoria, echa una ojeada a los anteriores artículos de la serie:</p> -<ul> <li><a href="/es/Crear_una_extensi%C3%B3n_en_la_barra_de_estado" title="es/Crear_una_extensión_en_la_barra_de_estado">Crear una extensión en la barra de estado</a></li> <li><a href="/es/Crear_una_extensi%C3%B3n_din%C3%A1mica_en_la_barra_de_estado" title="es/Crear_una_extensión_dinámica_en_la_barra_de_estado">Crear una extensión dinámica en la barra de estado</a></li> <li><a href="/es/A%C3%B1adir_preferencias_a_una_extensi%C3%B3n" title="es/Añadir_preferencias_a_una_extensión">Añadir preferencias a una extensión</a></li> <li><a href="/es/Traducir_una_extensi%C3%B3n" title="es/Traducir_una_extensión">Traducir una extensión</a></li> -</ul> -<h2 id="Descargar_el_ejemplo">Descargar el ejemplo</h2> -<p>Puedes descargar el código de ejemplo de este artículo para que puedas compararlo con el artículo o para utilizarlo como base para tu propia extensión.</p> -<ul> <li><a class="external" href="http://developer.mozilla.org/samples/extension-samples/stockwatcher-multiapp.zip">Descargar el ejemplo</a></li> -</ul> -<h2 id="Actualizar_el_manifiesto_de_instalaci.C3.B3n">Actualizar el manifiesto de instalación</h2> -<p>El primer paso es revisar el <a href="/es/Manifiesto_de_instalaci%C3%B3n" title="es/Manifiesto_de_instalación">manifiesto de instalación</a> para indicar que puede ser instalado en Thunderbird y Sunbird. Esto se hace añadiendo nuevas etiquetas <code><targetApplication></code> al fichero <code>install.rdf</code>, como esta:</p> -<pre> <!-- Describe las versiones de Thunderbird soportadas --> - - <em:targetApplication> - <Description> - <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> - <em:minVersion>1.5</em:minVersion> - <em:maxVersion>2.0.0.*</em:maxVersion> - </Description> - </em:targetApplication> - - <!-- Describe las versiones de Sunbird soportadas --> - - <em:targetApplication> - <Description> - <em:id> {718e30fb-e89b-41dd-9da7-e25a45638b28}</em:id> - <em:minVersion>0.2</em:minVersion> - <em:maxVersion>0.4.*</em:maxVersion> - </Description> - </em:targetApplication> -</pre> -<p>Estos dos bloques indican que la extensión soporta las versiones de la 1.5 a la 2.0.0.x de Thunderbird y las de la 0.2 a la 0.4.x de Sunbird.</p> -<p>Después de introducir este código, puedes instalar la extensión en Firefox, Thunderbird o Sundbird, aunque no obtendrás ningún efecto ni en Thunderbird ni en Sunbird.</p> -<p>Esto pasa porque no hay nada que le diga a esas dos aplicaciones qué hacer con el chrome proporcionado por la extensión. Ahí es donde el <a href="/es/Manifiesto_chrome" title="es/Manifiesto_chrome">manifiesto chrome</a> entra en acción.</p> -<h2 id="Actualizar_el_manifiesto_chrome">Actualizar el manifiesto chrome</h2> -<p>¿Recuerdas el <a href="/es/Crear_una_extensi%C3%B3n_en_la_barra_de_estado" title="es/Crear_una_extensión_en_la_barra_de_estado">primer artículo de la serie</a> cuando creamos nuestro manifiesto chrome, el cual no hemos tocado desde entonces? Es hora de tocarlo. Como podrás (o no) recordar, dicho fichero le dice a la aplicación sobre qué código XUL necesita la interfaz de tu extensión ser mezclada.</p> -<p>Para Firefox, sobrecargamos el <code>browser.xul</code>, que describe la ventana del navegador de Firefox. Necesitamos añadir líneas al manifiesto para Thunderbird y Sunbird, así:</p> -<pre># Thunderbird -overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul - -# Sunbird - -overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul -</pre> -<p>Estas líneas provocan que la ventana principal con la lista de mensajes de Thunderbird y la ventana principal en Sundbird sean el objetivo de la sobrecarga que aplicaremos en el fichero <code>stockwatcher2.xul</code>.</p> -<p>Con estos dos simples giros, esta extensión funcionará en las tres aplicaciones y lo harà exactamente de la misma forma en todas ellas.</p> diff --git a/files/es/orphaned/code_snippets/index.html b/files/es/orphaned/code_snippets/index.html deleted file mode 100644 index df85e46756..0000000000 --- a/files/es/orphaned/code_snippets/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Code snippets -slug: orphaned/Code_snippets -original_slug: Code_snippets ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/es/orphaned/code_snippets/pestañas_del_navegador/index.html b/files/es/orphaned/code_snippets/pestañas_del_navegador/index.html deleted file mode 100644 index cbb4016861..0000000000 --- a/files/es/orphaned/code_snippets/pestañas_del_navegador/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Pestañas del navegador -slug: orphaned/Code_snippets/Pestañas_del_navegador -tags: - - Add-ons - - extensiones - - fragmentos de código - - pestañas -original_slug: Code_snippets/Pestañas_del_navegador ---- -<p>Aquí encontrará un conjunto de fragmentos de código útiles que lo ayudarán a trabajar con las pestañas del navegador Firefox. Los comentarios generalmente indican dónde debe insertar su propio código.</p> -<p>Cada fragmento normalmente incluye algún código para ejecutarse al inicio, esto se implementa mejor usando un <a href="/en/Extension_Frequently_Asked_Questions#Why_doesn.27t_my_script_run_properly.3F" title="en/Extension_Frequently_Asked_Questions#Why_doesn.27t_my_script_run_properly.3F">"listener" al cargar la página</a>. Estos fragmentos asumen que son ejecutados en un contexto de una ventana de navegador. Si quiere trabajar con pestañas de una ventana que no es un navegador, necesita tener referencia a una primero, mire <a href="/en/Working_with_windows_in_chrome_code" title="en/Working_with_windows_in_chrome_code">Trabajando con ventanas en código chrome</a> para más detalles.</p> -<h3 id="Getting_access_to_the_browser">Múltiples significados para la palabra "browser"</h3> -<p>La palabra 'browser' es usada de varias maneras. Of course the entire application Firefox is called "a browser". Within the Firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the XUL sense of a {{ XULElem("browser") }} element. Furthermore another meaning of 'browser' in this document and in some Firefox source is "the tabbrowser element" in a Firefox XUL window.</p> diff --git a/files/es/orphaned/creación_de_componentes_xpcom/interior_del_componente/index.html b/files/es/orphaned/creación_de_componentes_xpcom/interior_del_componente/index.html deleted file mode 100644 index c53b748bc7..0000000000 --- a/files/es/orphaned/creación_de_componentes_xpcom/interior_del_componente/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Interior del Componente -slug: orphaned/Creación_de_Componentes_XPCOM/Interior_del_Componente -tags: - - Todas_las_Categorías - - XPCOM -original_slug: Creación_de_Componentes_XPCOM/Interior_del_Componente ---- -<p></p><div class="prevnext" style="text-align: right;"> - <p><a href="/es/docs/Creación_de_Componentes_XPCOM:Using_XPCOM_Components" style="float: left;">« Anterior</a><a href="/es/docs/Creación_de_Componentes_XPCOM:Creating_the_Component_Code">Siguiente »</a></p> -</div> En el capítulo anterior describimos los componentes desde una perspectiva de un cliente de los componentes XPCOM, en este capútulo abordamos los componentes desde la perspectiva del desarrollador del programa. Léelo para ver como se implementan generalmente los componentes en XPCOM, o puedes brincarte al siguiente capítulo, donde el tutorial del componente WebLock te lleva paso a paso através del proceso de creación del componente. <span class="comment">XXX mediawiki...</span><span class="comment">XXX sucks</span><p></p> - -<h3 id="Creaci.C3.B3n_de_Componentes_en_C.2B.2B" name="Creaci.C3.B3n_de_Componentes_en_C.2B.2B">Creación de Componentes en C++</h3> - -<p>Empecemos por examinar como se escriben en C++ los componentes XPCOM. El tipo más común de componente es el escrito en C++ y compilado en una biblioteca compartida (una <abbr title="Dynamic Link Library">DLL</abbr> en un sistema Windows o una <abbr title="Dynamic Shared Object">DSO</abbr> en Unix).</p> - -<p>La imagen de abajo muestra la relación básica entre una biblioteca que contiene la implementación del código del componente que escribiste y la plataforma XPCOM en sí misma. En este diagrama, la superficie más externa del módulo es la biblioteca compartida en la que se define un componente.</p> - -<p><span id="Un_Componente_en_la_Plataforma_XPCOM"><a id="Un_Componente_en_la_Plataforma_XPCOM"></a><strong>Un Componente en la Plataforma XPCOM</strong></span></p> - -<p><img alt="Image:component-internals-framework.png"></p> - -<p>Cuando construyes un componente o un módulo y lo compilas dentro de una biblioteca, debe exportar un método llamado <code>NSGetModule</code>. Esta función <code>NSGetModule</code> es el punto de acceso a la biblioteca. Es llamado durante el registro y el desregistro del componente y cuando XPCOM quiere descubrir qué interfaces o clases implementa el módulo/biblioteca. En este capítulo abordaremos todo este proceso.</p> - -<p>Como ilustra <a href="#Un_Componente_en_la_Plataforma_XPCOM">Un Componente en la Plataforma XPCOM</a>, además del punto de acceso <code>NSGetModule</code>, están las interfaces <code>nsIModule</code> y <code>nsIFactory</code> que controlan la creación actual del componente y también las partes XPCOM glue y cadenas, que discutiremos un poco a detalle en la siguiente sección (Ve <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Interior_del_Componente#XPCOM_Glue">XPCOM Glue</a>). Estas nos darán utilidades para desarrollo fácil más adelante como son punteros inteligentes, soporte de módulos genéricos e implementaciones simples de cadenas. La parte más larga y posiblemente la más compleja de un componente es el código específico del componente en sí mismo.</p> - -<div class="side-note"> -<p><span id="%C2%BFPero_D%C3%B3nde_Est%C3%A1n_los_Componentes?"><a id="%C2%BFPero_D%C3%B3nde_Est%C3%A1n_los_Componentes?"></a><strong>¿Pero Dónde Están los Componentes?</strong></span></p> - -<p>Los componentes residen en módulos y esos módulos son definidos en bibliotecas compartidas típicamente situadas en el directorio<em>components</em> de una aplicación XPCOM.</p> - -<p>Un conjunto de bibliotecas son almacenadas por defecto en este directorio components es lo que hay en una típica instalación de Gecko, dando la funcionalidad que consiste en trabajo en red, layout, composición, una interfaz de usuario multiplataforma y otros.</p> - -<p>Otra vista aún más básica de esta relación de componentes a archivos e interfaces que los definen se muestra en <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Creaci%c3%b3n_del_C%c3%b3digo_del_Componente">Vista de Papel Cebolla de la creación del Componente XPCOM</a> en el próximo capítulo. El componente es una abstracción situada entre el módulo actual en el que se implementa y los objetos que el código de su factoría crea para que uso de los clientes.</p> -</div> - -<h3 id="Inicializaci.C3.B3n_de_XPCOM" name="Inicializaci.C3.B3n_de_XPCOM">Inicialización de XPCOM</h3> - -<p>Para entender porqué y cuándo tu biblioteca de componentes es llamada, es importante entender el proceso de inicialización de XPCOM. Cuando inicia una aplicación, la aplicación puede<em>inicializar</em> XPCOM. La secuencia de eventos que lanza esta inicialización de XPCOM pueden ser lanzados por una ccioón del usuario o por el inicio de la aplicación en sí misma. Un buscador web que tiene embebido Gecko, por ejemplo, puede inicializar XPCOM al inicio atravéz de APIs embebidas. Otra aplicación puede este inicio hasta que XPCOM se necesite por primera vez. En otro caso, la secuencia de inicialización dentro de XPCOM es la misma.</p> - -<p>XPCOM inicia cuando la aplicación hace una llamada para inicializarlo. Los parámetros pasados a esta llamada de inicialización te permiten configurar algunos aspectos de XPCOM, incluyendo la personalización de la ubicación de directorios específicos. El propósito principal del API en este punto es cambiar que directorio<em>components</em> inspecciona cuando busca componentes XPCOM. Así es como se usa el API, por ejemplo, en el<em>Gecko Runtime Environment</em> (GRE).</p> - -<div class="side-note"> -<p><span id="Inicializaci%C3%B3n_de_XPCOM"><a id="Inicializaci%C3%B3n_de_XPCOM"></a><strong>Inicialización de XPCOM</strong></span></p> - -<p>Los seis pasos básicos para arrancar XPCOM son los siguientes:</p> - -<ol> - <li>La aplicación inicia XPCOM.</li> - <li>XPCOM envía una notificación que inicia el arranque.</li> - <li>XPCOM encuentra y procesa el<em>manifiesto del componente</em> (ve <a href="#Manifiestos_de_Componentes">Manifiestos de Componentes</a> abajo).</li> - <li>Si hay nuevos componentes, XPCOM los registra: - <ol> - <li>XPCOM llama el arranque del autoregistro.</li> - <li>XPCOM registra los nuevos componentes.</li> - <li>XPCOM llama el fin del autoregistro.</li> - </ol> - </li> - <li>Arranque completo de XPCOM: XPCOM notifica que ha iniciado.</li> -</ol> - -<p>Los manifiestos de Componentes y bibliotecas de tipos son descritos en la siguiente sección, <a href="#Registro_de_Manifiestos_de_XPCOM">Registro de Manifiestos de XPCOM</a>.</p> -</div> - -<h4 id="Registro_de_Manifiestos_de_XPCOM" name="Registro_de_Manifiestos_de_XPCOM">Registro de Manifiestos de XPCOM</h4> - -<p>XPCOM usa archivos especiales llamados manifiestos para cambiar y guardar información acerca de los componentes en el sistema local. Hay dos tipos de manifiestos que usa XPCOM para cambiar componentes:</p> - -<h5 id="Manifiestos_de_Componente" name="Manifiestos_de_Componente">Manifiestos de Componente</h5> - -<p>Cuando XPCOM inicia por primera vez, busca el<em>manifiesto de componentes</em> que es un archivo que lista todos los componentes registrados y guarda detalles de lo que exactamente puede hacer cada componente. XPCOM usa el manifiesto de componentes para determinar que componentes han sido sobreescritos. Empezando en Mozilla 1.2, este archivo es llamado <code>compreg.dat</code> y existe en el directorio<em>components</em>, pero hay esfuerzos por moverlo fuera de esta ubicación a una ubicación menos centrada en la aplicación y más centrada en el usuario. Cualquier aplicación bassada en Gecko puede escoger ponerlo en otro lado. XPCOM lee este archivo dentro de una base de datos en memoria.</p> - -<div class="side-note"> -<p><span id="Manifiestos_de_Componentes"><a id="Manifiestos_de_Componentes"></a><strong>Manifiestos de Componentes</strong></span></p> - -<p>El manifiesto de componente es una correlación de archivos a componentes y de componentes a clases. Especifica la siguiente información:</p> - -<ul> - <li>Ubicación en disco de los componentes registrados con el tamaño de archivo</li> - <li>ID de Clase relacionado a la Ubicación.</li> - <li>Contract ID relacionado al ID de Clase.</li> -</ul> - -<p>El manifiesto del componente relaciona archivos de componentes a identificadores únicos para las implementaciones específicas (IDs de Clase), que en su momento son relacionados a identificadores de componente más generales (contract IDs).</p> -</div> - -<h5 id="Manifiestos_de_Bibliotecas_de_Tipos" name="Manifiestos_de_Bibliotecas_de_Tipos">Manifiestos de Bibliotecas de Tipos</h5> - -<p>Otro archivo importante que lee XPCOM es el<em>manifiesto de bibliotecas de tipos</em>. Este archivo tambien se localiza en el directorio<em>components</em> y se llama <code>xpti.dat</code>. Incluye la ubicación y direcciones de búsqueda de todas las bibliotecas de tipos en el sistema. este archivo también lista todas las interfaces conocidas y enlaces a los archivos de bibliotecas de tipos que definen estas estructuras de interfaces. Estos archivos de bibliotecas de tipos son el core para que XPCOM pueda ser script y de la arquitectura de componentes binarios de XPCOM.</p> - -<div class="side-note"> -<p><span id="Manifiestos_de_Bibliotecas_de_Tipos"><a id="Manifiestos_de_Bibliotecas_de_Tipos"></a><strong>Manifiestos de Bibliotecas de Tipos</strong></span> Los manifiestos de bibliotecas de tipos contienen la siguiente información:</p> - -<ul> - <li>ubicación de todos los archivos de bibliotecas de tipos</li> - <li>correlación de todas las interfaces conocidas y bibliotecas de tipos donde están definidas estas estructuras.</li> -</ul> -</div> - -<p>Using the data in these two manifests, XPCOM knows exactly which component libraries have been installed and what implementations go with which interfaces. Additionally, it relates the components to the type libraries in which the binary representations of the interfaces they support are defined.</p> - -<p>The next section describes how to hook into the XPCOM startup and registration process and make the data about your component available in these manifests, so that your component will be found and registered at startup.</p> - -<h4 id="M.C3.A9todos_de_Registro_en_XPCOM" name="M.C3.A9todos_de_Registro_en_XPCOM">Métodos de Registro en XPCOM</h4> - -<div class="side-note"> -<p><span id="What_Is_XPCOM_Registration?"><a id="What_Is_XPCOM_Registration?"></a><strong>What Is XPCOM Registration?</strong></span></p> - -<p>In a nutshell, registration is the process that makes XPCOM aware of your component(s). As this section and the next describe, you can register your component explicitly during installation, or with the <code>regxpcom</code> program, or you can use the autoregistration methods in the Service Manager to find and register components in a specified components directory:</p> - -<ul> - <li>XPInstall APIs</li> - <li><code>regxpcom</code> command-line tool</li> - <li><code>nsIComponentRegistrar</code> APIs from Service Manager</li> -</ul> - -<p>The registration process is fairly involved. This section introduces it in terms of XPCOM initialization, and the next chapter describes what you have to do in your component code to register your component with XPCOM.</p> -</div> - -<p>Once the manifest files are read in, XPCOM checks to see if there are any components that need to be registered. There are two supported ways to go about registering your XPCOM component. The first is to use<em>XPInstall</em>, which is an installation technology that may or may not come with a Gecko application and provides interfaces for registering your component during installation. Another, more explicit way to register your component is to run the application <code>regxpcom</code>, which is built as part of Mozilla and is also available in the Gecko SDK. <code>regxpcom</code> registers your component in the default component registry.</p> - -<p>A Gecko embedding application may also provide its own way of registering XPCOM components using the interface that is in fact used by both XPInstall and <code>regxpcom</code>, <code>nsIComponentRegistrar</code>. An application, for example, could provide a "registration-less" component directory whose components are automatically registered at startup and unregistered at shutdown. Component discovery does not currently happen automatically in non-debug builds of Gecko, however.</p> - -<p>When the registration process begins, XPCOM broadcasts to all registered observers a notification that says XPCOM has begun the registration of new components. After all components are registered, another notification is fired saying that XPCOM is done with the registration step. The <code>nsIObserver</code> interface that handles this notification is discussed in <a href="es/Creating_XPCOM_Components/Starting_WebLock">Starting WebLock</a>.</p> - -<p>Once registration is complete and the notifications have fired, XPCOM is ready to be used by the application. If XPCOM registered your component, then it will be available to other parts of the XPCOM system. The <a href="#XPCOM_Initialization">XPCOM Initialization</a> section in this chapter describes registration in more detail.</p> - -<h4 id="Autoregistro" name="Autoregistro">Autoregistro</h4> - -<p>The term<em>autoregistration</em> is sometimes used synonymously with registration in XPCOM. In the <a href="#What_Is_XPCOM_Registration?">What Is XPCOM Registration?</a> note, we describe the three ways you can register components with XPCOM. Sometimes, applications use the <code>nsIComponentRegistrar</code> interface and create their own code for watching a particular directory and registering new components that are added there, which is what's often referred to as<em>autoregistration</em>. You should always know what the installation and registration requirements are for the applications that will be using your component.</p> - -<h4 id="El_Proceso_de_Paro" name="El_Proceso_de_Paro">El Proceso de Paro</h4> - -<p>When the application is ready to shutdown XPCOM, it calls <code>NS_ShutdownXPCOM</code>. When that method is called, the following sequence of events occurs:</p> - -<ol> - <li>XPCOM fires a shutdown notification to all registered observers.</li> - <li>XPCOM closes down the Component Manager, the Service Manager and associated services.</li> - <li>XPCOM frees all global services.</li> - <li>NS_ShutdownXPCOM returns and the application may exit normally.</li> -</ol> - -<div class="side-note"> -<p><span id="The_Unstoppable_Shutdown"><a id="The_Unstoppable_Shutdown"></a><strong>The Unstoppable Shutdown</strong></span></p> - -<p>Note that shutdown observation is unstoppable. In other words, the event you observe cannot be used to implement something like a "Are you sure you want to Quit?" dialog. Rather, the shutdown event gives the component or embedding application a last chance to clean up any leftovers before they are released. In order to support something like an "Are you sure you want to quit" dialog, the application needs to provide a higher-level event (e.g., <code>startShutdown()</code>) which allows for cancellation.</p> - -<p>Note also that XPCOM services may deny you access once you have received the shutdown notification. It is possible that XPCOM will return an error if you access the <code>nsIServiceManager</code> at that point, for example, so you may have to keep a reference-counted pointer to the service you are interested in using during this notification.</p> -</div> - -<h4 id="Component_Loaders" name="Component_Loaders">Component Loaders</h4> - -<p>Components can be written in many languages. So far this book has been focusing on "native components," shared libraries exporting a <code>NSGetModule</code> symbol. But if there is a<em>component loader</em> for Javascript installed, then you can also write a JavaScript component.</p> - -<p>To register, unregister, load and manage various component types, XPCOM abstracts the interface between the XPCOM component and XPCOM with the Component Loader. This loader is responsible for initialization, loading, unloading, and supporting the <code>nsIModule</code> interface on behalf of each component. It is the Component Loader's responsibility to provide scriptable component support.</p> - -<p>When building a "native" component, the component loader looks for an exported symbol from the components shared library. "Native" here includes any language that can generate a platform native dynamically loaded library. Scripting languages and other "non-native" languages usually have no way to build native libraries. In order to have "non-native" XPCOM components work, XPCOM must have a special component loader which knows how to deal with these type of components.</p> - -<p>XPConnect, for example, provides a component loader that makes the various types, including the interfaces and their parameters, available to JavaScript. Each language supported by XPCOM must have a component loader.</p> - -<h4 id="Tres_Partes_de_una_Biblioteca_de_Componentes_XPCOM" name="Tres_Partes_de_una_Biblioteca_de_Componentes_XPCOM">Tres Partes de una Biblioteca de Componentes XPCOM</h4> - -<p>XPCOM is like an onion<span class="comment">or a parfait! Everybody likes parfaits</span>. XPCOM components have at least three layers. From the innermost and moving outward these layers include:</p> - -<ul> - <li>The core XPCOM object</li> - <li>The factory code</li> - <li>The module code</li> -</ul> - -<p>The core XPCOM object is the object that will implement the functionality you need. For example, this is the object that may start a network download and implement interfaces that will listen to the progress. Or the object may provide a new content type handler. Whatever it does, this object is at the core of the XPCOM component, and the other layers are supporting it, plugging it into the XPCOM system. A single library may have many of these core objects.</p> - -<p>One layer above the core object is the factory code. The factory object provides a basic abstraction of the core XPCOM object. <a href="es/Creating_XPCOM_Components/An_Overview_of_XPCOM">An Overview of XPCOM</a> discussed the factory design pattern that's used in a factory object. At this layer of the XPCOM Component Library, the factory objects are factories for the core XPCOM objects of the layer below.</p> - -<p>One more layer outward is the module code. The module interface provides yet another abstraction - this time of the factories - and allows for multiple factory objects. From the outside of the component library, there is only the single entry point, <code>NSGetModule()</code>. This point of entry may fan out to any number of factories, and from there, to any number of XPCOM objects.</p> - -<p>The following chapter details these layers in terms of the XPCOM interfaces that represent them. Here we will just introduce them. The factory design pattern in XPCOM is represented by the <code>nsIFactory</code> interface. The module layer is represented by the <code>nsIModule</code> interface. Most component libraries only need these two interfaces, along with the <code>nsISupports</code> interface, to have XPCOM load, recognize, and use their core object code.</p> - -<p>In the next section, we'll be writing the code that actually compiles into a component library, and you will see how each layer is implemented and how each interface is used. Following this initial, verbose demonstration of the APIs, we will introduce a faster more generic way of implementing the module and factory code using macros, which can make components much easier to create.</p> - -<h3 id="XPCOM_Glue" name="XPCOM_Glue">XPCOM Glue</h3> - -<p>XPCOM contains a lot of stuff. Most of the XPCOM interfaces are not frozen and are meant to be used only by the Gecko internals, not by clients. XPCOM provides many data structures from linked lists to <a class="external" href="http://en.wikipedia.org/wiki/AVL_tree">AVL trees</a>. Instead of writing your own linked list, it's tempting to reuse <code>nsVoidArray</code> or another publicly available class, but this might be a fatal mistake. At any time the class can change and give you unexpected behavior.</p> - -<p>XPCOM makes for a very open environment. At runtime you can acquire any service or component merely by knowing a CID, or Contract ID, and an IID. At last count there were over 1300 interfaces defined in XPIDL. Of those 1300 interfaces, less than 100 were frozen, which means that a developer has a good chance of stumbling upon useful interfaces that aren't frozen. If an interface isn't explicitly marked "FROZEN" in the IDL comments, however - and most of them aren't - it will cause your component to possibly break or crash when the version changes.</p> - -<h4 id="La_Biblioteca_Glue" name="La_Biblioteca_Glue">La Biblioteca Glue</h4> - -<p>In general you should avoid any unfrozen interfaces, any symbols in XPCOM, or any other part of Gecko libraries that aren't frozen. However, there are some unfrozen tools in XPCOM that are used so often they are practically required parts of component programming.</p> - -<p>The smart pointer class, <code>nsCOMPtr</code>, for example, which can make reference counting a lot less tedious and error-prone, is not actually frozen, and neither are <code>nsDebug</code>, a class for aiding in tracking down bugs, or <code>nsMemory</code>, a class to ensure that everyone uses the same heap, generic factory, and module. Instead of asking every developer to find and copy these various files into their own application, XPCOM provides a single library of "not-ready-to-freeze-but-really-helpful" classes that you can link into your application, as the following figure demonstrates.</p> - -<p><span id="XPCOM_Glue_and_Tools"><a id="XPCOM_Glue_and_Tools"></a><strong>XPCOM Glue and Tools</strong></span></p> - -<p><img alt="Image:xpcom-glue-tools.png"></p> - -<p>This is the glue library. It provides a bridge, or "glue" layer, between your component and XPCOM.</p> - -<p>A version of the glue library is built into XPCOM, and when your component uses it, it links a snapshot of this library: it includes a copy of these unfrozen classes directly, which allows the XPCOM library version to change without affecting the software. There is a slight footprint penalty to linking directly, but this gives your component freedom to work in any recent environment. If footprint is a big issue in your component or application, you can trim out the pieces you don't need.</p> - -<h4 id="Clases_de_Cadenas_de_XPCOM" name="Clases_de_Cadenas_de_XPCOM">Clases de Cadenas de XPCOM</h4> - -<p>The base string types that XPCOM uses are <code>nsAString</code> and <code>nsACString</code>. These classes are described in the Mozilla String Guide (see <a href="es/Creating_XPCOM_Components/Resources#Gecko_Resources">Gecko Resources</a>).</p> - -<p>The string classes that implement these abstract classes are another set of helpful, unfrozen classes in XPCOM. Most components and embedding applications need to link to some kind of string classes in order to utilize certain Gecko APIs, but the string code that Mozilla uses is highly complex and even more expensive than the glue code in terms of footprint (~100k). <code>nsEmbedString</code> and <code>nsEmbedCString</code> are available as very light string class implementations for component development, especially in small embedded applications. This string implementation does the bare minimum to support <code>nsAString</code>/<code>nsACString</code> string classes.</p> - -<p>In your own component, you can go "slim" and restrict yourself to the <code>nsEmbedString</code> or go "hog wild" and use all of the functionality of the other strings. WebLock restricts itself to using the simple <code>nsEmbedString</code> family of classes.</p> - -<p><span id="String_Classes_and_XPCOM"><a id="String_Classes_and_XPCOM"></a><strong>String Classes and XPCOM</strong></span></p> - -<p><img alt="Image:strings-in-xpcom.png"></p> - -<p>The glue library provides stub functions for the public functions that XPCOM provides (see <code><a href="https://dxr.mozilla.org/mozilla-central/source/xpcom/build/nsXPCOM.h" rel="custom">xpcom/build/nsXPCOM.h</a></code>). When the glue library is initialized, it dynamically loads these symbols from the XPCOM library, which allows the component to avoid linking directly with the XPCOM library. You shouldn't have to link to the XPCOM library to create a XPCOM component - in fact, if your component has to, then something is wrong. </p><div class="prevnext" style="text-align: right;"> - <p><a href="/es/docs/Creating_XPCOM_Components:Using_XPCOM_Components" style="float: left;">« Anterior</a><a href="/es/docs/Creating_XPCOM_Components:Creating_the_Component_Code">Siguiente »</a></p> -</div> <p></p><div class="licenseblock"> -<p>Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the <a class="external" href="http://www.opencontent.org/openpub/" rel="noopener">Open Publication License</a>, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.</p> -</div><p></p> diff --git a/files/es/orphaned/creación_de_componentes_xpcom/prefacio/index.html b/files/es/orphaned/creación_de_componentes_xpcom/prefacio/index.html deleted file mode 100644 index f9b6448f60..0000000000 --- a/files/es/orphaned/creación_de_componentes_xpcom/prefacio/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Prefacio -slug: orphaned/Creación_de_Componentes_XPCOM/Prefacio -original_slug: Creación_de_Componentes_XPCOM/Prefacio ---- -<p>Este es un libro acerca de Gecko, y cómo crear componentes <a href="es/XPCOM">XPCOM</a> para aplicaciones basadas en Gecko. Aunque se hace énfasis en los pasos prácticos que sigues para que hagas tu código C++ dentro de un componente que pueda ser usado en Gecko, esperamos que esos pasos nos den también la ocasión de abordar todas las herramientas, técnicas y tecnologías que integran XPCOM. En consecuencia, este libro es arreglado de tal forma que puedes seguirlo y crear tus propios componentes o aprender distintos tópicos de XPCOM individualmente, como en una guía de referencia. Por ejemplo, la introducción incluye una discusión acerca de lo que son los componentes; y el primer capítulo - en el cual tu compilas un código básico y lo registras en Mozilla - apunta una discusión de la relación entre componentes y módulos de las interfases de XPCOM y del proceso de registro en general. -</p><p>El principio de cada capítulo provee una lista de los tópicos más importantes tratados. Las secciones en la barra de al lado son incluidas para resaltar detalles técnicos. Al terminar el libro, si hemos hecho nuestro trabajo, habrás aprendido como construir componentes y sabrás algo acerca del framework para esos componentes en Gecko, que es XPCOM. -</p> -<h3 id="Quién_debe_leer_este_Libro"> Quién debe leer este Libro </h3> -<p><a href="es/Creaci%c3%b3n_de_Componentes_XPCOM">Creación de Componentes XPCOM</a> está dirigido a desarrolladores C++. Aunque puedes crear componentes XPCOM en <a href="es/Javascript">Javascript</a> y otros lenguajes y aunque tal vez puedas seguir el libro como programador <a href="es/C">C</a>, el código de implementación está escrito en C++ y mucha de la discusión de cómo hacer tu código <i>dentro</i> de un componente XPCOM empieza desde C++. De cualquier modo no necesitas ser un experto en C++, aunque debes estar familiarizado con ideas básicas como herencia y encapsulación, ideas que cuando es posible son explicadas en el libro donde son usadas. También muchos de los ejemplos son en Javascript, que es usado en Mozilla para accesar componentes XPCOM como objetos script, así que estar familiarizado con ese lenguaje es útil también. -</p><p>XPCOM significa Cross Platform Component Object Model(Modelo Componente Objeto Multiplataforma), como su nombre lo implica, XPCOM es similar al Microsoft COM, si tienes alguna experiencia con esta tecnología, grán parte de eso puede aplicarse a XPCOM. De cualquier modo este libro no asume ningún conocimiento previo de COM - todas las ideas básicas de COM serán introducidas. -</p><p>Este libro provee un tutorial de cómo construir un componente XPCOM que controle el comportamiento de búsqueda; aunque XPCOM puede ser usado en muchos ambientes relacionados con búsqueda web, su principal cliente es Gecko, un buscador web embebido de código abierto, que cumple con estándares, donde es más fácil y práctico ilustrar la funcionalidad de XPCOM. Una descripción completa del componente de este turial puede ser encontrada en la sección <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Creaci%c3%b3n_de_el_C%c3%b3digo_del_Componente#En_lo_que_Estaremos_Trabajando">En lo que Estaremos Trabajando</a> de este tutorial. -</p> -<div class="note"> -<p>A pesar de lo que dice la documentación, XPCOM no debe ser usado para hacer <a href="es/Plugins">NPAPI plugins</a> script. A partir de la versión 1.7.5 de Gecko(Firefox 1.0) una extensión especial NPAPI para llamar desde script es soportada vea <a href="es/Gecko_Plugin_API_Reference/Scripting_plugins">Scripting plugins</a>. -</p> -</div> -<h3 id="Organización_del_Tutorial"> Organización del Tutorial </h3> -<p>La siguiente lista da una reseña de de los pasos que seguiremos para crear un componente XPCOM llamado <i>Weblock</i>, el cual provee la funcionalidad de bloqueo de sitios a los buscadores basados en Gecko. Cada uno de estos pasos tiene su propio capitulo, en el que se discuten varios tópicos asociados al paso. -</p> -<ul><li> Crear el módulo genérico de módulo para el componente. -</li><li> Usar macros C++, clases especiales de cadenas y punteros inteligentes para optimizar el código. -</li><li> Definir la funcionalidad del componente; crear una interfaz <a href="es/XPIDL">XPIDL</a> para esa funcionalidad, crear el código específico para la implementación adaptada de la interfaz del componente <i>Weblock</i>. -</li><li> Finalizar la implementación del componente <i>Weblock</i>: <code>nsIContentPolicy</code>, E/S de archivos, bloqueo, etc. -</li><li> Creación de la interfaz de usuario del componente <i>Weblock</i>. -</li><li> Empaquetar <i>Weblock</i> para su distribución e instalación. -</li></ul> -<h3 id="Continuando_con_los_Ejemplos"> Continuando con los Ejemplos </h3> -<p>Hay dos formas diferentes de tener XPCOM en tu máquina para poder crear componentes. Si ya tienes un Mozilla construído o el código fuente de Mozilla 1.2 o posterior, entonces puedes usar la plataforma XPCOM disponible ahí. Si no tienes las fuentes de Mozilla, entonces puedes bajar el Gecko SDK, que es una colección de librerías y herramientas que componen la plataforma de componentes XPCOM. -</p><p>No importa si compilas tu código en el directorio de las fuentes de Mozilla o usas el Gecko SDK, puedes construir tus propios componentes que usen los componentes previamente existentes en Gecko. el componente <b>Weblock</b> que describimos en este tutorial es un complemento práctico(y esperamos genuinamente útil) para el navegador. Para poder construirlo, tu Gecko SDK o tus fuentes de Mozilla deben ser versión 1.2 o superior (las interfaces XPCOM en versiones anteriores no fueron completamente congeladas). -</p><p>Este Libro asume que estas usando el SDK en vez del directorio de las fuentes de Mozilla, de cualquier forma la diferencia entre ambos es mínima. Detalles acerca de cómo obtener el SDK, construir y obtener acceso programático a los componetes de Gecko se dan en el APENDICE del libro, <a href="es/Creaci%c3%b3n_de_Componentes_XPCOM/Configurar_el_Gecko_SDK">Configurar el Gecko SDK</a>. -</p> -<h3 id="Convenciones"> Convenciones </h3> -<p>Las convenciones de formato listadas abajo se usan para designar tipos específicos de información en el libro y hacer las cosas más fáciles de encontrar. El objetivo es usar tan pocos formatos como sea posible, pero distinguir los diferentes tipos de información claramente. -</p> -<table class="standard-table"> <tbody><tr> <td class="header">Formato</td> <td class="header">Descripción</td> </tr> <tr> <td><b>bold</b></td> <td><b>nombres de componentes</b> aparecen en negro en el texto</td> </tr> <tr> <td><code>monospace</code></td> <td><code>referencias al código</code>, <code>nombres de interfaces</code> y <code>miembros</code> de interfaces (ejm. <code>createInstance()</code>) aparecen en letra monospaced. Líneas de código aparecen en cajas separadas. También <code>nombres de archivos</code> y <code>directorios</code> aparecen en letra monospaced.</td> </tr> <tr> <td><i>itálica</i></td> <td><i>variables</i> aparecen en letra itálica. Términos importantes y nuevos conceptos también aparecen en letra itálica la primera vez que aparecen en el texto. También aquellos términos que son explicados inmediatamente después de ser citados, o donde se le dice al lector que vaya a una sección en el libro en donde se describen dichos términos a detalle.</td> </tr> <tr> <td>link</td> <td>Referencias a otras secciones, imágenes y tablas también son links a esas secciones.</td> </tr> -</tbody></table> -<h3 id="Agradecimientos"> Agradecimientos </h3> -<p>Gracias a Peter Lubczynski, John Gaunt, Ellen Evans y Alec Flett por sus revisiones técnicas. Un agradecimiento especial a Darin Fisher por sus observaciones tan meticulosas, lectura tan cercana y atención a los detalles. -</p> diff --git a/files/es/orphaned/creando_una_extensión/index.html b/files/es/orphaned/creando_una_extensión/index.html deleted file mode 100644 index ec7320a54c..0000000000 --- a/files/es/orphaned/creando_una_extensión/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Creando una extensión -slug: orphaned/Creando_una_extensión -tags: - - Complementos - - Todas_las_Categorías - - extensiones -original_slug: Creando_una_extensión ---- -<h2 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h2> -<p>Este tutorial contiene los pasos necesarios para desarrollar una extensión muy básica - la cuál añadirá un texto que diga "¡Hola, mundo!" en el panel de la barra de estado del navegador Firefox</p> -<div class="note"> - <p><strong>Nota</strong> Este tutorial sobre el desarrollo de una extensión es para la versión 1.5 de Firefox . Existen otros para versiones anteriores.</p> -</div> -<h2 id="Preparando_el_Entorno_de_Desarrollo" name="Preparando_el_Entorno_de_Desarrollo">Preparando el Entorno de Desarrollo</h2> -<p>Las extensiones se distribuyen en archivos comprimidos en formato ZIP, o en paquetes, con extensión <code>xpi</code> (<em>se pronuncia “zippy”</em>). Los archivos XPI contienen el siguiente código:</p> -<pre>extension.xpi: - /<a href="/es/docs/Install.rdf" title="Install.rdf">install.rdf</a> - <a href="#XPCOM_Components">/components/*</a> - <a href="#Application_Command_Line">/components/cmdline.js</a> - <a href="#Defaults_Files">/defaults/</a> - <a href="#Defaults_Files">/defaults/preferences/*.js</a> - /plugins/* - /<a href="/es/docs/Chrome.manifest" title="Chrome.manifest">chrome.manifest</a> - /<a href="/es/docs/Chrome_window_icons" title="Chrome_window_icons">chrome/icons/default/*</a> - /chrome/ - /chrome/content/ - -</pre> -<p>Debido a esto, es más fácil presentar nuestros archivos fuente en un modo similar, a menos que decidamos crear alguno del tipo "Makefile" o un script "shell" para comprimirlos todos. Incluso si optamos por este método, es muy sencillo hacer pruebas, gracias al sistema de <em>Addons</em> de Firefox 1.5.</p> -<p>Aclarado esto comenzamos. Crea una carpeta para tu extensión en algún lugar de tu disco duro, e.j. <code>C:\extensions\my_extension\</code> o <code>~/extensions/my_extension/</code>. (Nota: usa todos los caracteres en minúscula) Dentro de esta carpeta creamos otra carpeta llamada <code>chrome</code>, dentro de <code>chrome</code> creamos otra carpeta llamada <code>content</code>. (En sistemas Unix podemos crear los 3 directorios con el siguiente comando <code>mkdir -p chrome/content</code> dentro del directorio de raíz de la extensión.)</p> -<p>Dentro de la <strong>raíz</strong> de la carpeta extensión, junto a la carpeta <code>chrome</code>, creamos dos archivos de textos vacíos, uno llamado <code>chrome.manifest</code> y el otro <code>install.rdf</code>.</p> -<p>Deberías tener algo así:</p> -<pre><carpeta extension>\ - install.rdf - chrome.manifest - chrome\ - content\ -</pre> -<p>Puedes encontrar más tips (ideas) sobre la configuración del ambiente de desarrollo en <a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">Mozillazine Knowledge Base</a>.</p> -<h2 id="Crear_el_manifest_de_la_instalaci.C3.B3n" name="Crear_el_manifest_de_la_instalaci.C3.B3n">Crear el manifiesto de la instalación</h2> -<p>Abre el archivo llamado <code><a href="/es/docs/Manifiesto_de_instalación" title="Manifiesto_de_instalación">install.rdf</a></code> que creaste en la carpeta raíz de tu extensión y escribe lo siguiente en él:</p> -<pre><?xml version="1.0"?> - -<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:em="http://www.mozilla.org/2004/em-rdf#"> - - <Description about="urn:mozilla:install-manifest"> - <em:id><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong></em:id> - <em:version><strong>1.0</strong></em:version> - <em:type>2</em:type> - - <!-- Target Application this extension can install into, - with minimum and maximum supported versions. --> - <em:targetApplication> - <Description> - <em:id><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></em:id> - <em:minVersion><strong>1.0+</strong></em:minVersion> - <em:maxVersion><strong>1.5.0.*</strong></em:maxVersion> - </Description> - </em:targetApplication> - - <!-- Front End MetaData --> - <em:name><strong>¡Ejemplo!</strong></em:name> - <em:description><strong>Una extensión de prueba</strong></em:description> - <em:creator><strong>Tu nombre aquí</strong></em:creator> - <em:homepageURL><strong>http://www.foo.com/</strong></em:homepageURL> - </Description> -</RDF> -</pre> - -<ul> - <li><strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong> - la ID de tu extensión. Esta es una clave que has creado para identificar tu extensión en formato de correo electrónico (nota: esta clave no debería ser tu email). Hazla única. Otra opción es usar un GUID.</li> - <li>Especifica <code><em:type>2</em:type></code> -- el 2 indica que una extensión está siendo descrita (mira en <a href="/es/docs/Manifiesto_de_instalación#tipo" title="Manifiesto_de_instalación#tipo">Instalar el manifest#tipo</a> para ver los otros códigos).</li> - <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - La ID del programa Firefox.</li> - <li><strong>1.0+</strong> - indica la versión mínima de Firefox con la que afirmas que tu extensión funcionará. Establece ésta como la versión mínima con la que te comprometes a comprobar y corregir errores.</li> - <li><strong>1.5.0.*</strong> - indica la versión máxima de Firefox con la que afirmas que tu extensión funcionará. ¡Establece ésta como no superior a la máxima versión que esté disponible!</li> -</ul> -<p>Mira <a href="/es/docs/Manifiesto_de_instalación" title="Manifiesto_de_instalación">Instalar el manifest</a> para una relación completa de las propiedades tanto obligatorias como opcionales.</p> -<p>Guarda el archivo.</p> -<h2 id="Ampliando_el_Navegador_con_XUL" name="Ampliando_el_Navegador_con_XUL">Ampliando el navegador con XUL</h2> -<p>La interfaz de usuario de Firefox está escrita en XUL y Javascript. <a href="/es/docs/XUL" title="XUL">XUL</a> es una implementación XML que proporciona elementos de la interfaz de usuario como botones, menús, barras de botones etc. Las acciones del usuario se controlan mediante JavaScript. Para ampliar el navegador modificamos o añadimos elementos de la interfaz de usuario. Añadimos nuevos elementos mediante la inserción de nuevos elementos XUL DOM dentro de la ventana del navegador, y los modificamos usando scripts e incluyendo manejadores de eventos.</p> -<p>El navegador está definido en un archivo XUL llamado <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> que incluye <code>content/browser/browser.xul</code>). En el archivo browser.xul podemos encontrar la barra de estado, definida en aproximadamente estos términos:</p> -<pre><statusbar id="status-bar"> - ... <statusbarpanel>s ... -</statusbar> -</pre> -<p><code><statusbar id="status-bar"></code> es un "punto de anclaje" para una capa XUL.</p> -<h3 id="Capas__XUL" name="Capas__XUL">Capas XUL</h3> -<p><a href="/es/docs/Capas_XUL" title="Capas_XUL">Capas XUL</a> son una manera de añadir un elemento a la interfaz de usuario en un documento XUL durante el tiempo de ejecución. Una capa XUL es un archivo .xul que marca elementos XUL para insertar en puntos de anclaje específicos dentro del "documento maestro". Estos fragmentos indican que los elementos pueden ser añadidos, modificados o eliminados.</p> -<p><strong>Ejemplo de documento de capa XUL</strong></p> -<pre><?xml version="1.0"?> -<overlay id="sample" - xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> - <statusbar id="<strong>status-bar</strong>"> - <statusbarpanel id="my-panel" label="Hello, World"/> - </statusbar> -</overlay> -</pre> -<p>El <code><statusbar></code> llamado <code><strong>status-bar</strong></code> indica el punto de anclaje dentro de la ventana del navegador donde lo queremos incluir.</p> -<p>El <code><statusbarpanel></code> hijo es un nuevo elemento que queremos insertar en el punto de anclaje.</p> -<p>Copia el código de ejemplo arriba mostrado y guardaló en un archivo llamado <code><strong>sample.xul</strong></code> dentro de la carpeta <code>chrome/content</code> que creó.</p> -<p>Para más información sobre elementos de inserción y modificar la interfaz de usuario empleando Capas, mira más abajo.</p> -<h2 id="Chrome_URIs" name="Chrome_URIs">Chrome URIs</h2> -<p>Los archivos XUL forman parte de "<a href="/es/docs/Chrome_Registration" title="Chrome_Registration">Chrome Packages</a>" - paquetes de componentes de interfaz del usuario, los cuales se cargan a través de la dirección <code>chrome://</code> URIs. Más que cargar el navegador desde el disco utilizando un (archivo) <code>file://</code> URI (ya que la ubicación de Firefox en un sistema puede cambiar de una plataforma a otra y de un sistema a otro), los desarrolladores de Mozilla se decantaron por una solución para crear URI al contexto de XUL,que la aplicación instalada ya conoce.</p> -<p>La ventana del navegador es: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code> ¡Prueba a teclear esta dirección URL en la barra de navegación de Firefox!</p> -<p>Los Chrome URIs constan de varios componentes:</p> -<ul> - <li>En primer lugar, la <strong>URI scheme</strong> Esquema URI (<code>chrome</code>) informa a la librería de red de Firefox de que es un 'Chrome URI' y que el contenido que se cargue debe ser manejado de manera especial.</li> - <li>En segundo lugar, un nombre de paquete (en el ejemplo superior utilizamos <code><strong>browser</strong></code>), que identifica la extension en la interfaz del usuario. Este nombre debe ser, en un caso ideal, único, de esa manera se evitará el conflicto entre extensiones.</li> - <li>En tercer lugar, el tipo de información que ofrece el archivo. Hay tres tipos: <code>content</code> (XUL, JavaScript, XBLs, etc. que forman la estructura y el comportamiento de una aplicación UI), <code>locale</code> (DTD, archivos .propiedades, etc., que contienen cadenas para la <a href="/es/docs/Localization" title="Localization">localization</a> del UI), y <code>skin</code> (CSS e imágenes que forman el <a href="/es/docs/Theme" title="Theme">theme</a> del UI)</li> - <li>En último lugar, la ruta del archivo a cargar.</li> -</ul> -<p>Por lo tanto, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> carga el archivo <code>bar.png</code> de la sección <code>skin</code>, del tema <code>foo</code>.</p> -<p>Cuando cargas contenido usando un Chrome URI, Firefox usa el Chrome Registry para traducir esos URIs en los archivos fuentes en el disco (o en paquetes JAR).</p> -<h2 id="Creando_un_Chrome_manifest" name="Creando_un_Chrome_manifest">Creando un Chrome manifest</h2> -<p>Para más información sobre el Chrome manifest y las propiedades que soporta, mira la referencia <a href="/es/docs/Chrome_Manifest" title="Chrome_Manifest">Chrome Manifest</a>.</p> -<p>Abre el archivo llamado <code><strong>chrome.manifest</strong></code> que creaste en el directorio <code>chrome</code> en la raìz de la jerarquía de la carpeta orìgen de la extensión</p> -<p>Agrega este código:</p> -<pre>content sample chrome/content/ -</pre> -<p>(<strong>¡No te olvides de la barra oblicua, "<code>/</code>"!</strong> sin ella, la extensión no se cargará.)</p> -<p>Esto especifica lo siguiente:</p> -<ol> - <li>Tipo de material dentro de un paquete chrome.</li> - <li>Nombre del paquete chrome (Asegúrate de usar todos los caracteres en minúscula para el nombre del paquete "sample", ya que Firefox/Thunderbird no lo soporta en la versión 2 y anteriores - {{ Bug(132183) }})</li> - <li>Localización de los archivos del paquete chrome.</li> -</ol> -<p>Esta línea dice que para obtener una muestra del paquete chrome, debemos encontrar los archivos de <strong>content</strong> en la ruta <code>chrome/content</code>, la cual es relativa a la ruta de <code>chrome.manifest</code>.</p> -<p>Nótese que el contenido, los archivos de idioma y los del skin, deben mantenerse dentro de carpetas llamadas <strong>content</strong> (para contenido), <strong>locale</strong> (para idioma) y <strong>skin</strong> dentro de tu subdirectorio <code>chrome</code>.</p> -<p>Salva los cambios del archivo. Cuando inicies Firefox con tu extensión, (lo cual se hará despues en este tutorial), aquel-Firefox- registrará el chrome del paquete.</p> -<h2 id="Registrar_un_Overlay" name="Registrar_un_Overlay">Registrar un Overlay</h2> -<p>Necesitas que Firefox fusione tu overlay con la ventana del browser cada vez que se muestra, por lo que añade esta línea a tu archivo <code>chrome.manifest</code>:</p> -<pre>overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a> -</pre> -<p><br> - Esto le dice a Firefox que fusione <code>sample.xul</code> con <code>browser.xul</code> cuando <code>browser.xul</code> se cargue.</p> -<h2 id="Pruebas" name="Pruebas">Pruebas</h2> -<p>Primero, necesitamos informar a Firefox acerca de tu extensión. En los malos y viejos tiempos de Firefox 1.0, ésto significaba empaquetar tu extensión como un XPI e instalarlo a través de la interfaz de usuario, lo que era engorroso. Ahora es mucho más simple.</p> -<ol> - <li>Abre tu <a class="external" href="http://kb.mozillazine.org/Profile_folder">carpeta Profiles</a> y adentrate en el perfil con el que deseas trabajar (e.g. <code>Firefox/Profiles/<profile_id>.default/</code>).</li> - <li>Abre la carpeta <strong>extensions</strong> (creala si ésta no existe)</li> - <li>Crea un nuevo archivo de texto, y añade la ruta de la carpeta que contiene tu extensión, e.g. <code>C:\extensions\my_extension\</code> o <code>~/extensions/my_extension</code>. Guarda el archivo con el identificador de tu extensión como nombre de archivo, e.g. <code><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></code></li> -</ol> -<p>¡¡Ahora estás preparado para comprobar tu extensión!!</p> -<p>Ejecuta Firefox. Firefox detectará el vínculo de texto al directorio de tu extensión y la instalará. Cuando la ventana del navegador aparezca verás el texto "Hello, World!" en el lado derecho del panel de la barra de estado.</p> -<p>Ahora puedes retornar al archivo .xul y realizar cambios, reinicia Firefox y éstos se verán reflejados.</p> -<center> - <p><img alt="Image:Helloworld_tools_menu.PNG" class="internal" src="/@api/deki/files/1116/=Helloworld_tools_menu.PNG"></p> - <p><img alt="Image:Helloworld_extensions_wnd.PNG" class="internal" src="/@api/deki/files/1115/=Helloworld_extensions_wnd.PNG"></p> -</center> -<h2 id="Empaquetado" name="Empaquetado">Empaquetado</h2> -<p>Ahora que tu extensión funciona, puedes empaquetarla para su distribución e instalación.</p> -<p>Comprime con zip los contenidos de las carpetas de tu carpeta (no la carpeta de la extensión en sí misma) y cambia la extensión del archivo de .zip a .xpi. En windows XP, puedes hacer esto fácilmente seleccionando todas las carpetas y subcarpeta de la carpeta de tu extensión, haz click con el botón derecho y selecciona "enviar a" -> "Comprimir carpeta". Se creará un archivo .zip. Renómbralo y ya está.</p> -<p>Ahora sube el archivo .xpi a tu servidor, asegurándote de que se sirve con el tipo mime <code>application/x-xpinstall</code>. Haciendo un hipervínculo al archivo puedes permitir a la gente que descargue e instale tu extensión en Firefox.</p> -<h3 id="Usando_addons.mozilla.org" name="Usando_addons.mozilla.org">Usando addons.mozilla.org</h3> -<p>En el sitio de distribución Mozilla Update puedes subir tus extensiones totalmente gratis. Tus extensiones serán alojadas en los mirrors de la red Mozilla para garantizar la transferencia directa aún cuando pueda ser muy popular su descarga. La web de Mozilla proporciona a los usuarios una instalación sencilla, y podrán automáticamente disponer de las ultimas versiones que hagas de tu extensión. Además Mozilla Update permite que los usuarios comenten y hagan mejoras sobre tu extensión. ¡Es muy recomendable que utilices Mozilla Update para distribuir tus extensiones!</p> -<p>¡Visita <a class="external" href="http://addons.mozilla.org/developers/" rel="freelink">http://addons.mozilla.org/developers/</a> para crear una cuenta y comenzar a distribuir tu extensión!</p> -<p><em>Nota:</em> Tu extensión será aceptada y descargada más rápidamente si tiene una buena descripción y algunas imágenes en uso.</p> -<h3 id="Colocaci.C3.B3n_de_extensiones_en_el_registro_de_Windows" name="Colocaci.C3.B3n_de_extensiones_en_el_registro_de_Windows">Colocación de extensiones en el registro de Windows</h3> -<p>En Windows, la información sobre las extensiones se puede agregar al registro, y dicha extensión será automáticamente seleccionada la próxima vez que se ejecute la aplicación. Esto permite que los instaladores de la aplicación integren fácilmente la extensión. Ver <a href="/es/docs/Agregar_una_Extensión_usando_el_Registro_de_Windows" title="Agregar_una_Extensión_usando_el_Registro_de_Windows">Agregar una Extensión usando el Registro de Windows</a> para más información.</p> -<h2 id="M.C3.A1s_sobre_las_Capas_XUL" name="M.C3.A1s_sobre_las_Capas_XUL">Más sobre las capas XUL</h2> -<p>Además de añadir elementos de la interfaz de usuario en el punto de anclaje, puede emplear fragmentos XUL dentro de las capas para:</p> -<ul> - <li>Cambiar atributos en el punto de anclaje, e.g. <code><statusbar id="status-bar" hidden="true"/></code> (esconde la barra de estado)</li> - <li>Eliminar el punto de anclaje del documento maestro, e.g. <code><statusbar id="status-bar" removeelement="true"/></code></li> - <li>Controlar la posición de los elementos insertados:</li> -</ul> -<pre><statusbarpanel position="1" .../> - -<statusbarpanel insertbefore="other-id" .../> - -<statusbarpanel insertafter="other-id" .../> -</pre> -<h2 id="Creando_nuevos_componentes_del_interfaz_de_usuario" name="Creando_nuevos_componentes_del_interfaz_de_usuario">Creando nuevos componentes de la interfaz de usuario</h2> -<p>Puedes crear tus propias ventanas y cajas de diálogo separadas de los archivos .xul, proporcionar funcionalidad colocando acciones del usuario en ejecución en archivos .js , usar métodos DOM para manipular UI widgets. Puedes usar las reglas de estilos .css, adjuntar imágenes, cambiar colores, etc.</p> -<p>Ver la guía <a href="/es/docs/XUL" title="XUL">XUL</a> contiene más recursos para desarrolladores XUL.</p> -<h2 id="Archivos_Por_Defecto" name="Archivos_Por_Defecto">Archivos por defecto</h2> -<p>Los archivos por defecto son utilizados para crear un perfil de usuario y se crean en la carpeta <code>defaults/</code> que se encuentra dentro de la carpeta raíz de tu extensión. Los archivos .js se deben almacenar dentro de <code>defaults/preferences/</code> - al ser almacenados aquí serán cargados automáticamente por el sistema de preferencias de Firefox- de modo que se pueda tener acceso mediante las <a href="/es/docs/Preferences_API" title="Preferences_API">Preferences API</a>.</p> -<h2 id="Componente_XPCOM" name="Componente_XPCOM">Componente XPCOM</h2> -<p>Firefox soporta el uso del componente <a href="/es/docs/XPCOM" title="XPCOM">XPCOM</a> en extensiones. Puedes crear tus propios componentes fácilmente usando JavaScript o C++ (usando el <a href="/es/docs/Gecko_SDK" title="Gecko_SDK">Gecko SDK</a>).</p> -<p>Coloca todos tus archivos .js o .dll en el directorio <code>components/</code>- para que sean automáticamente registrados la primera vez que inicie Firefox después de instalada la extensión.</p> -<p>Para más información revisa <a href="/es/docs/How_to_Build_an_XPCOM_Component_in_Javascript" title="How_to_Build_an_XPCOM_Component_in_Javascript">How to Build an XPCOM Component in Javascript</a> y el libro <a href="/es/docs/Creating_XPCOM_Components" title="Creating_XPCOM_Components">Creating XPCOM Components</a>.</p> -<h3 id="Comandos_de_la_Aplicaci.C3.B3n" name="Comandos_de_la_Aplicaci.C3.B3n">Comandos de la aplicación</h3> -<p>Una de las ventajas de las aplicaciones que usan el componente XPCOM es la de poder usar líneas de comandos para su ejecución tanto en Firefox como en Thunderbird. Puedes utilizar esta técnica para correr tus extensiones:</p> -<pre> firefox.exe -myapp -</pre> -<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag().</span> Ver <a href="/es/docs/Chrome/Command_Line" title="Chrome/Command_Line">Chrome: Command Line</a> o visitar <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum discussion</a> para más detalles.</p> -<h2 id="Ubicaci.C3.B3n" name="Ubicaci.C3.B3n">Ubicación</h2> -<p>Para permitir más de un lenguaje, debes separar las cadenas del contenido usando <a href="/es/docs/XUL_Tutorial/Localization" title="XUL_Tutorial/Localization">entities</a> y <a href="/es/docs/XUL_Tutorial/Property_Files" title="XUL_Tutorial/Property_Files">string bundles</a>. ¡Es mucho más fácil de hacer esto cuando estás desarrollando tu extensión que volver y hacerlo luego!</p> -<p>La información de la ubicación está almacenada en el directorio locale para las extensiones. Por ejemplo, para agregar un locale para nuestra extensión de prueba, crea un directorio llamado "locale" en chrome (donde esta ubicado el "contenido" del directorio) y agrega las siguientes líneas al archivo chrome.manifest:</p> -<pre>locale sample sampleLocale chrome/locale/ -</pre> -<p>Para crear valores de atributos ubicables en XUL, pones los valores en un archivo <code>.ent</code> (o un <code>.dtd</code>), el cual deberá ponerse en el directorio locale y verse así:</p> -<pre><!ENTITY button.label "Clickeame!"> -<!ENTITY button.accesskey "C"> -</pre> -<p>Y entonces inclúyelo en la parte superior del documento XUL (pero debajo de: "<?xml version"1.0"?>") quedando asi:</p> -<pre><!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.ent</a>"> -</pre> -<p>Donde <code><strong>window</strong></code> es el <code><a href="/es/docs/DOM/element.localName" title="DOM/element.localName">localName</a></code> del elemento raíz del documento XUL, y el valor de la propiedad <code>SYSTEM</code> es la URI de chorme al archivo entity. Para nuestra extensión de ejemplo, el elemento de la raíz es <code><strong>overlay</strong></code>.</p> -<p>Para usar entities, tu XUL debe verse asi:</p> -<pre><button label="&button.label;" accesskey="&button.accesskey;"/> -</pre> -<p>El registro de Chrome se asegurara que el archivo entity ha sido cargado del paquete correspondiente a la localizacion elegida.</p> -<p>Para las lineas que usarás en tu script, crea un archivo .properties; un archivo de texto que contendrá estas líneas:</p> -<pre>key=value -</pre> -<p>Entonces usa el tag <code><a href="/es/docs/NsIStringBundleService" title="NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/es/docs/NsIStringBundle" title="NsIStringBundle">nsIStringBundle</a></code> o el tag <code><a class="external" href="http://xulplanet.com/references/elemref/ref_stringbundle.html"><stringbundle></a></code> para cargar los valores en el script.</p> -<h2 id="Comprendiendo_el_navegador" name="Comprendiendo_el_navegador">Comprender el navegador</h2> -<p>Utiliza <a href="/es/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> (no es parte de la instalación <strong>Estandar</strong> de Firefox, debes reinstalar seleccionando instalación personalizada y elegir <strong>Herramientas de Desarrollo </strong> si no hay un elemento "Inspector de DOM" en el menu Herramientas del browser) para inspeccionar la ventana del browser o cualquier otra ventana XUL que quieras extender.</p> -<p>Utiliza el botón de búsqueda apuntar-y-clic situado en la parte superior izquierda de la barra de herramientas de DOM Inspector visualmente en un nodo de la ventana XUL para seleccionarlo. Cuando hagas esto DOM Inspector ira dentro del árbor jerárquico al nodo sobre el que hiciste clic.</p> -<p>Utiliza el panel lateral derecho de DOM Inspector para descubrir los puntos de anclaje con los ids que puedes utilzar para insertar tus elementos en los overlays. Si no pudieses encontrar un elemento con un id sobre el que hacer la mezcla, puedes añadir un script en tu overlay e insertar tus elementos cuando el evento load se dispare en la ventana XUL maestra.</p> -<p>Depurar extensiones</p> -<p><strong>Herramientas analitícas para Depurar (Debugging)</strong></p> -<ul> - <li>El <a href="/es/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a> - inspecciona atributos, estructura del DOM, reglas de estilos CSS que están afectando (ej. buscar-porque sus reglas de estilo parecen no estar trabajando para un elemento -, ¡una herramienta invaluable!)</li> - <li><a href="/es/docs/Venkman" title="Venkman">Venkman</a> - Marca de control (breakpoints) en JavaScript e inspeccionar la pila de llamada.</li> - <li><code><a href="/es/docs/Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee" title="Core_JavaScript_1.5_Reference/Objects/Function/arguments/callee">arguments.callee</a>.<a href="/es/docs/Core_JavaScript_1.5_Reference/Objects/Function/caller" title="Core_JavaScript_1.5_Reference/Objects/Function/caller">caller</a></code> en JavaScript - accede a la pila de llamada de funciones.</li> -</ul> -<p><strong>printf debugging</strong></p> -<ul> - <li>Ejecutar Firefox con <code>-console</code> en la linea de comandos y usar</li> -</ul> -<p><code><a href="/es/docs/DOM/window.dump" title="DOM/window.dump">dump</a>("string")</code> (ver el enlace para detalles)</p> -<ul> - <li>Usar <code><a href="/es/docs/NsIConsoleService" title="NsIConsoleService">nsIConsoleService</a></code> para ingresar/invocar la consola JavaScript</li> -</ul> -<p><strong>Depuración avanzada</strong></p> -<ul> - <li>Ejecutar una “construcción” de Firefox de depuración y establecer los puntos de interrupción en el propio Firefox, o sus componentes C++. Para el desarrollador experimentado, esta es a menudo la manera más rápida de diagnosticar un problema. Para más información ver <a href="/es/docs/Build_Documentation" title="Build_Documentation">Build Documentation</a> y <a href="/es/docs/Developing_Mozilla" title="Developing_Mozilla">Developing Mozilla</a>.</li> -</ul> -<ul> - <li>Para obtener mas consejos útiles ver <a href="/es/docs/Debugging_a_XULRunner_Application" title="Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a>.</li> -</ul> -<h3 id="Gu.C3.ADa_R.C3.A1pida" name="Gu.C3.ADa_R.C3.A1pida">Guía Rápida</h3> -<p>Otro tutorial desde <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">MozillaZine Knowledge Base</a>, también puedes bajar este archivo para usarlo como base en la creación de tus extensiones <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">helloworld.zip</a>.</p> diff --git a/files/es/orphaned/crear_una_extensión_personalizada_de_firefox_con_el_mozilla_build_system/index.html b/files/es/orphaned/crear_una_extensión_personalizada_de_firefox_con_el_mozilla_build_system/index.html deleted file mode 100644 index 2cca183f1b..0000000000 --- a/files/es/orphaned/crear_una_extensión_personalizada_de_firefox_con_el_mozilla_build_system/index.html +++ /dev/null @@ -1,582 +0,0 @@ ---- -title: Crear una extensión personalizada de Firefox con el Mozilla Build System -slug: >- - orphaned/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System -tags: - - Complementos - - Documentación_de_compilado - - Todas_las_Categorías - - XPCOM - - extensiones -original_slug: Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System ---- -<p> </p> - -<div class="note"><strong>Nota:</strong> Todas las instrucciones de este artículo sólo son aplicables a la rama 1.8 de Mozilla (p.e. Firefox 1.5). Intentaré mantener actualizada la versión estable aunque de hecho no deberías asumir que esto funcionará con la rama 1.5 (p.e, Firefox 1.0) o anteriores.</div> - -<p>Existe una <a href="/es/Extensiones" title="es/Extensiones">infinidad de documentación</a> sobre la creación de extensiones para Firefox. Sin embargo, actualmente todos esos documentos asumen que estás desarrollando tu extensión utilizando únicamente <a href="/es/XUL" title="es/XUL">XUL</a> y <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>. Para las extensiones complejas puede ser necesario crear componentes en C++ que proporcionen funcionalidades adicionales. Las razones por las que podrías querer agregar componentes C++ en tu extensión incluyen:</p> - -<ul> - <li>La necesidad de un alto rendimiento más allá de lo que te ofrece el código JavaScript.</li> - <li>El uso de bibliotecas de terceras partes escritas en C o en C++.</li> - <li>El uso de interfaces de Mozilla que no están disponibles vía <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> (p.e, <a href="/es/NSPR" title="es/NSPR">NSPR</a>).</li> -</ul> - -<p>Este artículo describe cómo configurar el entorno de desarrollo para una extensión de Firefox grande y compleja utilizando parcial o totalmente los requerimientos ya mencionados. El proceso de reunir esta información ha sido de algún modo un calvario debido a la falta de información publicada sobre este tema, aunque varios miembros de la comunidad de desarrolladores de Mozilla han colaborado en su creación. Ellos han mostrado una paciencia extraordinaria respondiendo preguntas típicas de novatos ignorantes. Me quedo corto si digo que estoy lejos de ser un experto de Mozilla, aunque voy mejorando. Puede que muchas partes de este documento sean imprecisas, confusas o simplemente incorrectas. De hecho, una de mis metas al escribir esto es afinar dichas instrucciones hasta que constituyan una guía definitiva para los hackers del núcleo que quieran ampliar la plataforma Firefox. Si tú eres uno de los muchos que saben más que yo sobre esto, tu ayuda mejorando este artículo será gratamente recibida.</p> - -<p>También debería enfatizar que <em>no</em> tienes por qué compilar Mozilla o utilizar el sistema de compilación de Mozilla si quieres crear componentes C++ para Mozilla. Si sólo buscas crear un componente <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> o dos, este artículo será algo excesivo y puede que te interese mirar <a class="external" href="http://www.iosart.com/firefox/xpcom/">esta guía</a> en su lugar. Por otra parte, si tienes experiencia desarrollando o dirigiendo un equipo y sabes que tienes que desarrollar una extensión grande y compleja, probablemente hagas bien en considerar la aproximación descrita en este artículo.</p> - -<p>Una última nota: sólo he probado dichas técnicas dentro de Firefox aunque probablemente funcionarán más o menos bien en otras plataformas basadas en Gecko como Thunderbird o SeaMonkey. Si alguien puede confirmar esto y/o suministrar guías de estilo para aquello en lo que difiere actualizaré el artículo para incorporar esta información.</p> - -<h3 id="Y_Bambi_y_Mozilla_se_encontraron..." name="Y_Bambi_y_Mozilla_se_encontraron...">Y Bambi y Mozilla se encontraron...</h3> - -<p>Nada en este artículo es para cobardes. En particular el primer paso conlleva la compilación de Mozilla, lo cual es un gran... no, un inmenso proyecto. Muchos desarrolladores inteligentes han sido llevados al borde de la locura intentando compilarlo por primera vez. Si no tienes experiencia desarrollando C++ no deberías ni preocuparte. Sigue con JavaScript.</p> - -<h4 id="Plataformas_Windows" name="Plataformas_Windows">Plataformas Windows</h4> - -<p>La primera vez que compilé Mozilla utilicé <a href="/es/Prerrequisitos_de_compilaci%C3%B3n_en_Windows" title="es/Prerrequisitos_de_compilación_en_Windows">esta guía</a>. Ni siquiera puedo recordar por qué, pero me quedé pillado unas cuantas veces, aunque la odisea llevó más tiempo de lo que me había imaginado al principio. Me cargué los muebles y me arranqué el pelo. Aquí tienes una <a class="external" href="http://whereswalden.com/mozilla/msvcfree/">guía comprensiva rápida</a>, bien redactada. Sigue cada paso metódicamente y probablemente todo irá bien. Céntrate en el hecho de que una vez hayas completado la compilación, posiblemente el resto del trabajo no conllevará esfuerzo alguno. Posiblemente.</p> - -<h4 id="Otras_plataformas" name="Otras_plataformas">Otras plataformas</h4> - -<p>En otras plataformas, léase Linux y MacOS, el proceso es mucho más sencillo. Todas las herramientas para compilar están disponibles de forma integrada y por tanto todo lo que tienes que hacer es ejecutar algunas órdenes en el terminal. Puedes encontrar las instrucciones completas para casi cualquier SO <a href="/es/Documentaci%C3%B3n_de_compilaci%C3%B3n" title="es/Documentación_de_compilación">aquí</a>.</p> - -<h3 id="Estructurar_tu_proyecto" name="Estructurar_tu_proyecto">Estructurar tu proyecto</h3> - -<p>Mozilla incorpora un número de extensiones complejas que son integradas en su proceso de compilación. Es así que ha sido necesario resolver todos los problemas inherentes a la creación y registro de componentes XPCOM, a la compilación de ficheros JAR y los manifiestos; instalando el montón en el directorio <code>extensions</code> de Firefox y así sucesivamente. Así pues, lo mejor para nosotros es aprovecharnos de esta infraestructura para construir nuestra extensión.</p> - -<p>Antes que nada, elige un nombre con gancho para tu extensión y crea un directorio con ese nombre bajo el directorio <code>/mozilla/extensions/</code>. Utiliza sólo minísculas. Deberías ver un montón de otros directorios (<code>inspector/</code>, <code>reporter/</code>, etc...) al mismo nivel del árbol de directorios.</p> - -<p>Date cuenta que antes de realmente construir nada, el sistema de desarrollo de Mozilla llama a un proceso que genera los makefiles usados por la compilación a partir de plantillas de makefiles llamadas <code>Makefile.in</code>. Los makefiles reales tienden a ser muy parecidos si no idénticos a las plantillas, pero la flexibilidad extra adquirida al obtener los makefiles generados dinámicamente es una de las cosas que hacen al sistema de compilación tan potente.</p> - -<h4 id="Anatom.C3.ADa_de_una_simple_extensi.C3.B3n_en_C.2B.2B" name="Anatom.C3.ADa_de_una_simple_extensi.C3.B3n_en_C.2B.2B">Anatomía de una simple extensión en C++</h4> - -<p>Asumiremos que estamos usando C++ para escribir componentes XPCOM que pueden ser usados tanto desde otros componentes C++ o desde JavaScript. El proceso de crear un componente es, en realidad, algo relativamente simple cuando se utiliza Mozilla Build System.</p> - -<p>El caso más simple ocurre cuando un componente va a consistir en un único directorio principal con dos subdirectorios, <code>public/</code> y <code>src/</code>. El directorio principal y cada subdirectorio deben contener un <code>Makefile.in</code> (a partir de ahora me referiré a este fichero como un makefile aunque, como sabemos, en la práctica es usado para generar los makefiles reales). Este makefile dice dos cosas: lo primero: lista los subdirectorios que componen la extensión por lo que el sistema de compilación conoce dónde buscar los makefiles adicionales. Después dà las instrucciones para compilar el sistema que crea una nueva extensión, en lugar de copiar los componentes directamente en el directorio de binarios de Firefox. La principal ventaja de utilizar una extensión es que es fácil empaquetarlo todo e instalarlo en otra máquina.</p> - -<p>Así pues, aquí tienes el makefile principal más básico y simplón que te puedas encontrar (<code>Makefile.in</code> en el directorio principal de la extensión):</p> - -<pre>DEPTH = ../.. -topsrcdir = @top_srcdir@ -srcdir = @srcdir@ -VPATH = @srcdir@ - -include $(DEPTH)/config/autoconf.mk - -MODULE = myextension - -DIRS = public src - -XPI_NAME = myextension -INSTALL_EXTENSION_ID = myextension@mycompany.com -XPI_PKGNAME = myextension - -DIST_FILES = install.rdf - -include $(topsrcdir)/config/rules.mk -</pre> - -<p>La descripción detallada del proceso de creación, describiendo las opciones clave de este makefile pueden ser encontradas <a href="/es/C%C3%B3mo_funciona_el_sistema_de_compilaci%C3%B3n_de_Mozilla" title="es/Cómo_funciona_el_sistema_de_compilación_de_Mozilla">aquí</a>. Tanto <strong>MODULE</strong> como <strong>XPI_NAME</strong> están asignados al nombre de tu extensión; deben aparecer repetidos en todos los makefiles del proyecto para que todos los ficheros acaben en el mismo lugar en el área de pruebas del XPI (ver más adelante). <strong>INSTALL_EXTENSION_ID</strong> es el ID único de tu extensión. Puede ser un GUID aunque el formato mostrado antes es más bonito y, asumámoslo, mucho más fácil de recordar. No tienes porqué proporcionar un <strong>XPI_PKGNAME</strong> aunque si creas un fichero XPI susceptible de ser distribuido, será creado automáticamente en el directorio raíz del área de pruebas del XPI (<code>/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/</code>).</p> - -<p>Toda extensión debe incluir un fichero <code>install.rdf</code> que le diga a Firefox cómo instalarla. Este fichero debería estar ubicado en el directorio principal de la extensión y tener este aspecto:</p> - -<pre><?xml version="1.0"?> - -<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:em="http://www.mozilla.org/2004/em-rdf#"> - <Description about="urn:mozilla:install-manifest"> - <em:id>myextension@mycompany.com</em:id> - <em:version>0.1</em:version> - - <em:targetApplication> - <!-- Firefox --> - <Description> - <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> - <em:minVersion>1.0+</em:minVersion> - <em:maxVersion>1.0+</em:maxVersion> - </Description> - </em:targetApplication> - - <!-- front-end metadata --> - <em:name>My First Extension</em:name> - <em:description>Just an example.</em:description> - <em:creator>allpeers.com</em:creator> - <em:homepageURL>http://www.allpeers.com/blog/</em:homepageURL> - </Description> -</RDF> -</pre> - -<p>Existe una <a href="/es/Manifiestos_de_instalaci%C3%B3n" title="es/Manifiestos_de_instalación">descripción detallada</a> del formato del fichero <code>install.rdf</code>. Utiliza la variable <strong>DIST_FILES</strong> del makefile para decirle a <code>make</code> que copie el fichero en el directorio de la extensión y (opcionalmente) el fichero XPI.</p> - -<h4 id="Interfaces_p.C3.BAblicas" name="Interfaces_p.C3.BAblicas">Interfaces públicas</h4> - -<p>El directorio <code>public/</code> contiene todas las interfaces necesarias para que otros módulos puedan utilizarlas. Éstas pueden ser ficheros <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a> que describan interfaces <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a>, los cuales son utilizados para generar ficheros de cabecera normales de C++ para incluirlos en los ficheros fuente. También pueden ser ficheros de cabecera normales de C++ que son utilizados directamente por otros módulos. La forma más fácil de hacer esto último es usar implementaciones en línea para todos los métodos, por lo que no tendrás ninguna dependencia de enlazado adicional. En otro caso tendrás que utilizar enlazado estático en tu módulo si utilizas estas cabeceras públicas en otros módulos. Personalmente desaconsejo esta práctica (entre otras cosas porque el enlazado estático significa que el mismo código se carga más de una vez en memoria y el código no estará disponible desde JavaScript u otros lenguajes diferentes a C++) y animo a usar XPCOM siempre que sea posible.</p> - -<p>El makefile en el directorio <code>public/</code> debería parecerse a este modelo:</p> - -<pre>DEPTH = ../../.. -topsrcdir = @top_srcdir@ -srcdir = @srcdir@ -VPATH = @srcdir@ - -include $(DEPTH)/config/autoconf.mk - -MODULE = myextension -XPIDL_MODULE = myextension - -XPI_NAME = myextension - -EXPORTS = \ - myHeader.h \ - $(NULL) - -XPIDLSRCS = \ - myIFirstComponent.idl \ - myISecondComponent.idl \ - $(NULL) - -include $(topsrcdir)/config/rules.mk -</pre> - -<p><strong>XPIDL_MODULE</strong> es el nombre del fichero XPT generado que contiene información de tipos sobre tus interfaces <a class="external" href="http://www.mozilla.org/scriptable/xpidl/idl-authors-guide/index.html">IDL</a>. Si tienes múltiples módulos, asegúrate de que utilizas un valor diferente de <strong>XPIDL_MODULE</strong> para cada uno. En caso contrario, el fichero XPT del primer módulo será sobrescrito por el segundo y obtendrás errores del tipo <strong>NS_ERROR_XPC_BAD_IID</strong> cuando intentes acceder a sus interfaces IDL desde el código. Los ficheros bajo <strong>EXPORTS</strong> son copiados directamente al directorio <code>/mozilla/$(MOZ_OBJDIR)/dist/include/myextension/</code> siendo así accesibles desde otros módulos (el valor de <strong>MOZ_OBJDIR</strong> se define en <code>/mozilla/.mozconfig</code>). XPIDLSRCS es ejecutado a través del procesador IDL y las cabeceras generadas de C++ son copiadas en el mismo directorio include. Además, se genera un fichero XPT (biblioteca de tipos) que se copia en el subdirectorio <code>components/</code> de tu extensión.</p> - -<h4 id="Ficheros_fuente" name="Ficheros_fuente">Ficheros fuente</h4> - -<p>Ahora es cuando hay que crear el makefile y los ficheros-fuente en el subdirectorio <code>src/</code>. Si estás implementando interfaces y las estás describiendo con IDL, la forma más fácil de hacer esto es dejando vacío el directorio <code>src/</code> y ejecutando <code>make</code> sólo en el directorio <code>public/</code>. Esto serà explicado en breve.</p> - -<p>Luego abre el fichero de cabecera generado para tu interfaz en <code>/mozilla/$(MOZ_OBJDIR)/dist/include/myextension/</code>. Este fichero tendrá algunas plantillas para los ficheros de componentes .H y .CPP que puedes copiar y pegar en tus ficheros de implementación. Todo lo que tienes que hacer es rellenar los huecos del fichero C++ con la implementación real y estarás listo para continuar.</p> - -<p>A continuación se muestra un ejemplo del makefile que necesitas colocar en tu directorio <code>src</code>.</p> - -<pre class="eval">DEPTH = ../../.. -topsrcdir = @top_srcdir@ -srcdir = @srcdir@ -VPATH = @srcdir@ - -include $(DEPTH)/config/autoconf.mk - -IS_COMPONENT = 1 -MODULE = myextension -LIBRARY_NAME = myExtension - -XPI_NAME = myextension - -REQUIRES = xpcom \ - string \ - $(NULL) - -CPPSRCS = \ - myFirstComponent.cpp \ - mySecondComponent.cpp \ - myExtension.cpp \ - $(NULL) - -include $(topsrcdir)/config/rules.mk - -EXTRA_DSO_LDOPTS += \ - $(XPCOM_GLUE_LDOPTS) \ - $(NSPR_LIBS) \ - $(NULL) - -# <span class="highlightred">NOTA: si estás codificando contra la versión 1.8.0 branch (no 1.8 branch o trunk),</span> -# <span class="highlightred">la línea anterior no funcionará debido a problemas de modificadores del enlazador.</span> -# En su lugar utiliza las siguientes variables: -# -# EXTRA_DSO_LDOPTS += \ -# $(MOZ_COMPONENT_LIBS) \ -# $(NULL) -# -# Por desgracia, usando MOZ_COMPONENT_LIBS se enlaza contra xpcom_core, lo que -# significa que tus componentes no funcionarán en futuras versiones de Firefox. -</pre> - -<p>La sección <code>REQUIRES</code> le dice a <code>make</code> qué módulos utilizan tus componentes. Esto provoca que los subdirectorios relevantes de <code>/mozilla/$(MOZ_OBJDIR)/dist/include/</code> sean añadidos a la ruta include del compilador de C++. Si estás incluyendo las cabeceras de Mozilla y el compilador es incapaz de encontrarlas, podría ser que no hayas listado todos los módulos necesarios aquí. <code>CPPSRCS</code> enumera los ficheros fuente que necesitan ser compilados.</p> - -<p>En este ejemplo, los dos primeros ficheros contienen la implementación de los dos componentes de la extensión. El fichero final <code>myExtension.cpp</code> contiene el código necesario para registrar dichos componentes, como se describirá en la siguiente sección.</p> - -<h4 id="Registrar_tus_componentes" name="Registrar_tus_componentes">Registrar tus componentes</h4> - -<p>Para poder usar tus componentes desde otros módulos de C++ y JavaScript primero tienes que registrarlos. Para hacerlo, tu extensión necesita implementar una clase que exponga la interfaz <code><a href="/es/NsIModule" title="es/NsIModule">nsIModule</a></code> la cual posee métodos para acceder a los componentes definidos en un módulo. Afortunadamente, esto puede ser llevado a cabo mediante el uso de unas pocas y simples macros por lo que no tienes que embarrarte con los detalles de qué está pasando internamente.</p> - -<p>El primer paso es definir un CID, un contract ID (o ID de contrato) y un nombre de clase para cada uno de tus componentes. Pega el siguiente código (adaptando los <strong>#defines</strong> según convenga) en la cabecera de cada componente que tenga que ser instanciado utilizando el administrador de componentes:</p> - -<pre>// {00000000-0000-0000-0000-000000000000} -#define MYFIRSTCOMPONENT_CID \ - { 0x00000000, 0x0000, 0x0000, \ - { 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } } - -#define MYFIRSTCOMPONENT_CONTRACTID "@mycompany.com/myfirst;1" -#define MYFIRSTCOMPONENT_CLASSNAME "My First Component" -</pre> - -<p>Obviamente necesitas completar el CID con un GUID real. Bajo Windows puede ser generado utilizando <a class="external" href="http://www.microsoft.com/downloads/details.aspx?familyid=94551F58-484F-4A8C-BB39-ADB270833AFC">guidgen.exe</a>. Los Unixeros pueden utilizar uuidgen (viene de modo predeterminado en la mayoría de distribuciones de Unix y Linux).</p> - -<p>Ahora crea el fichero <code>myExtension.cpp</code> así:</p> - -<pre>#include "nsXPCOM.h" - -#include "nsIGenericFactory.h" - -/** - * Components to be registered - */ -#include "myFirstComponent.h" -#include "mySecondComponent.h" - -NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent) -NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent) - -//---------------------------------------------------------- - -static const nsModuleComponentInfo components[] = -{ - { - MYFIRSTCOMPONENT_CLASSNAME, - MYFIRSTCOMPONENT_CID, - MYFIRSTCOMPONENT_CONTRACTID, - myFirstComponentConstructor - }, - { - MYSECONDCOMPONENT_CLASSNAME, - MYSECONDCOMPONENT_CID, - MYSECONDCOMPONENT_CONTRACTID, - mySecondComponentConstructor - }, -}; - -NS_IMPL_NSGETMODULE(MyExtension, components) -</pre> - -<p>La macro <strong>NS_IMPL_NSGETMODULE</strong> crea el objeto de módulo apropiado suministrando acceso a todos los componentes listados en el array <code><a href="/es/NsModuleComponentInfo" title="es/NsModuleComponentInfo">nsModuleComponentInfo</a></code>.</p> - -<h4 id="Compilaci.C3.B3n" name="Compilaci.C3.B3n">Compilación</h4> - -<p>Como se dijo antes, probablemente querrás compilar tu extensión inmediatamente tras crear tus ficheros IDL para poder generar las plantillas C++ para las implementaciones del componente. Estoy asumiendo que ya has podido compilar Firefox sin problemas. Si no es así, vuelve inmediatamente al inicio de este artículo y no regreses hasta que hayas generado un <code>firefox.exe</code> funcional. <span class="comment">Creo que es una casilla del monopoly: Do not pass go. Do not collect $200.</span></p> - -<p>¿Sigues ahí? Bien, ahora vamos a modificar tu <code>.mozconfig</code> (en el directorio raíz <code>/mozilla/</code> para que tu extensión se compile junto con Mozilla. Añade la siguiente línea al final del fichero:</p> - -<pre>ac_add_options --enable-extensions=default,myextension -</pre> - -<p>Ahora ejecuta <code>make</code> en el directorio raíz de Mozilla:</p> - -<pre>make -f client.mk build -</pre> - -<p>Incluso aunque hayas compilado una versión actualizada de Firefox, tendrás que esperar un momento para que <code>make</code> pueda recorrer el árbol de Mozilla por completo buscando nuevo material (en mi máquina, que es bastante rápida, esto tarda unos 10-15 minutos). Finalmente alcanzará tu extensión y generará un montón de material bajo el directorio <code>/mozilla/$(MOZ_OBJDIR)/</code>:</p> - -<ul> - <li>Varios ficheros de cabecera exportados y ficheros de cabecera generados (desde IDL) en <code>dist/include/myextension/</code></li> - <li>Bibliotecas estáticas para tus módulos en <code>dist/lib/</code> (en el caso de que otros módulos quieran enlazar estáticamente a tu material en lugar de utilizar XPCOM).</li> - <li>Un fichero XPI en <code>dist/xpi-stage/myextensión.xpi</code>.</li> - <li>Los makefiles generados para tus proyectos en <code>extensions/myextension/</code> (recuerda que estamos bajo el directorio <code>/mozilla/$(MOZ_OBJDIR)/</code>.</li> - <li>Todo lo demás en <code>dist/bin/extensions/<a class="link-mailto" href="mailto:myextension@mycompany.com" rel="freelink">myextension@mycompany.com</a>/</code>.</li> -</ul> - -<p>Gran parte de este material no será creado en la primera pasada ya que <code>make</code> se impacientará cuando no encuentre los ficheros fuente para tus componentes. No te preocupes por eso, todo lo que necesitas son los ficheros de cabecera generados que contengan las plantillas de implementación en C++. Vuelve atrás y rellena la implementación en C++ de tus componentes para que puedan ser compilados la siguiente vez. Recuerda que no deberías modificar jamás, nunca, ningún fichero generado. Modifica siempre los ficheros utilizados para generarlos y vuelve a ejecutar <code>make</code>. Quizá haya excepciones a esta regla, pero si estás cambiando los ficheros generados directamente muy probablemente estás metiendo la pata.</p> - -<p>El proceso de recorrer el árbol completo de Mozilla lleva bastante tiempo. Si ya has compilado Mozilla puedes evitar esto creando un makefile para tu extensión directamente. Ve al directorio raíz de tu $(MOZ_OBJDIR) y (desde un shell compatible con bash) introduce:</p> - -<pre class="eval">../build/autoconf/make-makefile extensions/myextension -</pre> - -<p>Si tu $(MOZ_OBJDIR) está ubicado fuera de tu $(TOPSRCDIR), necesitarás hacer:</p> - -<pre class="eval">$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension -</pre> - -<p>para que el script sepa dónde están tus fuentes (usará la ruta de la extensión que des relativa al directorio actual para resolver dónde quieres que vayan tus makefiles).</p> - -<p>Esto generará el makefile apropiado para tu extensión. Tanto si quieres compilar el árbol completo de Mozilla como si tomas este atajo, puedes compilar de ahora en adelante yendo a <code>/mozilla/$(MOZ_OBJDIR)/extensions/myextension/</code> y escribiendo "make" en la línea de órdenes. Esto debería compilar tu componente sin distraerse con el resto de Mozilla. Si todo va bien, verás tu fichero XPI en el área de pruebas de XPI. También verás la versión descomprimida (es decir, la estructura de directorios descomprimida) bajo <code>/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions</code> (si algo va mal, averigua qué es, corrígelo y luego vuelve aquí y añádelo a este artículo).</p> - -<p>Para asegurarte de que la compilación ha finalizado realmente, lanza Firefox y comprueba que tu extensión aparece en la lista cuando selecciones Herramientas / Complementos. Si estás usando Firefox como tu navegador habitual (y si no, ¿por qué no?), puede que te moleste el hecho que de que tendrás que cerrar tu Firefox normal antes de ejecutar tu versión personalizada. Si es así, prueba a establecer la variable de entorno <strong>MOZ_NO_REMOTE</strong> a "1" antes de ejecutar la versión de desarrollo de Firefox. También necesitarás usar un perfil diferente para tu versión de desarrollo:</p> - -<pre class="eval">firefox -P <em>desarrollo</em> -</pre> - -<p>Donde <em>desarrollo</em> se sustituye con el nombre del perfil extra que has creado. Esto te permitirá ejecutar ambas versiones de Firefox simultáneamente, ahorràndote montones de tiempo a lo largo del ciclo de compilación/prueba.</p> - -<h4 id="No_hay_nada_como_estar_en_chrome" name="No_hay_nada_como_estar_en_chrome">No hay nada como estar en chrome</h4> - -<p>¡Yuhuuuu! Ahora ya tienes una extensión que no hace absolutamente nada. Es hora de hacer algo con esos geniales componentes que implementaste y registraste. La forma más fácil de hacer esto es escribiendo algo de código <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> y <a href="/es/XUL" title="es/XUL">XUL</a>. En este punto sería de mucha utilidad tener algo de experiencia <a href="/es/Extensiones" title="es/Extensiones">escribiendo extensiones "normales"</a> (p.e., sin utilizar componentes de C++ personalizadas). Si nunca has hecho esto, te recomiendo encarecidamente que pienses una idea guay para algo simple que siempre hayas querido hacer para Firefox y lo escribas. Mostrar sólo un nuevo elemento de menú que abra un cuadro de diálogo "¡Hola mundo!" sería ya un gran ejercicio de precalentamiento.</p> - -<p>Suponiendo que sabes cómo escribir extensiones en XUL/JavaScript, estarás al corriente de que la parte más importante va en el directorio <code>chrome/</code> de tu extensión. Bueno, el hecho de que estés utilizando también componentes C++ no cambia eso ni una pizca. Por tanto, ahora necesitas crear los directorios normales <code>content/</code>, <code>locale/</code> y <code>skin/</code> en los que has de poner tus ficheros chrome. Personalmente me gusta ubicar dichos directorios directamente bajo el directorio raíz de mi módulo pero supongo que no habrá diferencia si prefieres ponerlos bajo el subdirectorio <code>chrome/</code> o el que sea. ¡Viva la libertad!</p> - -<p>Una vez has escrito los ficheros chrome necesarios (por ejemplo, un overlay que añade un elemento de menú para instanciar y utilizar uno de tus componentes), necesitas empaquetarlo como parte de tu extensión. Esto es llevado a cabo a través del uso de un <a href="/es/Manifiestos_JAR" title="es/Manifiestos_JAR">manifiesto JAR</a>. Para nuestro ejemplo de extensión simple este fichero podría tener este aspecto:</p> - -<pre>myextension.jar: -% content myextension %content/ -% locale myextension en-US %locale/en-US/ -% skin myextension classic/1.0 %skin/classic/ -% overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul - content/MyExtensionOverlay.js (content/MyExtensionOverlay.js) - content/MyExtensionOverlay.xul (content/MyExtensionOverlay.xul) - locale/en-US/MyExtension.dtd (locale/en-US/MyExtension.dtd) - locale/en-US/MyExtension.properties (locale/en-US/MyExtension.properties) - skin/classic/MyExtension.css (skin/classic/MyExtension.css) -</pre> - -<p>Pon este código en un fichero llamado <code>jar.mn</code> en el directorio raíz de tu extensión, asegurándote de que las rutas en los paréntesis apuntan a los ficheros reales (relativos al directorio raíz). Además tienes que hacer un pequeño cambio al makefile del mismo directorio, añadiendo la siguiente línea:</p> - -<pre class="eval">USE_EXTENSION_MANIFEST = 1 -</pre> - -<p>Esto le dice a <code>make</code> que cree un único fichero de manifiesto llamado <code>chrome.manifest</code> en lugar de crear manifiestos separados con nombres tontos para cada paquete.</p> - -<p>Ahora ejecuta <code>make</code> de nuevo. Deberías ver un subdirectorio <code>chrome</code> en tu extensión (<code>/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/<a class="link-mailto" href="mailto:myextension@mycompany.com" rel="freelink">myextension@mycompany.com</a>/</code>). Observa que el directorio <code>chrome</code> contiene un fichero JAR (o sea, ZIP) con todos los ficheros chrome listados en <code>jar.mn</code> además de una estructura de directorio completa reflejo de la del fichero JAR. La estructura de directorio sin embargo está vacía. ¿Por qué? No lo sé. No te preocupes por esto, los ficheros en el JAR son los que realmente se usan.</p> - -<h4 id="Manteni.C3.A9ndolo_complejo" name="Manteni.C3.A9ndolo_complejo">Manteniéndolo complejo</h4> - -<p>Si estás desarrollando extensiones realmente complejas con un montón de componentes <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a>, probablemente desees dividir tu código en módulos más pequeños.</p> - -<h5 id="Extensiones_moderadamente_complejas" name="Extensiones_moderadamente_complejas">Extensiones moderadamente complejas</h5> - -<p>Para una extensión moderadamente compleja, probablemente bastará con dividir el código en módulos de un solo nivel. Supongamos que tienes un módulo <code>base/</code> que define un manojo de componentes XPCOM básicos y un módulo <code>advanced/</code> que define algunos componentes chrome así como otros componentes que usan a los básicos. La estructura del directorio debería lucir más o menos así:</p> - -<ul> - <li>myextension - <ul> - <li>base - <ul> - <li>public</li> - <li>src</li> - </ul> - </li> - <li>advanced - <ul> - <li>content</li> - <li>locale - <ul> - <li>en-US</li> - <li>...other locales...</li> - </ul> - </li> - <li>public</li> - <li>skin - <ul> - <li>classic</li> - <li>...other skins...</li> - </ul> - </li> - <li>src</li> - </ul> - </li> - </ul> - </li> -</ul> - -<p>Más allá de eso, nada cambia. Los makefiles en los directorios <code>base/</code> y <code>advanced/</code> deberían tener más o menos el mismo aspecto que el makefile original del directorio raíz, sin olvidar cambiar la variable <strong>DEPTH</strong> para reflejar el hecho de que se han movido a un nivel más de profundidad respecto de la raíz de mozilla. También debes quitar la variable <strong>DIST_FILES</strong> porque va a estar en el makefile de nivel superior. Cada makefile que genere algo debería definir la variable <strong>XPI_NAME</strong> para asegurarse que los archivos generados van dentro de tu extensión y no dentro del directorio global <code>components/</code>. Define esto en cada makefile para asegurarte. Puedes usar el mismo <strong>MODULE</strong> para ambos casos, <code>base/</code> y <code>advanced/</code>, y así todos los archivos include generados irán al mismo directorio, pero asegúrate de no usar el mismo <strong>XPIDL_MODULE</strong> en los dos directorios <code>public/</code> o una de las bibliotecas de componentes (es decir, archivos XPT) sobrescribirá al otro y todo se echará a perder.</p> - -<p>Cada módulo debe tener también un valor diferente para la variable <strong>LIBRARY_NAME</strong>. Éste es el nombre de la biblioteca dinámica generada, así que si llamamos a las bibliotecas "myBase" y "myAdvance" entonces tendremos los archivos <code>myBase.dll</code> y <code>myAdvance.dll</code> (por lo menos así es en Windows). Y cada uno de estos módulos va a tener un archivo C++ separado para registrar componentes, así que va a haber dos archivos que lucirán como <code>myExtension.cpp</code> en el ejemplo original, digamos Base.cpp y Advanced.cpp. Por último, cada módulo tendrá, obviamente, su propio jar.mn, aunque pueden referenciar al mismo nombre de archivo JAR y nombre de paquete si quieres que todos los archivos chrome estén organizados en un mismo paquete y archivo JAR. El único que realmente permanece es install.rdf, que existe una vez y sólo una vez en el directorio raíz de la extensión.</p> - -<p>En cuanto al makefile de nivel superior, ahora tendrá este aspecto:</p> - -<pre>DEPTH = ../.. -topsrcdir = @top_srcdir@ -srcdir = @srcdir@ -VPATH = @srcdir@ - -include $(DEPTH)/config/autoconf.mk - -MODULE = myextension - -DIRS = base advanced - -XPI_NAME = myextension -INSTALL_EXTENSION_ID = myextension@mycompany.com -XPI_PKGNAME = myextension - -DIST_FILES = install.rdf - -include $(topsrcdir)/config/rules.mk -</pre> - -<h5 id="Extensiones_realmente_complejas" name="Extensiones_realmente_complejas">Extensiones realmente complejas</h5> - -<p>En algún momento, hasta un solo módulo puede crecer hasta un punto en que desees dividirlo en submódulos. La diferencia entre tener módulos diferentes y tener un módulo dividido en submódulos es que todos los submódulos comparten el mismo archivo para registrar componentes (el famoso archivo myExtension.cpp) y cuando lo compilas genera una sola biblioteca dinámica. La decisión para dividir un módulo en submódulos es sólo cuestión de organización del código, no afecta al producto final.</p> - -<p>Para dividir un módulo en submódulos primero debes crear un directorio para cada submódulo. Luego debes crear un directorio adicional llamado <code>build/</code>. Cada submódulo será configurado para crear una biblioteca estática y el directorio <code>build/</code> las unirá para crear una sola biblioteca dinámica. ¿Confundido? Aquí hay un ejemplo mostrando la subrama <code>advanced/</code> del directorio <code>myextension/</code>:</p> - -<ul> - <li>advanced - <ul> - <li>build</li> - <li>intricate - <ul> - <li>public</li> - <li>src</li> - </ul> - </li> - <li>multifarious - <ul> - <li>public</li> - <li>src</li> - </ul> - </li> - <li>content</li> - <li>locale - <ul> - <li>en-US</li> - <li>...otros idiomas...</li> - </ul> - </li> - <li>skin - <ul> - <li>classic</li> - <li>...otros skins...</li> - </ul> - </li> - </ul> - </li> -</ul> - -<p>Como puedes ver, hemos dividido <code>advanced/</code> dentro de dos submódulos: <code>intrincate/</code> y <code>multifarious/</code> y hemos añadido un directorio <code>build/</code> adicional. Hemos dejado los directorios chrome directamente bajo <code>advanced/</code>, los cuales no están enlazados a ningún submódulo específico. Esto significa que jar.mn estará en el mismo lugar.</p> - -<p>Los makefiles <code>intricate/</code> y <code>multifarious/</code> lucirán casi igual al makefile original <code>advanced/</code>, pero necesitamos modificarlos un poquito. Como siempre, debemos ajustar la variable <strong>DEPTH</strong> porque el makefile está más profundo en la estructura de directorios. Y deberíamos cambiar <strong>LIBRARY_NAME</strong> para indicar que estamos generando una biblioteca estática para cada submódulo. Por convenio, se usa el sufijo "_s" para este propósito. Así que las llamaremos "myIntricate_s" y "myMultifarious_s". Finalmente definimos la variable <strong>FORCE_STATIC_LIB</strong> para que quede un makefile que comience más o menos así:</p> - -<pre>DEPTH = ../../../../.. -topsrcdir = @top_srcdir@ -srcdir = @srcdir@ -VPATH = @srcdir@ - -include $(DEPTH)/config/autoconf.mk - -MODULE = myextension -LIBRARY_NAME = myIntricate_s -FORCE_STATIC_LIB = 1 - -XPI_NAME = myextension - -...más cosas aquí... -</pre> - -<p>El makefile build une las bibliotecas estáticas generadas por los submódulos y crea una única biblioteca dinámica de componentes:</p> - -<pre>DEPTH = ../../../.. -topsrcdir = @top_srcdir@ -srcdir = @srcdir@ -VPATH = @srcdir@ - -include $(DEPTH)/config/autoconf.mk - -IS_COMPONENT = 1 -MODULE = myextension -LIBRARY_NAME = myAdvanced - -XPI_NAME = myextension - -DEFINES += XPCOM_GLUE - -SHARED_LIBRARY_LIBS = \ - $(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \ - $(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \ - $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \ - $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \ - $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \ - $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \ - $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \ - $(NULL) - -REQUIRES = \ - xpcom \ - string \ - $(NULL) - -CPPSRCS = \ - Advanced.cpp \ - $(NULL) - -include $(topsrcdir)/config/rules.mk - -LOCAL_INCLUDES += \ - -I$(srcdir)/../intricate/src \ - -I$(srcdir)/../multifarious/src \ - $(NULL) -</pre> - -<p>El makefile en el directorio <code>advanced/</code> debería listar los directorios <code>intricate/</code>, <code>multifarious/</code> y <code>build/</code> en su variable <strong>DIRS</strong>. Asegúrate de que <code>build/</code> esté al final porque no puede crear la biblioteca hasta que los otros makefiles hayan sido completados.</p> - -<h3 id="Otros_temas" name="Otros_temas">Otros temas</h3> - -<h4 id="Agregar_archivos_de_datos_a_tus_extensiones" name="Agregar_archivos_de_datos_a_tus_extensiones">Agregar archivos de datos a tus extensiones</h4> - -<p>En algunos casos, puedes desear incluir archivos adicionales en tus extensiones que no pertenecen al subdirectorio <code>chrome/</code>. Algunos ejemplos pueden ser archivos de bases de datos o esquemas XML. Esto puede conseguirse añadiendo, en el makefile, código personalizado que copie los ficheros desde el árbol de origen hacia el directorio de destino de la extensión.</p> - -<h5 id="Copiar_archivos_de_datos_al_directorio_de_destino" name="Copiar_archivos_de_datos_al_directorio_de_destino">Copiar archivos de datos al directorio de destino</h5> - -<p>Supongamos que tienes algunos ficheros de datos que contienen información estadística que deseas incluir en tu extensión y que esté disponible para tus componentes. Tienes estos archivos, cuya extensión es .TXT, dentro del subdirectorio <code>stats/</code> bajo el directorio de tu extensión en el árbol del código fuente. Puedes usar el siguiente makefile para copiar los ficheros al directorio de destino de la extensión:</p> - -<pre>libs:: - if test ! -d $(FINAL_TARGET)/stats; then \ - $(NSINSTALL) -D $(FINAL_TARGET)/stats; \ - fi - $(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats -</pre> - -<h5 id="Acceder_a_ficheros_de_datos_desde_los_componentes" name="Acceder_a_ficheros_de_datos_desde_los_componentes">Acceder a ficheros de datos desde los componentes</h5> - -<p>El truco para acceder a los ficheros es averiguar dónde está el directorio <em>home</em> de tu extensión. Los rumores dicen que en el futuro esto será posible a través del interface <a href="/es/NsExtensionManager" title="es/NsExtensionManager">nsExtensionManager</a> o alguna cosa similar. Mientras tanto, hay un modo simple y fiable de hacer esto. En la implementación de cualquier componente JavaScript XPCOM hay un símbolo especial <strong>__LOCATION__</strong> (dos subrayados delante y dos detrás) que apunta al fichero de implementación del componente. Así, puedes escribir un componente simple que deduzca el directorio raíz de tu extensión extrapolando desde su ubicación.</p> - -<p><a class="external" href="http://www.builderau.com.au/program/soa/Creating_XPCOM_components_with_JavaScript/0,39024614,39206503,00.htm">Este artículo</a> explica cómo crear un componente XPCOM en JavaScript. Necesitarás un fichero IDL para un interfaz que tenga un aspecto más o menos así:</p> - -<pre>interface myILocation : nsISupports -{ - readonly attribute nsIFile locationFile; -}; -</pre> - -<p>Sitúa el fichero IDL en el directorio <code>public/</code> del proyecto o subproyecto. En el directorio <code>src/</code> coloca el fichero JavaScript que implementa el componente. La implementación del componente incluirá los métodos para solicitar la ruta o el fichero para el directorio <em>home</em> de la extensión.</p> - -<pre>myLocation.prototype = -{ - QueryInterface: function(iid) - { - if (iid.equals(nsISupports)) - return this; - if (iid.equals(myILocation)) - return this; - - Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE; - return null; - }, - - get locationFile() - { - return __LOCATION__.parent.parent; - } -} -</pre> - -<p>Esto asume que el componente se encuentra en un subdirectorio del directorio de la extensión (por convenio, este directorio se llama <code>components/</code>). La propiedad <code>parent</code> de <strong>__LOCATION__</strong> devuelve <code>components/</code>, y el valor <code>parent</code> de éste es el directorio de la extensión.</p> - -<p>El último paso es modificar el makefile del directorio de orìgen donde colocaste el fichero JavaScript para que sea copiado dentro de la ubicación apropiada en la extensión.</p> - -<pre>libs:: - $(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components -</pre> - -<p>Ahora puedes instanciar este componente y usar la propiedad <code>locationFile</code> para obtener un interface <code><a href="/es/NsIFile" title="es/NsIFile">nsIFile</a></code> que apunte al directorio <em>home</em> de tu extensión.</p> - -<h4 id="Usar_otras_bibliotecas" name="Usar_otras_bibliotecas">Usar otras bibliotecas</h4> - -<p>Para extensiones más sofisticadas, tal vez desees integrar bibliotecas de terceros que proveerán funciones especializadas para conectividad de bases de datos, procesamiento de imágenes, funciones de red y otras tareas. Si quieres que tu extensión se ejecute en todas las plataformas de FireFox, necesitarás el código fuente de la biblioteca en cuestión, así que asumiré que está disponible.</p> - -<p>La mejor forma de hacerlo, desde el punto de vista del ciclo de desarrollo, es crear un makefile estilo-Mozilla para la biblioteca. Esto funciona bien para bibliotecas que tienen un proceso de compilación sencillo sin demasiada configuración. Un buen ejemplo de esto es la biblioteca SQLite incluida en el árbol de compilación de Mozilla en <code>db/sqlite</code>. Adaptando el makefile de esta manera, la biblioteca se crea como una parte estándar del proceso de compilado de Mozilla, lo cual elimina pasos adicionales. El lado malo es que necesitarás actualizar el makefile modificado cada vez que se publique una nueva versión de la biblioteca.</p> - -<p>Para bibliotecas que tienen un proceso de configuración complejo, que use un compilador no-estándar, o que tengan alguna otra característica especial, quizá no sea viable crear un makefile compatible con el estilo Mozilla. En este caso, recomendaría colocar la distribución completa de la biblioteca dentro del proyecto o subproyecto que la utiliza. Por ejemplo, si la biblioteca <code>acmelib</code> se usa dentro del subproyecto <code>multifarious/</code> en el ejemplo de arriba, se colocaría como un subdirectorio bajo ese proyecto (en el mismo nivel que <code>public/</code> y <code>src/</code>).</p> - -<p>Por supuesto, esto significa que tendrás que compilar <code>acmelib</code> manualmente en cada plataforma antes de lanzar Mozilla. Pero por lo menos luego puedes referirte a los archivos include y las bibliotecas importadas desde tus componentes usando rutas relativas.</p> - -<h4 id="Compilar_para_m.C3.BAltiples_plataformas" name="Compilar_para_m.C3.BAltiples_plataformas">Compilar para múltiples plataformas</h4> - -<p>Información del Documento Original</p> - -<div class="originaldocinfo"> -<ul> - <li>Autor: Matthew Gertner - Julio 26, 2005.</li> - <li>Permission granted to migrate in Jan 2006, including permission to relicense under the CC:By-SA.</li> - <li>Código Original: <a class="external" href="http://www.allpeers.com/blog/creating-complex-firefox-extensions/" rel="freelink">http://www.allpeers.com/blog/creatin...ox-extensions/</a></li> -</ul> -</div> - -<p> </p> diff --git a/files/es/orphaned/css_dinámico/index.html b/files/es/orphaned/css_dinámico/index.html deleted file mode 100644 index af44e82910..0000000000 --- a/files/es/orphaned/css_dinámico/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: CSS dinámico -slug: orphaned/CSS_dinámico -tags: - - CSS - - Todas_las_Categorías -original_slug: CSS_dinámico ---- -<p> -</p> -<h3 id="Introducci.C3.B3n"> Introducción </h3> -<p>Tradicionalmente las páginas web se han dividido en dos categorías: estáticas y dinámicas. Hemos leído muchas veces que con <a href="es/XHTML">XHTML</a> y <a href="es/CSS">CSS</a> se pueden crear documentos de calidad, pero fijos, estáticos. Si quieres que tus páginas se adapten y cambien según las acciones del usuario, si quieres dinamismo, necesitas javascript o similares... Ya no. -</p><p>Si teniamos <a href="es/DHTML">DHTML</a> (html dinámico), ahora tenemos <b>CDSS</b> (<b>C</b>ss <b>D</b>inámico <b>S</b>in <b>S</b>cripts). Como en un cuento de hadas en el que un humilde sapo acaba siendo el príncipe de la historia, unas modestas pseudo-clases pueden acabar siendo las estrellas de la Web. </p><p>Las <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html#q15">pseudo-clases</a> en principio nacieron para darle dinamismo a los enlaces, y este es el uso que se les ha dado durante los últimos años. Es raro el archivo CSS que no incluya unas líneas semejantes a estas: -</p> -<pre>a:link { ... } -a:active { ... } -a:visited { ... } -</pre> -<p>¡Pero la situación ha cambiado! Ahora podemos aplicarle pseudo-clases a la mayoría de los elementos, y jugando con los selectores podemos crear documentos dinámicos usando exclusivamente CSS. -</p> -<h3 id="Poco_a_poco"> Poco a poco </h3> -<p>Lo veremos poco a poco y por medio de ejemplos centrados en la pseudo-clase :hover. Obviamente combinando diversas pseudo-clases pueden obtenerse efectos más complejos. -Para probar los ejemplos basta copiar y pegar el código (sin quitar ni añadir nada) en un archivo vacio y visualizarlo con el navegador. </p><p>Empecemos por el uso tradicional: -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -a:hover { color: red; } - -</style> - -<p> Párrafo con <a>enlace</a> que se pone rojo </p> - -</pre> -<p>Soltamos amarras, levamos 'anclas' y... -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -p:hover { color: red; font-variant: small-caps; } -li:hover { color: blue; background: silver; } -div:hover { color: orange; text-align: right; } - -</style> - -<p> Párrafo que se pone rojo y mayúsculo. </p> -<ul> <li> Item que se pone azul y con fondo gris. </li> </ul> -<div> División con texto que se flota a la derecha y se pone naranja. </div> -</pre> <p>Esto nos permite crear con facilidad efectos dinámicos, podemos cambiar la visualización de las cosas dependiendo de los actos del usuario. Con un poco de imaginación y buen gusto se pueden hacer maravillas. -</p> -<h4 id="La_cosa_da_mucho_juego"> La cosa da mucho juego </h4> -<p>Podemos cambiar cualquier propiedad, pero no todas son igual de útiles a la hora de crear dinamismo. Algunas de las más interesantes serían por ejemplo: display, position, z-index... -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -.comun { position: absolute; width: 10em; - padding: 2em; text-align: center; } - -#rojo { background-color: red; - left: 1em; top: 1em; - z-index: 1; } - -#azul { background-color: blue; - left: 5em; top: 5em; - z-index: 2; } - -#naranja { background-color: orange; - left: 9em; top: 2em; - z-index: 3; } - -#rojo:hover, -#azul:hover, -#naranja:hover { z-index: 4; } - -</style> - -<p id='rojo' class='comun'>El rojo es vivo</p> -<p id='azul' class='comun'>El azul es elegante</p> -<p id='naranja' class='comun'>El naranja es guay</p> -</pre> -<h3 id="Pero_esto_no_es_todo.2C_a.C3.BAn_hay_m.C3.A1s."> Pero esto no es todo, aún hay más. </h3> -<p>Jugando con los <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html">selectores</a> podemos relacionar unos elementos con otros. -</p><p>Por ejemplo: al posicionarnos sobre <a href="es/HTML/Elemento/p">p</a> cambiamos las propiedades de <a href="es/HTML/Elemento/a">a</a>, y al posicionarnos sobre <a href="es/HTML/Elemento/a">a</a> cambiamos las propiedades de <a href="es/HTML/Elemento/em">em</a>. -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -em { display: none; } - -p:hover a { color: red; } -a:hover em { display: inline; } - -</style> - -<p> Párrafo <a>con enlace <em>que se pone rojo</em> </a> </p> -</pre> -<p>Bueno, despues de unos ejemplos simples, uno un poco más complejo: -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -.editorial { width: 30%;} -.item { list-style: none; list-style-position: inside; - padding: 0.2ex; margin: 0.2ex; } - -a { color: darkblue; text-decoration: none;} -div:hover a { color: blue; text-decoration: underline;} - -.oculto ul { display: none; } -div:hover ul { display: block; } - -ul { border: transparent solid 0.1ex; } -ul:hover { border: peru solid 0.1ex; } - -ul:hover abbr, -ul:hover dfn { color: red; } - -.vista { visibility: hidden; } -ul:hover .vista { visibility: visible; } - -</style> - -<div class='editorial oculto'> - <h2> <a> CSS </a> </h2> - <ul class='item'> - <li> <dfn>CSS</dfn> es una c seguida de dos eses. </li> - <li> También es un estándar del <abbr>W3C</abbr>. </li> - <li class='vista'> No se me ocurre qué poner aquí. </li> - </ul> - -</div> - -<div class='editorial'> - <h2> <a> HTML </a> </h2> - <ul class='item'> - <li> <dfn>HTML</dfn> es un lenguaje para el marcado de hipertextos. </li> - <li> Es un estándar del <abbr>W3C</abbr>. </li> - <li class='vista'> Creado por Tim Berners-Lee. </li> - </ul> -</div> -</pre> -<h4 id="Tipos_de_relaciones_familiares"> Tipos de relaciones <i>familiares</i></h4> -<p>Hasta el momento todos los ejemplos muestran relaciones padre → descendiente, si has consultado la especificación sabrás que no son las únicas, las posibilidades son las siguientes: -</p> -<h5 id="Padre_.E2.86.92_hijo"> Padre → hijo </h5> -<p>Esta relación se expresa por medio del combinador (">"), relaciona un elemento con sus descendientes directos. En el siguiente ejemplo seleccionamos los elementos con clase 'subrayado' que sean hijos directos de <a href="es/HTML/Elemento/div">div</a> -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -body:hover > .subrayado { text-decoration: underline;} - -</style> - -<div> -<p> Lo siguiente es una - <span class='subrayado'>cita</span>: -</p> -<hr> -<blockquote class='subrayado'> <p>Si buscas resultados distintos, no hagas siempre lo mismo. - <cite>Einstein</cite> </p> -</blockquote> -</div> -</pre> -<h5 id="Padre_.E2.86.92_descendiente"> Padre → descendiente </h5> -<p>Esta relación se expresa por medio de un espacio en blanco (" ") relaciona un elemento con un descendiente. Este es el método más flexible, puedes seleccionar cualquier elemento independientemente del parentesco exacto. -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - - p:hover em { visibility: hidden;} - -</style> - -<h2> Selección de descendientes</h2> -<p> - <em>Este em es hijo de un párrafo</em> - <span> span tambien, pero... - <em>Este em no es hijo de un párrafo, </em> - aunque sí descendiente (hijo de un hijo). - </span> -</p> -</pre> -<h5 id="Hermano_.E2.86.92_hermano_.28adyacente.29"> Hermano → hermano (adyacente) </h5> -<p>Esta relación es expresa por medio del combinador ("+"), relaciona un elemento con su hermano adyacente (el inmediatamente siquiente). Este es el método aparentemente más limitado, pero el que abre más puertas. -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -#primero + li { list-style-type: none; } - -</style> - -<ul> - <li id='primero'>item 1</li> - <li>item 2</li> - <li>item 3</li> -</ul> -</pre> -<p><br> -Esto de relacionar hermanos está muy bien, pero solo se puede seleccionar el adyacente, esto es una limitación importante, pero bueno, siempre puedes seleccionar el adyacente del adyacente, o el... -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -#primero + li + li + li { list-style-type: none; } - -</style> - -<ul> - <li id='primero'>item 1</li> - <li>item 2</li> - <li>item 3</li> - <li>item 4</li> -</ul> -</pre> -<h5 id="Otros_parentescos"> Otros parentescos </h5> -<p>Padres, hijos y hermanos no son las únicas relaciones dentro de una familia. ¿Qué pasa si quiero seleccionar un nieto, o un sobrino? ¿Se puede? </p> -<dl><dt> Seleccionando un nieto -</dt><dd> No tiene mayor complicación, al fin y al cabo, un nieto no es más que un hijo de un hijo. -</dd></dl> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -p:hover > span > em { color: red; } - -</style> - -<p> - <em>este em es hijo de un párrafo</em> - <span> span también, pero... - <em>este em es nieto</em> </span> -</p> -</pre> -<dl><dt> Seleccionando un sobrino. -</dt><dd> No hay problema, un sobrino no es más que un hijo de un hermano. -</dd></dl> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -p:hover + div > em { color: red; } - -</style> - -<p>Al ponerte sobre este párrafo</p> -<div> Cambias las propiedades de - <em>este em</em> -</div> -</pre> -<h5 id="Limitaciones"> Limitaciones </h5> -<p>De los ejemplos anteriores se desprende que es muy fácil abarcar todas las combinaciones posibles. Siempre y cuando la secuencia de los selectores sea: -</p> -<ol><li>Descendente - Un elemento y sus descendientes. -</li><li>Horizontal - Un elemento y sus hermanos. -</li><li>Mixta - Una combinación de las anteriores. -</li></ol> -<p>Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto <u>el siquiente ejemplo ni funciona ni debe hacerlo</u>: -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -em:hover #div { color: red; } - -</style> - -<h1>Este ejemplo ni funciona ni debe hacerlo.</h1> - -<div id='div'> - <em>Este em</em> - no puede cambiar las propiedades de su padre. -</div> -</pre> -<p>Además hay una curiosa limitación ¿será un bug? Un selector compuesto puede empezar por un elemento o por un #id con :hover, Pero no puede empezar por una clase con :hover. Sorprendentemente con el selector universal (*) tampoco funciona. -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -* { color: red; } - - .uno .cero { color: blue; } /* esto sí funciona */ - *.uno .cerocero { color: blue; } /* esto sí funciona */ - - #uno:hover .dos { color: blue; } /* esto sí funciona */ -ul.uno:hover .cuatro { color: blue; } /* esto sí funciona */ - - .uno:hover .tres { color: blue; } /* esto NO funciona */ - *.uno:hover .cinco { color: blue; } /* esto TAMPOCO funciona */ - -</style> - -<div class='uno'> - .uno .cero { color: blue; } - <em class='cero'>Esto sí funciona,</em> y... <br> - *.uno .cerocero { color: blue; } - <em class='cerocero'>esto también funciona.</em> -</div> - -<ul id='uno' class='uno'> - <li class='dos'>#uno:hover .dos - esto sí funciona.</li> - <li class='tres'>.uno:hover .tres - esto NO funciona.</li> - <li class='cuatro'>ul.uno:hover .cuatro - esto sí funciona.</li> - <li class='cinco'>*.uno:hover .cinco - esto TAMPOCO funciona.</li> -</ul> -</pre> -<h3 id="Navegadores_que_lo_soportan">Navegadores que lo implementan</h3> -<p>Los navegadores pueden dividirse en dos grupos: IE y el resto.</p> -<ul> <li><strong>IE</strong>: IE6 no lo implementa, pero IE7 sí, aunque parece que sólo parcialmente... (probado en IE7 beta).</li> <li><strong>El resto</strong>: cada día son más los navegadores que implementan este uso de las pseudo-clases: <ul> <li>Firefox 1.5 - sí lo implementa, al igual que todos los navegadores basados en las últimas versiones de Gecko.</li> <li>Opera - sí lo implementa (pendiente de confirmación plena).</li> <li>Konqueror/Safari - sí lo implementa (pendiente de confirmación plena) al igual que todos los navegadores basados en las últimas versiones de KHTML.</li> </ul> </li> -</ul><h3 id="Referencia">Referencia</h3> -<p>Lo cierto es que no hay mucho escrito sobre el tema (en castellano casi nada, o nada), la gente sólo suele escribir sobre las cosas que funcionan en IE. Pero tampoco hace mucha falta. Todo lo que necesitamos está en <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/cover.html#minitoc">el estándar CSS-2</a>. Además, <em>curiosamente</em>, los dos pilares que sostienen esta funcionalidad (pseudoclases y selectores), están explicados en la misma página: <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/css/selector.html">el capítulo 5</a>.</p> -<p>Recomiendo encarecidamente la lectura completa y atenta de todo el capítulo, y ya puestos, de toda la especificación. Aunque para el asunto que nos ocupa nos interesan principalmente:</p> -<dl> <dd>Sobre los selectores por parentesco, sub-capítulos: 5.5, 5.6, 5.7</dd> <dd>Sobre las pseudo-clases, sub-capítulo: 5.11</dd> -</dl><h3 id="CSS-3"> CSS-3 </h3> -<p>Todo lo explicado es conforme a CSS-2.1 ¿Qué nos depara el futuro? Si los pilares de esta técnica son las pseudo-clases y los selectores, <a class="external" href="http://www.w3.org/Style/CSS/current-work">CSS-3</a> traerá muchas más <a class="external" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-classes">pseudo-clases</a> y muchos más <a class="external" href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#selectors">selectores</a>, en definitiva, muchas más posibilidades de hacer cosas interesantes. -</p><p>Por ejemplo, hemos visto las limitaciones de CSS-2 para seleccionar hermanos, con CSS-3 esta limitación desaparece. Lo siguiente es CSS-3 pero funciona (usando el navegador apropiado). -</p> -<pre><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> -<style type='text/css'> - -.gracias { visibility: hidden; } - -#primero:hover + .gracias { visibility: visible; } -#primero:hover ~ * span { color: red; } /* esto:'~' es CSS-3 */ - -</style> - -<ul> - <li id='primero'>Por favor, ponga el cursor encima de esta frase.</li> - <li class='gracias'>Le doy las gracias con CSS-2.1</li> - <li>Item normal y corriente</li> - <li>El futuro: <span>span en rojo gracias a CSS-3</span></li> -</ul> -</pre> -<h3 id="Notas_finales"> Notas finales </h3> -<ul><li> Sí, es cierto que con <a href="es/JavaScript">JavaScript</a> o PHP pueden hacerse cosas mucho más avanzadas, pero aquí está la gracia del artículo, que sin necesidad de Javascript o PHP, solo con CSS, puede añadírsele mucho dinamismo a las páginas web. -</li></ul> -<ul><li> Este artículo es sólo una introducción al tema, por razones didácticas los ejemplos son premeditadamente simples y limitados a una sola pseudo-clase (:hover). Puede que en el futuro exista un <a href="es/CSS_Din%c3%a1mico_II">CSS Dinámico II</a> que profundice más en el tema, muestre el uso de otras pseudo-clases y ejemplos más complejos. -</li></ul> -<p><span class="comment">Categorías</span> -</p> diff --git a/files/es/orphaned/desarrollando_mozilla/index.html b/files/es/orphaned/desarrollando_mozilla/index.html deleted file mode 100644 index 8e6cc17b75..0000000000 --- a/files/es/orphaned/desarrollando_mozilla/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Desarrollando Mozilla -slug: orphaned/Desarrollando_Mozilla -tags: - - Desarrollando_Mozilla - - Todas_las_Categorías -original_slug: Desarrollando_Mozilla ---- -<p>¿Quieres echar una mano corrigiendo bugs, pero no sabes por dónde empezar?</p> -<p>Este es el punto de partida para todo lo relacionado con el hackeo de la bestia. Descubrirás cómo conseguir el código fuente, cómo compilarlo, cómo crear parches, y todas esas cosas esenciales que cualquier hacker de Mozilla debería conocer.</p> -<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentaci.C3.B3n"><a href="/Special:Tags?tag=Desarrollando_Mozilla&language=es" title="Special:Tags?tag=Desarrollando_Mozilla&language=es">Documentación</a></h4> <dl> <dt><a href="/es/Descargar_el_código_fuente_de_Mozilla" title="es/Descargar_el_código_fuente_de_Mozilla">Descargar el código fuente de Mozilla</a></dt> <dd><small>El código fuente de Mozilla puede obtenerse descargando el archivo con el código fuente o usando el cliente CVS (Concurrent Versioning System).</small></dd> </dl> <dl> <dt><a href="/es/Hackeando_Firefox" title="es/Hackeando_Firefox">Hackeando Firefox</a></dt> <dd><small>Participa en el desarrollo de <em>front-end</em> de Firefox.</small></dd> </dl> <dl> <dt><a href="/es/Documentación_para_la_compilación" title="es/Documentación_para_la_compilación">Documentación para la compilación</a></dt> <dd><small>Esta sección contiente documentación sobre el sistema de compilación de Mozilla. Entre otras cosas, muestra como obtener el código y como compilarlo.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.mozilla.org/hacking/">Hacking documentation on mozilla.org (en)</a></dt> <dd><small>Another page with hacking-related documentation. We're working on this.</small></dd> </dl> <dl> <dt>Preguntas frecuentes sobre depuración.</dt> <dd><small>Los consejos de depuración son específicos para cada plataforma. Elija: <a href="/es/Depurando_Mozilla_en_Windows" title="es/Depurando_Mozilla_en_Windows">Windows</a>, <a class="external" href="http://www.mozilla.org/unix/debugging-faq.html">Linux</a>, o <a href="/es/Depurando_Mozilla_en_Mac_OS_X" title="es/Depurando_Mozilla_en_Mac_OS_X">Mac OS X</a>.</small></dd> </dl> <p><span>enlaces en rojo: ; <a href="/es/Creando_un_parche" title="es/Creando un parche">Creando un parche</a>: <small>Consejos para crear parches que permitan que tus cambios se incluyan.</small></span> <span><a href="/Special:Tags?tag=Desarrollando_Mozilla&language=es" title="Special:Tags?tag=Desarrollando_Mozilla&language=es">Ver más...</a></span></p> </td> <td> <h4 id="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&sid=b486df56e1b6b367ab5a0e85a612bbf6">Desarrollo Mozilla</a></li> </ul> </li> </ul> <ul> <li>En la comunidad Mozilla... en inglés</li> </ul> <p>{{ DiscussionList("dev-general", "mozilla.dev.general") }}</p> <ul> <li><a class="link-irc" href="irc://irc.mozilla.org/developers">#developers en irc.mozilla.org</a></li> <li><a class="external" href="http://www.mozilla.org/community/developer-forums.html">Lista de temas específicos para todos los foros sobre desarrollo</a></li> </ul> <p><span><a href="/es/Desarrollando_Mozilla/Comunidad" title="es/Desarrollando_Mozilla/Comunidad">Ver más...</a></span></p> <h4 id="Herramientas">Herramientas</h4> <ul> <li><a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Bugzilla</a></li> <li><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></li> <li><a href="/es/Tinderbox" title="es/Tinderbox">Tinderbox</a></li> <li><a class="external" href="http://lxr.mozilla.org/">Mozilla Cross-Reference (LXR)</a></li> </ul> <p><span><a href="/Special:Tags?tag=Desarrollando_Mozilla:Herramientas&language=es" title="Special:Tags?tag=Desarrollando_Mozilla:Herramientas&language=es">Ver más...</a></span></p> <h4 id="Temas_Relacionados">Temas Relacionados</h4> <dl> <dd><a href="/es/Garantía_de_Calidad" title="es/Garantía_de_Calidad">Garantía de Calidad</a>, <a href="/es/Seguridad" title="es/Seguridad">Seguridad</a></dd> </dl> </td> </tr> </tbody> -</table> -<p><span>Categorías</span></p> -<p><span>Interwiki Language Links</span></p> -<p> </p> - -<p>{{ languages( { "de": "de/Mozilla_entwickeln", "en": "en/Developing_Mozilla", "fr": "fr/D\u00e9veloppement_de_Mozilla", "ja": "ja/Developing_Mozilla", "pl": "pl/Programowanie_Mozilli", "pt": "pt/Desenvolvimento_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla" } ) }}</p> diff --git a/files/es/orphaned/detectar_la_orientación_del_dispositivo/index.html b/files/es/orphaned/detectar_la_orientación_del_dispositivo/index.html deleted file mode 100644 index d414a35732..0000000000 --- a/files/es/orphaned/detectar_la_orientación_del_dispositivo/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Detectar la orientación del dispositivo -slug: orphaned/Detectar_la_orientación_del_dispositivo -tags: - - Aceleración - - CSS - - Consultas - - Orientación - - para_revisar -original_slug: Detectar_la_orientación_del_dispositivo ---- -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ gecko_minversion_header ("1.9.1") }}</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación,</strong> es decir, que pueden informar sobre los datos que indican cambios en su orientación con relación a la atracción de la gravedad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En concreto, los dispositivos manuales como, por ejemplo, los teléfonos móviles pueden utilizar esta información para rotar automáticamente la pantalla de forma que se mantenga en posición vertical. Cuando el dispositivo se gira, presenta una vista en pantalla panorámica del contenido de la web, de manera que su anchura es superior a su altura.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Hay dos maneras de tratar la información de orientación en Gecko.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La primera es la <a href="/En/CSS/Media_queries#orientation" title="En/CSS/Media queries#orientation">consulta a medios de orientación</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto te permite ajustar el contenido de tu diseño con CSS, en función de si el dispositivo está en modo horizontal (es decir, su anchura es superior a su altura) o en modo vertical (su altura es mayor que su anchura).</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La segunda manera de administrar la información de orientación, , es el <a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation">evento </a></span></span><a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation"><code>MozOrientation</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a>, agregado en Gecko 1.9.2 (Firefox 3.6).</a></span></span><a> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este evento se envía cuando el acelerómetro detecta un cambio en la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al recibir y procesar los datos reportados por los eventos <code>MozOrientation</code>, es posible responder de forma interactiva a los cambios de elevación y rotación causados por el movimiento del dispositivo.</span></span></a></p><a> -<h2 id="Ajuste_de_diseño_cuando_cambia_la_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ajuste de diseño cuando cambia la orientación</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uno de los casos en que te interesarán los cambios de orientación es cuando quieras evaluar el diseño de tu contenido en función de la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, tal vez desees que una barra de botones se extienda a lo largo de la pantalla del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si utilizas una consulta multimedia, puede hacer esto fácilmente y de forma automática.</span></span></p> -<h3 id="Construir_el_CSS_para_cada_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Construir el CSS para cada orientación</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para este caso práctico, necesitarás dos hojas de estilo: una para ser usada cuando el dispositivo está en orientación vertical (su altura es mayor que su anchura) y la otra que se utiliza cuando el dispositivo está en posición horizontal (su ancho es mayor a su altura).</span></span></p> -<table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Vertical</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Horizontal</span></span></td> </tr> <tr> <td> <p><code>#toolbar {</code><br> <code> width: 100%;</code><br> <code> }</code><br> <code> </code></p> </td> <td><code>#toolbar {</code><br> <code> min-height: 500px;</code><br> <code> width: 125px;</code><br> <code> margin-right: 8px;</code><br> <code> float: left;</code><br> <code> }</code><br> <code> </code></td> </tr> </tbody> -</table> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Como puedes ver si analizas los dos fragmentos de CSS anteriores, en el modo vertical, hacemos que la barra de herramientas se extienda horizontalmente en la parte superior de la ventana, con el fin de maximizar el espacio horizontal disponible para el contenido.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el modo horizontal, la barra de herramientas se extiende verticalmente por el lado izquierdo del documento.</span></span></p> -<h3 id="La_aplicación_del_CSS_correcto_en_función_de_la_orientación_actual"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La aplicación del CSS correcto en función de la orientación actual</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo único que tienes que hacer ahora es establecer las consultas multimedia que seleccionará automáticamente el archivo CSS correcto basado en la orientación del dispositivo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto es sencillo:</span></span></p> -<pre class="brush: css"><link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> -<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A partir de ahora, la carga de los contenidos da como resultado la disposición correcta que se aplicará en función de la orientación del dispositivo.</span></span></p><h2 id="Procesamiento_de_eventos_de_orientación"><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Procesamiento de eventos de orientación</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ gecko_minversion_header("1.9.2") }}</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox 3.6 (Gecko 1.9.2) introdujo el evento <code>MozOrientation</code>, al que puedes prestar atención con el fin de recibir las actualizaciones mientras el usuario ajusta la orientación del dispositivo.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En la actualidad, este es compatible con algunos dispositivos móviles (Windows Mobile, por ejemplo) y en el MacBook de Apple y los equipos MacBook Pro.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo único que tienes que hacer para comenzar a recibir los eventos de orientación es lo siguiente:</span></span></p> -<pre class="brush: js">window.addEventListener("MozOrientation", handleOrientation, true);</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Después de registrar tu escucha de eventos (en este caso, una función de JavaScript llamada handleOrientation()), la función de escucha se llama de forma periódica con la orientación de datos actualizada.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El evento de orientación contiene tres valores:</span></span></p> -<table class="standard-table"> <tbody> <tr> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Campo</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Tipo</span></span></td> <td class="header"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Descripción</span></span></td> </tr> <tr> <td><code>x</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La cantidad de inclinación a lo largo del eje X.</span></span></td> </tr> <tr> <td><code>y</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La cantidad de inclinación a lo largo del eje Y.</span></span></td> </tr> <tr> <td><code>z</code></td> <td><code>double</code></td> <td><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El importe de la inclinación a lo largo del eje Z.</span></span></td> </tr> </tbody> -</table> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los valores de <code>x</code> , <code>y</code> y <code>z</code> pueden variar desde -1 a 1, donde 0 significa que el dispositivo está en equilibrio sobre ese eje.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La función de controlador o manejador de eventos puede ser algo así:</span></span></p> -<pre class="brush: js">function handleOrientation(orientData) { - var x = orientData.x; - var y = orientData.y; - var z = orientData.z; - - // Haz cosas con los datos de orientación nuevos -} -</pre> -<h3 id="Los_valores_del_acelerómetro_explicados"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los valores del acelerómetro explicados</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor indicado para cada acceso indica la cantidad de la aceleración a lo largo de ese eje que está teniendo lugar actualmente.</span></span></p> -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><strong>Nota:</strong> en esta sección se describe cómo estos valores funcionan en la actualidad, sin embargo, esto está sujeto a cambios en un futuro.</span></span></div> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje X representa la cantidad de inclinación de derecha a izquierda.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este valor es 0 si el dispositivo está a nivel del eje X, y se aproxima a 1 si el dispositivo se inclina hacia la izquierda, y -1 si el dispositivo se inclina hacia la derecha.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje Y representa la cantidad de inclinación de adelante hacia atrás.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El valor es 0 si el dispositivo está a nivel del eje Y, y se aproxima a 1 a medida que inclinas el dispositivo hacia atrás (lejos de ti) y -1 si inclinas el dispositivo hacia el frente (hacia ti).</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El eje Z representa la aceleración vertical.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El valor es 1 cuando el dispositivo está pasando por la gravedad terrestre estándar (9.8m/sec <sup>2),</sup> pero no en movimiento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al mover el dispositivo hacia arriba hace que el valor descienda.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El valor es 0 si el dispositivo está en caída libre (ingrávido o precipitándose como consecuencia de una caída).</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En ingravidez, todos los valores será igual a cero cuando el dispositivo no se mueva, independientemente de su orientación, y sólo cambiará cuando se acelere.</span></span></p><h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta también</span></span></h2> -</a><ul><a> </a><li><a><code></code></a><code><a href="/en/DOM/MozOrientation" title="en/DOM/MozOrientation">MozOrientation</a></code></li> <li><a class=" external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/"><span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Una breve introducción a las consultas multimedia en Firefox 3.5</span></span></a></li> -</ul> -<p>{{ languages ( { "en": "en/Detecting_device_orientation" } ) }}</p> diff --git a/files/es/orphaned/dhtml_demostraciones_del_uso_de_dom_style/index.html b/files/es/orphaned/dhtml_demostraciones_del_uso_de_dom_style/index.html deleted file mode 100644 index dfa3acf438..0000000000 --- a/files/es/orphaned/dhtml_demostraciones_del_uso_de_dom_style/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DHTML Demostraciones del uso de DOM/Style -slug: orphaned/DHTML_Demostraciones_del_uso_de_DOM_Style -tags: - - CSS - - DHTML - - DOM - - JavaScript - - Todas_las_Categorías -original_slug: DHTML_Demostraciones_del_uso_de_DOM_Style ---- -<p> -</p><p><b>Proyecto de ejemplos DOM Mozilla</b> -</p><p><a class="external" href="http://cgi.din.or.jp/%7Ehagi3/JavaScript/Mozilla/SampleList.cgi?fmt=html">Esta página</a> contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para eventos DOM, DOM Core, DOM HTML y mucho más. -</p><p><b> Animación y manipulación de elementos de texto </b> -</p> -<ul><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/colorfades.html">Atenuación de colores</a> -</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/textinterlace.html">Text Interlace Effect</a> -</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/fadespacing.html">Atenuación y espaciado</a> -</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/bouncingsmile.html">Texto animado 1</a> - <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/geckowave.html">y 2</a> -</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/credits.html">Demo de títulos de crédito</a> (requiere Netscape 7.x/Mozilla) -</li></ul> -<p><b> Animación 3D en tiempo real </b> -</p><p><a class="external" href="http://www.world-direct.com/mozilla/dhtml/funo/3dcube/index.htm">Esta demostración</a> muestra cómo usar JavaScript y DOM para animar un conjunto de imágenes para crear un efecto de animación 3D. -</p> -<h3 id="Demostraciones_DOM_.28Requiere_navegador_que_interprete_DOM_1_y_2.29"> Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2) </h3> -<p><b> Estilo DOM: Recortar y posicionar elementos con la interfaz JavaScript DOM </b> -</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/can/index.html">Esta demostración</a> está optimizada para funcionar con Mozilla porque usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para establecer el valor de las propiedades de posición y recorte de los elementos DIV. -</p><p><b> Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM </b> -</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/resize/index.html">Esta muestra</a> requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla. -</p><p><b> DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos </b> -</p><p><a class="external" href="http://www.mozilla.org/docs/dom/samples/dynatable-light/index.html">Esta demo</a> requiere un navegador que soporte la especificación DOM 1 y DOM 2, como Netscape 7.x o Mozilla. Usa los eventos DOM 2 del ratón para proporcionar un interfaz que puede manipular dinámicamente los elementos de la tabla. -</p> -<h3 id="Controles_multiplataforma"> Controles multiplataforma </h3> -<p><b>Windowing API: La ventana DHTML de BrainJar </b> -</p><p><a class="external" href="http://www.brainjar.com/dhtml/windows/demo.html">BrainJar's DHTML Windows</a> es un control (<i>widget</i>) que muestra cómo añadir ventanas DHTML dinámicas en una aplicación DHTML. -</p><p><b> Stock Ticker </b> -</p><p><a class="external" href="http://developer.mozilla.org/en/docs/DHTML_Demonstrations_Using_DOM/Style:Stock_Ticker">Stock Ticker</a> proporciona un objeto reutilizable que puede adaptarse para monitorizar (mediante una línea en movimiento) valores financieros en cualquier navegador que soporte el estándar DOM. -<br> -</p> -<h3 id="Recursos_adicionales_para_aprender_DOM"> Recursos adicionales para aprender DOM </h3> -<p><b> Cruzando una tabla HTML con JavaScript e Interfaces DOM </b> -</p><p><a class="external" href="http://www.mozilla.org/docs/dom/technote/tn-dom-table/">Una visión</a> general sobre los métodos DOM de nivel 1 y de cómo usarlos mediante JavaScript. Estas notas técnicas cubren los métodos del núcleo, que son los que permiten la creación y manipulación dinámica de los elementos de marcado mediante JavaScript. -</p><p><b> DOM Central </b> -</p><p>Aprenda más acerca de <a href="es/DOM">W3C DOM</a>. -</p><p><b> Visita GetElementById.com </b> -</p><p><a class="external" href="http://getelementbyid.com/">GetElementById.com</a> contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la <a class="external" href="http://getelementbyid.com/scripts/index.aspx?CodeID=28">demo Zoom Intro</a> y otras magníficas demostraciones y scripts DOM. -</p><p><b> La categoría W3C DOM en DMOZ.ORG </b> -</p><p><a class="external" href="http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/">Esta categoría</a> contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM. -</p>{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }} diff --git a/files/es/orphaned/dibujando_gráficos_con_canvas/index.html b/files/es/orphaned/dibujando_gráficos_con_canvas/index.html deleted file mode 100644 index 4d21cc8162..0000000000 --- a/files/es/orphaned/dibujando_gráficos_con_canvas/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Dibujando Gráficos con Canvas -slug: orphaned/Dibujando_Gráficos_con_Canvas -original_slug: Dibujando_Gráficos_con_Canvas ---- -<p>v</p> diff --git a/files/es/orphaned/estructura_de_directorios_de_código_fuente_de_mozilla/index.html b/files/es/orphaned/estructura_de_directorios_de_código_fuente_de_mozilla/index.html deleted file mode 100644 index 9c1572605e..0000000000 --- a/files/es/orphaned/estructura_de_directorios_de_código_fuente_de_mozilla/index.html +++ /dev/null @@ -1,699 +0,0 @@ ---- -title: Estructura de directorios de código fuente de Mozilla -slug: orphaned/Estructura_de_directorios_de_código_fuente_de_Mozilla -original_slug: Estructura_de_directorios_de_código_fuente_de_Mozilla ---- -<p>El código para todos los proyectos de la familia Mozilla (como <span style="color: #0000cd;">Firefox</span>, <span style="color: #0000cd;">Thunderbird</span>, <span style="color: #0000cd;">etc.</span>) se combina en un único árbol-fuente. El árbol contiene el código fuente, así como el código necesario para generar cada proyecto en las plataformas compatibles (Linux, Windows, Mac OS, etc).</p> -<p>Si simplemente quieres echar un vistazo al código fuente de Mozilla, no es necesario que lo descargues. Puedes mirar el codigo fuente directamente con tu navegador web usando MXR (la raiz del codigo fuente completo de Mozilla comienza en <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/" rel="external" title="http://mxr.mozilla.org/mozilla-central/source/">http://mxr.mozilla.org/mozilla-central/source/</a>).</p> -<p>Para modificar el código fuente, tienes que adquirirlo, ya sea descargando una<span style="color: #0000cd;"> instantánea </span>de las fuentes o <span style="color: #0000cd;">revisando las fuentes actuales de Mercurial</span>.</p> -<p>Este documento describe la estructura de directorios que puede ser generada por client.mk -- es decir, los directorios que se utilizan por lo menos en algún producto del proyecto Mozilla. Hay otros directorios en el repositorio CVS de Mozilla, como los de las herramientas Web y los del código base clásico.</p> -<p>Esto no está del todo actualizado. Mira la <span style="color: #0000cd;">descripción general de los directorios del código fuente</span> para una versión algo diferente (antigua) de la misma información. También mira la <span style="color: #0000cd;">descripción más detallada de las partes de Gecko</span>.</p> -<h2 id="accessible">accessible</h2> -<p>Archivos para la accesibilidad (por ejemplo, los archivos de soporte MSAA (Microsoft Active Accessibility) y ATK (Accessibility Toolkit, usado por GTK+ 2)). Ver <span style="color: #0000cd;">Accesibilidad de Mozilla</span> <span style="color: #0000cd;">Accesibilidad</span>.</p> -<h2 id="browser">browser</h2> -<p>Contiene el código de la parte del usuario para el navegador Firefox (en XUL, JavaScript, XBL, y C++). Muchos de estos archivos comenzaron como una copia de los archivos de <span style="color: #0000cd;">xpfe</span>/.</p> -<div id="section_3"> - <h2 id="build">build</h2> - <p>Archivos varios, utilizados en el proceso de compilación. Véase también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#config" title="Mozilla_Source_Code_Directory_Structure#config">config</a>/.</p> -</div> - -<div id="section_4"> - <h2 id="calendar">calendar</h2> - <p>Implementación de <span style="color: #0000cd;">Calendar</span>, creado originalmente por OEone. Véase también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#extensions.2Flightning" title="Mozilla_Source_Code_Directory_Structure#extensions.2Flightning">extensions/lightning</a>/.</p> - <h2 id="caps">caps</h2> - <p>Gestión de la seguridad de la página web basada en capabilities.</p> - <p>Caps contiene las interfaces de C++ y el código para determinar las capabilities del contenido basado en la configuración de seguridad o certificados (por ejemplo VeriSign). Ver <span style="color: #0000cd;">seguridad de componentes</span>.</p> - <div id="section_6"> - <h2 id="chrome">chrome</h2> - <p>Registro chrome utilizado con <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#toolkit" title="Mozilla_Source_Code_Directory_Structure#toolkit">toolkit</a>/. Estos archivos fueron originalmente copias de los archivos de <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#rdf" title="Mozilla_Source_Code_Directory_Structure#rdf">rdf</a>/chrome/.</p> - </div> - <div id="section_7"> - <h2 id="composer">composer</h2> - <p>El código (XUL y JavaScript) de la parte del usuario (front-end) para la aplicación standalone <a href="http://www-archive.mozilla.org/editor/" title="http://www-archive.mozilla.org/editor/">Composer</a>.</p> - </div> - <div id="section_8"> - <h2 id="config">config</h2> - <p>Más archivos utilizados por el proceso de compilación, incluidos normalmente para los makefiles, etc. Véase también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#build" title="Mozilla_Source_Code_Directory_Structure#build">build</a>/.</p> - <h2 id="content">content</h2> - <p>Las estructuras de datos que representan la estructura de las páginas Web (HTML, SVG, documentos XML, elementos, nodos de texto, etc.). Estos objetos contienen la implementación de varias interfaces DOM y también implementan algunos de los comportamientos asociados a esos objetos, como manejo de enlaces, control del comportamiento del formulario y envío del formulario.</p> - <p>Este directorio también contiene el código para <span style="color: #0000cd;">XUL</span>, <span style="color: #0000cd;">XBL</span>, <span style="color: #0000cd;">XTF</span>, <span style="color: #0000cd;"><canvas></span>, así como el código de la implementación XSLT y manejo de eventos.</p> - <h2 id="db">db</h2> - <p>Contenedor para los módulos de acceso a las bases de datos. Actualmente contiene mork y sqlite.</p> - <h2 id="dbmdb_dbmork_and_dbmorkreader">db/mdb, db/mork, and db/morkreader</h2> - Implementación de <a href="/en-US/docs/Mork" title="Mork">Mork</a>, un formato de texto para bases de datos. Este se utiliza por ejemplo para almacenar la historia global.<br> - <p><code>morkreader</code> es un analizador simple para mork usado para migrar los datos antiguos a las nuevas bases de datos basadas en sqlite.</p> - <div id="section_12"> - <h2 id="dbsqlite3">db/sqlite3</h2> - <p>La base de datos SQLite, usada por <a href="/en-US/docs/Storage" title="Storage">storage</a>. Reemplaza a mork en <a href="/en-US/docs/Firefox_3_for_developers" title="Firefox_3_for_developers">Firefox 3</a>.</p> - </div> - <div id="section_13"> - <h2 id="dbm">dbm</h2> - <p>Código fuente de la librería Berkeley de base de datos, hackeado desde la versión 4.4BSD. Utilizado principalmente por el código NSS como almacén de certificados.</p> - </div> - <div id="section_14"> - <h2 id="directory"><span>directory</span></h2> - <p>Soporte LDAP para Mozilla. Utilizado en las noticias por correo.</p> - </div> - <div id="section_15"> - <h2 id="docshell"><span>docshell</span></h2> - <p>Implementación del docshell, el objeto principal para el manejo de lo relacionado con la ventana de un documento. Cada cuadro tiene su propio docshell. Contiene métodos para la carga de URIs, gestión de los oyentes del contenido de los URIs, etc. Es la capa más externa de la API embebida usada para incrustar un navegador Gecko en una aplicación. Ver también <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#webshell">webshell</a>/.</p> - </div> - <div id="section_16"> - <h2 id="dom">dom</h2> - <p>Contiene:</p> - <ul> - <li><a href="/en-US/docs/XPIDL" title="XPIDL">Definiciones IDL</a> de las interfaces definidas por las especificaciones DOM y las extensiones de Mozilla a estas interfaces (las implementaciones de estas interfaces están principalmente, aunque no completamente, en <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#content">content</a>/).</li> - <li>Las partes de la conexión entre JavaScript y las implementaciones de objetos DOM que son específicos para JavaScript y el DOM. (Las partes que no son específicas del DOM, es decir, la unión genérica entre XPCOM y JavaScript, se encuentran en <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#js/src/xpconnect" rel="custom">js/src/xpconnect</a>/.)</li> - <li>Las implementaciones de algunos de los principales objetos "DOM nivel 0", tales como window, window.navigator, window.location, etc.</li> - </ul> - </div> - <div id="section_17"> - <h2 id="editor"><span>editor</span></h2> - <p>The editor directory contains C++ interfaces, C++ code, and XUL/JavaScript for the embeddable editor component, which is used for the HTML Editor("Composer"), for plain and HTML mail composition, and for text fields and text areas throughout the product. The editor is designed like a "browser window with editing features": it adds some special classes for editing text and managing transaction undo/redo, but reuses browser code for nearly everything else.</p> - <p>Contains:</p> - <ul> - <li>The backend for HTML and text editing. This is not only used for the mail composer and the page editor composer, but also for <a class="external" href="http://www.mozilla.org/editor/midas-spec.html" rel="external" title="http://www.mozilla.org/editor/midas-spec.html">rich text editing inside webpages</a>. Textarea and input fields are using such an editor as well (in the plaintext variant). See <a class="external" href="http://www.mozilla.org/editor/" rel="external" title="http://www.mozilla.org/editor/">Mozilla Editor</a>.</li> - <li>The frontend for the HTML editor that is part of SeaMonkey.</li> - </ul> - </div> - <div id="section_18"> - <h2 id="embedding"><span>embedding</span></h2> - <p>XXX this needs a description. See <a class="external" href="http://www.mozilla.org/projects/embedding/" rel="external" title="http://www.mozilla.org/projects/embedding/">Embedding</a>.</p> - </div> - <div id="section_19"> - <h2 id="extensions"><span>extensions</span></h2> - Contains several extensions to mozilla, which can be enabled at compile-time using the <code>--enable-extensions</code> configure argument.<br> - <p>Note that some of these are now built specially and not using the <code>--enable-extensions</code> option. For example, disabling xmlextras is done using <code>--disable-xmlextras</code>.</p> - <div id="section_20"> - <h3 id="extensionsauth"><span>extensions/auth</span></h3> - <p>Implementation of the negotiate auth method for HTTP and other protocols. Has code for SSPI, GSSAPI, etc. See <a class="external" href="http://www.mozilla.org/projects/netlib/integrated-auth.html" rel="external" title="http://www.mozilla.org/projects/netlib/integrated-auth.html">Integrated Authentication</a>.</p> - </div> - <div id="section_21"> - <h3 id="extensionscontent-packs"><span>extensions/content-packs</span></h3> - <p>Content- and locale-pack switching user interface.</p> - </div> - <div id="section_22"> - <h3 id="extensionscookie"><span>extensions/cookie</span></h3> - <p>Permissions backend for cookies, images etc, as well as the user interface to these permissions and other cookie features.</p> - </div> - <div id="section_23"> - <h3 id="extensionscview"><span>extensions/cview</span></h3> - <p>Component viewer, which allows to view the currently registered components and interfaces.</p> - </div> - <div id="section_24"> - <h3 id="extensionsdatetime"><span>extensions/datetime</span></h3> - <p>Support for the datetime protocol.</p> - </div> - <div id="section_25"> - <h3 id="extensionsfinger"><span>extensions/finger</span></h3> - <p>Support for the finger protocol.</p> - </div> - <div id="section_26"> - <h3 id="extensionsgnomevfs"><span>extensions/gnomevfs</span></h3> - <p>Interface to gnome-vfs to allow using all protocols supported by gnome-vfs inside of mozilla.</p> - </div> - <div id="section_27"> - <h3 id="extensionshelp"><span>extensions/help</span></h3> - <p>Help viewer and help content. See <a class="external" href="http://www.mozilla.org/projects/help-viewer/" rel="external" title="http://www.mozilla.org/projects/help-viewer/">Mozilla Help Viewer Project</a>.</p> - </div> - <div id="section_28"> - <h3 id="extensionsirc"><span>extensions/irc</span></h3> - <div class="editIcon"> - <h3 id="sect1"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=28"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>This is ChatZilla, the IRC (Internet Relay Chat) component. See <a class="external" href="http://www.mozilla.org/projects/rt-messaging/chatzilla/" rel="external" title="http://www.mozilla.org/projects/rt-messaging/chatzilla/">ChatZilla</a>.</p> - </div> - <div id="section_29"> - <h3 id="extensionsjava"><span>extensions/java</span></h3> - <div class="editIcon"> - <h3 id="sect2"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=29"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>XPCOM<->Java bridge ("<a href="/en-US/docs/JavaXPCOM" title="JavaXPCOM">JavaXPCOM</a>", formerly known as Javaconnect). Unrelated to the code in <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#java">java</a>/.</p> - </div> - <div id="section_30"> - <h3 id="extensionslayout-debug"><span>extensions/layout-debug</span></h3> - <div class="editIcon"> - <h3 id="sect3"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=30"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Layout debugger. Intended as replacement for "viewer". Can be used to run layout regression tests and has support for other layout debugging features.</p> - </div> - <div id="section_31"> - <h3 id="extensionslightning"><span>extensions/lightning</span></h3> - <div class="editIcon"> - <h3 id="sect4"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=31"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>The Lightning project, "an extension to tightly integrate calendar functionality (scheduling, tasks, etc.) into Thunderbird." See <a class="external" href="http://wiki.mozilla.org/Calendar:Lightning" rel="external" title="http://wiki.mozilla.org/Calendar:Lightning">Lightning</a>.</p> - </div> - <div id="section_32"> - <h3 id="extensionsmono"><span>extensions/mono</span></h3> - <div class="editIcon"> - <h3 id="sect5"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=32"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>A two-way bridge between the CLR/.NET/Mono/C#/etc. world and XPCOM.</p> - </div> - <div id="section_33"> - <h3 id="extensionsp3p"><span>extensions/p3p</span></h3> - <div class="editIcon"> - <h3 id="sect6"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=33"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Implementation of W3C's Platform for Privacy Preferences standard. See <a class="external" href="http://www.mozilla.org/projects/p3p/" rel="external" title="http://www.mozilla.org/projects/p3p/">Platform for Privacy Preferences (P3P)</a>.</p> - </div> - <div id="section_34"> - <h3 id="extensionspref"><span>extensions/pref</span></h3> - <div class="editIcon"> - <h3 id="sect7"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=34"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Preference-related extensions:</p> - </div> - <div id="section_35"> - <h3 id="extensionspython"><span>extensions/python</span></h3> - <div class="editIcon"> - <h3 id="sect8"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=35"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Support for implementing XPCOM components in python. See <a href="/en-US/docs/PyXPCOM" title="PyXPCOM">PyXPCOM</a>.</p> - </div> - <div id="section_36"> - <h3 id="extensionsreporter"><span>extensions/reporter</span></h3> - <div class="editIcon"> - <h3 id="sect9"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=36"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>An extension to report problems with web pages. Client-side part. See <a class="external" href="http://reporter.mozilla.org/" rel="external" title="http://reporter.mozilla.org/">Mozilla Reporter</a>.</p> - </div> - <div id="section_37"> - <h3 id="extensionschema-validation"><span>extension/schema-validation</span></h3> - <div class="editIcon"> - <h3 id="sect10"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=37"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Allows to validate XML trees according to specified XML Schemas.</p> - </div> - <div id="section_38"> - <h3 id="extensionspatialnavigation"><span>extension/spatialnavigation</span></h3> - <div class="editIcon"> - <h3 id="sect11"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=38"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Spatial navigation, navigating between links of a document according to their on-screen position. See <a class="external" href="http://www.mozilla.org/access/keyboard/snav/" rel="external" title="http://www.mozilla.org/access/keyboard/snav/">Spatial Navigation</a>.</p> - </div> - <div id="section_39"> - <h3 id="extensionsspellcheck"><span>extensions/spellcheck</span></h3> - <div class="editIcon"> - <h3 id="sect12"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=39"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Spellchecker for mailnews and composer.</p> - </div> - <div id="section_40"> - <h3 id="extensionssql"><span>extensions/sql</span></h3> - <div class="editIcon"> - <h3 id="sect13"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=40"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Support for accessing SQL databases from XUL applications. See <a class="external" href="http://www.mozilla.org/projects/sql/" rel="external" title="http://www.mozilla.org/projects/sql/">SQL Support in Mozilla</a>.</p> - </div> - <div id="section_41"> - <h3 id="extensionssroaming"><span>extensions/sroaming</span></h3> - <div class="editIcon"> - <h3 id="sect14"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=41"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Session roaming, i.e. support for storing a profile on a remote server.</p> - </div> - <div id="section_42"> - <h3 id="extensionstransformiix"><span>extensions/transformiix</span></h3> - <div class="editIcon"> - <h3 id="sect15"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=42"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>XSLT support. XSL Transformations is a language used to transform XML documents into other XML documents. See <a class="external" href="http://www.mozilla.org/projects/xslt/" rel="external" title="http://www.mozilla.org/projects/xslt/">XSL Transformations</a>.</p> - </div> - <div id="section_43"> - <h3 id="extensionstridentprofile"><span>extensions/tridentprofile</span></h3> - <div class="editIcon"> - <h3 id="sect16"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=43"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Support for importing profiles from MSIE.</p> - </div> - <div id="section_44"> - <h3 id="extensionstypeaheadfind"><span>extensions/typeaheadfind</span></h3> - <div class="editIcon"> - <h3 id="sect17"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=44"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Find As You Type allows quick web page navigation when you type a succession of characters in the body of the displayed page. See <a class="external" href="http://www.mozilla.org/projects/ui/accessibility/typeaheadfind.html" rel="external" title="http://www.mozilla.org/projects/ui/accessibility/typeaheadfind.html">Find As You Type</a>.</p> - </div> - <div id="section_45"> - <h3 id="extensionsuniversalchardet"><span>extensions/universalchardet</span></h3> - <div class="editIcon"> - <h3 id="sect18"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=45"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Universal character set detector.</p> - </div> - <div id="section_46"> - <h3 id="extensionsvenkman"><span>extensions/venkman</span></h3> - <div class="editIcon"> - <h3 id="sect19"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=46"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>The <a href="/en-US/docs/Venkman" title="Venkman">JavaScript Debugger</a>.</p> - </div> - <div id="section_47"> - <h3 id="extensionswallet"><span>extensions/wallet</span></h3> - <div class="editIcon"> - <h3 id="sect20"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=47"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Password and Form Manager.</p> - </div> - <div id="section_48"> - <h3 id="extensionswebdav"><span>extensions/webdav</span></h3> - <div class="editIcon"> - <h3 id="sect21"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=48"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>WebDAV code; exposes special APIs for accessing WebDAV servers. Used by the Calendar project.</p> - </div> - <div id="section_49"> - <h3 id="extensionswebservices"><span>extensions/webservices</span></h3> - <div class="editIcon"> - <h3 id="sect22"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=49"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Support for Webservices. See <a class="external" href="http://www.mozilla.org/projects/webservices/" rel="external" title="http://www.mozilla.org/projects/webservices/">Web Services</a>.</p> - </div> - <div id="section_50"> - <h3 id="extensionsxforms"><span>extensions/xforms</span></h3> - <div class="editIcon"> - <h3 id="sect23"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=50"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Code for the XForms extension. See <a class="external" href="http://www.mozilla.org/projects/xforms/" rel="external" title="http://www.mozilla.org/projects/xforms/">XForms</a>.</p> - </div> - <div id="section_51"> - <h3 id="extensionsxmlextras"><span>extensions/xmlextras</span></h3> - <div class="editIcon"> - <h3 id="sect24"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=51"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Several XML-related extensions. See <a href="/en-US/docs/XML_Extras" title="XML_Extras">XML Extras</a>.</p> - </div> - <div id="section_52"> - <h3 id="extensionsxml-rpc"><span>extensions/xml-rpc</span></h3> - <div class="editIcon"> - <h3 id="sect25"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=52"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>XML Remote Procedure Calls. Unowned these days. See <a class="external" href="http://www.mozilla.org/projects/xmlrpc/" rel="external" title="http://www.mozilla.org/projects/xmlrpc/">XML-RPC in Mozilla</a>.</p> - </div> - <div id="section_53"> - <h3 id="extensionsxmlterm"><span>extensions/xmlterm</span></h3> - <div class="editIcon"> - <h3 id="sect26"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=53"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>XMLTerm, a terminal implemented using mozilla technology. Only available on GTK builds.</p> - </div> - </div> - <div id="section_54"> - <h2 id="gc"><span>gc</span></h2> - <div class="editIcon"> - <h2 id="sect27"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=54"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Container for garbage collection libraries, currently only boehm GC.</p> - </div> - <div id="section_55"> - <h2 id="gfx"><span>gfx</span></h2> - <div class="editIcon"> - <h2 id="sect28"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=55"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Contains interfaces that abstract the capabilities of platform specific graphics toolkits, along with implementations on various platforms. These interfaces provide methods for things like drawing images, text, and basic shapes. It also contains basic data structures such as points and rectangles used here and in other parts of Mozilla.</p> - <p>It is also the home of the new graphics architecture based on cairo (via a C++ wrapper called thebes). See <a class="external" href="http://wiki.mozilla.org/Mozilla2:NewGFXAPIs" rel="external" title="http://wiki.mozilla.org/Mozilla2:NewGFXAPIs">NewGFXAPIs</a> and <a class="external" href="http://wiki.mozilla.org/Mozilla2:GFXEvolution" rel="external" title="http://wiki.mozilla.org/Mozilla2:GFXEvolution">GFXEvolution</a>.</p> - </div> - <div id="section_56"> - <h2 id="image"><span>image</span></h2> - <div class="editIcon"> - <h2 id="sect29"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=56"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Image rendering library. Contains decoders for the image formats mozilla supports.</p> - </div> - <div id="section_57"> - <h2 id="intl"><span>intl</span></h2> - <div class="editIcon"> - <h2 id="sect30"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=57"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Internationalization and localization support. See <a class="external" href="http://www.mozilla.org/projects/intl/index.html" rel="external" title="http://www.mozilla.org/projects/intl/index.html">Internationalisation Projects</a>.</p> - <dl> - <dt> - bidi</dt> - <dd> - Obsolete.</dd> - <dt> - chardet</dt> - <dd> - Code for "sniffing" the character encoding of Web pages.</dd> - <dt> - ctl</dt> - <dd> - Code for dealing with Complex Text Layout, related to shaping of south Asian languages (not built by default, needs <code>--enable-ctl</code>).</dd> - <dt> - locale</dt> - <dd> - Code related to determination of locale information from the operating environment.</dd> - <dt> - lwbrk</dt> - <dd> - Code related to line breaking and word breaking.</dd> - <dt> - strres</dt> - <dd> - Code related to string resources used for localization.</dd> - <dt> - uconv</dt> - <dd> - Code that converts (both ways: encoders and decoders) between UTF-16 and many other character encodings.</dd> - <dt> - unicharutil</dt> - <dd> - Code related to implementation of various algorithms for Unicode text, such as case conversion.</dd> - </dl> - </div> - <div id="section_58"> - <h2 id="ipc"><span>ipc</span></h2> - <div class="editIcon"> - <h2 id="sect31"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=58"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Container for implementations of IPC (Inter-Process Communication) mechanisms.</p> - </div> - <div id="section_59"> - <h2 id="ipcipcd"><span>ipc/ipcd</span></h2> - <div class="editIcon"> - <h2 id="sect32"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=59"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>The IPC daemon that is used for communication between several mozilla processes to support profile sharing. (Note that at the time of this writing (Dec 2005), profile sharing is not supported by mozilla).</p> - </div> - <div id="section_60"> - <h2 id="jpeg"><span>jpeg</span></h2> - <div class="editIcon"> - <h2 id="sect33"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=60"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Source code of libjpeg, used by the mozilla image library.</p> - </div> - <div id="section_61"> - <h2 id="jssrc"><span>js/src</span></h2> - <div class="editIcon"> - <h2 id="sect34"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=61"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>The JavaScript engine, also known as <a class="link-https" href="https://wiki.mozilla.org/JavaScript" rel="external" title="https://wiki.mozilla.org/JavaScript">SpiderMonkey</a>. See also <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>.</p> - </div> - <div id="section_62"> - <h2 id="jsjsd"><span>js/jsd</span></h2> - <div class="editIcon"> - <h2 id="sect35"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=62"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>JavaScript debugging library. See <a class="external" href="http://www.mozilla.org/js/jsd/" rel="external" title="http://www.mozilla.org/js/jsd/">JavaScript Debugging</a>.</p> - </div> - <div id="section_63"> - <h2 id="jssrcxpconnect"><span>js/src/xpconnect</span></h2> - <div class="editIcon"> - <h2 id="sect36"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=63"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Support code for calling JavaScript code from C++ code and C++ code from JavaScript code, using XPCOM interfaces. See <a href="/en-US/docs/XPConnect" title="XPConnect">XPConnect</a>].</p> - </div> - <div id="section_64"> - <h2 id="jssrcliveconnect"><span>js/src/liveconnect</span></h2> - <div class="editIcon"> - <h2 id="sect37"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=64"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Liveconnect, the bridge between JavaScript and Java. See <a href="/en-US/docs/JavaScript/Guide/LiveConnect_Overview" title="JavaScript/Guide/LiveConnect_Overview">LiveConnect Overview</a>.</p> - </div> - <div id="section_65"> - <h2 id="l10n"><span>l10n</span></h2> - <div class="editIcon"> - <h2 id="sect38"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=65"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Basically empty and not used by the mozilla build.</p> - </div> - <div id="section_66"> - <h2 id="layout"><span>layout</span></h2> - <div class="editIcon"> - <h2 id="sect39"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=66"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Code that implements a tree of rendering objects that describe the types and locations of the objects that are displayed on the screen (such as CSS boxes, tables, form controls, XUL boxes, etc.), and code that manages operations over that rendering tree (such as creating and destroying it, doing layout, painting, and event handling). See <a class="external" href="http://www.mozilla.org/newlayout/doc/" rel="external" title="http://www.mozilla.org/newlayout/doc/">documentation</a> and <a class="external" href="http://www.mozilla.org/newlayout/" rel="external" title="http://www.mozilla.org/newlayout/">other information</a>.</p> - <dl> - <dt> - base</dt> - <dd> - Code that deals with the rendering tree.</dd> - <dt> - generic</dt> - <dd> - The basic rendering object interface and the rendering tree objects for basic CSS boxes.</dd> - <dt> - forms</dt> - <dd> - Rendering tree objects for HTML form controls.</dd> - <dt> - tables</dt> - <dd> - Rendering tree objects for CSS/HTML tables</dd> - <dt> - mathml</dt> - <dd> - Rendering tree objects for <a href="/en-US/docs/MathML" title="MathML">MathML</a>.</dd> - <dt> - svg</dt> - <dd> - Rendering tree objects for <a href="/en-US/docs/SVG" title="SVG">SVG</a>.</dd> - <dt> - xul</dt> - <dd> - Additional rendering object interfaces for <a href="/en-US/docs/XUL" title="XUL">XUL</a> and the rendering tree objects for XUL boxes.</dd> - </dl> - </div> - <div id="section_67"> - <h2 id="lib"><span>lib</span></h2> - <div class="editIcon"> - <h2 id="sect40"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=67"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Mostly unused; might be used on mac?</p> - </div> - <div id="section_68"> - <h2 id="mail"><span>mail</span></h2> - <div class="editIcon"> - <h2 id="sect41"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=68"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Thunderbird frontend files. Note that many thunderbird files are shared with Mozilla Mailnews and can be found under <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#mailnews">mailnews</a>/.</p> - </div> - <div id="section_69"> - <h2 id="mailnews"><span>mailnews</span></h2> - <div class="editIcon"> - <h2 id="sect42"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=69"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>The mail and news backend code (e.g. code that manages folders, manages databases, or interacts with mail servers) and the frontend code for the SeaMonkey mail client, some of which is shared by Thunderbird.</p> - </div> - <div id="section_70"> - <h2 id="moduleslibimg"><span>modules/libimg</span></h2> - <div class="editIcon"> - <h2 id="sect43"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=70"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Contains libpng, used by the image library for PNG Image decoding.</p> - </div> - <div id="section_71"> - <h2 id="moduleslibjar"><span>modules/libjar</span></h2> - <div class="editIcon"> - <h2 id="sect44"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=71"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Code to read zip files, used for reading the .jar files that contain the files for the mozilla frontend.</p> - </div> - <div id="section_72"> - <h2 id="moduleslibpref"><span>modules/libpref</span></h2> - <div class="editIcon"> - <h2 id="sect45"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=72"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Library for reading and writing preferences.</p> - </div> - <div id="section_73"> - <h2 id="moduleslibreg"><span>modules/libreg</span></h2> - <div class="editIcon"> - <h2 id="sect46"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=73"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Library for reading the netscape binary registry files, used for the <code>~/.mozilla/appreg</code> file (<code>registry.dat</code> on windows).</p> - </div> - <div id="section_74"> - <h2 id="modulesoji"><span>modules/oji</span></h2> - <div class="editIcon"> - <h2 id="sect47"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=74"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Support for the Java plugin (a bridge for plugging-in generic Java VMs). See <a class="external" href="http://www.mozilla.org/oji/" rel="external" title="http://www.mozilla.org/oji/">Open JVM Integration (OJI)</a>.</p> - <p><em>Note: OJI may be removed from Mozilla 2.0 according to <a class="external" href="http://boomswaggerboom.wordpress.com/2007/04/16/javaplugin-cleanup-for-mozilla-20/" rel="external" title="http://boomswaggerboom.wordpress.com/2007/04/16/javaplugin-cleanup-for-mozilla-20/">this post by Josh</a>.</em></p> - </div> - <div id="section_75"> - <h2 id="modulesplugin"><span>modules/plugin</span></h2> - <div class="editIcon"> - <h2 id="sect48"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=75"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Plugin support. Implements the Netscape Plugin API (NPAPI). See <a href="/en-US/docs/Plugins" title="Plugins">Plugins</a>.</p> - </div> - <div id="section_76"> - <h2 id="modulesstaticmod"><span>modules/staticmod</span></h2> - <div class="editIcon"> - <h2 id="sect49"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=76"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Helper files for static mozilla builds.</p> - </div> - <div id="section_77"> - <h2 id="moduleszlib"><span>modules/zlib</span></h2> - <div class="editIcon"> - <h2 id="sect50"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=77"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Source code of zlib, used at least in the networking library for compressed transfers.</p> - </div> - <div id="section_78"> - <h2 id="netwerk"><span>netwerk</span></h2> - <div class="editIcon"> - <h2 id="sect51"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=78"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p><a href="/en-US/docs/Necko" title="Necko">Networking library</a>, also known as Necko. Responsible for doing actual transfers from and to servers, as well as for URI handling and related stuff. See also <a class="external" href="http://www.mozilla.org/projects/netlib/" rel="external" title="http://www.mozilla.org/projects/netlib/">Network library documentation</a>.</p> - </div> - <div id="section_79"> - <h2 id="nsprpub"><span>nsprpub</span></h2> - <div class="editIcon"> - <h2 id="sect52"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=79"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Netscape Portable Runtime. Used as an abstraction layer to things like threads, file I/O and socket I/O. See <a class="external" href="http://www.mozilla.org/projects/nspr/" rel="external" title="http://www.mozilla.org/projects/nspr/">Netscape Portable Runtime</a>.</p> - </div> - <div id="section_80"> - <h2 id="other-licenses"><span>other-licenses</span></h2> - <div class="editIcon"> - <h2 id="sect53"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=80"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Contains libraries that are not covered by the MPL but used in some mozilla code.</p> - </div> - <div id="section_81"> - <h2 id="parserexpat"><span>parser/expat</span></h2> - <div class="editIcon"> - <h2 id="sect54"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=81"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Copy of the expat source code, which is the XML parser used by mozilla.</p> - </div> - <div id="section_82"> - <h2 id="parserhtmlparser"><span>parser/htmlparser</span></h2> - <div class="editIcon"> - <h2 id="sect55"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=82"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Contains the html parser used by Mozilla, which parses HTML source code and calls the appropriate methods on a content sink.</p> - </div> - <div id="section_83"> - <h2 id="profile"><span>profile</span></h2> - <div class="editIcon"> - <h2 id="sect56"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=83"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Code for profile handling, the profile manager backend and frontend.</p> - </div> - <div id="section_84"> - <h2 id="rdf"><span>rdf</span></h2> - <div class="editIcon"> - <h2 id="sect57"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=84"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>RDF handling APIs. See <a href="/en-US/docs/RDF" title="RDF">RDF</a> and <a class="external" href="http://www.mozilla.org/rdf/doc/" rel="external" title="http://www.mozilla.org/rdf/doc/">RDF</a>.</p> - <p>Also contains the chrome registry code used by SeaMonkey, although toolkit apps (such as Firefox and Thunderbird) use the copy forked into <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#chrome">chrome</a>.</p> - </div> - <div id="section_85"> - <h2 id="security"><span>security</span></h2> - <div class="editIcon"> - <h2 id="sect58"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=85"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Contains NSS and PSM, to support cryptographic functions in mozilla (like S/MIME, SSL, etc). See <a class="external" href="http://www.mozilla.org/projects/security/pki/nss/" rel="external" title="http://www.mozilla.org/projects/security/pki/nss/">Network Security Services (NSS)</a> and <a class="external" href="http://www.mozilla.org/projects/security/pki/psm/" rel="external" title="http://www.mozilla.org/projects/security/pki/psm/">Personal Security Manager (PSM)</a>.</p> - </div> - <div id="section_86"> - <h2 id="storage"><span>storage</span></h2> - <div class="editIcon"> - <h2 id="sect59"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=86"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p><a href="/en-US/docs/Storage" title="Storage">Storage</a>: XPCOM wrapper for sqlite. Wants to unify storage of all profile-related data. Supersedes mork. See also <a class="external" href="http://wiki.mozilla.org/Mozilla2:Unified_Storage" rel="external" title="http://wiki.mozilla.org/Mozilla2:Unified_Storage">Unified Storage</a>.</p> - </div> - <div id="section_87"> - <h2 id="suite"><span>suite</span></h2> - <div class="editIcon"> - <h2 id="sect60"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=87"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Newer parts of SeaMonkey-specific code. Older parts live in <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#xpfe">xpfe</a>/.</p> - </div> - <div id="section_88"> - <h2 id="themes"><span>themes</span></h2> - <div class="editIcon"> - <h2 id="sect61"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=88"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Contains the themes shipped with SeaMonkey. Classic and Modern at the time of this writing.</p> - </div> - <div id="section_89"> - <h2 id="toolkit"><span>toolkit</span></h2> - <div class="editIcon"> - <h2 id="sect62"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=89"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>The "new toolkit" used by Thunderbird, Firefox, etc. This contains numerous front-end components shared between applications as well as most of the XBL-implemented parts of the XUL language (most of which was originally forked from versions in <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#xpfe">xpfe</a>/).</p> - </div> - <div id="section_90"> - <h2 id="tools"><span>tools</span></h2> - <div class="editIcon"> - <h2 id="sect63"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=90"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Some tools which are optionally built during the mozilla build process, mostly used for debugging.</p> - </div> - <div id="section_91"> - <h2 id="uriloaderbase"><span>uriloader/base</span></h2> - <div class="editIcon"> - <h2 id="sect64"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=91"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Content dispatch in Mozilla. Used to load uris and find an appropriate content listener for the data. Also manages web progress notifications. See <a class="external" href="http://www.mozilla.org/docs/docshell/uri-load-start.html" rel="external" title="http://www.mozilla.org/docs/docshell/uri-load-start.html">Document Loading: From Load Start to Finding a Handler</a> and <a class="external" href="http://www.mozilla.org/docs/url_load.html" rel="external" title="http://www.mozilla.org/docs/url_load.html">The Life Of An HTML HTTP Request</a>.</p> - </div> - <div id="section_92"> - <h2 id="uriloaderexthandler"><span>uriloader/exthandler</span></h2> - <div class="editIcon"> - <h2 id="sect65"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=92"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Used to handle content that Mozilla can't handle itself. Responsible for showing the helper app dialog, and generally for finding information about helper applications.</p> - </div> - <div id="section_93"> - <h2 id="uriloaderprefetch"><span>uriloader/prefetch</span></h2> - <div class="editIcon"> - <h2 id="sect66"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=93"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>Service to prefetch documents in order to have them cached for faster loading.</p> - </div> - <div id="section_94"> - <h2 id="view"><span>view</span></h2> - <div class="editIcon"> - <h2 id="sect67"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=94"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>View manager. Contains cross-platform code used for painting, scrolling, event handling, z-ordering, and opacity. Soon to become obsolete, gradually.</p> - </div> - <div id="section_95"> - <h2 id="widget"><span>widget</span></h2> - <div class="editIcon"> - <h2 id="sect68"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=95"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>A cross-platform API, with implementations on each platform, for dealing with operating system/environment widgets, i.e., code related to creation and handling of windows, popups, and other native widgets and to converting the system's messages related to painting and events into the messages used by other parts of Mozilla (e.g. <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#view">view</a>/ and <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#content">content</a>/, the latter of which converts many of the messages to yet another API, the DOM event API).</p> - </div> - <div id="section_96"> - <h2 id="xpcom"><span>xpcom</span></h2> - <div class="editIcon"> - <h2 id="sect69"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=96"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p><a href="/en-US/docs/XPCOM" title="XPCOM">Cross-Platform Component Object Model</a>. Also contains data structures used by the rest of the mozilla code. See also <a class="external" href="http://www.mozilla.org/projects/xpcom/" rel="external" title="http://www.mozilla.org/projects/xpcom/">XPCOM Project</a>.</p> - </div> - <div id="section_97"> - <h2 id="xpfe"><span>xpfe</span></h2> - <div class="editIcon"> - <h2 id="sect70"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=97"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>XPFE is the SeaMonkey frontend. It contains the XUL files for the browser interface, common files used by the other parts of the mozilla suite, and the XBL files for the parts of the XUL language that are implemented in XBL. Much of this code has been copied to <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#browser">browser</a>/ and <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#toolkit">toolkit</a>/ for use in Firefox, Thunderbird, etc.</p> - <div id="section_98"> - <h3 id="xpfecomponents"><span>xpfe/components</span></h3> - <div class="editIcon"> - <h3 id="sect71"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=98"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Components used by the Mozilla frontend, as well as implementations of interfaces that other parts of mozilla expect.</p> - </div> - <div id="section_99"> - <h3 id="xpfebootstrap"><span>xpfe/bootstrap</span></h3> - <div class="editIcon"> - <h3 id="sect72"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=99"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> - </div> - <p>Startup code for Mozilla. This contains the main/WinMain function. (Not used by "new toolkit" apps; for those, see <a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure#toolkit">toolkit</a>/xre and the "app" directory for each specific app).</p> - </div> - </div> - <div id="section_100"> - <h2 id="xpinstall"><span>xpinstall</span></h2> - <div class="editIcon" style=""> - <h2 id="sect73"><a href="/en-US/docs/Mozilla_Source_Code_Directory_Structure?action=edit&sectionId=100"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h2> - </div> - <p>The installer, which contains code for installing Mozilla and for installing XPIs/extensions. This directory also contains code needed to build installer packages. See <a href="/en-US/docs/XPInstall" title="XPInstall">XPInstall</a> and the <a class="external" href="http://www.mozilla.org/projects/xpinstall/" rel="external" title="http://www.mozilla.org/projects/xpinstall/">XPInstall project page</a>.</p> - </div> - </div> -</div> diff --git a/files/es/orphaned/etiquetas_audio_y_video_en_firefox/index.html b/files/es/orphaned/etiquetas_audio_y_video_en_firefox/index.html deleted file mode 100644 index c556536247..0000000000 --- a/files/es/orphaned/etiquetas_audio_y_video_en_firefox/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Etiquetas audio y video en Firefox -slug: orphaned/Etiquetas_audio_y_video_en_Firefox -original_slug: Etiquetas_audio_y_video_en_Firefox ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> -<p>En Firefox 3.5 se ha incorporado la posibilidad de usar las etiquetas para los elementos <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a> y <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a>, agregados a las especificaciones de HTML 5, lo que permite insertar fácilmente archivos de audio o video en los documentos HTML. Actualmente sólo pueden usarse los formatos Ogg y WAV, pero se espera agregar la posibilidad de usar otros formatos en el futuro.</p> -<h2 id="Insertar_medios">Insertar medios</h2> -<p>Insertar medios en su documento HTML es sencillo:</p> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay> - Your browser does not support the <code>video</code> element. -</video> -</pre> -<p>Este ejemplo reproduce un video del sitio web de Theora.</p> -<p>Se pueden agregar múltiples archivos usando el elemento <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> para especificar diferentes archivos con diferentes formatos para distintos navegadores. Por ejemplo:</p> -<pre class="brush: html"><video autoplay> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mov"> - Your browser does not support the <code>video</code> element. -</video> -</pre> -<p>ejecutará el archivo OGG en los navegadores que puedan reproducir ese formato. Si el navegador no puede reproducir ese formato, intentará usar el archivo MOV.</p> -<div class="note"><strong>Nota: </strong>El elemento source todavía no es completamente funcional en Firefox. Mire el {{ bug(449363) }} para más detalles.</div> -<h2 id="Controlar_la_reproducción_de_los_archivos">Controlar la reproducción de los archivos</h2> -<p>Una vez que haya insertado el archivo en el documento HTML usando los nuevos elementos, puede controlarlos usando JavaScript. Por ejemplo, para empezar (o reiniciar) la reproducción, puede hacer esto::</p> -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> -<p>La primera línea localiza el elemento en el documento y la segunda usa el método <a class="external" href="/En/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/En/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> del mismo, como está definido en la interface {{ interface("nsIDOMHTMLMediaElement") }} que se usa para implementar los elementos de medios.</p> -<h2 id="Eventos_en_medios">Eventos en medios</h2> -<p>Muchos eventos son enviados cuando se manejan medios:</p> -<table class="standard-table"> <tbody> <tr> <td class="header">Nombre del evento</td> <td class="header">Descripción</td> </tr> <tr> <td><code>abort</code></td> <td>Se envía cuando se aborta la reproducción, por ejemplo, cuando el archivo se está reproduciendo y es reiniciado, se envía este evento.</td> </tr> <tr> <td><code>canplay</code></td> <td>Se envía cuando ya está disponible la suficiente cantidad del archivo para que pueda reproducirse, por lo menos por unos cuantos cuadros. Se corresponde con <code>CAN_PLAY</code> <code>readyState</code>.</td> </tr> <tr> <td><code>canplaythrough</code></td> <td>Se envía cuando el estado cambia a <code>CAN_PLAY_THROUGH</code>, lo que indica que puede reproducirse completamente el archivo sin interrupciones, asumiendo que la tasa de descaraga se mantendrá en el nivel actual.</td> </tr> <tr> <td><code>canshowcurrentframe</code></td> <td>El cuadro actual fue cargado y puede mostrarse. Este se corresponde a <code>CAN_SHOW_CURRENT_FRAME</code> <code>readyState</code>.</td> </tr> <tr> <td><code>dataunavailable</code></td> <td>Se envía cuando el estado cambia a <code>DATA_UNAVAILABLE</code>.</td> </tr> <tr> <td><code>durationchange</code></td> <td>Los metadatos fueron cargados o han cambiado, lo que indica un cambio en la duración del archivo. Esto se envía, por ejemplo, cuando se ha cargado tanto del archivo que se conoce la duración total del mismo.</td> </tr> <tr> <td><code>emptied</code></td> <td>El archivo se ha vaciado. Por ejemplo, este evento se envía si el archivo había sido cargado (o parcialmente cargado), y se llamó al método <a class="internal" href="/En/nsIDOMMediaHTMLElement#load()" title="En/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> para recargarlo.</td> </tr> <tr> <td><code>empty</code></td> <td>Se envía cuando hay un error y el archivo está vacío.</td> </tr> <tr> <td><code>ended</code></td> <td>Se envía cuando se termina la reproducción.</td> </tr> <tr> <td><code>error</code></td> <td>Se envía cuando hay un error. El atributo <code>error</code> del elemento contiene más información.</td> </tr> <tr> <td><code>load</code></td> <td>El archivo se descargó completamente.</td> </tr> <tr> <td><code>loadedfirstframe</code></td> <td>El primer cuadro del archivo se terminó de descargar.</td> </tr> <tr> <td><code>loadedmetadata</code></td> <td>Los metadatos del archivo se terminaron de descargar, todos los atributos contienen la mayor cantidad de información posible.</td> </tr> <tr> <td><code>loadstart</code></td> <td>Se envía cuando comienza la carga del archivo.</td> </tr> <tr> <td><code>pause</code></td> <td>Se envia cuando se pone en pausa la reproducción.</td> </tr> <tr> <td><code>play</code></td> <td>Se envía cuando se comienza la reproducción o cuando se reinicia.</td> </tr> <tr> <td><code>ratechange</code></td> <td>Se envía cuando cambia la velocidad de reproducción.</td> </tr> <tr> <td><code>seeked</code></td> <td>Se envía cuando se completa la operación de búsqueda.</td> </tr> <tr> <td><code>seeking</code></td> <td>Se envía cuando comienza la operación de búsqueda.</td> </tr> <tr> <td><code>timeupdate</code></td> <td>El tiempo indicado por el atributo <code>currentTime</code> del elemento cambió.</td> </tr> <tr> <td><code>volumechange</code></td> <td>Se envía al cambiar el volumen del audio (cuando el volumen es elegido y cuando cambia el atributo <code>muted</code>).</td> </tr> <tr> <td><code>waiting</code></td> <td>Se envía cuando la operación solicitada (como la reproducción) se retrasa porque espera que se complete otra operación (como una búsqueda).</td> </tr> </tbody> -</table> -<p>Fácilmente puede vigilar estos eventos, si usa un código parecido al siguiente:</p> -<pre>var v = document.getElementsByTagName("video")[0]; - -v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); -v.currentTime = 10.0; -</pre> -<p>Este ejemplo obtiene el primer elemento de video del documento y le adhiere un event listenert, esperando por el evento seeked, que se envía cuando termino una operación de búsqueda. El listener simplemente ejecuta el método <code>play()</code> del elemento, que comenzará la reproducción.</p> -<p>En la línea 4, se configura el atributo <code>currentTime</code> a 10.0, que inicia una operación de busqueda a la marca de los 10 segundos en el archivo. Esto genera que se envíe un evento <code>seeking</code> cuando comienza la operación, después un evento <code>seeked</code> se enviara cuando la búsqueda se haya completado.</p> -<p>En otras palabras, en este ejemplo se busca la marca de los 10 segundos en el archivo, y luego comienza la reproducción.</p> -<h2 id="Vea_también">Vea también</h2> -<ul> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> <li><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a></li> <li><a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> </li> <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li> <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> -</ul> -<p> {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p> -<p> {{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox" } ) }}</p> diff --git a/files/es/orphaned/extensiones/actualización_de_extensiones_para_firefox_4/index.html b/files/es/orphaned/extensiones/actualización_de_extensiones_para_firefox_4/index.html deleted file mode 100644 index 1cd77f0677..0000000000 --- a/files/es/orphaned/extensiones/actualización_de_extensiones_para_firefox_4/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Actualización de extensiones para Firefox 4 -slug: orphaned/Extensiones/Actualización_de_extensiones_para_Firefox_4 -tags: - - Agregados - - Complementos - - Firefox 4 - - Gecko 2.0 - - extensiones - - para_revisar -original_slug: Extensiones/Actualización_de_extensiones_para_Firefox_4 ---- -<p>Este artículo ofrece detalles sobre aquellos cambios en Firefox 4 que pueden afectar a las extensiones existentes.</p> -<h2 id="Cambios_en_XPCOM">Cambios en XPCOM</h2> -<p>Se han llevado a cabo una serie de cambios que afectan a los complementos/agregados y las aplicaciones que incluyen componentes XPCOM. Consulta <a href="/es/XPCOM/Cambios_XPCOM_en_Gecko_2.0" title="https://developer.mozilla.org/es/XPCOM/Cambios_XPCOM_en_Gecko_2.0">los cambios de XPCOM en Gecko 2</a> para obtener más detalles.</p> -<h2 id="Desempaquetado_de_XPI">Desempaquetado de XPI</h2> -<p>Firefox 4 <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=533038" title="https://bugzilla.mozilla.org/show_bug.cgi?id=533038">ya no extrae XPIs</a> al instalar complementos/agregados. Simplemente coloca el archivo XPI en el perfil del usuario y a continuación lee los archivos chrome y otro tipos de archivos directamente del XPI. Todavía funciona un jar en el XPI, aunque haya dejado de ser necesario, para facilitarte el proceso de desarrollo o compilación. Se ha hecho así principalmente por razones de rendimiento en los SO lentos a la vez que permite mejorar la invalidación de la caché, lo cual también ayuda a los desarrolladores. Sin embargo, no todos los tipos de archivos pueden leerse ya desde el XPI, por lo tanto si tu complemento/agregado usa uno de ellos, tienes que especificar <span class="nowiki"><a title="https://developer.mozilla.org/en/Install_Manifests#unpack"><code><em:unpack></code></a></span> en tu install.rdf para hacer que Firefox continúe extrayendo tu XPI y usando archivos solos. De lo contrario, tu complemento/agregado fallará al intentar tener acceso a estos archivos.</p> -<p>Si tu complemento/agregado sólo contiene estos tipos de archivos, no es necesario que realices ningún cambio::</p> -<ul> <li><code>install.rdf</code></li> <li><code>chrome.manifest</code></li> <li><code>chrome</code> (incluyendo <code>content</code>, <code>locale</code>, <code>skin</code>)</li> <li>preferencias predeterminadas</li> <li>componentes XPCOM escritos en JavaScript</li> -</ul> -<p>Si tu complemento/agregado contiene alguno de los siguientes tipos de archivos, tendrás que incluir <code><code><em:unpack></code></code> en el install.rdf:</p> -<ul> <li>componentes binarios XPCOM</li> <li>DLLs cargadas con CTypes</li> <li><code>searchplugins/</code> (que deben ser cargadas automáticamente por Firefox)</li> <li><code>dictionaries/</code></li> <li>Iconos de ventana (podrían <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=595462" title="https://bugzilla.mozilla.org/show_bug.cgi?id=595462">solucionarse</a>)</li> -</ul> -<p>Si el código de tu complemento/agregado tiene acceso a otros archivos que has empaquetado en el XPI, entonces tendrás que incluir <code> </code><code><em:unpack></code> en el install.rdf o bien tendrás que realizar algunos cambios en tu código para poder admitir una instalación empaquetada. Cualquier código que usara getInstallLocation() y nsIFile tendrá que incluir em:unpack o modificarse. Puedes usar el método <code><a href="/en/Addons/Add-on_Manager/Addon#getResourceURI%28%29" title="https://developer.mozilla.org/en/Addons/Add-on_Manager/Addon#getResourceURI()">Addon.getResourceURI()</a></code>, devolverá un {{ interface("nsIURI") }} que apunta al archivo solicitado. Si la extensión o el agregado está sin empaquetar, entonces será un <code><span class="nowiki">file://</span></code> URI. Si la extensión o el agregado está empaquetada/o, será un <span class="nowiki"><code>jar://</code></span> URI. Puedes abrir secuencias para estas URI abriendo un canal mediante {{ interface("nsIIOService") }} que te permitirá descargar los contenidos de los archivos sin que haya que desempaquetar.</p> -<h2 id="Se_han_eliminado_los_HWND_secundarios">Se han eliminado los HWND secundarios</h2> -<p>Afectará a un número muy reducido de desarrolladores. En las versiones anteriores de Firefox, los <code>HWND</code> se creaban en Windows para uso interno. Como parte del trabajo destinado a la mejora del rendimiento de gráficos, éstos ya no se crean.</p> -<p>Lamentablemente, las pocas extensiones que han tenido acceso y han manipulado directamente estos <code>HWND</code> no funcionarán en Firefox 4. Hemos colocado algunos parches para ayudar a los drivers de determinados dispositivos señaladores y al software de tecnología de ayuda (lectores de pantalla, por ejemplo). Sin embargo, hemos optado por no añadir más parches para admitir extensiones, que desde el principio no deberían haberlo hecho.</p> -<p>Si mantienes una extensión que usa componentes nativos que dependen de unos <code>HWND</code> que ya no existen, tendrás que actualizar tu extensión. Existen dos formas de hacer esto.</p> -<p>La primera, y la mejor, solución es dejar de acceder a los <code>HWND</code> y en su lugar usar características Web o XUL para implementar tus extensiones. Existen muchas características nuevas en Firefox 4 que posibilitan muchas cosas que requerían código nativo, por lo tanto ya no tendrás que hacerlo.</p> -<p>Si ves que no funciona y sigues teniendo que acceder directamente a los <code>HWND</code>s, tal vez tu única solución sea escribir un plugin <a href="/en/NPAPI" title="en/NPAPI">NPAPI</a> para que haga el trabajo. Puede suponer mucho trabajo pero debería funcionar. Por supuesto, no te servirá si los <code>HWND</code> específicos que usabas ya no existen.</p> -<p>{{ languages( { "en": "en/Extensions/Updating_extensions_for_Firefox_4" } ) }}</p> diff --git a/files/es/orphaned/faq_incrustando_mozilla/index.html b/files/es/orphaned/faq_incrustando_mozilla/index.html deleted file mode 100644 index 44b6890c7e..0000000000 --- a/files/es/orphaned/faq_incrustando_mozilla/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: FAQ Incrustando Mozilla -slug: orphaned/FAQ_Incrustando_Mozilla -tags: - - Incrustando_Mozilla - - Preguntas_frecuentes_sobre_incrustación_en_Mozilla - - Todas_las_Categorías -original_slug: FAQ_Incrustando_Mozilla ---- -<p>Esta página es una recopilación de preguntas frecuentes sobre <a href="es/Incrustrando_Mozilla"> Incrustrando Mozilla </a>. -</p><p>Lista de correo (en inglés): <a class="external" href="http://www.mozilla.org/community/developer-forums.html#mozilla-embedding">mozilla-embedding@mozilla.org</a> -</p> -<ol><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n">Introducción a Gecko e inscrustación</a> -<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_Gecko.3F"> ¿Qué es Gecko?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_Mozilla.3F"> ¿Qué es Mozilla?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_el_GRE.3F"> ¿Qué es el GRE?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_es_XPCOM.3F"> ¿Qué es XPCOM?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Que_significa_.22incrustar.22_Gecko.3F"> ¿Qué significa "incrustar" Gecko?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Cuales_son_los_t.C3.A9rminos_de_licencia_para_incrustar_Gecko.3F"> ¿Cuales son los términos de licencia para incrustar Gecko?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Hay_disponible_un_SDK_.3F"> ¿Hay disponible un SDK?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Cu.C3.A1l_es_la_.C3.BAltima_versi.C3.B3n.3F_Que_versi.C3.B3n_deber.C3.ADa_usar.3F"> ¿Cuál es la última versión? ¿Que versión debería usar?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Introducci%c3%b3n_a_Gecko_e_inscrustaci%c3%b3n#Qui.C3.A9n_esta_usando_Gecko_actualmente.3F"> ¿Quién está usando Gecko actualmente?</a> -</li></ol> -</li><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko"> Incrustando Gecko</a> -<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Qu.C3.A9_archivos_necesito_para_poder_incrustar_.3F"> ¿Qué archivos necesito para poder incrustar?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#C.C3.B3mo_se_lleva_a_cabo_la_distribuci.C3.B3n_de_la_incrustaci.C3.B3n.3F"> ¿Cómo se lleva a cabo a la distribución de la incrustación?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Por_qu.C3.A9_necesito_incluir_archivos_XPT_en_mi_aplicaci.C3.B3n3F"> ¿Por qué necesito incluir archivos XPT en mi aplicación?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#C.C3.B3mo_me_mantengo_al_tanto_con_los_cambios_en_la_interfaz_de_Gecko_.3F"> ¿Cómo me mantengo al tanto con los cambios en la interfaz de Gecko?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Esto_significa_que_mi_compilaci.C3.B3n_ser.C3.A1_compatible_con_todas_las_versiones_futuras_de_GRE_.2F_Gecko_.2F_Mozilla.3F"> ¿Esto significa que mi compilación será compatible con todas las versiones futuras de GRE/Gecko/Mozilla?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Qu.C3.A9_plataformas_son_soportadas_.3F"> ¿Qué plataformas son soportadas?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Admite_la_versi.C3.B3n_incrustada_protocolos_seguros_como_HTTPS.3F"> ¿Admite la versión incrustada protocolos seguros como HTTPS?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#C.C3.B3mo_se_comunica_mi_aplicaci.C3.B3n_con_Gecko.3F"> ¿Cómo se comunica mi aplicación con Gecko?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Puedo_incrustar_sin..."> ¿Puedo incrustar_sin ...</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Puedo_incrustar_el_editor_mozilla_de_HTML.3F"> Puedo incrustar el editor mozilla de HTML?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Qu.C3.A9_herramienta_de_creaci.C3.B3n_de_wigdets_emplea_Mozilla.3F"> ¿Qué herramienta de creación de wigdets emplea Mozilla?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Tiene_elmozilla_incrustado_soporte_para_Javat.3F"> Tiene el mozilla incrustado soporte para Java?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Incrustando_Gecko#Puedo_incrustar_en_ozilla_de_alguna_otra_manera.3F"> ¿Puedo incrustar en mozilla de alguna otra manera?</a> -</li></ol> -</li><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago_...">Cómo hago ...</a> -<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_incrusto_Gecko.3F"> ¿Cómo incrusto Gecko?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#Qu.C3.A9_es_un_servicio.3F"> ¿Qué es un servicio?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_cargo_una_p.C3.A1gina.3F"> ¿Cómo cargo una página?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_bloqueo_una_carga.3F"> ¿Cómo bloqueo una carga?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_vigilo_.2Finterrumpo_una_carga_antes_de_que_ocurra_.3F"> ¿Cómo vigilo/interrumpo una carga antes de que ocurra?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_copio_elementos_al_portapapeles.3F"> Cómo copio elementos al portapapeles?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_grabo_un_documento_o_dato_en_el_disco.3F"> ¿Cómo grabo un documento o dato en el disco?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_grabo_.2F_cuelgo_un_archivo_.2F_dato_a_un_sitio_web_o_un_servidor_ftp.3F"> ¿Cómo grabo/cuelgo un archivo/dato a un sitio web o un servidor ftp?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_s.C3.A9_cuando_una_grabaci.C3.B3n_ha_concluido_.2C_vigilo_el_progreso_etc..3F"> ¿Cómo sé cuando una grabación ha concluido, vigilo el progreso etc.?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_imprimo_una_p.C3.A1gina.3F"> ¿Cómo imprimo una página?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_creo_la_vista_preliminar_de_una_p.C3.A1gina.3F"> Cómo creo la vista preliminar de una página?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_consigo_que_los_elemento_semergentes_fucionen_.3F"> Cómo consigo que los elementos emergentes fucionen?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#Necesito_que_el_Javascript_dentro_de_la_ventana_del_navegador_se_comunique_con_mi_cliente_incrustado._C.C3.B3mo_lo_hago_.3F"> Necesito que el Javascript dentro de la ventana del navegador se comunique con mi cliente incrustado. Cómolohago?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezaco_otras_ubicaciones_para_archivos_como_components.reg.3F"> Cómo establezco otras ubicaciones para archivos como components.reg?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezaco_otras_ubicaciones_para_los_perfiles.3F"> ¿Cómo establezco otras ubicaciones para los perfiles?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_cambio_la_cadena_de_identificaci.C3.B3n.3F"> ¿Cómo cambio la cadena de identificación?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_muestro_mi_propio_mensaje.2C_alertas_y_ventanas_de_aviso.3F"> ¿Cómo muestro mi propio mensaje, alertas y ventanas de aviso?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_obtengo_el_archivo_DOM_del_objeto_navegador.3F"> ¿Cómo obtengo el archivo DOM del objeto navegador?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#Qu.C3.A9_es_el_docshell.3F"> ¿Qué es el docshell?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezco_menus_contextuales_.3F"> ¿Cómo establezco menus contextuales?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_establezco_los_tool_tips.3F"> ¿Cómo establezco los tool tips?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_hago_para_ver_tool_tips_para_nodos_con_attributos_ALT.3F"> ¿Cómo hago para ver tool tips para nodos con attributos ALT?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/C%c3%b3mo_hago...#C.C3.B3mo_hago_para_configurar_el_proxy_.3F"> ¿Cómo hago para configurar el proxy?</a> -</li></ol> -</li><li> <a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_Comunes">Problemas comunes</a> -<ol><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#TestGTKEmbed_no_funciona.21"> ¡El TestGTKEmbed no funciona!</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#C.C3.B3mo_compilo_MFCEmbed_.3F"> ¿Cómo compilo MFCEmbed?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#C.C3.B3mo_depuro_MFCEmbed.3F"> ¿Cómo depuro MFCEmbed?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#Por_qu.C3.A9_no_funciona_el_FTP.3F"> ¿Por qué no funciona el FTP?</a> -</li><li><a href="es/Preguntas_frecuentes_sobre_incrustaci%c3%b3n_en_Mozilla/Problemas_comunes#Por_qu.C3.A9_es_mi_compilaci.C3.B3n_tan_grande.3F.21"> ¿Por qué es mi compilación tan grande?</a> -</li></ol> -</li></ol> diff --git a/files/es/orphaned/firefox_addons_developer_guide/introduction_to_extensions/index.html b/files/es/orphaned/firefox_addons_developer_guide/introduction_to_extensions/index.html deleted file mode 100644 index 3dd23de8a0..0000000000 --- a/files/es/orphaned/firefox_addons_developer_guide/introduction_to_extensions/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: 'Capítulo 1: Introducción a las extensiones.' -slug: orphaned/Firefox_addons_developer_guide/Introduction_to_Extensions -original_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/orphaned/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html b/files/es/orphaned/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html deleted file mode 100644 index 19d7156094..0000000000 --- a/files/es/orphaned/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'Chapter 2: Technologies used in developing extensions' -slug: >- - orphaned/Firefox_addons_developer_guide/Technologies_used_in_developing_extensions -original_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> diff --git a/files/es/orphaned/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html b/files/es/orphaned/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html deleted file mode 100644 index ddee8aa094..0000000000 --- a/files/es/orphaned/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Formatos multimedia admitidos por los elementos de audio y video -slug: orphaned/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio -tags: - - Firefox - - HTML5 - - Multimedia - - formatos de audio - - formatos multimedia - - para_revisar -original_slug: Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio ---- -<p>{{ gecko_minversion_header("1.9.1") }}</p> -<p>Gecko 1.9.1 admite los elementos <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML 5</a> <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a> y <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a>, los cuales proporcionan una compatibilidad integrada para la reproducción de medios de audio y video sin necesidad de instalar plug-ins. Este artículo aborda los formatos que son compatibles al implementar Gecko estos elementos .</p> -<h2 id="Formatos_multimedia_compatibles">Formatos multimedia compatibles</h2> -<p>Actualmente Gecko admite audio en formato WAVE así como contenedores Ogg con audio codificado en Vorbis y/o video Theora.</p> -<div class="geckoVersionNote"> -<p>{{ gecko_callout_heading("2.0") }}</p> -<p>A partir de Gecko 2.0 se admite también el formato de medios WebM. <a class=" external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> usa el códec V8 para video y Vorbis para audio.</p> -</div> -<h3 id="Contenedores_WAVE">Contenedores WAVE</h3> -<p>Gecko admite audio en contenedores WAVE; los archivos de este tipo suelen terminar en la extensión ".wav". Actualmente sólo se admite el códec "1" (PCM) .</p> -<div class="note"><strong>Nota: </strong>Consulta <a class="external" href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt">RFC 2361</a> para el registro de códecs WAVE.</div> -<h4 id="Tipos_MIME_reconocidos_para_audio_WAVE">Tipos MIME reconocidos para audio WAVE</h4> -<p>Gecko reconoce que los siguientes tipos MIME representan archivos de audio WAVE.</p> -<ul> <li><code>audio/wave</code> (preferido)</li> <li><code>audio/wav</code></li> <li><code>audio/x-wav</code></li> <li><code>audio/x-pn-wav</code></li> -</ul> -<p>{{ h2_gecko_minversion("WebM", 2) }}</p> -<p><a class=" external" href="http://www.webmproject.org/" title="http://www.webmproject.org/">WebM</a> es un formato nuevo, basado en estándares abiertos, para la presentación de video en la web. Usa VP8 para video y Vorbis para audio, en un contenedor basado en <a class=" external" href="http://corecodec.com/products/matroska" title="http://corecodec.com/products/matroska">Matroska</a>.</p> -<h4 id="Tipos_MIME_reconocidos_para_medios_WebM">Tipos MIME reconocidos para medios WebM</h4> -<p>Gecko reconoce que los siguientes tipos MIME representan archivos de medios WebM.</p> -<dl> <dt><code>video/webm</code></dt> <dd>Un archivo de medios WebM que contiene video (y posiblemente audio también).</dd> <dt><code>audio/webm</code></dt> <dd>Un archivo de medios WebM que contiene solamente audio.</dd> -</dl> -<h3 id="Contenedores_Ogg">Contenedores Ogg</h3> -<p>Gecko también admite contenedores Ogg, que pueden contener audio y/o video. Gecko admite el códec Vorbis para audio Ogg y los códecs Theora y <a class=" external" href="http://wiki.xiph.org/OggYUV" title="http://wiki.xiph.org/OggYUV">OggYUV</a> para video.</p> -<p>Puedes saber más acerca de la creación de medios Ogg si lees el <a class="external" href="http://en.flossmanuals.net/TheoraCookbook" title="http://en.flossmanuals.net/TheoraCookbook">Theora Cookbook</a>.</p> -<h4 id="Tipos_MIME_reconocidos_para_medios_Ogg">Tipos MIME reconocidos para medios Ogg</h4> -<p>Gecko reconoce que los siguientes tipos MIME son archivos Ogg.</p> -<dl> <dt><code>audio/ogg</code></dt> <dd>Un archivo Ogg que contiene sólo audio.</dd> <dt><code>video/ogg</code></dt> <dd>Un archivo Ogg que contiene video (y posiblemente audio también).</dd> <dt><code>application/ogg</code></dt> <dd>Un archivo Ogg con contenido sin especificar. Es preferible usar uno de los otros dos tipo MIME pero puedes usarlo si no sabes cuáles son los contenidos del archivo.</dd> -</dl> -<h2 id="Consulta_también">Consulta también</h2> -<ul> <li><a class="internal" href="/es/Usando_audio_y_video_en_Firefox" title="Es/Usando audio y video en Firefox">Usar audio y video en Firefox</a></li> <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Elementos multimedia</a> (especificación HTML 5)</li> <li><code><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> -</ul> -<p>{{ languages( { "en": "en/Media_formats_supported_by_the_audio_and_video_elements" } ) }}</p> diff --git a/files/es/orphaned/fragmentos_de_código/index.html b/files/es/orphaned/fragmentos_de_código/index.html deleted file mode 100644 index 72cd88c7e1..0000000000 --- a/files/es/orphaned/fragmentos_de_código/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Fragmentos de código -slug: orphaned/Fragmentos_de_código -tags: - - Add-ons - - extensiones - - fragmentos de código -original_slug: Fragmentos_de_código ---- -<p>Esta es una lista rápida de fragmentos de código útiles (pequeñas muestras de código) disponible para los desarrolladores de extensiones para las diversas aplicaciones de Mozilla. Muchas de estas muestras también pueden ser usados en aplicaciones XULRunner, así como en el propio código de Mozilla.</p> -<p>Estos ejemplos demuestran cómo lograr tareas básicas que podrían no ser evidentes a simple vista.</p> -<h2 id="Browser-oriented_code">Código orientado al Navegador</h2> -<dl> <dt><a href="/es/Code_snippets/Tabbed_browser" title="es/Code_snippets/Tabbed_browser">Código del navegador con pestañas</a> (Firefox/SeaMonkey)</dt> <dd>Operaciones básicas, tales como la carga de la página en el navegador con pestañas, que es el corazón de las aplicaciones del navegador Mozilla.</dd> <dt> -</dt></dl> diff --git a/files/es/orphaned/funciones/index.html b/files/es/orphaned/funciones/index.html deleted file mode 100644 index d5e957dcf2..0000000000 --- a/files/es/orphaned/funciones/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Funciones -slug: orphaned/Funciones -tags: - - Funciones -original_slug: Funciones ---- -<p>Aquí necesitamos una lista completa de Funciones de XPCOM, algo parecido a la lista de <a href="es/Interfaces">Interfaces</a>. -</p> diff --git a/files/es/orphaned/generación_de_guids/index.html b/files/es/orphaned/generación_de_guids/index.html deleted file mode 100644 index e4b63d6da7..0000000000 --- a/files/es/orphaned/generación_de_guids/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Generación de GUIDs -slug: orphaned/Generación_de_GUIDs -original_slug: Generación_de_GUIDs ---- -<div class="note">(Esta página se encuentra en proceso de traducción - ruego a quién la complete, si no lo hago antes, retirar esta nota de estatus - Ibnkhaldun)</div> -<p>Los <strong>GUID</strong>s son empleados por los programas integrados en Mozilla para identificar de modo único a una gran variedad de entidades, entre las que se incluyen las <a href="/en/Interfaces" title="en/Interfaces">Interfaces</a> XPCOM (en este caso, la GUID es llamada IID), los componentes (CID), y los "agregados" (add-ons), como <a href="/en/Extensions" title="en/Extensions">extensiones</a> y <a href="/en/Themes" title="en/Themes">temas</a>; no obstante, los "agregados" (add-ons) <a href="/en/Install_Manifests#id" title="en/Install_Manifests#id">pueden (y debieran) ser identificados</a> mediante IDs (identificadores) de la forma <code><a class=" link-mailto" href="mailto:nombreextension@nombreorganizacion.tld" rel="freelink">nombreextension@nombreorganizacion.tld</a></code> a partir de <a href="/en/Firefox_1.5_for_developers" title="en/Firefox_1.5_for_developers">Firefox 1.5</a>.</p> -<h3 id="Canonical_form" name="Canonical_form">Forma canónica de una GUID</h3> -<p>La forma usual de una GUID es <code>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx</code>, donde cada <code>x</code> corresponde a un dígito hexadecimal (01...9A...F). Y, debe ser única en el mundo dígital. De modo que no importa en que equipo sea instalada la entidad a la que identifica no compita con el identificador de otro objeto o programa instalado en el mismo. Esto quiere decir, que una GUID no puede ser escrita de modo arbitrario, siguiendo el modelo canónico. Debe ser generada por una utilidad (algoritmo) que garantice su unicidad. Sería gravísimo crear un componente o una biblioteca y asignar GUIDs arbitrarias a ella y sus entidades integrantes: al distribuirla e instalarla en otros equipos podría provocar efectos inesperados cuando los programas y utilitarios instalados en los mismos traten de hacer referencia a (o cargar) piezas de software cuyos identificadores se solapan. Existen muchas utilidades que permiten generar GUIDs únicos que se ajustan a la forma canónica. Entre otras:</p> -<h4 id="Online_tools" name="Online_tools">Herramientas en línea</h4> -<ul> <li><a class="external" href="http://www.somacon.com/p113.php">Generate GUID Online</a></li> <li><a class="external" href="http://www.famkruithof.net/uuid/uuidgen">UUID (GUID) Generator on the WEB</a></li> <li><a class="external" href="http://mozilla.pettay.fi/cgi-bin/mozuuid.pl">UUID Generator for Mozilla Code</a> (tanto en forma IDL como C++.h)</li> <li>Se puede obtener una GUID desde algunos robots de correo (tales como botbot, firebot) el canal IRC <a class="link-irc" href="irc://irc.mozilla.org/firefox">#firefox</a> enviandoles <code>/msg</code>ing "uuid" .</li> -</ul> -<h4 id="Windows" name="Windows">Windows</h4> -<p>Los usuarios de Windows pueden emplear el utilitario <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=94551F58-484F-4A8C-BB39-ADB270833AFC&displaylang=en">GuidGen</a> de Microsoft para obtener una GUID. (esta utilidad de parte de MS Visual C++)</p> -<h4 id="Linux" name="Linux">Linux</h4> -<p>Usar <code>/usr/bin/uuidgen</code>. Se encuentra en el paquete <code>libuuid1</code> (Debian).</p> -<h4 id="Mac_OS_X">Mac OS X</h4> -<p>Usar <code>/usr/bin/uuidgen</code>.</p> -<h4 id="Perl" name="Perl">Perl</h4> -<p><a class="external" href="http://www.johnkeiser.com/mozilla/mozilla_tools.html">jkeiser's Mozilla tools</a> incluye un generador UUID con salidas en los estilos C++ e IDL.</p> -<h4 id="nsIUUIDGenerator" name="nsIUUIDGenerator">nsIUUIDGenerator</h4> -<p>Se puede generar un identificador UUID desde código, contando con privilegios de ejecución en Mozilla, utilizando los métodos del objeto <code><a href="/en/XPCOM_Interface_Reference/nsIUUIDGenerator" title="en/nsIUUIDGenerator">nsIUUIDGenerator</a></code>. Ver la página enlazada para obtener detalles.</p> -<h3 id="COM.2FXPCOM_format" name="COM.2FXPCOM_format">Formato COM/XPCOM</h3> -<p>Cuando se declaran IIDs y CIDs mediante enunciados <code>#define</code> en código C++ para Mozilla, suele emplearse el siguiente formato:</p> -<pre class="eval">// xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx -#define NS_...ID \ -{ 0xXXXXXXXX, 0xXXXX, 0xXXXX, \ - { 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX } } -</pre> -<p>Para generar código en este formato puede emplearse alguna de las siguientes herramientas.</p> -<h4 id="Online_tools_2" name="Online_tools_2">Utilidades en línea</h4> -<ul> <li><a class=" external" href="http://mozilla.pettay.fi/cgi-bin/mozuuid.pl" rel="freelink">http://mozilla.pettay.fi/cgi-bin/mozuuid.pl</a></li> -</ul> -<h4 id="guidgen" name="guidgen">guidgen</h4> -<p><code>guidgen.exe</code>, hace parte de Microsoft Visual Studio, genera UUIDs en este formato.</p> -<div class="note">(N de T. Los dos párrafos siguientes son poco claros en el original - su traducción es difícil ¿alguna sugerencia? - hace falta un texto que los haga más orientadores - no son una buena ayuda)</div> -<h4 id="bash" name="bash">bash</h4> -<p>You can put the following into your <code>.bashrc</code> file:</p> -<pre>uuidgen-c++() -{ - local UUID=$(uuidgen) - echo "// $UUID" - echo "#define NS__IID \\" - echo "{ 0x${UUID:0:8}, 0x${UUID:9:4}, 0x${UUID:14:4}, \\" - echo -n " { 0x${UUID:19:2}, 0x${UUID:21:2}, 0x${UUID:24:2}, " - echo -n "0x${UUID:26:2}, 0x${UUID:28:2}, 0x${UUID:30:2}, " - echo "0x${UUID:32:2}, 0x${UUID:34:2} } }" -} -</pre> -<h4 id="Perl_2" name="Perl_2">Perl</h4> -<pre>#!/usr/bin/perl -$uuid = `uuidgen`; -chomp $uuid; -print $uuid, "\n"; -@parts = ($uuid =~ /^(.{8})-(.{4})-(.{4})-(..)(..)-(..)(..)(..)(..)(..)(..)$/); -print "{ 0x$parts[0], 0x$parts[1], 0x$parts[2], \\", "\n", " { "; -for (3 .. 9) { - print "0x$parts[$_], "; -} -print "0x$parts[10] } }", "\n"; -</pre> -<p>{{ languages( { "fr": "fr/G\u00e9n\u00e9ration_de_GUID", "ja": "ja/Generating_GUIDs", "pl": "pl/Generowanie_GUID" } ) }}</p> diff --git a/files/es/orphaned/glossary/elemento/index.html b/files/es/orphaned/glossary/elemento/index.html deleted file mode 100644 index c9211e2cd4..0000000000 --- a/files/es/orphaned/glossary/elemento/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: elemento -slug: orphaned/Glossary/elemento -tags: - - Junk -original_slug: Glossary/elemento ---- -<p>Componentes que especifican como los documentos HTML deben ser construidos y que tipo de contenido debe ser posicionado en que lugar de un documento HTML.</p> diff --git a/files/es/orphaned/guía_para_el_desarrollador_de_agregados_para_firefox/index.html b/files/es/orphaned/guía_para_el_desarrollador_de_agregados_para_firefox/index.html deleted file mode 100644 index 5b5ec3c4f5..0000000000 --- a/files/es/orphaned/guía_para_el_desarrollador_de_agregados_para_firefox/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Guía para el desarrollador de agregados para Firefox -slug: orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox -original_slug: Guía_para_el_desarrollador_de_agregados_para_Firefox ---- -<p><em><br> -</em>{{ Next("Firefox addons developer guide/Introduction to Extensions") }}</p> -<p><a class="internal" href="/es/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones" title="Es/Guía para el desarrollador de agregados para Firefox/Introducción a las extensiones">Capítulo 1: Introducción a las extensiones</a></p> -<p><a class="internal" href="/Es/Guía_para_el_desarrollador_de_agregados_para_Firefox/Tecnologías_usadas_en_el_desarrollo_de_extensiones" title="Es/Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones">Capítulo 2: Tecnologías usadas para el desarrollo de extensiones<br> -</a></p> -<p><a class="internal" href="/En/Firefox_addons_developer_guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI" title="En/Firefox Addons Dev Guide/Introduction -to XUL—How to build a more intuitive UI">Chapter 3: Introduction to XUL—How to build a more intuitive UI</a></p> -<p><a class="internal" href="/En/Firefox_addons_developer_guide/Using_XPCOM—Implementing_advanced_processes" title="En/Firefox addons developer guide/Using -XPCOM—Implementing advanced processes">Chapter 4: Using XPCOM—Implementing advanced processes</a></p> -<p><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">Chapter 5: Let's build a Firefox extension</a> </p> -<p><a class="internal" href="/En/Firefox_addons_developer_guide/Firefox_extensions_and_XUL_applications" title="En/Firefox addons developer guide/Firefox -extensions and XUL applications">Chapter 6: Firefox extensions and XUL applications</a></p> -<p><a class="internal" href="/En/Firefox_addons_developer_guide/License_authors" title="En/Firefox addons developer guide/License authors"><strong>License and authors</strong></a></p> -<p>{{ Next("Guía para el desarrollador de agregados para Firefox/Introducción a las extensiones") }}</p> -<p>{{ languages( { "de" : "de/Firefox_addons_developer_guide", "en" : "en/Firefox_addons_developer_guide" }) }}<em><br> -</em></p> -<p><a href="/en:Firefox_addons_developer_guide" title="en:Firefox_addons_developer_guide"><br> -</a></p> diff --git a/files/es/orphaned/guía_para_el_desarrollador_de_agregados_para_firefox/introducción_a_las_extensiones/index.html b/files/es/orphaned/guía_para_el_desarrollador_de_agregados_para_firefox/introducción_a_las_extensiones/index.html deleted file mode 100644 index 4fa2fbf7f4..0000000000 --- a/files/es/orphaned/guía_para_el_desarrollador_de_agregados_para_firefox/introducción_a_las_extensiones/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Introducción a las extensiones -slug: >- - orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones -original_slug: >- - Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones ---- -<p style="text-align: justify;">{{ Draft() }}</p> - -<p>{{ PreviousNext("Guía para el desarrollador de agregados para Firefox", "Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones") }}</p> - -<div class="note"><strong>Nota: </strong>Si desea contribuir en este documento, por favor siga las directivas de la página de <a class="internal" href="/Es/Guía_para_el_desarrollador_de_agregados_para_Firefox/Contribución" title="Es/Guía para el desarrollador de agregados para Firefox/Contribución">Contribución</a>.</div> - -<p><em>Este documento fue creado 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 fue originalmente publicado en japonés para la </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 ya has usado Firefox. Quizás la primera vez que miraste Firefox, te has sorprendido de ver que tiene una estructura mucho más simple que otros exploradores de amplias funcionalidades, como Opera o Safari.</p> - -<p>¿Qué funcionalidades son consideradas estándar en los exploradores web en estos días? Tal vez cosas como controles de pestañas de "granulado fino", gestos con el ratón, botones y barras de herramientas amplias, un lector de fuentes web, integración con una variedad de aplicaciones web, o herramientas sofisticadas para asistir el diseño web. Pero no nos hemos propuesto crear un explorador todo-en-uno que pueda satisfacer a todos.</p> - -<p>En su lugar, Firefox puede soportar esas funcionalidades a través de extensiones. El explorador básico está limitado a funcionalidades básicas, así es algo con lo que un principiante se siente cómodo, pero los usuarios que quieren ir más allá pueden instalar extensiones.</p> - -<h2 id="Acerca_de_las_extensiones">Acerca de las extensiones</h2> - -<h3 id="Manejo_usando_el_administrador_de_complementos">Manejo usando el administrador de complementos</h3> - -<p>El administrador de complementos de Firefox es una excelente forma de manejar las extensiones, y es un gran avance es facilidad de uso.</p> - -<p><img alt="" class="internal" src="/@api/deki/files/3818/=addons-manager.png" style="height: 462px; width: 563px;"></p> - -<p>El administrador de complementos se encarga de las siguientes tareas:</p> - -<ul> - <li>Instalar y desinstalar complementos de mandera segura</li> - <li>Asegurarse de que los complementos sean compatibles con la versión de Firefox en uso</li> - <li>Administrar la lista blanca de sitios en los que se confía para instalar complementos</li> - <li>Ayudar a solucionar problemas de los complementos deshabilitándolos y ofreciéndolos en modo seguro</li> - <li>Confirma y ejecuta actualizaciones</li> - <li>Proveé acceso a las ventanas de configuración de complementos</li> - <li>Proveé acceso a los sitios de soporte de los complementos</li> -</ul> - -<h3 id="Comodidades_para_el_entorno_de_desarrollo">Comodidades para el entorno de desarrollo</h3> - -<p>Inicialmente, no había disponible una documentacíon adecuada, y los desarrolladores de extensiones quedaban en gran medida a su suerte<sup><a href="#footnote1" id="from_footnote1">1</a></sup>; sin embargo, ahora hay una considerable acumulación de conocimientos.</p> - -<p>Como Firefox y sus extensiones están diseñados para soportar múltiples idiomas, llegan excelentes ideas de todo el mundo, y pueden ser rápidamente localizadas por cualquier interesado.</p> - -<p>Esto disminuye el umbral tanto para el uso como para el desarrollo de extesiones; de hecho, combinado con el rápido crecimiento de la popularidad de Firefox, ha creado un bucle de retroalimentación positiva, con e número de usuarios y desarrolladores de extensiones aumentando explosivamente —actualmente hay más de 7000 extensiones y temas publicados en el sitio de Complementos para Firefox (<a class="link-https" href="https://addons.mozilla.org" rel="freelink">https://addons.mozilla.org</a>).</p> - -<h2 id="Qué_puedes_hacer_con_extensiones">Qué puedes hacer con extensiones</h2> - -<p>Let's look at what features extensions can add, and some actual examples of extensions.</p> - -<h3 id="Extensiones_de_una_sola_función">Extensiones de una sola función</h3> - -<p>{{ TODO("Update this") }}.</p> - -<p>These are relatively simple extensions that add a single feature.</p> - -<dl> - <dt><a class="link-https" href="https://addons.mozilla.org/firefox/1939/" title="https://addons.mozilla.org/firefox/1939/">Text Link</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/">Undo Closed Tabs Button</a></dt> - <dd>Adds a toolbar button to re-open the most recently closed tabs to the History menu.</dd> -</dl> - -<dl> - <dd><img alt="1211576231.png" class="default internal" src="/@api/deki/files/3316/=1211576231.png" style="height: 317px; width: 340px;"></dd> -</dl> - -<dl> - <dt><a class="link-https" href="https://addons.mozilla.org/firefox/4014/" title="https://addons.mozilla.org/firefox/4014/">Locationbar</a></dt> - <dd>Separa el dominio y la ruta de la URL en la barra de localización para una lectura más fácil.</dd> - <dd><img alt="locationbar.png" class="default internal" src="/@api/deki/files/3317/=locationbar.png" style="height: 150px; width: 200px;"></dd> -</dl> - -<h3 id="Feature_enhancing_extensions">Feature enhancing extensions</h3> - -<p>{{ TODO("Update this") }}.</p> - -<p>Estas extensiones amplían características ya disponibles en 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>Ofrece configuración detallada sobre las pestañas.</dd> - <dt><a class="external" href="http://prefbar.mozdev.org/" title="http://prefbar.mozdev.org/">PrefBar</a></dt> - <dd>Ofrece acceso a numerosas preferencias sobre la barra de herramientas.<img alt="PrefBar.png" class="default internal" src="/@api/deki/files/3371/=PrefBar.png" style="height: 113px; width: 843px;"></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="Extensiones_de_integración_con_aplicaciones_web">Extensiones de integración con aplicaciones web</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="default internal" src="/@api/deki/files/3372/=Forecastfox.png" style="height: 94px; width: 359px;"></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="default internal" src="/@api/deki/files/3373/=Firebug.gif" style="height: 336px; width: 712px;"></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="default internal" src="/@api/deki/files/3375/=Shiitake%20Mushroom%20(1).png" style="height: 150px; width: 200px;"></p> - -<p>This is a very brief survey of a few extensions, but there are many other unique extensions available.</p> - -<p><strong>Tabla 1: Métodos avanzados de personalización para Firefox</strong></p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Método de personalización</td> - <td class="header">¿Funciona en sitios web?</td> - <td class="header">¿Funciona en Firefox?</td> - </tr> - <tr> - <td>Hojas de estilo de usuario (cambia la apariencia a través de CSS)</td> - <td> - <p>Sí; puedes cambiar el archivo <code>userContent.css</code>, o usar la extensión Stylish.</p> - </td> - <td> - <p>Sí; puedes cambiar el archivo <code>userChrome.css</code>,o usar la extensión Stylish.</p> - </td> - </tr> - <tr> - <td>Usar scripts (cambia la apariencia y funcionalidad a través de JavaScript)</td> - <td> - <p>Sí; puedes usar la extensión GreaseMonkey o "bookmarklets."</p> - </td> - <td> - <p>Sí; puedes cambiar <code>userChrome.js</code> para agregar funcionalidades a través de JavaScript.</p> - </td> - </tr> - <tr> - <td>Extensiones (pueden hacer cualquier cosa)</td> - <td>Sí</td> - <td>Sí</td> - </tr> - <tr> - <td>Temas (cambian la apariencia del explorador)</td> - <td>No</td> - <td>Sí</td> - </tr> - </tbody> -</table> - -<h2 id="Construyamos_una_extensión">Construyamos una extensión</h2> - -<p>La table 1 muestra varias opciones de personalización disponibles para los usuarios en Firefox. Tienen opciones de personalización flexibles, usando CSS en hojas de estilo de usuario y JavaScript/DOM en scripts de usuario (depende de Stylish, GreaseMonkey, y <code>userChrome.js</code>).</p> - -<p>Además de CSS y JavaScript, las extensiones pueden tomar ventaja de las tecnologías XUL y XPCOM para funciones más sofisticadas. Los temas, que alteran la apariencia de Firefox, son una clase de complemento.</p> - -<p>Para crear una extensión, neesitas una idea y un poco de habilidades de programación. Los siguientes capítulos explican en detalle las técnicas de escritura de extensiones de algunos de los principales autores de extensiones japoneses. Te alentamos a que pruebes suerta con ellas.</p> - -<div class="footnotes"> -<div class="note" id="footnote1"><a href="#from_footnote1">1</a> Uno de los autores de esta edición especial, Piro, es mundialmente conocido como uno de los desarrolladores originales.</div> -</div> - -<dl> -</dl> - -<p>{{ PreviousNext("Guía para el desarrollador de agregados para Firefox", "Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones") }}</p> diff --git a/files/es/orphaned/guía_para_la_migración_a_catálogo/index.html b/files/es/orphaned/guía_para_la_migración_a_catálogo/index.html deleted file mode 100644 index 461e300343..0000000000 --- a/files/es/orphaned/guía_para_la_migración_a_catálogo/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Guía para la migración a catálogo -slug: orphaned/Guía_para_la_migración_a_catálogo -tags: - - NeedsContent - - Places -original_slug: Guía_para_la_migración_a_catálogo ---- -<p> -Este documento es para los desarrolladores de aplicaciones y extensiones que tienen código los API de los marcadores y de el historial es Firefox 2 y anteriores y que están migrando a Firefox 3. -</p> -<h2 id="Visi.C3.B3n_general" name="Visi.C3.B3n_general">Visión general</h2> -<p><a href="es/Cat%c3%a1logo">Catálogo</a> es un conjunto de API para la administración del historial de navegación y los meta datos de las URI. Esto incluye historial, marcadores, pestañas, favicons y anotaciones. Existen dos modelos de identidad en el sistema: URI e identificadores únicos para elementos del sistema de marcadores. Algunos de los API están centrados en URI, mientras que otros usan identificadores de elementos. La firma del API y su contexto, generalmente dejan claro qué modelo se requiere. -</p> -<h2 id="Marcadores" name="Marcadores"> Marcadores </h2> -<p>El servicio del toolkit marcadores es {{ Source("toolkit/components/places/public/nsINavBookmarksService.idl", "nsINavBookmarksService") }}: -</p> -<pre>var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]. - getService(Ci.nsINavBookmarksService); -</pre> -<p>EL almacenamiento de los marcadores es jerárquico, sirviendo de modelo a las carpetas y su contenido. Varias carpetas significativas están disponibles como atributos de {{ Interface("nsINavBookmarksService") }}. -</p> -<ul><li> nsINavBookmarksService.placesRoot - La carpeta raíz de la jerarquía. -</li><li> nsINavBookmarksService.bookmarksMenuFolder - El contenido de esta carpeta es visible en el menú Buscadores. -</li><li> nsINavBookmarksService.toolbarFolder - El contenido de esta carpeta está visible en la barra de herramientas Marcadores. -</li><li> nsINavBookmarksService.unfiledBookmarksFolder - Los elementos que han sido marcados con una estrella, pero que no están incluidos en ninguna carpeta. -</li><li> nsINavBookmarksService.tagsFolder - Las sub carpetas de esta carpeta son pestañas y sus hijos son URI que han sido marcadas con ese naombre de carpeta. -</li></ul> -<p>Nota: Este documento cubre el servicio de tolkit Catálogo. Sin embargo, los desarrolladores de Firefox pueden aprovechar diversos API de ayuda que son específicos del navegador: </p> -<ul><li> <a href="es/FUEL">FUEL</a> -</li><li> {{ Source("browser/components/places/public/nsIPlacesTransactionsService.idl", "nsIPlacesTransactionsService") }} -</li><li> <a href="es/Utilidades_Javascript_para_Cat%c3%a1logo">Utilidades_Javascript_para_Catálogo</a> -</li></ul> -<h3 id="Creaci.C3.B3n" name="Creaci.C3.B3n"> Creación </h3> -<p>Crear un Marcador -</p> -<pre>// create an nsIURI for the URL to be bookmarked. -var bookmarkURI = Cc["@mozilla.org/network/io-service;1"]. - getService(Ci.nsIIOService). - newURI("http://www.mozilla.com", null, null); - -var bookmarkId = bookmarks.insertBookmark( - bookmarks.toolbarFolder, // El Id de la carpeta donde se guardará el marcador. - bookmarkURI, // La URI del marcador - un objeto nsIURI. - bookmarks.DEFAULT_INDEX, // La posición del marcador en su carpeta padre. - "my bookmark title"); // El título del marcador. -</pre> -<p>Crear una carpeta -</p> -<pre>var folderId = bookmarks.createFolder( - bookmarks.toolbarFolder, // La id de la carpeta donde se guardará la nueva carpeta. - "my folder title", // El título de la nueva carpeta. - bookmarks.DEFAULT_INDEX); // La posición de la nueva carpeta en su carpeta padre. -</pre> -<p>Crear un separador -</p> -<pre>var separatorId = bookmarks.insertSeparator( - bookmarks.toolbarFolder, // La id de la carpeta donde será puesto el separador. - bookmarks.DEFAULT_INDEX); // La posición del separador en su carpeta padre. -</pre> -<p>Crear un marcador dinámico -</p> -<pre>var IOService = Cc["@mozilla.org/network/io-service;1"]. - getService(Ci.nsIIOService); - -var siteURI = IOService.newURI("http://www.mozilla.com", null, null); -var feedURI = IOService.newURI("http://www.mozilla.org/news.rdf", null, null); - -var livemarks = Cc["@mozilla.org/browser/livemark-service;2"]. - getService(Ci.nsILivemarkService); - -livemarks.createLivemark(bookmarks.toolbarFolder, // La id de la carpeta donde será almacenado el marcador dinámico - "My Livemark Title", // El título del marcador dinámico - siteURI, // La URI del sitio. Un objeto nsIURI. - feedURI, // La URI del Canal. Un objeto nsIURI. - bookmarks.DEFAULT_INDEX); // La posición del marcador dinámico en su carpeta padre. -</pre> -<h3 id="Lectura" name="Lectura"> Lectura </h3> -<h4 id="Propiedades_de_los_elementos" name="Propiedades_de_los_elementos">Propiedades de los elementos</h4> -<p>Para todos los elementos: -</p> -<ul><li> String getItemTitle(aItemId) - XXX -</li><li> Int64 getItemIndex(aItemId) - XXX -</li><li> PRTime getItemType(aItemId) - XXX -</li><li> PRTime getItemDateAdded(aItemId) - XXX -</li><li> PRTime getItemLastModified(aItemId) - XXX -</li><li> Int64 getFolderIdForItem(aItemId) - Devuelve la id de la carpeta que contienen el elemento dado. -</li><li> String getItemGUID(aItemId) - Devuelve un identificador global único del elemento. Esto se usa principalmente en las extensiones, para sincronizar los datos de los marcadores entre diferentes perfiles. -</li></ul> -<p>Para marcadores: -</p> -<ul><li> nsIURI getBookmarkURI(aItemId) - XXX -</li><li> String getKeywordForBookmark(aItemId) - XXX -</li></ul> -<p>Para carpetas: -</p> -<ul><li> Int64 getChildFolder(aFolderId, aSubfolderTitle) - Devuelve la id de la primera sub carpeta que coincide con el título dado. -</li><li> Int64 getIdForItemAt(aFolderId, aPosition) - Devuelve la id del elemento en la posición determinada . -</li><li> Bool getFolderReadonly(aFolderId) -</li></ul> -<h4 id="Contenido_de_las_carpetas" name="Contenido_de_las_carpetas">Contenido de las carpetas</h4> -<p>Las consultas en Catálogo se ejecutan a través del servicio principal de historial. El ejemplo siguiente, muestra como listar el contenido de una carpeta de Marcadores y cómo acceder a las propiedades de cada elemento. -</p> -<pre>var history = Cc["@mozilla.org/browser/nav-history-service;1"]. - getService(Ci.nsINavHistoryService); -var query = history.getNewQuery(); -query.setFolders([myFolderId], 1); - -var result = history.executeQuery(query, history.getNewQueryOptions()); - -// La propiedad raíz del resultado de una consulta es un objeto representando la carpeta que especificaste. -var folderNode = result.root; - -// Abre la carpeta y actúa reiterativamente con su contenido. -folderNode.containerOpen = true; -for (var i=0; i < folderNode.childCount; ++i) { - var childNode = folderNode.getChild(i); - - // Algunas propiedades del elemento. - var title = childNode.title; - var id = childNode.itemId; - var type = childNode.type; - - // Algunas acciones específicas del tipo. - if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) { - - var uri = childNode.uri; - - } - else if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_FOLDER) { - - childNode.QueryInterface(Ci.nsINavHistoryContainerResultNode); - childNode.containerOpen = true; - // ahora puedes actuar reiterativamente sobre el 'hijo' de una carpeta. - - } -} -</pre> -<p>Hay documentación sobre otros tipos de nodo disponible en <a class="external" href="http://mxr.mozilla.org/seamonkey/source/toolkit/components/places/public/nsINavHistoryService.idl">IDL</a>. -</p> -<h4 id="B.C3.BAsqueda" name="B.C3.BAsqueda">Búsqueda</h4> -<h3 id="Actualizaci.C3.B3n" name="Actualizaci.C3.B3n">Actualización</h3> -<p>Para todos los elementos: -</p> -<ul><li> setItemTitle(aItemId, aTitle) - Cambia el título de un elemento. -</li><li> setItemIndex(aItemId, aIndex) - Cambia la posición de un elemento. NOTA: este no cambia los indices de toda la carpeta - para una solución administrada, usa moveItem. -</li><li> setItemDateAdded(aItemId, aDateAdded) - Ajusta la fecha en que fue añadido el elemento por primera vez, en micro segundos. -</li><li> setItemLastModified(aItemId, aLastModified) - Ajusta la fecha en que fue añadido el elemento por última vez, en micro segundos. -</li><li> setItemGUID(aItemId, aGUID) - Devuelve un identificador global único del elemento. Esto se usa principalmente en las extensiones, para sincronizar los datos de los marcadores entre diferentes perfiles. -</li><li> moveItem (aFolderId, aNewParentId, aIndex) - Mueve un elemento de una carpeta a otra. -</li></ul> -<p>Para marcadores: -</p> -<ul><li> changeBookmarkURI(aItemId, aURI) - Cambia la URI del marcador. -</li><li> setKeywordForBookmark(aItemId, aKeyword) - Ajusta la palabra-clave para el marcador. -</li></ul> -<h3 id="Borrado" name="Borrado">Borrado</h3> -<ul><li> Elementos -</li><li> Contenedores -</li></ul> -<h3 id="Observar" name="Observar">Observar </h3> -<h3 id="Importar.2FExportar_en_formato_HTML" name="Importar.2FExportar_en_formato_HTML">Importar/Exportar en formato HTML</h3> -<h3 id="Respaldo.2FRestauraci.C3.B3n" name="Respaldo.2FRestauraci.C3.B3n">Respaldo/Restauración</h3> -<h3 id="Nuevo" name="Nuevo">Nuevo</h3> -<ul><li> Pestañas -</li><li> Anotaciones -</li><li> Búsquedas guardadas -</li><li> Contenedores dinámicos -</li></ul> -<h2 id="Historia" name="Historia">Historia</h2> -<h3 id="Agregar" name="Agregar">Agregar</h3> -<h3 id="Consultas" name="Consultas">Consultas</h3> -<h3 id="Observar_2" name="Observar_2">Observar</h3> -<h3 id="Nuevo_2" name="Nuevo_2">Nuevo</h3> -<div class="noinclude"> -</div> -{{ languages( { "es": "es/Lugares/Gu\u00eda_para_migraci\u00f3n_con_lugares", "fr": "fr/Guide_de_migration_vers_Places", "ja": "ja/Places/Migration_Guide", "en": "en/Places_migration_guide" } ) }} diff --git a/files/es/orphaned/herramientas/index.html b/files/es/orphaned/herramientas/index.html deleted file mode 100644 index 39b4e4d3f5..0000000000 --- a/files/es/orphaned/herramientas/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Herramientas -slug: orphaned/Herramientas -tags: - - Herramientas - - para_revisar -original_slug: Herramientas ---- -<p> </p> -<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Web_Development"><span><span style="">Desarrollo web</span></span></h4> <h5 id="Extensions"><span><span style="">Extensiones</span></span></h5> <dl> <dt><span><a href="/en/Venkman" title="en/Venkman"><span style="">Venkman</span></a></span></dt> <dd><span><span style="">El depurador JavaScript proporciona un potente entorno de depuración de JavaScript para navegadores basados en Mozilla.</span></span></dd> </dl> <dl> <dt><a href="/en/DOM_Inspector" title="en/DOM_Inspector"><span><span style="">Inspector DOM</span></span></a></dt> <dd><span><span style="">Una herramienta de desarrollo utilizada para inspeccionar, examinar y modificar el DOM de documentos - normalmente páginas web o ventanas XUL.</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" title="https://addons.mozilla.org/en-US/firefox/addon/1843"><span><span style="">Firebug</span></span></a></dt> <dd><span><span style="">Integra una gran cantidad de herramientas de desarrollo para editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web ( <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.getfirebug.com%2F&sa=D&sntz=1&usg=AFQjCNEyc4EzUXofVv9S_vhAmGQUczkTSw">detalles</a> )</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" title="https://addons.mozilla.org/en-US/firefox/addon/60"><span><span style="">Web Developer</span></span></a></dt> <dd><span><span style="">Agrega un menú y una barra de herramientas al navegador con varias herramientas de desarrollo web. ( <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fchrispederick.com%2Fwork%2Fweb-developer%2F&sa=D&sntz=1&usg=AFQjCNHJ8M44D_i_pGIzwqlkNOrImQNU2w">detalles</a> )</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/4111" title="https://addons.mozilla.org/en-US/firefox/addon/4111"><span><span style="">Aardvark</span></span></a></dt> <dd><span><span style="">Revela los elementos DOM mientras se mueve el ratón/mouse sobre una página. ( <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.karmatics.com%2Faardvark%2F&sa=D&sntz=1&usg=AFQjCNHv0RxPV-ntEr1Fan_wylejOyhf6g">detalles</a> )</span></span></dd> </dl> <dl> <dt><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4" title="https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4"><span><span style="">Más sobre Firefox Add-ons</span></span></a></dt> </dl> <h5 id="Validators"><span><span style="">Validadores</span></span></h5> <dl> <dt><a href="/en/Tools/Validators" title="en/Tools/Validators"><span><span style="">Lista de validadores</span></span></a></dt> </dl> <h5 id="Authoring_Software"><span><span style="">Software de creación</span></span></h5> <dl> <dt><a href="/en/Standards-Compliant_Authoring_Tools" title="en/Standards-Compliant_Authoring_Tools"><span><span style="">Herramientas de creación que cumplen con los estándares </span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/"><span><span style="">HTMLTidy</span></span></a></dt> <dd><span><span style="">Una herramienta para limpiar HTML</span></span></dd> </dl> </td> <td> <h4 id="JavaScript"><span><span style="">JavaScript</span></span></h4> <table class="topicpage-table"> <tbody> <tr> <td> <dl> <dt><a href="/en/Tools/Scratchpad" title="en/Tools/Scratchpad"><span><span style="">Borrador</span></span></a>{{ gecko_minversion_inline ("6.0") }}</dt> <dd><span><span style="">Un editor de texto integrado en Firefox que te permite editar y ejecutar código JavaScript.</span></span></dd> <dt><a href="/en/Error_Console" title="en/Error_Console"><span><span style="">Consola de errores</span></span></a></dt> </dl> <dl> <dt><a href="/en/Venkman" title="en/Venkman"><span><span style="">Venkman</span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://www.jslint.com/" title="http://www.jslint.com/"><span><span style="">JSLint</span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://jsdoc.sourceforge.net/" title="http://jsdoc.sourceforge.net/"><span><span style="">JSDoc</span></span></a></dt> <dd><span><span style="">herramienta para la generación de documentación (generalmente HTML) a partir de los comentarios de código (similar a JavaDoc).</span></span></dd> </dl> <h4 id="DOM"><span><span style="">DOM</span></span></h4> <dl> <dt><a href="/en/DOM_Inspector" title="en/DOM_Inspector"><span><span style="">Inspector DOM</span></span></a></dt> </dl> <dl> <dt><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html" title="http://slayeroffice.com/tools/modi/v2.0/modi_help.html"><span><span style="">MODI</span></span></a></dt> <dd><span><span style="">Mouseover DOM Inpector es un bookmarklet que te permite ver y manipular el DOM de una página web con sólo pasar el ratón/mouse por el documento.</span></span></dd> </dl> <h4 id="Localization"><span><span style="">Localización</span></span></h4> <dl> <dt><a class="external" href="http://www.mozilla.org/projects/l10n/mlp_tools.html" title="http://www.mozilla.org/projects/l10n/mlp_tools.html"><span><span style="">Herramientas de localización y aprovechamiento</span></span></a></dt> </dl> <h4 id="Tree_and_branch_management"><span><span style="">Gestión de árboles y ramas</span></span></h4> <dl> <dd><a href="../en/Using_cross_commit" title="en/Using_cross_commit"><code>cross-commit</code> script</a></dd> </dl> <h4 id="User_Profile_Tools"><span><span style="">Herramientas de perfil de usuario</span></span></h4> <div><strong><a href="/en/Profile_Manager" title="en/Profile_Manager"><span><span style="">Profile Manager</span></span></a></strong></div> <h4 id="Navegar_por_el_código_base_de_Mozilla"><span><span style="">Navegar por el código base de Mozilla</span></span></h4> <p><span><span style=""><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fmxr.mozilla.org%2F&sa=D&sntz=1&usg=AFQjCNGrg4dzGorguMnILmPWPgZEabuZdw">MXR</a><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/"> </a>(si utilizas vim, mxr-vim acelera el proceso)</span></span></p> <p><a class="external" href="http://dxr.mozilla.org/clang/" title="http://dxr.mozilla.org/clang/"><span><span style="">DXR</span></span></a></p> <dl> <dt> </dt><dd> </dd></dl> </td> </tr> </tbody> </table> </td> </tr> </tbody> -</table> -<p><span><span><span style="">Categorías</span></span></span></p> -<p><span><span><span style="">Interwiki Language Links</span></span></span></p> -<p><span><span style="">{{ languages( { "en": "en/Tools", "fr": "fr/Outils", "ja": "ja/Tools", "pl": "pl/Narz\u0119dzia" } ) }}</span></span></p> diff --git a/files/es/orphaned/html/elemento/datalist/index.html b/files/es/orphaned/html/elemento/datalist/index.html deleted file mode 100644 index 1c7a3f193f..0000000000 --- a/files/es/orphaned/html/elemento/datalist/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: datalist -slug: orphaned/HTML/Elemento/datalist -tags: - - HTML5 -original_slug: HTML/Elemento/datalist ---- -<p>Redirigir <a class="redirect" href="/es/docs/Web/HTML/Elemento/datalist">datalist</a></p> diff --git a/files/es/orphaned/html/elemento/form/index.html b/files/es/orphaned/html/elemento/form/index.html deleted file mode 100644 index c48886a39f..0000000000 --- a/files/es/orphaned/html/elemento/form/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: form -slug: orphaned/HTML/Elemento/form -original_slug: HTML/Elemento/form ---- -<p>a</p> diff --git a/files/es/orphaned/html/elemento/section/index.html b/files/es/orphaned/html/elemento/section/index.html deleted file mode 100644 index 9c52b4916d..0000000000 --- a/files/es/orphaned/html/elemento/section/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Section -slug: orphaned/HTML/Elemento/section -original_slug: HTML/Elemento/section ---- -<div class="geckoVersionNote"> -<h2 id="DEFINICIÓN" style="margin-left: 40px;">DEFINICIÓN:</h2> -</div> - -<h4 id="La_etiqueta_section_proviene_del_idioma_inglés_y_se_traduce_al_español_como_sección.">La etiqueta section proviene del idioma inglés y se traduce al español como sección.</h4> - -<p> </p> - -<div class="geckoVersionNote"> -<h2 id="ETIQUETAS" style="margin-left: 40px;">ETIQUETAS: </h2> -</div> - -<h4 id="<section><section>"><section></section></h4> - -<h4 id="Genera_una_sección_de_contenido_en_el_cuál_podemos_ubicar_dentro_muchos_otros_tipos_de_sección_(nav_article_asideheaderfooter_etc).">Genera una sección de contenido, en el cuál podemos ubicar dentro muchos otros tipos de sección (nav, article, aside,header,footer, etc).</h4> - -<p> </p> - -<div class="geckoVersionNote"> -<h2 id="ATRIBUTOS" style="margin-left: 40px;">ATRIBUTOS:</h2> -</div> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col" style="text-align: center;"> - <h4 id="Atributo"><strong>Atributo</strong></h4> - </th> - <th colspan="2" scope="col" style="text-align: center;"> - <h4 id="Valor"><strong>Valor</strong></h4> - </th> - <th scope="col" style="text-align: center;"> - <h4 id="Descripción"><strong>Descripción</strong></h4> - </th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4"> - <h4 id="Genéricos"><strong>Genéricos</strong></h4> - </th> - </tr> - <tr> - <td><code style="color: green;">title </code></td> - <td>Texto</td> - <td>Implícito</td> - <td>Título consultivo del elemento.</td> - </tr> - <tr> - <td><code style="color: green;">style </code></td> - <td>Declaraciones de estilo</td> - <td>Implícito</td> - <td>Información de estilo en línea.</td> - </tr> - <tr> - <td><code style="color: green;">id </code></td> - <td>Un 'nombre'</td> - <td>Implícito</td> - <td>Identificador único a nivel de documento.</td> - </tr> - <tr> - <td><code style="color: green;">class </code></td> - <td>Lista de clases CSS</td> - <td>implícito</td> - <td>Identificador a nivel de documento.</td> - </tr> - <tr> - <td><code style="color: green;">dir </code></td> - <td>Uno de los siguientes: <code>"ltr"</code> o <code>"rtl"</code></td> - <td>Implícito</td> - <td>Dirección del texto.</td> - </tr> - <tr> - <td><code style="color: green;">lang </code></td> - <td>Código de idioma</td> - <td>Implícito</td> - <td>Información sobre el idioma.</td> - </tr> - <tr> - <td colspan="4"><strong>Eventos</strong>: <code style="color: green;">onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. </code></td> - </tr> - <tr> - <th colspan="4"> - <h4 id="Específicos"><strong>Específicos</strong></h4> - </th> - </tr> - <tr> - <td colspan="4"><strong>Eventos</strong>: <code style="color: green;"> onload, onunload.</code></td> - </tr> - <tr> - <th colspan="4"> - <h4 id="De_transición"><strong>De transición</strong></h4> - </th> - </tr> - <tr> - <th> - <h4 id="atributo"><strong>atributo</strong></h4> - </th> - <th colspan="2" rowspan="1"> - <h4 id="valor"><strong>valor</strong></h4> - </th> - <th> - <h4 id="descripción"><strong>descripción</strong></h4> - </th> - </tr> - <tr> - <td><code style="color: green;">background </code></td> - <td>Una dirección</td> - <td>Implícito</td> - <td>Dirección de la imagen que se usará como fondo.</td> - </tr> - <tr> - <td><code style="color: green;">bgcolor </code></td> - <td>Un color</td> - <td>Implícito</td> - <td>Color del fondo.</td> - </tr> - <tr> - <td><code style="color: green;">text </code></td> - <td>Un color</td> - <td>Implícito</td> - <td>Color del texto.</td> - </tr> - <tr> - <td><code style="color: green;">link </code></td> - <td>Un color</td> - <td>Implícito</td> - <td>Indica el color inicial de los enlaces</td> - </tr> - <tr> - <td><code style="color: green;">alink </code></td> - <td>Un color</td> - <td>Implícito</td> - <td>Indica el color de los enlaces cuando están activos.</td> - </tr> - <tr> - <td><code style="color: green;">vlink </code></td> - <td>Un color</td> - <td>Implícito</td> - <td>Indica el color de los enlaces que han sido visitados.</td> - </tr> - </tbody> -</table> - -<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> - -<pre class="eval language-html"><code class="language-html"> - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" - "http://www.w3.org/TR/html4/strict.dtd"> - <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>title</span><span class="punctuation token">></span></span>Documento html básico<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</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> - - <section> - <article> - <span class="tag token"><span class="tag token"><span class="punctuation token"> <</span>p</span><span class="punctuation token">></span></span>Ejemplo de texto1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> - </article> - <code class="language-html"> <article> - <span class="tag token"><span class="tag token"><span class="punctuation token"> <</span>p</span><span class="punctuation token">></span></span>Ejemplo de texto2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> - </article></span></span></code> - </section> - - <section> -<code class="language-html"><span class="tag token"><span class="punctuation token"> <code class="language-html"> <article> - <span class="tag token"><span class="tag token"><span class="punctuation token"> <</span>p</span><span class="punctuation token">></span></span>Ejemplo de texto3 en un segundo artículo <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> - </article></span></span></code></span></span></code> -<code class="language-html"><span class="tag token"><span class="punctuation token"> </section></span></span></code></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> diff --git a/files/es/orphaned/incrustando_mozilla/comunidad/index.html b/files/es/orphaned/incrustando_mozilla/comunidad/index.html deleted file mode 100644 index 305a0e9c71..0000000000 --- a/files/es/orphaned/incrustando_mozilla/comunidad/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Comunidad -slug: orphaned/Incrustando_Mozilla/Comunidad -original_slug: Incrustando_Mozilla/Comunidad ---- -<p>este comentario considero esta fuera dl tema pero queria saber si hay proceso para instala firefox os en iphone</p> - -<p> </p> diff --git a/files/es/orphaned/instalación_de_motores_de_búsqueda_desde_páginas_web/index.html b/files/es/orphaned/instalación_de_motores_de_búsqueda_desde_páginas_web/index.html deleted file mode 100644 index 764197c8ac..0000000000 --- a/files/es/orphaned/instalación_de_motores_de_búsqueda_desde_páginas_web/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Instalación de motores de búsqueda desde páginas web -slug: orphaned/Instalación_de_motores_de_búsqueda_desde_páginas_web -tags: - - Plugins_de_búsqueda -original_slug: Instalación_de_motores_de_búsqueda_desde_páginas_web ---- -<p>Firefox permite que código de JavaScript instale plugins de motores de búsqueda, los formatos de plugin que soporta son: MozSearch, OpenSearch, y Sherlock. -</p><p>Cuando el código JavaScript intenta instalar un plugin de búsqueda, Firefox muestra una alerta que pide al usuario permiso para instalarlo. -</p> -<h2 id="Instalaci.C3.B3n_de_plugins_MozSearch_y_OpenSearch"> Instalación de plugins MozSearch y OpenSearch </h2> -<p>Para instalar plugin MozSearch o OpenSearch, es necesario usar el método DOM <code>window.external.AddSearchProvider()</code>. La sintaxis para este método es: -</p> -<pre class="eval">window.external.AddSearchProvider(<i>engineURL</i>); -</pre> -<p>Donde <i>engineURL</i> es el URL del archivo XML del plugin del motor de búsqueda. -</p> -<div class="note"><b>Nota</b>: el soporte a OpenSearch y MozSearch está disponible sólo en Firefox 2 y superior.</div> -<p>Para más detalles sobre MozSearch, lease <a href="es/Creaci%c3%b3n_de_plugins_MozSearch">Creación de plugins MozSearch</a>. -</p> -<h2 id="Instalaci.C3.B3n_de_plugins_Sherlock"> Instalación de plugins Sherlock </h2> -<p>Para instalar un plugin Sherlock, hay que llamar a <code>window.sidebar.addSearchEngine()</code>, la sintaxis para hacerlo es: -</p> -<pre class="eval">window.sidebar.addSearchEngine(<i>engineURL</i>, <i>iconURL</i>, <i>suggestedName</i>, <i>suggestedCategory</i>); -</pre> -<ul><li> El parámetro <code>engineURL</code> es el URL del plugin Sherlock a instalar (un archivo ".src"). -</li><li> <code>iconURL</code> es el URL del icono asociado al plugin. -</li><li> El parámetro <code>suggestedName</code> sólo es usado cuando se le pide permiso al usuario para instala el plugin, de modo que pueda mostrarse un mensaje del tipo "¿Desea instalar <i>suggestedName</i> desde <i>engineURL</i>?". -</li><li> El parámetro <code>suggestedCategory</code> no se usa. Se debería especificar una cadena vacía (<code>""</code>) o <code>null</code>. -</li></ul> -<p>Para más detalles sobre Sherlock, visite <a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a> -</p><p><span class="comment">Categorías</span> -</p><p><span class="comment">interwiki links</span> -</p>{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages" } ) }} diff --git a/files/es/orphaned/learn/how_to_contribute/index.html b/files/es/orphaned/learn/how_to_contribute/index.html deleted file mode 100644 index 7c67556d6c..0000000000 --- a/files/es/orphaned/learn/how_to_contribute/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: ¿Cómo contribuir al Área de Aprendizaje en MDN? -slug: orphaned/Learn/How_to_contribute -tags: - - Aprender - - Documentación - - Guía - - MDN Meta - - Principiante - - contribuir - - l10n:priority -translation_of: Learn/How_to_contribute -original_slug: Learn/Como_Contribuir ---- -<div>{{LearnSidebar}}</div> - -<p><br> - <span style="line-height: 1.5;">Si estás aqui, es probable que sea porque estas interesado en contribuir al área de aprendizaje de MDN. ¡Una noticia estupenda!</span></p> - -<p><span class="seoSummary">En esta página encontrarás todo lo que necesitas para comenzar ayudando a mejorar el contenido de aprendizaje en MDN. Hay muchas cosas que puedes hacer, dependiendo de cuanto tiempo tienes y de si eres <a href="/en-US/Learn/How_to_contribute#I'm_a_beginner">principiante</a>, <a href="/en-US/Learn/How_to_contribute#I'm_a_web_developer">desarrollador web</a>, o <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">profesor</a>.</span></p> - -<div class="note"> -<p><strong>Nota:</strong> Si ya eres colaborador de MDN, no dudes en volver a revisar la <a href="/en-US/docs/MDN/Doc_status/Learn">página de status de la documentación</a> para mantener un seguimiento del trabajo que se ha realizado y observar cuáles son nuestras prioridades de escritura.</p> -</div> - -<div class="note"> -<p><strong>Nota:</strong> Los colaboradores usan<a href="https://trello.com/b/LDggrYSV"> tableros de Trello</a> para organizar sus actividades. Si quieres usarlos, no tienes más que <a href="https://trello.com/signup">crearte una cuenta de Trello </a>y avisar a <a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Jeremie</a> para que te deje editar el tablero.</p> -</div> - -<h2 id="Soy_principiante">Soy principiante</h2> - -<p>¡Genial! Los principiantes son muy importantes y valiosos para crear y dar retroalimentación sobre el material de aprendizaje. Tú tienes una perspectiva única sobre estos artículos como miembro de la audiencia a la que están dirigidos, lo cual puede convertirte en un miembro de incalculable valor para nuestro equipo. De hecho, si estás aprendiendo algo de uno de nuestros artículos y te encuentras atascado, o tienes las sensación de que el artículo es algo confuso, puedes modificarlo tú mismo o simplemente informarnos para que podamos resolverlo.</p> - -<p>Colaborar es un gran modo de divertirse mientras se aprenden cosas nuevas. Si alguna vez te sientes perdido o tienes algunas preguntas, no dudes en contactarnos a través de <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nuestra lista de correo </a>o <a href="/en-US/docs/MDN/Community#Get_into_IRC">nuestro canal IRC</a> (ve al final de la página para más detalles).</p> - -<p>A continuación puedes encontrar algunas formas de las que puedes contribuir:</p> - -<dl> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Añade etiquetas a nuestros artículos</a> (<em>5 min</em>)</dt> - <dd>Etiquetar contenido de MDN es una de las formas más sencillas de contribuir a MDN. Como muchas de las características de nuestra plataforma usan etiquetas para ayudar a presentar la información en contexto, la ayuda con el etiquetado es una contribución muy valiosa. Echa un vistazo a la lista de <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">entradas del glosario</a> y a los <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">artículos de aprendizaje</a> sin etiquetas para comenzar.</dd> - <dt><a href="/en-US/docs/Glossary">Lee y revisa una entrada de glosario</a> (<em>15 min</em>)</dt> - <dd>Como principiante, necesitamos que tu vista fresca revise nuestro contenido. Si encuentras alguna entrada del glosario difícil de entender, significa que hay que mejorarla. No dudes en realizar cualquier cambio que estimes oportuno. Si crees que no tienes las habilidades adecuadas para editar la entrada, puedes contactarnos <span style="line-height: 1.5;">a través de </span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">nuestra lista de correo</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escribe una nueva entrada de glosario </a>(<em>1 hora</em>)</dt> - <dd>Esta es la forma más eficaz de aprender algo nuevo. Elige un concepto que quieras comprender y, mientras aprendes, escribe una entrada del glosario sobre dicho concepto. Explicar algo a otros es un buen modo de "fijar" el conocimiento a tu cerebro y de ayudarte a darle sentido a las cosas. Todo mientras ayudas a otras personas. ¡Gana todo el mundo!</dd> - <dt><a href="/en-US/Learn/Index">Lee y revisa un artículo de aprendizaje</a> (<em>2 horas</em>)</dt> - <dd>Esto es bastante similar a revisar entradas del glosario (ver arriba); aunque lleva más tiempo, ya que estos artículos son un poco más largos.</dd> -</dl> - -<h2 id="Soy_desarrollador_web">Soy desarrollador web</h2> - -<p>¡Fantástico! Tus habilidades técnicas son justo lo que necesitamos para asegurarnos de que proporcionamos contenido técnicamente preciso para los principiantes. Como esta parte específica de MDN está dedicada al aprendizaje de la web, asegúrate de explicar las cosas de la forma más sencilla posible. Pero procura no pasarte de sencillez, ya que entonces el contenido deja de ser útil. Es más importante que se comprenda a que sea innecesariamente preciso.</p> - -<dl> - <dt><a href="/en-US/docs/Glossary">Lee y revisa una entrada de glosario</a> (<em>15 min</em>)</dt> - <dd>Como desarrollador web, te necesitamos para asegurarnos de que nuestro contenido es técnicamente correcto sin ser demasiado pedante. No dudes en realizar cualquier cambio que creas necesario. Si quieres debatir sobre el contenido antes de editarlo, danos un toque<span style="line-height: 1.5;"> </span><a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">a nuestra lista de correo</a> o al <a href="/en-US/docs/MDN/Community#Get_into_IRC">canal IRC</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escribe una nueva entrada de glosario</a> (<em>1 hora</em>)</dt> - <dd>Clarificar nuestra jerga técnica es un muy buen modo de aprender y ser técnicamente preciso y simple. La gente con menos experiencia te lo agradecerá. Tenemos <a href="/en-US/docs/Glossary#Contribute">muchos términos indefinidos</a> que necesitan tu atención. Escoge uno y listo.</dd> - <dt><a href="/en-US/Learn/Index">Lee y revisa un artículo de aprendizaje</a> (<em>2 horas</em>)</dt> - <dd>Esto es lo mismo que revisar entradas del glosario (ver arriba); aunque lleva un poco más de tiempo, ya que estos artículos son un poco más largos.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Escribe un nuevo artículo de aprendizaje</a> (<em>4 horas</em>)</dt> - <dd>En MDN hacen falta artículos sencillos y prácticos sobre el uso de tecnologías web (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, etc). Incluso tenemos contenido viejo en MDN que merece ser revisado y reformado. Lleva tus habilidades al límite para lograr que las tecnologías web puedan ser utilizadas incluso por principiantes.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crea ejercicios, ejemplos de código o herramientas de aprendizaje interactivo</a> (<em>? horas</em>)</dt> - <dd>Todos nuestros artículos de aprendizaje requieren lo que nosotros llamamos materiales de "aprendizaje activo", porque la gente aprende mejor haciendo las cosas por sí mismos. Materiales como ejercicios o contenido interactivo que ayude a los usuarios a aplicar y manejar los conceptos detallados en un artículo. Hay muchas formas de crear contenido de aprendizaje activo, desde crear ejemplos de código con <a href="http://jsfiddle.net" rel="external">JSFiddle</a> o similares, hasta crear contenido interactivo completamente hackeable con <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. ¡Libera tu creatividad!</dd> -</dl> - -<h2 id="Soy_profesor">Soy profesor</h2> - -<p>MDN tiene un largo historial de excelencia técnica, pero necesitamos ayuda para mostrar el camino a los principiantes en conceptos técnicos. Aqué es donde entras tú, como profesor o educador. Puedes ayudarnos a asegurar que nuestro material se provee de forma adecuada y práctica para nuestros lectores.</p> - -<dl> - <dt><a href="/en-US/docs/Glossary">Lee y revisa una entrada en el glosario</a> (<em>15 min</em>)</dt> - <dd>Comprueba una entrada en el glosario y siéntete libre de hacer todos los cambios que creas que son necesarios. Si quieres discutir el contenido antes de editarlo, danos un toque en nuestra <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists" style="line-height: 1.5;">lista de correo </a> or <a href="/en-US/docs/MDN/Community#Get_into_IRC">Canal de chat IRC</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escribir una nueva entrada de glosario</a> (<em>1 hora</em>)</dt> - <dd><span id="result_box" lang="es"><span>Las definiciones simples y claras de los términos y las descripciones básicas de los conceptos en el glosario son fundamentales para satisfacer las necesidades de los principiantes.</span> <span>Su experiencia como educador puede ayudar a crear excelentes entradas de glosario;</span> <span>tenemos</span></span> <a href="/en-US/docs/Glossary#Contribute">muchos terminos indefinidos</a> que necesitan de su atención. Escoge uno y ve por él.</dd> - <dt><a href="/en-US/docs/tag/needsSchema">Añadir ilustraciones y/o esquemas a los artículos</a> (<em>1 hora</em>)</dt> - <dd>Como ya sabrás, Las ilustraciones son parte invaluable de cualquier contenido de aprendizaje. Esto es algo que generalmente falta en MDN y tus habilidades pueden haer la diferencia en esta área. Mira en los <a href="/en-US/docs/tag/needsSchema">artículos que le falan contenido ilustrativo</a> y escoge uno al que te gustaría crearle los gráficos.</dd> - <dt><a href="/en-US/Learn/Index">Leer y revisar un artículo de aprendizaje</a> (<em>2 horas</em>)</dt> - <dd><span id="result_box" lang="es"><span>Esto es similar a revisar las entradas del glosario (ver arriba), pero requiere más tiempo ya que los artículos son bastante más largos</span></span> .</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Escribir un nuevo artículo de aprendizaje</a> (<em>4 horas</em>)</dt> - <dd><span id="result_box" lang="es"><span title="We need simple, straightforward articles about the Web ecosystem and other functional topics around it.">Necesitamos artículos simples y directos sobre el ecosistema web y otros temas funcionales a su alrededor. </span><span title="Since these learning articles need to be educational rather than trying to literally cover everything there is to know, your experience in knowing what to cover and how will be a great asset. -">Dado que estos artículos de aprendizaje deben ser educativos en lugar de tratar de cubrir literalmente todo lo que hay que saber, su experiencia en saber qué cubrir y cómo será una gran ventaja</span></span>.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Crear ejercicios, cuestionarios o herramientas interactivas de aprendizaje</a> (<em>? horas</em>)</dt> - <dd><span id="result_box" lang="es"><span title='All our learning articles require what we call "active learning" materials.'>Todos nuestros artículos de aprendizaje requieren lo que llamamos materiales de "aprendizaje activo". </span><span title="Such materials are exercises or interactive content which help a user learn to use and expand upon the concepts detailed in an article.">Dichos materiales son ejercicios o contenido interactivo que ayudan al usuario a aprender a usar y ampliar los conceptos detallados en un artículo. </span><span title="There are lots of things you can do here, from creating quizzes to building fully hackable interactive content with Thimble.">Aquí puede hacer muchas cosas, desde crear concursos hasta crear contenido interactivo completamente pirateable con</span></span> <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. Da rienda suelta a tu creatividad!</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Crea rutas de aprendizaje</a> (<em>? horas</em>)</dt> - <dd><span id="result_box" lang="es"><span title="In order to provide progressive and comprehensible tutorials, we need to shape our content into pathways.">Con el fin de proporcionar tutoriales progresivos y comprensibles, tenemos que dar forma a nuestro contenido en rutas. </span><span title="It's a way to gather existing content and figure out what is missing to create a learning article to write">Es una forma de recopilar contenido existente y descubrir lo que falta para crear un artículo de aprendizaje para escribir</span></span> .</dd> -</dl> diff --git a/files/es/orphaned/learn/html/forms/html5_updates/index.html b/files/es/orphaned/learn/html/forms/html5_updates/index.html deleted file mode 100644 index 064aebe5dd..0000000000 --- a/files/es/orphaned/learn/html/forms/html5_updates/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Formularios en HTML5 -slug: orphaned/Learn/HTML/Forms/HTML5_updates -tags: - - HTML - - HTML5 - - formulários - - para_revisar -translation_of: Learn/HTML/Forms/HTML5_updates -original_slug: HTML/HTML5/Formularios_en_HTML5 ---- -<p>{{ gecko_minversion_header("2") }}</p> -<p>Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programación y diseño que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una mejor experiencia para los usuarios al permitir que estos tengan un comportamiento más coherente entre diferentes sitios web y proporcionar una retroalimentación inmediata acerca de la información ingresada. Asimismo, proporcionan esta experiencia a los usuarios que han deshabilitado el javascript en sus navegadores.</p> -<p>Este documento describe los elementos nuevos o modificados que están disponibles en Gecko/Firefox.</p> -<h3 id="El_elemento_<input>">El elemento <code><input></code></h3> -<p>El elemento <code>{{ HTMLElement("input") }}</code> tiene nuevos valores para el atributo {{ htmlattrxref("type", "input") }}.</p> -<ul> <li><span style="font-family: Courier New;">search</span>: El atributo representa un campo de búsqueda. Los saltos de línea son automáticamente eliminados del valor ingresado pero no se modifica ninguna otra sintaxis.</li> <li><span style="font-family: Courier New;">tel</span>: El atributo representa un control para editar un número de teléfono. Los saltos de línea son automáticamente eliminados del valor ingresado pero no se modifica ninguna otra sintaxis, ya que los números telefónicos varían enormemente en todo el mundo. Puedes usar atributos como {{ htmlattrxref("pattern", "input") }} y {{ htmlattrxref("maxlength", "input") }} para restringir los valores ingresados en el campo.</li> <li><span style="font-family: Courier New;">url</span>: El atributo representa un control para editar una <a class=" external" href="http://es.wikipedia.org/URL" title="http://es.wikipedia.org/URL">URL</a>. Se eliminan los saltos de línea y espacios en blanco antes y después del valor ingresado.</li> <li> <p><span style="font-family: Courier New;">email</span>: El atributo representa una dirección de correo electrónico. Los saltos de línea se eliminan automáticamente del valor ingresado. Puede ingresarse una dirección de correo no válida, pero el campo de ingreso sólo funcionará si la dirección satisface la producción ABNF <span style="font-family: Courier New;"><code><code title="">1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code></code></span> donde <code title="">atext</code> está definida en RFC 5322, sección 3.2.3 y <code title="">ldh-str</code> está definida en RFC 1034, sección 3.5.</p> <div class="note">Nota: si el atributo {{ htmlattrxref("multiple", "input") }} está incluido, pueden ingresarse muchas direcciones de correo electrónico en ese campo {{ HTMLElement("input") }}, como una lista separada por comas, pero no está implementado actualmente en Firefox.</div> </li> -</ul> -<p>El elemento {{ HTMLElement("input") }} también tiene nuevos atributos:</p> -<ul> <li>{{ htmlattrxref("list", "input") }}: el id. de un elemento {{ HTMLElement("datalist") }} cuyo contenido, los elementos {{ HTMLElement("option") }}, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo input.</li> <li>{{ htmlattrxref("pattern", "input") }}: una expresión regular respecto a la cual se comprueba el valor del control, que puede ser usada con valores de {{ htmlattrxref("type", "input") }} de <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code> y <code>email</code>.</li> <li>{{ htmlattrxref("formmethod", "input") }}: una cadena que indica qué método HTTP (GET, POST, PUT o DELETE) debe ser usado cuando se envía; sobrescribe el {{ htmlattrxref("method", "form") }} del elemento {{ HTMLElement("form") }}, si se define. El {{ htmlattrxref("formmethod", "input") }} sólo se aplica cuando el {{ htmlattrxref("type", "input") }} es <span style="font-family: Courier New;">image</span> o <span style="font-family: Courier New;">submit</span>.</li> <li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: una cadena que se muestra como un mensaje de error si el campo no logra validarse. Es una extensión de Mozilla.</li> </ul> -<h3 id="El_elemento_<form>">El elemento <code><form></code></h3> -<p>El elemento {{ HTMLElement("form") }} tiene un nuevo atributo:</p> -<ul> <li>{{ htmlattrxref("novalidate", "form") }}: este atributo evita que el formulario sea validado antes del envío.</li> -</ul><h3 id="El_elemento_<datalist>">El elemento <code><datalist> </code></h3> -<p>El elemento {{ HTMLElement("datalist") }} representa la lista de elementos {{ HTMLElement("option") }} como sugerencias cuando se llena un campo {{ HTMLElement("input") }}.</p> -<p>Puedes usar el atributo {{ htmlattrxref("list", "input") }} en un elemento {{ HTMLElement("input") }} para enlazar a un campo de ingreso específico con un elemento {{ HTMLElement("datalist") }} determinado.</p> -<h3 id="El_elemento_<output>">El elemento <code><output></code></h3> -<p>El elemento <code>{{ HTMLElement("output") }}</code> representa el resultado de un cálculo.</p> -<p>Puedes usar el atributo {{ htmlattrxref("for", "output") }} para especificar una relación entre el elemento output y otros elementos en el documento que afectan el cálculo (por ejemplo, ingreso de datos o parámetros). El valor del atributo {{ htmlattrxref("for", "output") }} es una lista separada por espacios de identificadores de otros elementos.</p><h3 id="El_atributo_placeholder">El atributo placeholder</h3> -<p>El atributo {{ htmlattrxref("placeholder", "input") }} en elementos <code>{{ HTMLElement("input") }}</code> y <code>{{ HTMLElement("textarea") }}</code> proporciona una ayuda a los usuarios acerca de qué debe ingresarse en el campo. El texto introducido en el placeholder no debe contener retornos de carro o saltos de línea.</p><h3 id="El_atributo_autofocus">El atributo autofocus</h3> -<p>El atributo {{ htmlattrxref("autofocus", "input") }} te permite especificar que una parte del formulario debe tener foco para ingresar información cuando se carga la página, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Sólo un elemento del formulario en un documento puede tener el atributo <code>autofocus</code>, que es booleano. Este atributo puede ser aplicado a los elementos <code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code> y <code>{{ HTMLElement("textarea") }}</code>. La excepción es que <code>autofocus</code> no puede aplicarse a un elemento <code><input></code> si el atributo {{ htmlattrxref("type", "input") }} <code>hidden</code> está seleccionado (es decir, no puede enfocar automáticamente un elemento escondido).</p><h3 id="La_propiedad_label.control_del_DOM">La propiedad label.control del DOM</h3> -<p>La interface <a href="/en/DOM/HTMLLabelElement" title="en/DOM/HTMLLabelElement">HTMLLabelElement</a> DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento <code>{{ HTMLElement("label") }}</code> de HTML. La propiedad <strong>control</strong> devuelve el controlador etiquetado, es decir, el controlador para el que está hecha la etiqueta, que está determinado por el atributo {{ htmlattrxref("for", "label") }} (si está definido) o por el primer elemento controlador descendiente.</p><h3 id="Validación_restringida">Validación restringida</h3> -<p>El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada.</p> -<p>Si se ajusta el atributo <code>title</code> al elemento {{ HTMLElement("input") }}, esa cadena se mostrará en una ventana emergente de ayuda cuando falle la validación. Si <code>title</code> se ajusta a una cadena vacía, no se mostrará ninguna ventana emergente. Si el atributo <code>title</code> no se configura, en su lugar se mostrará el mensaje de validación estándar (como especifica el atributo {{ htmlattrxref("x-moz-errormessage") }} o llamando al método <code>setCustomValidity()</code>).</p> -<div class="note"><strong>Note:</strong> la validación restringida no es compatible con los elementos {{ HTMLElement("button") }} en un formulario; si quieres aplicar estilo a un botón basado en la validez del formulario asociado, usa la seudoclase {{ cssxref(":-moz-submit-invalid") }}.</div> -<h4 id="Sintaxis_de_HTML_para_la_validación_restringida">Sintaxis de HTML para la validación restringida</h4> -<p>Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.</p> -<ul> <li>El atributo {{ htmlattrxref("required", "input") }} en los elementos {{ HTMLElement("input") }}, {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }} indica que se debe ingresar algún dato. (En el elemento {{ HTMLElement("input") }}, {{ htmlattrxref("required", "input") }} solo se aplica con ciertos valores del atributo {{ htmlattrxref("type", "input") }}.)</li> <li>El atributo {{ htmlattrxref("pattern", "input") }} en el elemento {{ HTMLElement("input") }} restringe el valor para que concuerde con una expresión regular específica.</li> <li>Los atributos {{ htmlattrxref("min", "input") }} y {{ htmlattrxref("max", "input") }} del elemento {{ HTMLElement("input") }} restringen los valores máximos y mínimos que pueden ser ingresados.</li> <li>El atributo {{ htmlattrxref("step", "input") }} del elemento {{ HTMLElement("input") }} (cuando se usa en combinación con los atributos {{ htmlattrxref("min", "input") }} y {{ htmlattrxref("max", "input") }}) restringe la granularidad de los valores ingresados. Un valor que no se corresponda con un valor permitido no será validado.</li> <li>El atributo {{ htmlattrxref("maxlength", "input") }} de los elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} restringe el máximo número de caracteres (en puntos de código unicode) que el usuario puede ingresar.</li> <li>Los valores <code>url</code> y <code>email</code> para {{ htmlattrxref("type", "input") }} restringen el valor para una URL o dirección de correo válida respectivamente.</li> -</ul> -<p>Además, puedes evitar la validación restringida especificando el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, o el atributo {{ htmlattrxref("formnovalidate", "button") }} en el elemento {{ HTMLElement("button") }} y en el elemento {{ HTMLElement("input") }} (cuando {{ htmlattrxref("type", "input") }} es <code>submit</code> o <code>image</code>). Estos atributos indican que el formulario no será validado cuando se envie.</p><h4 id="API_de_validación_restringida">API de validación restringida</h4> -<p>Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:</p> -<ul> <li>En objetos <code><a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> el método <code>checkValidity()</code>, que devuelve verdadero si todos los elementos asociados del formulario que necesitan validación satisfacen las restricciones, y falso si no lo hacen,</li> <li>En <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content Categories#form-associated">elementos asociados al formulario</a>: <ul> <li>la propiedad <code>willValidate</code>, que es falso si el elemento no satisface las restricciones.</li> <li>la propiedad <code>validity</code>, que es un objeto <code><a href="../../../../en/DOM/ValidityState" rel="internal">ValidityState</a></code> que representa los estados de validación en que está el elemento (p. ej., condiciones de restricción que han fallado o exitosas).</li> <li>la propiedad <code>validationMessage</code>, que es un mensaje que contiene todas las fallas o errores en las restricciones que pertenecen a ese elemento.</li> <li>el método <code>checkValidity()</code>, que devuelve falso si el elemento no logra satisfacer alguna de las restricciones, o verdadero si pasa lo contrario.</li> <li>el método <code>setCustomValidity()</code>, que establece un mensaje de validación personalizado, permitiendo imponer y validad restricciones más allá de las que están predefinidas.</li> </ul> </li> -</ul> -<p>{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5"}) }}</p> -<p>{{ HTML5ArticleTOC() }}</p> diff --git a/files/es/orphaned/localizar_con_narro/index.html b/files/es/orphaned/localizar_con_narro/index.html deleted file mode 100644 index 86afb27001..0000000000 --- a/files/es/orphaned/localizar_con_narro/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Localizar con Narro -slug: orphaned/Localizar_con_Narro -tags: - - Localization:Tools - - l10n - - narro -original_slug: Localizar_con_Narro ---- -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Narro es una práctica herramienta web de traducción que está disponible para los localizadores de los proyectos de Mozilla. Con Narro puedes traducir las aplicaciones de Mozilla en linea y exportando los archivos en ficheros .ZIP o generando archivos .XPI (paquete de idioma) los cuales pueden ser instalados localmente para ser probados. Después de la creación de un proyecto Narro utiliza la “Memoria de traducción” (MT) de tus traducciones para aprovechar el contenido ya traducido.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">La función MT te permite centrarte en las nuevas cadenas sin traducir y no enfocandote en la re-traducción de las cadenas de las versiones previamente traducidas.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Este documento te guiará por el proceso de la creación de una nueva localización y proyecto en Narro. Usando Firefox como ejemplo, vamos a cubrir la forma en como iniciar un proyecto en Narro, como usar Narro para traducir la aplicación y como exportar tus traducciones para pruebas localmente en Firefox.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para aprender acerca de las actualizaciones y cambios del proyecto Narro vista el </span><a class=" external" href="http://narro-project.blogspot.com/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">proyecto Narro</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y el sitio de la </span><a class=" link-https" href="https://l10n.mozilla-community.org/narro/projects.php?l=bg"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">herramienta basada en web.</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> A continuación encontrarás que son un requisito previo para localizar en Narro.</span></p> -<p> </p> -<h2 id="Registrándose_en_Narro">Registrándose en Narro</h2> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Antes de hacer cualquier otra cosa en Narro, es necesario configurar tu cuenta de usuario. Al hacer clic en el enlace en la esquina superior derecha de la página de inicio Narro te llevará a donde puedas registrar tu cuenta de usuario. Una vez que hayas registrado y conectado, podrás ver todos los diferentes lugares disponibles para trabajar en en el menú desplegable en la esquina superior derecha.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para nuestros ejemplos, vamos a llamar a nuestra nueva localización X-prueba. Realiza los siguientes pasos para configurar tu nueva localización.</span></p> -<p><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Alternativamente, si tu localización no existe, ponte en contacto con tu </span><a class=" link-https" href="https://wiki.mozilla.org/Category:L10n_Teams"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">comunidad l10n</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y pregunta acerca de cómo puedes participar!</span></p> -<ol> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Contacta con los administradores de l10n Mozilla l10n utilizando la </span><a href="/es/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">lista de distribución dev-l10n</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> para preguntar si tu localización ya existe.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Si no existe, envía un correo electrónico a </span><a href="/es/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">dev-l10n lista de correo</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y solicita al administrador de Narro para iniciar una nueva localización en Narro para tu localización. En tu mensaje, por favor proporciona la siguiente información:</span> <ul> <li style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> tu nombre de usuario.</span></li> <li style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> tu idioma.</span></li> <li style="list-style-type: disc; font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> un regalo. Los productos recién horneados son siempre un buen regalo ;).</span></li> </ul> Alternativamente, si tu localización no existe, ponte en contacto con tu comunidad l10n y pregunta acerca de cómo puedes participar!</li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Después de hacer esto, debes recibir los derechos de mantenimiento (es decir, exportación, importación y permisos de aprobación) para la nueva localización.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Después de recibir estos derechos, salir y entrar de nuevo para activarlos.</span></li> -</ol> -<p><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">La imagen de abajo es la pantalla que verá una vez que se conecte a activar sus derechos de mantenimiento.</span></p> -<p><a href="/@api/deki/files/5836/=manage_a_locale.png"><img alt="" class="internal default" src="/@api/deki/files/5836/=manage_a_locale.png" style="width: 1053px; height: 576px;"></a></p> -<p> </p> -<h2 id="Importar">Importar</h2> -<div class="note">Nota: Si ya te has unido a algún proyecto de localización existente, puedes saltarte este paso. Es decir, a menos que estés interesado en aprender acerca de cómo funciona la utilidad de importación, en tal caso continua con este paso..</div> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Cuenta de usuario creada: Listo. Proyecto de localización creada por el administrador global: Listo. Activado los derechos de mantenimiento para tu nueva localización: Listo. ¡Felicidades, ya estás listo para importar los archivos fuentes del proyecto Firefox!. La utilidad de importación ubicada en la pestaña Import de tu proyecto Firefox, te dará varias opciones para la importación de archivos para la traducción. ¡Lo bueno de esta utilidad es que es completamente automática!. Tú solo tienes que importar manualmente los archivos fuentes y luego nunca más tienes que preocuparte por hacer esto. La utilidad de importación importa los archivos cada noche, de modo que si tu cadena fué agregada o modificada durante el día la seguirás viendo en tu lista de no traducidos hasta el día siguiente.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Ahora vamos a repasar cómo configurar la utilidad de importación en tu proyecto.</span></p> -<p> </p> -<ol> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> Verás una lista de enlaces de proyectos inactivos con varios nombres (</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Firefox Aurora</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">, </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Firefox Release</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">, etc.) Hazle clic en el enlace del proyecto que tu quieras activar. En este caso le hacemos clic en </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Firefox Aurora</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Por defecto, está tomada la pestaña de descripción del proyecto. Navega a la etiqueta </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Import </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">para encontrar la utilidad de importación.</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Una vez ahí, encontarás estas secciones de importación:</span> <ul> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Texts.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para importar los archivos fuentes (por ejemplo desde en-US).</span></li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Translations.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para la importación de proyectos ya existentes</span>.</li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Options.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Casillas de verificación para configurar la importación</span>.</li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Operation log.- </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Descripción de la función de Importación que está siendo ejecutada.</span></li> </ul> </li> <li><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Por ahora nos vamos a centrar solo en las secciones </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Texts </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">y</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> Options. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En la sección </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Texts </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">verás la localización por defecto con los archivos fuente actualizados cada noche por tu proyecto. Asegurate de que las casillas de verificación en </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Options </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">están destiqueadas para esta importación.</span></li> <li>C<span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">lic en el botón </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Import. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">El </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Operation log </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">mostrará un mensaje una vez que la importación haya sido completada satisfactoriamente.</span></li> -</ol> -<p><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En la imágen de abajo es lo que deberás ver cuando se complete la importación.</span></p> -<p><a href="/@api/deki/files/5828/=Import.png"><img alt="" class="internal default" src="/@api/deki/files/5828/=Import.png" style="width: 984px; height: 532px;"></a></p> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">¡¡Ahora ya estás listo para comenzar a traducir tu proyecto!!</span></p> -<p> </p> -<h2 id="Traducción">Traducción</h2> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Con la nueva localización entablecida en Narro, tu puedes ahora iniciar la traducción en linea. Una forma rápida de iniciar es hacer clic en la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Translate </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">y te llevará a una pantalla con un conjunto de contenido sin traducir. Las nuevas importaciones de Firefox Aurora (como Firefox 7) contiene 5,671 cadenas en Inglés.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Irónicamente, la primera vez que comienzas a traducir podrás ver las primeras entradas algunos de los archivos </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">region.properties </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">ese archivo </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: italic; font-variant: normal; text-decoration: none; vertical-align: baseline;">no debe ser traducido</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> usando Narro. Encontrarás algunas de esas entradas a medida que avanza en la traducción. Una buena guía para ayudarte a distinguir entre las cadenas traducibles y lo no-traducibles es ver si la cadena puede ser categorizada como uno de los siguientes:</span></p> -<ul> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Si es el nombre de un producto, no se traduce.</span></li> <li>C<span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">ualquier cadena con código puro (ej. %s), no se traduce.</span></li> -</ul> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Cualquier cadena que no caiga dentro de esas dos categorias es traducible. Avanzar con las cadenas traducibles para iniciar la traducción.</span></p> -<p><a href="/@api/deki/files/5832/=Texts.png"><img alt="" class="internal default" src="/@api/deki/files/5832/=Texts.png" style="width: 1106px; height: 608px;"></a></p> -<p><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para el ejemplo de este documento empezaremos a buscar las cadenas de dos diferentes tipos de archivos (los archivos DTD y archivos property). Vamos a hacer cambios a las cadenas de modo que podrás ver el cambio en la interfaz de usuario.</span></p> -<h3 id="Ejemplo_1_Los_archivos_DTD_searchbar.dtd">Ejemplo 1: Los archivos DTD, "searchbar.dtd"</h3> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Narro te permite buscar cadenas en particular. Para este ejemplo buscaremos el archivo DTD (a menudo se llama una entidad) llamado </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">searchbar.dtd </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">que contiene la cadena </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines... </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Tu puedes </span><span style="font-size: 12pt; font-family: Arial; color: #333333; background-color: #f5f5f5; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">encontrar fácilmente esta cadena en la interfaz de usuario del navegador al hacer clic en el menú desplegable en el cuadro de búsqueda en la esquina superior derecha de tu navegador. Echa un vistazo a la imagen de abajo. En la parte inferior de la lista de botones de búsqueda que aparece podrás ver </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines...</span></p> -<p><a href="/@api/deki/files/5837/=Add_%25252525S.png"><img alt="" class="internal default" src="/@api/deki/files/5837/=Add_%25252525S.png"></a></p> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Así es como podrás usar Narro para traducir el elemento </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines...</span></p> -<p dir="ltr" style="text-indent: 36pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">1. Navega en la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Translate </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">dentro del proyecto Firefox Aurora.</span></p> -<p dir="ltr" style="text-indent: 36pt; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">2. Ingresa la cadena “Manage Search Engines... ” en el campo </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Search for</span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y da clic en </span><span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Search.</span></p> -<p><br> <span style="font-size: 11pt; font-family: Arial; color: #333333; background-color: #ffffff; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Después de ingresar en la cadena y haciendo clic en “Search”, Narro te muestra la cadena que estabas buscando.</span></p> -<p><a href="/@api/deki/files/5833/=Manage_Search_Engines.png"><img alt="" class="internal default" src="/@api/deki/files/5833/=Manage_Search_Engines.png" style="width: 1109px; height: 250px;"></a></p> -<p style="margin-left: 40px;"><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">3. Clic en el cuadro de texto debajo del resultado de búsqueda. Esto ampliará el cuadro de texto y lo resaltará en verde para mostrar el registro activo.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">4. Entra en la traducción y presiona el botón save.</span></p> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En el ejemplo de abajo verás el elemento </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Manage Search Engines... </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">que ha sido traducido a </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">MANAGE SEARCH ENGINES</span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Verás también debajo del ícono de guardado que existen dos cadenas adicionales. Estos son mostrados desde una traducción anterior y desde otras traducciones que miembros de tu comunidad pueden haber proporcionado. Los botones verdes y rojos a la derecha te permiten aprobar o eliminar una traducción de la entrada activa. Una traducción aprobada es introducida en la memoria de traducción. No recomendamos aprobar traducciones hasta que estén en su estado final. Para nuestro ejemplo guardas la cadena haciendo clic en el ícono de guardado verde que está a la derecha.</span></p> -<p><a href="/@api/deki/files/5831/=approved_translation.png"><img alt="" class="internal default" src="/@api/deki/files/5831/=approved_translation.png" style="width: 1109px; height: 345px;"></a></p> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">A medida que traduces estos tipos de archivos DTD, puedes exportar periódicamente un archivo .xpi (también conocido como paquete de idioma) que puedes instalar en Firefox. Hablaremos sobre como hacerlo en una sección posterior de este manual. La próxima vez que instales el paquete de idioma de prueba, verás la cadena "MANAGE SEARCH ENGINES" traducida en la interfaz de tu versión local de Firefox.</span></p> -<h3 id="Ejemplo_2_Los_Archivos_Property_search.properties">Ejemplo 2: Los Archivos Property, "search.properties"</h3> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Los archivos Properties search.properties contienen la cadena </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Add %S. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Puedes encontrar facilmente esta cadena en la interfaz del navegador visitando un sitio web que procea de un plugin de búsqueda (como </span><a href="../"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">http://developer.mozilla.org/</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">) y haciendo clic en el menú desplegable en la caja de búsqueda en la esquina superior derecha del navegador. Dale un vistazo a la imagen de abajo. Ahí verás el </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Add %S, </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">donde </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">%S </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">es reemplazado por el nombre del sitio.</span></p> -<p><a href="/@api/deki/files/5837/=Add_%25252525S.png"><img alt="" class="internal default" src="/@api/deki/files/5837/=Add_%25252525S.png"></a></p> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Traducir las cadenas de los archivos Property es exactamente lo mismo que traducir los archivos DTD. Pero este ejemplo en particular simplemente se refiere a los pasos del ejemplo uno, reemplazando la cadena “Administar motores de búsqueda...” con el “Add %S” . Al igual que con el archivo DTD tu puedes exportar periodicamente un archivo .xpi que puedes instalar en Firefox para ver tus cadenas traducidas guardadas. </span></p> -<h2 id="Exportando_un_paquete_de_idioma_.xpi">Exportando un paquete de idioma .xpi</h2> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Felicidades! ahora que ya has traducido y guardado varias cadenas, vamos a exportar esas cadenas traducidas para que veas tus traducciones en tu navegador Firefox Aurora.</span><br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">La utilidad de exportación en la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">te dá algunas opciones diferentes para la exportación. Algunas opciones son para probar tus traducciones, otras son para que tu traducción final aprobadas que serán incorporadas en la próxima versión de Firefox. Para nuestro ejemplo, nos vamos a concentrar en exportar tu traducción paquete de idioma .xpi</span></p> -<ol> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Ir a la pestaña </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export. </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">En la siguiente imágen se ilustra lo que verás cuando estés en esta pestaña</span> <p> </p> <p><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"><a href="/@api/deki/files/5834/=export.png"><img alt="" class="internal default" src="/@api/deki/files/5834/=export.png" style="width: 1076px; height: 291px;"></a></span></p> </li> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Seleccionar la opción </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Approved suggestion </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">del menú desplegable </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export translations using</span></li> <li>C<span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">lic en el botón </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: bold; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Export.</span></li> <li><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Una vez la barra de estado esté completa, verás que te aparecen los enlaces .zip, .html, y .xpi. Dale clic en el enlace .xpi para guardarlo en tu disco.</span></li> -</ol> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">El paquete de idioma .xpi es construido cada vez que tu exportas tu traducción. Todas las cadenas no traducidas son exportadas en en-US como parte de tu paquete de idioma. Esto te permitirá que vayas probando el progreso de tu trabajo sobre la marcha.</span><br> <br> <span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Cuando exportas archivos, la estructura del código fuente de Mozilla se conserva. En cualquier momento durante la traducción, puedes exportar el paquete en-US.zip por si quieres ver la estructura del código fuente de Firefox de los archivos con cadenas en-US.</span></p> -<div class="warning">Aviso: No usar el comando <code>hg push</code> ya que esto es sólo para pruebas locales.</div> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Para saber como probar tu reciente paquete de idioma exportado, visita el tema </span><a href="../en/Create_a_new_localization#Testing_your_language_pack"><span style="font-size: 11pt; font-family: Courier New; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">Testing your language pack</span></a><span style="font-size: 11pt; font-family: Courier New; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> </span><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">en la wiki de</span><a href="../en/Create_a_new_localization"><span style="font-size: 11pt; font-family: Courier New; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">Create a new localization</span></a></p> -<p> </p> -<h2 id="Exportación_Final">Exportación Final</h2> -<p><span id="internal-source-marker_0.5117014449713394" style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Una vez que has completado tu traducción, </span><a class=" link-https" href="https://wiki.mozilla.org/L10n:Becoming_an_Official_Localization#Preparation"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">revísala y pruébala</span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;"> y será el momento para hacer la exportación final (en formato .zip) para enviarlo a Mozilla. Para hacer esto envía un email a la </span><a class=" external" href="http://mailto:dev-l10n@lists.mozilla.org/"><span style="font-size: 11pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">lista de correo dev-l10n </span></a><span style="font-size: 11pt; font-family: Arial; color: #000000; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">o al administrador global de Narro pidiendo asistencia. </span></p> -<div class="note">Por favor ten en cuenta que el Mozilla l10n-drivers ha producido el <a class=" link-https" href="https://l10n-stage-sj.mozilla.org/dashboard/"><span style="font-size: 12pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">l10n dashboard</span></a> para seguir el progreso de todas las localizaciones de Mozilla. Esto está basado en una poderosa herramienta llamada<a href="../en/Compare-locales"><span style="font-size: 12pt; font-family: Arial; color: #000099; background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: underline; vertical-align: baseline;">Compare-Locales</span></a>. Si tu eliges utilizar Narro para tu localización, sé conciente de que narro invalida el dashboard de seguimiento de presición del proyecto debido a la forma en que Narro maneja las cadenas y las exporta.</div> diff --git a/files/es/orphaned/mdn/community/index.html b/files/es/orphaned/mdn/community/index.html deleted file mode 100644 index b143cd7554..0000000000 --- a/files/es/orphaned/mdn/community/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Únete a la comunidad de MDN web docs -slug: orphaned/MDN/Community -tags: - - Comunidad - - Documentación - - Guía - - Proyecto MDC -translation_of: MDN/Community -original_slug: MDN/Comunidad ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/es/docs/MDN")}}</div> - -<div class="summary"> -<p>La documentación de la web de MDN (MDN web docs) es más que un wiki: Es una comunidad de desarrolladores que trabajan unidos para hacer que MDN sea un excelente recurso para todos los desarrolladores que usen cualquier tecnología de la Open Web.</p> -</div> - -<p>Nos gustaría mucho que contribuyeras a MDN, pero nos encantaría si además de contribuir participaras en la comunidad de MDN. Aquí te explicamos cómo ponerte en contacto en tres sencillos pasos:</p> - -<ol> - <li><a href="/es/docs/MDN/Contribute/Howto/Crear_cuenta_MDN">Crear cuenta MDN</a>.</li> - <li><a href="/en-US/docs/MDN/Community/Conversations">Join in conversations (aun no disponible en español)</a>.</li> - <li><a href="/es/docs/Project:MDN/Contribuyendo/Siga_lo_que_está_pasando">Siga lo que está pasando</a>.</li> -</ol> - -<h2 id="Cómo_funciona_la_comunidad">Cómo funciona la comunidad</h2> - -<p>Aquí encontraras más artículos que describen a la comunidad de MDN.</p> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Roles">Community roles</a></dt> - <dd class="landingPageList">No disponible en español por el momento.</dd> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Doc_sprints">Doc sprints</a></dt> - <dd class="landingPageList">No disponible en español por el momento</dd> - <dt class="landingPageList"><a href="/es/docs/Project:MDN/Contribuyendo/Siga_lo_que_está_pasando">Siga lo que está pasando</a></dt> - <dd class="landingPageList">MDN es auspiciado por <a class="external" href="https://wiki.mozilla.org/MDN"> La comunidad de la red de desarrolladores de Mozilla</a>. Aquí encontraras algunas maneras por las cuales compartimos información acerca de lo que estamos haciendo.</dd> -</dl> - -<dl> -</dl> -</div> - -<div class="section"> -<dl> - <dt class="landingPageList"><a href="/en-US/docs/MDN/Community/Conversations">MDN community conversations</a></dt> - <dd class="landingPageList">no disponible en español por el momento</dd> - <dt class="landingPageList"><a href="/es/docs/MDN/Contribute/Community">Trabajar con nuestra comunidad</a></dt> - <dd class="landingPageList">Una gran parte de contribuir a la documentación de MDN en cualquier aspecto es saber cómo trabajar dentro de la comunidad MDN. Este artículo te ofrece tips para ayudarte a aprovechar las interacciones con otros colaboradores y con los equipos de desarrolladores.</dd> -</dl> -</div> -</div> diff --git a/files/es/orphaned/mdn/community/working_in_community/index.html b/files/es/orphaned/mdn/community/working_in_community/index.html deleted file mode 100644 index f71d57ce2d..0000000000 --- a/files/es/orphaned/mdn/community/working_in_community/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Trabajando con nuestra comunidad -slug: orphaned/MDN/Community/Working_in_community -tags: - - Comunidad - - Guía - - MDN Meta -translation_of: MDN/Community/Working_in_community -original_slug: MDN/Contribute/Community ---- -<div>{{MDNSidebar}}</div> - -<p>Lo más importante para contribuir a la documentacion de MDN en cualquier escala es saber trabajar como parte de una comunidad. Este artículo brinda tips que te ayudarán a sacarle el máximo partido a tus interacciones con documentadores y el equipo de desarrolladores.</p> - -<h2 id="Reglas_generales_de_comportamiento.">Reglas generales de comportamiento.</h2> - -<p>Aquí encontraras algunas reglas generales de conducta para cuando trabajes en la comunidad Mozilla.</p> - -<ul> - <li>¡Se cortés! Incluso cuando no estés acuerdo, todos tenemos la misma misión: el mejoramiento de la Web.</li> - <li>Pide, no exijas. Es mucho más probable que las personas sean útiles y receptivas cuando solicita ayuda cortésmente en lugar de exigirla. Si bien el trabajo de documentación es importante, y nuestra comunidad de desarrolladores lo sabe, el instinto humano tiende a hacer que las personas sean agresivas y difíciles si no las tratas con el debido respeto.</li> - <li>Equilibra tu necesidad de información con la urgencia de la documentación y el tiempo que los demás participantes en tu discusión dedican a ayudarte. No sigas presionando para obtener más y más detalles si no es terriblemente urgente y necesario, hasta el punto de volver locos a los demás involucrados en la conversación.</li> - <li>Ten en cuenta que tu solicitud toma un tiempo valioso de las personas con las que estás contactando, así que asegúrate de aprovechar bien su tiempo.</li> - <li>Se consciente de las diferencias culturales. Mozilla es un equipo multinacional y multicultural, así que cuando hables con alguien cuya cultura sea o pueda ser, diferente a la tuya, ten en cuenta eso mientras se comuniquen.</li> - <li>Inicia una conversacion nueva en vez de entrometerte en una existente. No pongas tus preguntas en una conversación sin relacion solo porque la gente con la que necesitas hablar está prestándole atención; mientras que esto podría ser conveniente para ti, esto puede molestar a las personas con las que intentas hablar, dando lugar a una experiencia lejos de ser ideal.</li> - <li>Evita {{interwiki("wikipedia", "bikeshedding")}} (trivialidad). No permitas que tu entusiasmo se transforme en una molesta pedanteria, esto hace las conversaciones desenfocadas y engorrosas.</li> -</ul> - -<h2 id="Se_cortés">Se cortés</h2> - -<p>Siempre se diplomático y respetuoso cuando te comuniques con los demás.</p> - -<h3 id="Señalando_errores_cortésmente">Señalando errores cortésmente</h3> - -<p>Si tu propósito al contactar a alguien es pedirle que haga algo diferente o señalar un error que ha estado cometiendo (especialmente si lo hace repetidamente), comienza tu mensaje con un comentario positivo. Esto suaviza el golpe, por así decirlo, y demuestra que estás tratando de ayudar, en lugar de convertirte en 'el malo de la película'.</p> - -<p>Por ejemplo, si un colaborador nuevo ha estado creando muchas páginas sin etiquetas y te gustaría señalar este problema, tu mensaje podría verse así (las cosas que necesita cambiar para cada caso están subrayadas) :</p> - -<blockquote> -<p>Hola, <u>MrBigglesworth</u>, he notado sus contribuciones <u>a la documentación de la API de Wormhole</u>, ¡y es fantástico contar con su ayuda! Me gusta especialmente <u>la forma en que equilibraste tu nivel de detalle con la legibilidad</u>. Dicho esto, sin embargo, podría hacer que estos artículos sean aún mejores y más útiles si <u>agrega las etiquetas correctas a las páginas</u> sobre la marcha.</p> - -<p><u>Consulte la guía de etiquetado de MDN (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) para obtener más detalles.</u></p> - -<p>Gracias de nuevo y espero sus futuras contribuciones.</p> -</blockquote> - -<h2 id="Intercambiando_conocimiento">Intercambiando conocimiento</h2> - -<p>Al participar en el proyecto MDN, es útil saber lo que está pasando e interactuar con otros los demas miembros de nuestra comunidad. Al hacer esto, puedes compartir ideas, actualizaciones de estado y más. Además contamos con recursos y herramientas para ayudarte a saber que se está haciendo y por quiénes.</p> - -<h3 id="Canales_de_comunicación">Canales de comunicación</h3> - -<p>Existen varias formas en las que puedes participar con los miembros de la comunidad, ya sea con documentadores o desarrolladores, cada uno de los cuales tiene sus propias reglas de comportamiento.</p> - -<h4 id="Discourse_en_Inglés">Discourse (en Inglés)</h4> - -<p>El foro <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse </a>es un buen lugar para hacer preguntas generales sobre la contribución a MDN y empezar discusiones.</p> - -<h4 id="Chat_en_Inglés">Chat (en Inglés)</h4> - -<p>Utiliza el sistema de chat Matrix para contactar con personas en tiempo real. Los miembros del personal de MDN están disponibles en la sala de <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs </a> y están activos durante los días laborales en Europa y América del Norte. Explora las otras salas de chat para encontrar personas involucradas en temas que te interesen.</p> - -<h4 id="GitHub_en_Inglés">GitHub (en Inglés)</h4> - -<p>Si encuentras un problema en MDN, o deseas hacer una pregunta, ¡puedes presentar un problema en nuestro <a href="https://github.com/mdn/sprints/issues">repo de GitHub</a>! Luego serán evaluados y procesados en algún momento en el futuro.</p> - -<h4 id="Bugzilla">Bugzilla</h4> - -<p>Cuando escribes documentacion para cubrir los cambios implementados como consecuencia de un error en Bugzilla, podrás interactuar en ocasiones con las personas involucradas en estos errores. ¡Asegurate de tener <a href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html" title="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">guía de comportamiento Bugzilla</a> en mente todo el tiempo!</p> - -<h4 id="Email">Email</h4> - -<p>En ocasiones, el intercambio de correo electrónico privado entre tú y una o más personas es el camino a seguir, si tienes su dirección de correo electronico.</p> - -<div class="note"> -<p><strong>Nota:</strong> Como regla general, si alguien a publicado su email en los documentos sobre la tecnología que estás documentando, te ha dado su correo, o es un correo muy conocido, un correo es un buen medio para realizar el "primer contacto". Si tienes que buscarlo, probablemente deberías intentar obtener permiso para Discourse o una lista de correo primero, a menos que hayas agotado todos los demás recursos para ponerte en contacto.</p> -</div> - -<h3 id="Estado_del_contenido">Estado del contenido</h3> - -<p>Tenemos varias herramientas útiles que te proporcionan información sobre el estado de la documentación.</p> - -<dl> - <dt><a href="/dashboards/revisions">Tablero de revisión</a></dt> - <dd>Esta es una herramienta fantástica para la revisión de los cambios realizados en el contenido de MDN. Puedes ver el historial, seleccionar un rango de tiempo para ver, y filtrar por cosas como la configuración regional, nombre del contribuyente, y tema. Una vez que estés viendo la serie de revisiones, puedes ver los cambios realizados en cada una de ellas, abrir rápidamente la pagina, ver el historial completo o revertir cambios (si tienes los permisos).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Visión general del estado de la documentación</a></dt> - <dd>Nuestra pagina de <a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">vista del estado de documentación</a> provee una lista de todas las áreas de MDN que se han configurado para el seguimiento de estado, con información de algunas páginas y los diferentes trabajos que se necesitan. Haz click en un área en particular y mira un listado de los contenidos que necesitan trabajo, como páginas que no tienen etiquetas, o etiquetas que requieren cierto trabajo. Puedes ver una lista de páginas que no se han actualizado hace mucho tiempo, están desactualizados, o una lista de los errores encontrados y cómo han afectado a la documentación en esa área.</dd> - <dt><a href="/en-US/docs/MDN/Plans">Los planes del proyecto de documentación</a></dt> - <dd>Tenemos una serie de proyectos de escritura que se encuentran en etapa de planificación, o son grandes y se encuentran en curso, para los que se han escrito los documentos de planificación y así tener un registro de lo que tenemos que hacer.</dd> - <dt><a href="https://tree.taiga.io/project/viya-mdn-durable-team">MDN Taiga (en Inglés)</a></dt> - <dd>Los redactores del personal de MDN utilizan una herramienta llamada Taiga para gestionar proyectos de documentación actuales y futuros. Puedes echar un vistazo para ver lo que estamos haciendo y cómo va, también puedes ver qué proyectos nos gustaría que sucedan pronto. Algunos de ellos serán asumidos por escritores del personal, ¡pero no dudes en hacerte cargo de uno si lo deseas! Para obtener más información sobre los procesos ágiles que sigue el equipo de MDN, consulta nuestra página de procesos en la <a href="https://wiki.mozilla.org/Engagement/MDN_Durable_Team/Processes"> wiki de Mozilla.</a></dd> -</dl> - -<h2 id="La_comunidad_de_desarrollo">La comunidad de desarrollo</h2> - -<p>Posiblemente las relaciones más importantes para desarrollar y mantener, como miembro de la comunidad de la escritura MDN, son las que mantengas con los desarrolladores. Ellos crean el software que estamos desarrollando, pero también son la fuente más útil de información que tenemos. Es crucial que mantengamos buenas relaciones con los desarrolladores, ¡así es más probable que respondan a tus preguntas de forma rápida, precisa y adecuada!</p> - -<p>Además, representas a la comunidad de escritura MDN. Por favor, ayuda a asegurar que mantengamos nuestra excelente relación de trabajo con el equipo de desarrollo haciendo que cada interacción que tengan con el equipo de escritura sea la mejor posible.</p> - -<p>En una nota relacionada, una gran manera de encontrar a la persona adecuada para hablar es mirar la <a href="https://wiki.mozilla.org/Modules">lista de propietarios del módulo</a>.</p> - -<h2 id="La_comunidad_de_escritura">La comunidad de escritura</h2> - -<p>La comunidad de la escritura es grande. Mientras que el número de contribuyentes frecuentes o de gran escala es relativamente pequeño, hay muchas docenas o cientos de personas que contribuyen al menos de vez en cuando. Afortunadamente, se trata de personas impresionantes, con un amor genuino por la Web, Mozilla, y/o la documentación, además, la interacción con ellos es casi siempre bastante fácil.</p> - -<p>Mira el articulo <a href="/en-US/docs/MDN/Community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Únete a la comunidad</a> para mas información acerca de la comunidad MDN.</p> - -<p> El lugar donde más frecuentemente podrás interactuar directamente con otros escritores es en el foro <a href="https://discourse.mozilla.org/c/mdn">Discourse.</a></p> - -<p><span id="result_box" lang="es"><span>Teniendo en cuenta la</span></span> {{anch("Guía general de comportamiento")}} , usted notará que las cosas salen bien por lo general.</p> - -<h2 id="Mira_también">Mira también</h2> - -<ul> - <li><a href="/en-US/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Contribuyendo con MDN</a></li> - <li><a href="/en-US/docs/Project:MDN/Contributing/Join_the_community" title="/en-US/docs/Project:MDN/Contributing/Join_the_community">Comunidad MDN</a></li> - <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">Cómo enviar y respoder un email</a></li> - <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">Cómo ser un Mozillian</a></li> -</ul> diff --git a/files/es/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/es/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 95838bcbbb..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Cómo crear una cuenta MDN -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - Cuenta - - GitHub - - Perfil - - Persona - - Principiante - - account -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/Howto/Crear_cuenta_MDN ---- -<div>{{MDNSidebar}}</div> - -<p>Para editar contenido en MDN, necesitas un perfil MDN. No es necesario un perfil si solo quieres buscar y leer los documentos de MDN:</p> - -<ol> - <li>En la parte superior de cada página en MDN encontrarás el botón de <strong>Registrarse</strong>. Pasa el puntero del mouse por ahí (o toca sobre este botón si estás con un dispositivo móvil) para mostrar una lista de servicios de autenticación que son permitidos para registrarse en MDN.</li> - <li>Selecciona el servicio para registrarte. Actualmente, solo GitHub y Gmail están disponibles. Ten en cuenta que si seleccionas GitHub, un enlace a tu perfil de GitHub será incluido en tu página de perfil público de MDN.</li> - <li><span id="result_box" lang="es"><span>Sigue las indicaciones de GitHub o de Gmail para conectar tu cuenta a MDN.</span></span></li> - <li><span lang="es"><span>Una vez autenticado el servicio te retorna a MDN, se te pedirá que ingreses un nombre de usuario y una dirección de correo electrónico. <em>Tu nombre de usuario será mostrado públicamente para darte el crédito del trabajo que has hecho. No utilices tu dirección de correo electrónico como nombre de usuario. </em></span></span></li> - <li>Click en <strong>Crear mi perfil MDN.</strong></li> - <li>Si la dirección de correo electrónico que has especificado en el paso 4 no es el mismo que has utilizado con el servicio de autenticación, revisa tu correo y dale click en el enlace en el correo de confirmación que se te envió.</li> -</ol> - -<p>¡Listo! <span id="result_box" lang="es"><span>¡Ya tienes una cuenta MDN y puedes editar páginas inmediatamente!</span></span></p> - -<p><span lang="es"><span>Puedes dar clic en tu nombre en la parte superior de cualquier página de MDN para ver tu perfil público. Desde ahí, puedes editar, hacer cambios o adicionar información en tu perfil.</span></span></p> - -<div class="note"> -<p><strong>Nota:</strong> Los nuevos nombres de usuario no pueden contener espacios ni el carácter "@". Ten en cuenta que tu nombre de usuario será mostrado públicamente para identificar los trabajos que hayas hecho!</p> -</div> diff --git a/files/es/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/es/orphaned/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index b4c75bc774..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Cómo hacer una revisión técnica -slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review -translation_of: MDN/Contribute/Howto/Do_a_technical_review -original_slug: MDN/Contribute/Howto/revision_tecnica ---- -<div>{{MDNSidebar}}</div><p class="summary"><strong>La revisión técnica consiste en revisar la precisión técnica y lo completo que se encuentra un artículo</strong>, y corregirlo si es necesario. Si un escritor de un artículo quiere que alguien más chequee su contenido técnico, debe marcar la casilla "Revisión Técnica" (Technical review) al editarlo. A menudo el escritor contacta a un ingeniero específico para desempeñar la revisión técnica, pero cualquiera con habilidad técnica en el tema puede hacerla.</p> - -<p><span class="seoSummary">Este artículo describe cómo hacer para ejecutar una revisión técnica, ayudando así a asegurar que el contenido de MDN es preciso.</span></p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <td><strong>¿Dónde hay que hacerla?</strong></td> - <td>En artículos específicos marcados requiriendo <a href="/en-US/docs/needs-review/technical">revisión técnica</a>.</td> - </tr> - <tr> - <td><strong>¿Qué necesitas saber para hacer la tarea?</strong></td> - <td> - <ul> - <li>Conocimiento experto del tema del artículo que estás revisando.</li> - <li>Habilidad para editar un artículo wiki en MDN.</li> - </ul> - </td> - </tr> - <tr> - <td><strong>¿Cuáles son los pasos para hacerlo?</strong></td> - <td> - <ol> - <li>Vé a la lista de páginas que necesitan <a href="/en-US/docs/needs-review/technical">revisiones técnicas</a>. Ésta lista todas las páginas para las cuales se solicitó revisión técnica.</li> - <li>Elige una página con cuyo tema estés muy familiarizado.</li> - <li>Haz click en el enlace del artículo para cargar la página.</li> - <li>Una vez cargada la página, haz click en el botón <strong>EDITAR (EDIT)</strong> de la parte superior; esto te lleva al editor MDN. No dudes en cambiar a una página diferente si la primera que eliges no te conviene.</li> - <li>Mientras lees el artículo, corrige cualquier información técnica que no esté correcta y agrega cualquier información importante que falte.</li> - <li>Ingresa un comentario al pie del artículo que describa lo que hiciste, como "Revisión técnica completa". Si corregiste la información, incluye eso en tu comentario, por ejemplo "<em>Revisión Técnica: descripciones de parámetros arregladas".</em></li> - <li>Haz click en el botón <strong>GUARDAR LOS CAMBIOS (SAVE CHANGES)</strong>.</li> - <li>Una vez que corregiste el artículo aparece en la pantalla después que el editor se haya cerrado, chequea la entrada <strong>Técnica</strong> al costado, debajo de <strong>Las siguientes revisiones han sido solicitadas (The following reviews have been requested</strong>) y haz click en <strong>ENVIAR REVISIÓN (SUBMIT REVIEW)</strong>.</li> - <li>Y listo!</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/es/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/es/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index 34dda57c59..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Cómo hacer una revisión editorial -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -tags: - - Cómo hacerlo - - Documentación - - Guía - - Revisiones -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/Howto/revision_editorial ---- -<div>{{MDNSidebar}}</div> - -<p class="summary"><strong>La revisión editorial consiste en reparar errores tipográficos y de ortografía</strong>, gramática, o errores de uso en un artículo. No todos los contribuyentes son expertos en escribir en español, pero gracias a su conocimiento han contribuído en los artículos en enorme cantidad, los cuales necesitan correcciones y revisiones. Esto se hace en la revisión editorial.</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <td><strong>¿Cuál es la tarea?</strong></td> - <td> Verificar y corregir la gramática, ortografía y contexto de los artículos.</td> - </tr> - <tr> - <td><strong>¿Dónde hay que hacerla?</strong></td> - <td>Dentro de artículos específicos que están marcados como que requieren una revisión editorial.</td> - </tr> - <tr> - <td><strong>¿Qué necesitas saber para hacer la tarea?</strong></td> - <td>Necesitas tener buen manejo de la gramática española y su ortografía.</td> - </tr> - <tr> - <td><strong>¿Cuáles son los pasos para hacerlo?</strong></td> - <td> - <ol> - <li>Elige un artículo: - <ol> - <li>Ve a la lista de <a href="/es/docs/needs-review/editorial">artículos que necesitan revisión editorial</a>. Esto lista todas las páginas para las que se solicitó una revisión editorial.</li> - <li>Elige una página que tenga un título en español y cuya ruta no empiece con <code>Template:</code>.</li> - <li>Haz click en el enlace del artículo para cargar la página.</li> - </ol> - </li> - <li>Una vez cargada la página, haz click en el boton editar (<strong>EDIT)</strong> de la parte superior; esto te lleva al <a href="/es/docs/Project:MDN/Contributing/Editor_guide">editor MDN</a>. No dudes en cambiar a una página diferente si la primera que eliges no te conviene.</li> - <li>Corrige todos los errores tipográficos y ortográficos, gramática, o de uso que veas.</li> - <li>Ingresa un <strong>Comentario Revisión </strong>en la parte superior del artículo; algo como "Revisión editorial<em>: errores de tipografía, gramática y ortografía <em>reparados</em>."</em></li> - <li>Haz click en el boton <strong>GUARDAR LOS CAMBIOS (SAVE CHANGES)</strong>.</li> - <li>Una vez que el artículo corregido aparezca en la pantalla después de haberse cerrado el editor, marca la entrada <strong>Editorial</strong> al costado debajo de <strong>Se han solicitado las siguientes revisiones</strong> (<strong>The following reviews have been requested) </strong>y haz click en <strong>ENVIAR REVISION (SUBMIT REVIEW)</strong>.</li> - <li> - <p>¡Listo!</p> - </li> - </ol> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/es/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html b/files/es/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html deleted file mode 100644 index 0c3f4e45c9..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Plantilla de página para propiedades CSS -slug: orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template -translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template -original_slug: MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad ---- -<div>{{MDNSidebar}}</div><div class="note">Esta es una página plantilla para las propiedades de CSS. Por favor utilice esto como una plantilla base cuando vaya a crear una nueva página para una propiedad de CSS. <br> -<em>Los comentarios en cursiva son información sobre cómo usar parte de la plantilla</em></div> - -<div>{{CSSRef}}</div> - -<div><em>Agregue el encabezado no estándar si la propiedad no esta en el estándar. En la sección de resumen en una nota, describa como lograr su efecto usando tecnologías estándares de la Open Web.</em></div> - -<div>{{non-standard_header}}</div> - -<div> </div> - -<div><em>Agregue el encabezado experimental si a su juicio es probable que el comportamiento de la propiedad cambie en el fututo, por ejemplo; debido a especificaciones muy inmaduras o implementaciones incompatibles.</em></div> - -<div>{{SeeCompatTable}}</div> - -<p> </p> - -<p><em>Desripción de la propiedad. Debe comenzar por "La propiedad <code>xyz</code> CSS " seguido de una descripción de una oración. El primer párrafo de esta introducción se utilizará por defecto como la descripción de la página.</em></p> - -<p>{{note("Para cualquier mensaje especial")}} <em>Pero no agregue varias notas. Estas deben ser realmente importantes, ¡o ser parte de la decripción!</em></p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="brush: css">/* Valores de palabras clave */ -property: value1; -property: value2; - -/* <longitud> valores */ -property: 12.8em; /* Una longitud válida */ - -/* Valores globales */ -property: inherit; <-- Para recordar que son valores posibles -property: initial; -property: unset; -</pre> - -<p><em>La segunda parte es una traducción simple de lo que dice la sintaxis formal. Está dirigido a usuarios de nivel medio que no comprenderán bien la sintaxis formal. </em></p> - -<h3 id="Values" name="Values">Valores</h3> - -<p><em>Cada elemento de la sintaxis formal debe ser explicado</em></p> - -<dl> - <dt><code>valor_1</code></dt> - <dd>Es una palabra clave que significa...</dd> - <dt><code>valor_2</code> {{ Non-standard_inline() }} {{experimental_inline()}}</dt> - <dd>Es una palabra clave que significa</dd> -</dl> - -<h3 id="Sintaxis_formal">Sintaxis formal</h3> - -<p><em>La sintaxis formal debe ser tomada de la especificación y agregarse a la plantilla de 'CSSData'. Es una herramienta importante para obtener información precisa de la sintaxis para los usuarios avanzados.</em></p> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">Ejemplos</h2> - -<p><em>Agregue esto solo si hay un ejemplo. Sin enlace roto aqui.</em></p> - -<h3 id="CSS">CSS</h3> - -<pre class="brush:css"><em>elementName { - </em>property<em>: value; - estoes: "ejemplo"; - dream: 10000000mm; - amor: "peligro"; -}</em></pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><em><elementName>foo bar</elementName></em></pre> - -<h3 id="Resultado">Resultado</h3> - -<p><em>{{EmbedLiveSample("Examples")}}</em></p> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<p><em>Utilizar exclusivamente esta tabla estándar. Coloque la especificación más antigua en la parte inferior. Use las plantillas SpecName() para el nombre y Spec2() para el estado. De esa manera, cuando la especificación progresa en el estándar, o se mueve, el contenido de la tabla se adaptará automáticamente.</em></p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}</td> - <td>{{Spec2("CSS3 Animations")}}</td> - <td>Sin cambios desde CSS 2.1</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad del navegador</h2> - -<p><em>(Ver <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Tablas de compatibilidad</a> para más información)</em></p> - -<h2 id="See_also" name="See_also">Ver también</h2> - -<ul> - <li><em>Enlaces de propiedades relacionadas: {{Cssxref("ejemplo-propiedad")}}</em></li> - <li><em>Enlaces al artículo que muestra cómo usar la propiedad en contexto: "Usando ... artículo"</em></li> - <li><em>Use buenos enlaces externos. No tenga miedo de los enlaces externos, pero estos deberían ser sobresalientes, y no solo mencionar detalles menores.</em></li> -</ul> diff --git a/files/es/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html b/files/es/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html deleted file mode 100644 index 0d2439416a..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Cómo y cuándo eliminar macros "experimentales" -slug: orphaned/MDN/Contribute/Howto/Remove_Experimental_Macros -tags: - - Experimental - - Guía - - MDN Meta - - Macros -translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros -original_slug: MDN/Contribute/Howto/Remover_Macros_Experimentales ---- -<div>{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p class="summary">Las páginas en MDN pueden incluir<span class="seoSummary"><a href="/en-US/docs/MDN/Contribute/Structures/Macros">macros</a></span>KumaScriptpara notificar a los lectores que una característica es experimental y aún no está estandarizada. Sin embargo, algún elementos experimental pueden estandarizarse y sin embargo su página todavía no refleja este cambio. Puedes ayudar a mejorar MDN revisando las páginas que contienen estas macros "experimentales" y eliminando las macros de los elementos que ya no son experimentales.</p> - -<p>Las macros en cuestión son {{TemplateLink("experimental_inline")}} para marcar un elemento mencionado en una página, y {{TemplateLink("SeeCompatTable")}} para marcar toda la página.</p> - -<div class="blockIndicator warning" style="background: #fff3d4; border-color: #f6b73c;"> -<p><strong>Advertencia:</strong> ya no recomendamos usar<code>SeeCompatTable</code>. Ahora se espera que todos los datos sobre compatibilidad se presenten dentro de la tabla de compatibilidad del navegador y cualquier nota al pie de página.</p> -</div> - -<p>Aquí está la definición de <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions">experimental</a> del artículo <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions">MDN Definitions and Conventions</a>:</p> - -<p><strong>¿Dónde debe hacerse esta tarea?</strong></p> - -<p>Páginas en las siguientes listas:</p> - -<dl> - <dd> - <ul> - <li><a href="https://developer.mozilla.org/search?kumascript_macros=experimental_inline&locale=*" rel="nofollow noopener">Todas las páginas que usan <code>\{{Experimental_Inline}}</code></a> (list item icon)</li> - <li><a href="https://developer.mozilla.org/search?kumascript_macros=experimental_inline&locale=en-US" rel="nofollow noopener">Todas las páginas en Inglés que usan <code>\{{Experimental_Inline}}</code></a> (list item icon)</li> - <li><a href="https://developer.mozilla.org/en-US/search?kumascript_macros=SeeCompatTable&locale=*" rel="nofollow noopener">Todas las páginas en MDN que usan <code>\{{SeeCompatTable}}</code></a> (page banner)</li> - <li><a href="https://developer.mozilla.org/en-US/search?kumascript_macros=SeeCompatTable&locale=en-US" rel="nofollow noopener">Todas las páginas en Ingles <code>que usan \{{SeeCompatTable}}</code></a> (page banner)</li> - </ul> - </dd> - <dt>¿Qué necesitas saber para hacer la tarea?</dt> - <dd>Conocimiento del estado de estandarización o implementación del elemento relevante.</dd> - <dt>¿Cuáles son los pasos para hacer la tarea?</dt> - <dd> - <ol> - <li>Revise la página para ver con qué elemento o elementos está asociada la macro.</li> - <li>Determine si cada elemento sigue siendo experimental o no. La tabla de compatibilidad en la página puede ser más actual que las macros; También puede probar utilizando el elemento en varios navegadores.</li> - <li>Si un elemento ya no es experimental, elimine la llamada de macro "experimental" asociada a él. (Nota: un elemento en una página de resumen que tiene la macro {{TemplateLink ("experimental_inline")}} al lado suele ser un enlace a una página de referencia completa, que contiene la macro {{TemplateLink ("SeeCompatTable")}}.</li> - <li>Guarde la página con un comentario sobre lo que hizo.</li> - <li>Si ha eliminado todas las macros "experimentales" de una página (para las macros en línea, puede eliminar solo algunas de ellas), fuerce una actualización (Mayús + Actualizar) en la página de resultados de búsqueda relevante (vinculada anteriormente) para asegurarse de que la lista esté actualizado.</li> - </ol> - </dd> -</dl> diff --git a/files/es/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/es/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 37695460b6..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Cómo colocar el resumen de una página -slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - Documentación - - Resumen - - SEO - - Summary - - primeros pasos -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page -original_slug: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -<div>{{MDNSidebar}}</div> - -<div> -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<div> -<p>En este artículo te mostraremos cómo configurar el <strong>resumen SEO</strong> (también conocido como la descripción o simplemente como el resumen) de un artículo en el sitio de MDN Web Docs. El resumen se usa de varias maneras:</p> - -<ul> - <li>Lo utilizan Google y otros motores de búsqueda para ayudar a catalogar e indexar páginas.</li> - <li>Los motores de búsqueda muestran el resumen en las páginas de resultados de búsqueda para ayudar a los lectores a elegir la página que mejor se adapte a sus necesidades.</li> - <li>Los menús de MDN a menudo muestran el resumen debajo del título del artículo para ayudar a los usuarios a encontrar la información que buscan.</li> - <li>Los enlaces en MDN tienen información sobre las herramientas del resumen, para proporcionar una visión rápida a los usuarios sin tener que hacer clic en el artículo en sí.</li> -</ul> - -<p>Por lo tanto, el resumen debe ser un texto que tenga sentido tanto en el contexto del artículo como cuando se presenta solo en otros contextos. Se debe tener en cuenta la guía de estilo de escritura MDN al escribir el texto de resumen.</p> -</div> -</div> - -<h2 id="El_resumen_predeterminado">El resumen predeterminado</h2> - -<p>Las páginas para las que no se ha establecido un resumen toman como resumen el texto completo del primer bloque de {{Glossary("HTML")}} que parezca tener contenido de texto en lugar de un título. Sin embargo, este texto puede no se el mejor para usar por varias razones:</p> - -<ul> - <li>Si el primer bloque de texto es una nota recordatoria en lugar de una descripción general útil del contenido del artículo.</li> - <li>Si el primer bloque de texto es un párrafo de contenido pero no contiene una buena descripción general del artículo.</li> - <li>El texto es demasiado largo (o demasiado corto).</li> -</ul> - -<p>Por esto es mejor establecer explícitamente el resumen de la página, para ayudar a garantizar que el resumen sea lo más útil posible.</p> - -<h2 id="Estableciendo_el_resumen">Estableciendo el resumen</h2> - -<p>Veamos cómo configurar el resumen de una página.</p> - -<h3 id="¿Cuál_es_la_tarea">¿Cuál es la tarea?</h3> - -<p>Marcar el texto dentro de una página que debe usarse como resumen en otros contextos; Si el texto apropiado no está disponible, esta tarea puede incluir escribir una pequeña cantidad de texto apropiado.</p> - -<h3 id="¿Dónde_necesita_ser_hecho">¿Dónde necesita ser hecho?</h3> - -<p>En las páginas que carecen de un resumen, las que tengan un resumen que no sea útil, o que tengan un resumen que no cumpla innecesariamente con las pautas recomendadas.</p> - -<h3 id="¿Qué_necesitas_saber_para_hacer_la_tarea">¿Qué necesitas saber para hacer la tarea?</h3> - -<p>Necesitas saber usar el editor MDN. También necesitas buenas habilidades de escritura y familiaridad con el tema de la página a resumir.</p> - -<h3 id="¿Cuáles_son_los_pasos_para_hacerlo">¿Cuáles son los pasos para hacerlo?</h3> - -<ol> - <li>Elige una página a la que quieras colocarle un resumen: - <ol> - <li>En la página de <a href="/en-US/docs/MDN/Doc_status">estado de la documentación MDN</a>, haz clic en el enlace debajo de <strong>Secciones (Sections)</strong> para un tema en el que tengas conocimientos (por ejemplo, HTML).<br> - <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 272px; width: 1053px;"></li> - <li>En la página de estado de la documentación del tema, haz clic en la cabecera <strong>Páginas (Pages) </strong>de la tabla <strong>Resumen (Su</strong><strong>mmary)</strong>. Esto te va a llevar a un índice de todas las páginas en esa sección del tema. Muestra los enlaces de la página en la columna izquierda y las etiquetas y resúmenes en la columna derecha.<br> - <img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 188px; width: 826px;"></li> - <li>Elige una página en la que falte el resumen o que tenga uno pobre.<br> - <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 64px; width: 497px;"></li> - <li>Haz clic en el enlace para ir a esa página.</li> - </ol> - </li> - <li>Haz clic en <strong>Editar (Edit)</strong> para abrir la página en el editor MDN.</li> - <li>Busca una oración o dos que anden como resumen fuera del contexto. Si fuera necesario, edita el contenido existente para crear o modificar las oraciones y así obtener un buen resumen.</li> - <li>Selecciona el texto a usar como resumen.</li> - <li>En el widget <em>Estilos (Styles)</em> de la barra de herramientas del editor selecciona <strong>Resumen SEO (SEO Summary)</strong>. (En el código fuente de la página, esto crea un elemento {{HTMLElement("span")}} con <code>class="seoSummary"</code> encerrando el texto seleccionado).<br> - <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 388px; width: 676px;"></li> - <li>Guarda tus cambios con un comentario de revisión como "Coloqué el resumen a la página".</li> -</ol> - -<h2 id="Elaboración_de_un_buen_resumen">Elaboración de un buen resumen</h2> - -<p>El resumen se utiliza en diversos escenarios entre los que se pueden incluir:</p> - -<ul> - <li>La descripción del artículo en las páginas de resultados de búsqueda en MDN así como en Google y otros motores de búsqueda.</li> - <li>La descripción del artículo en los menús y páginas de aterrizaje de temas en MDN.</li> - <li>Las descripciones emergentes contextuales cuando el usuario pasa el cursor sobre los enlaces a los artículos en MDN.</li> -</ul> - -<p>Es importante tener presentes estos escenarios mientras se crea un resumen. Para garantizar que el resumen funcione bien en todas estas situaciones, esfuérzate por ceñirte a las pautas que se indican a continuación.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> a menos que se indique específicamente lo contrario, estas son orientaciones, no reglas rígidas y rápidas. Aunque debes esforzarte por cumplir estas directrices, en ocasiones se presentan excepciones que no se pueden evitar.</p> -</div> - -<ul> - <li> El resumen debe indicar tanto el tema como el tipo de página. Por ejemplo «En esta guía, aprenderemos a utilizar la API del Observador de Intersección para crear aplicaciones web adaptables que actualizan únicamente las animaciones actualmente visibles en pantalla» es de 189 caracteres y explica qué tecnología se está cubriendo, cómo se está utilizando y que el artículo es un tutorial.</li> - <li>Se puede elegir el texto de cualquier lugar de cualquier párrafo del artículo, pero lo ideal sería que estuviera en el primer párrafo (o en el segundo, en algunos casos). Si el propósito del artículo no aparece en estos párrafos, es probable que necesite reescribirse la introducción de la página.</li> - <li>El resumen debe ajustarse bien al contexto del cuerpo del artículo, ya que de hecho forma parte del artículo.</li> - <li>Está bien tener enlaces a otras páginas dentro del resumen. Estos se eliminan automáticamente antes de entregarlos a los motores de búsqueda y no te afectan. También se eliminan antes de que el resumen se utilice como descripción emergente. Los enlaces<em> no</em> se eliminan del resumen cuando se emplean como descripción de la página dentro de los menús y páginas de destino en MDN, lo cual también es muy conveniente.</li> - <li>El resumen debe incluir una selección apropiada de los términos clave que probablemente busque alguien que averigüe por información contenida en la página. En el caso del ejemplo de la API del Observador de Intersecciones, esas palabras clave incluyen el nombre de la API, «animaciones», «visible», «adaptable» y «aplicaciones web», entre otras.</li> - <li>Para optimizar el valor del <strong>posicionamiento en buscadores</strong> (<em>Search Engine Optimization, SEO</em>) obtenido de un resumen, este no debe tener más de 150 caracteres de longitud.</li> - <li>Puesto que una <strong>página de resultados de un motor de búsqueda</strong> (<em>Search Engine Result Page, SERP</em>) no suele mostrar más de 160 caracteres del resumen, se deben evitar resúmenes de mayor longitud. El hecho de que se corte el texto sin escrúpulos puede disuadir a las personas a pulsar en el enlace.</li> - <li> - <p>Puede resultar tentador escribir un gran resumen que no funcione en la página y luego ocultarlo dentro de un bloque con la clase <code>«hidden»</code> en él. Pero <em>esto no funciona</em>, dado que los motores de búsqueda ignoran el texto que no es visible para el usuario.</p> - </li> -</ul> - -<p>Piensa en el resumen como si fuera una especie de {{interwiki("wikipedia", "blurb")}} en el interior de la cubierta o la contracubierta de un libro. Este texto corto tiene que captar la atención del lector rápidamente y animarle a seguir leyendo.</p> - -<p>Puede ser un poco complicado redactar un resumen que funcione bien tanto para las páginas de resultados de los motores de búsqueda como dentro del propio texto del artículo, pero en el momento MDN no ofrece una forma de crear un resumen SEO separado del contenido de la página, de modo que haz tu mejor esfuerzo.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs//es/docs/MDN/Contribute/Howto/Write_for_SEO">How to write with SEO in mind on MDN Web Docs</a></li> -</ul> diff --git a/files/es/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/es/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index a0292c9119..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Cómo etiquetar páginas Javascript -slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -tags: - - Etiquetas - - JavaScript -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages -original_slug: MDN/Contribute/Howto/Etiquetas_paginas_javascript ---- -<div>{{MDNSidebar}}</div><p class="summary"><strong>Etiquetar </strong>consiste en agregar meta-información (o información adicional) a las páginas para que el contenido relacionado pueda agruparse, por ejemplo en la herramienta de búsqueda.</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <td><strong>¿Dónde hay que hacerlo?</strong></td> - <td>Dentro de <a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">páginas específicas relacionadas con JavaScript que aún no tengan etiquetas</a></td> - </tr> - <tr> - <td><strong>¿Qué necesitas saber para hacer esta tarea?</strong></td> - <td> - <ul> - <li>Conocimiento básico de código JavaScript, como saber qué es un método o una propiedad.</li> - </ul> - </td> - </tr> - <tr> - <td><strong>¿Cuáles son los pasos para hacerla?</strong></td> - <td> - <ol> - <li>Elige una de las páginas del la lista que se encuentra en el enlace anterior.</li> - <li>Haz Click en el enlace del artículo para cargar la página.</li> - <li>Una vez cargada la página, haz click en el botón <strong>EDIT</strong> cerca de la parte superior ( esto te coloca en el editor MDN).</li> - <li>Cómo mínimo se debería agregar la etiqueta <code>JavaScript</code>. Aquí hay otras etiquetas que se pueden agregar:</li> - <li><br> - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Tag</th> - <th scope="col">What pages to use it on</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Method</code></td> - <td>métodos</td> - </tr> - <tr> - <td><code>Property</code></td> - <td>propiedades</td> - </tr> - <tr> - <td><code>prototype</code></td> - <td>prototipos</td> - </tr> - <tr> - <td>Object type name</td> - <td>métodos de un objeto; por ejemplo String.fromCharCode debería llevar la etiqueta <code>String</code></td> - </tr> - <tr> - <td><code>ECMAScript6 </code>and <code>Experimental</code></td> - <td>características agregadas en una nueva versión ECMAScript</td> - </tr> - <tr> - <td><code>Deprecated</code></td> - <td>características desaprobadas (cuyo uso está desaconsejado pero aún tiene soporte)</td> - </tr> - <tr> - <td><code>Obsolete</code></td> - <td>características obsoletas (que ya no tienen soporte en los navegadores modernos)</td> - </tr> - <tr> - <td>others</td> - <td>Ver <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">Mestándares de etiquetado MDN</a> para otras etiquetas posibles a aplicar</td> - </tr> - </tbody> - </table> - </li> - <li>Guarda con un comentario.</li> - <li>¡Y Listo!</li> - </ol> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/es/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html b/files/es/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html deleted file mode 100644 index f5f6f79402..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Cómo usar las barras laterales de navegación -slug: orphaned/MDN/Contribute/Howto/Use_navigation_sidebars -translation_of: MDN/Contribute/Howto/Use_navigation_sidebars -original_slug: MDN/Contribute/Howto/Usar_barras_laterales_de_navegación ---- -<p>{{MDNSidebar}}{{Draft}}</p> - -<p>La navegación en MDN se realiza frecuentemente usando barras laterales que listan otros artículos en una serie así como contenido relacionado tanto en la misma suite de documentación como en otras áreas de MDN. <span class="seoSummary">Las barras laterales de MDN no se crean automáticamente; para incluirlas en la página, es necesario crear y utilizar una macro de algún tipo. En este artículo, revisaremos el proceso de creación de las macros de MDN en la barra lateral y cómo utilizarlas en un artículo.</span></p> - -<h2 id="Macros_actuales_de_las_barras_laterales_de_MDN">Macros actuales de las barras laterales de MDN</h2> - -<p>MDN ya tiene varias macros para crear barras laterales. La mayoría son específicas para secciones particulares de MDN, mientras que otras tienen la intención de crear barras laterales genéricas para áreas de documentación que de otra manera no tendrían ninguna.</p> - -<dl> - <dt>{{TemplateLink("AddonSidebar")}}</dt> - <dd>Inserts a sidebar for navigating the add-ons documentation; this is primarily content about creating browser extensions.</dd> - <dt>{{TemplateLink("APIRef")}}</dt> - <dd>Inserts a sidebar used within API interface reference pages and subpages.</dd> - <dt>{{TemplateLink("CanvasSidebar")}}</dt> - <dd>Inserts a sidebar used within the HTML/DOM Canvas documentation.</dd> - <dt>{{TemplateLink("DefaultAPISidebar")}}</dt> - <dd>Inserts a default sidebar that can be used on the API overview page of an API that doesn't have its own sidebar type.</dd> - <dt>{{TemplateLink("FirefoxSidebar")}}</dt> - <dd>Inserts a sidebar used on the documentation that's specific to Firefox.</dd> - <dt>{{TemplateLink("GamesSidebar")}}</dt> - <dd>Inserts a sidebar for navigating MDN's content about developing games using web technologies.</dd> - <dt>{{TemplateLink("HTMLSidebar")}}</dt> - <dd>Inserts the sidebar used within MDN's HTML documentation.</dd> - <dt>{{TemplateLink("HTTPSidebar")}}</dt> - <dd>Inserts a sidebar for use on pages within MDN's HTTP documentation.</dd> - <dt>{{TemplateLink("JSSidebar")}}</dt> - <dd>Inserts a sidebar for use within the JavaScript documentation.</dd> - <dt>{{TemplateLink("LearnSidebar")}}</dt> - <dd>Inserts the Learning Area sidebar.</dd> - <dt>{{TemplateLink("MDNSidebar")}}</dt> - <dd>Inserts a sidebar for navigating MDN's "meta-documentation;" that is, documentation about using and editing the MDN Web Docs site itself. You can actually see that macro in use on this page.</dd> - <dt>{{TemplateLink("ServiceWorkerSidebar")}}</dt> - <dd>Inserts a sidebar for use within documentation about Service Workers.</dd> - <dt>{{TemplateLink("SpiderMonkeySidebar")}}</dt> - <dd>Inserts a sidebar for use on pages documenting SpiderMonkey, Mozilla's JavaScript engine.</dd> - <dt>{{TemplateLink("ToolsSidebar")}}</dt> - <dd>Inserts a sidebar listing pages about Firefox developer tools.</dd> - <dt>{{TemplateLink("WebAssemblySidebar")}}</dt> - <dd>Inserts a sidebar containing links related to WebAssembly.</dd> - <dt>{{TemplateLink("WebExtAPISidebar")}}</dt> - <dd>Inserts a sidebar used to navigate the API reference documentation about browser e3dtensions (WebExtensions).</dd> - <dt>{{TemplateLink("WebGLSidebar")}}</dt> - <dd>Inserts a sidebar that provides navigation of WebGL-related content.</dd> - <dt>{{TemplateLink("WebRTCSidebar")}}</dt> - <dd>Inserts a sidebar whose contents provide navigation of WebRTC documentation on MDN.</dd> - <dt>{{TemplateLink("XSLTRef")}}</dt> - <dd>Inserts a sidebar with documentation for XSLT, EXSLT and XPath.</dd> -</dl> - -<h2 id="Using_sidebars">Using sidebars</h2> - -<p>To add a sidebar to a page, find the right macro, then, on the page on to which you want to insert the sidebar, click the "Edit" button. Add to the page a {{HTMLElement("p")}} block whose contents are simply the call to the macro. Once there, you can add the macro call. Typically, sidebar macros don't require any parameters, so you can just do, for example:</p> - -<pre class="brush: html; no-line-numbers"><p>\{{MDNSidebar}}</p></pre> - -<p>Usually, you should do this as the first line of the document. In some documents, it's been done at the bottom instead. This works fine, but for the sake of consistency, try to place it at the top.</p> - -<p>If there's already a {{HTMLElement("p")}} block with macro calls at the top of the page, such as those that create banners like <code>\{{Non-standard_Header}}</code>, you can put the sidebar macro inside the same {{HTMLElement("p")}}, like this:</p> - -<pre class="brush: html; no-line-numbers"><p>\{{HTTPSidebar}}\{{Non-standard_Header}}</p></pre> - -<h2 id="Creating_sidebars">Creating sidebars</h2> - -<p><em>details coming</em></p> - -<p>Talk about {{TemplateLink("SidebarUtilities")}}.</p> - -<p>There are some macros that can be used to help build sidebars:</p> - -<dl> - <dt>{{TemplateLink("ListSubpagesForSidebar")}}</dt> - <dd>Creates a tree of links structured for use in a sidebar, using the subpages of the specified page.</dd> -</dl> diff --git a/files/es/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/es/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index ebfae0e469..0000000000 --- a/files/es/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Cómo escribir un artículo para ayudar a las personas a aprender sobre la Web. -slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - Aprender - - Como - - Guía - - MDN Meta -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -original_slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -<div>{{MDNSidebar}}</div> - -<p>El área de aprendizaje de MDN es nuestro hogar para artículos que presentan conceptos web a nuevos desarrolladores. Debido a que su contenido está dirigido principalmente a principiantes, es un gran lugar para compartir tus conocimientos y ayudar a los recién llegados a conocer la web. Es importante asegurarse de que los nuevos desarrolladores puedan seguir este contenido, por lo que le prestamos especial atención.</p> - -<p>Este artículo explica cómo escribir páginas para el <a href="/en-US/docs/Learn">Área de aprendizaje</a>.</p> - -<h2 id="Cómo_escribir_un_artículo_en_el_Área_de_aprendizaje">Cómo escribir un artículo en el Área de aprendizaje</h2> - -<p>Para comenzar a aportar tu conocimiento, simplemente haz clic en el botón verde grande, luego sigue los cinco pasos a continuación. Si estás buscando ideas, echa un vistazo al <a href="https://trello.com/b/LDggrYSV">tablero de Trello de nuestro equipo</a>.</p> - -<div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">Escribe un nuevo artículo</a></div> - -<p>Este artículo podría no terminar exactamente en el lugar correcto, pero al menos está en MDN. Si necesitas hablar con alguien para que lo trasladen al lugar correcto, por favor <a href="/es/docs/Learn#Contact_us">contáctanos</a>.</p> - -<h3 id="Paso_1_Escribe_en_dos_líneas">Paso 1: Escribe en dos líneas</h3> - -<p>La primera oración de tu artículo debe resumir qué tema vas a cubrir y la segunda debe entrar en algunos detalles más sobre los elementos que pondrías en el artículo. Por ejemplo:</p> - -<div class="summary"> -<p>Mientras {{glossary("HTML")}} los archivos contienen contenido estructurado, {{Glossary("CSS")}}, otra tecnología web, hace que el contenido se vea como tú quieres. En este artículo vamos a cubrir cómo funciona esta tecnología y cómo escribir tu propio ejemplo básico.</p> -</div> - -<p>Observa cómo el ejemplo explica brevemente que CSS es una tecnología web central que se usa para diseñar páginas. Eso es suficiente para que el lector tenga una idea bastante buena de lo que cubre el artículo.</p> - -<p>Debido a que los artículos del Área de aprendizaje se dirigen principalmente a los principiantes, cada artículo debe cubrir un tema directo para no abrumar al lector con demasiada información nueva. Si no puedes resumir el artículo en una oración, ¡podrías estar intentando hacer demasiado en un artículo!</p> - -<h3 id="Paso_2_Agregar_un_cuadro_superior">Paso 2: Agregar un cuadro superior</h3> - -<p>Luego, agrega un cuadro superior para ayudar a los lectores a orientarse sobre dónde se encuentran en el proceso de aprendizaje. Aquí hay un ejemplo de un cuadro superior de <a href="/en-US/docs/Learn/Understanding_URLs">"Entendiendo las URLs y su estructura"</a>. Puedes usar este artículo como modelo cuando escribas tu propio artículo.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Requisitos previos:</th> - <td>Primero necesitas saber<a class="new" href="/es/docs/Learn/How_the_Internet_works"> cómo funciona Internet</a>, <a class="new" href="/es/docs/Learn/What_is_a_Web_server">qué es un servidor web</a> y <a class="new" href="/es/docs/Learn/Understanding_links_on_the_web">los conceptos detras de los enlaces de la web</a>.</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Aprenderás qué es una URL y cómo funciona en la web.</td> - </tr> - </tbody> -</table> - -<dl> - <dt>Requisitos previos</dt> - <dd>¿Qué debe saber ya el lector para seguir el artículo? Cuando sea posible, haz de cada requisito previo un enlace a otro artículo del Área de aprendizaje que cubra el concepto (a menos que sea un artículo realmente básico que no requiere conocimiento previo).</dd> - <dt>Objetivos</dt> - <dd>Esta sección explica brevemente lo que el lector aprenderá a lo largo del artículo. Esto es un poco diferente al de una sola línea; (el one-liner resume el tema del artículo), mientras que la sección de objetivos establece específicamente lo que el lector puede esperar lograr en el transcurso del artículo.</dd> -</dl> - -<div class="note"> -<p><strong>Nota:</strong> Para crear esta tabla, puedes copiar y pegar la tabla del ejemplo anterior o usar la herramienta de tabla del editor de MDN. Si eliges usar la herramienta de tabla, tienes que agregar específicamente la clase CSS <code>learn-box</code> además de la clase predeterminada <code>standard-table</code>.Para hacer esto, cuando crees o edites las propiedades de la tabla, ve al panel "Avanzado" y configura el campo <strong>Stylesheet Classes</strong> a "<code>standard-table learn-box</code>".</p> -</div> - -<h3 id="Paso_3_Escribir_una_descripción_completa">Paso 3: Escribir una descripción completa</h3> - -<p>A continuación, escribe una descripción más larga que ofrezca una visión más completa del artículo, destacando los conceptos más importantes. ¡No olvides explicar por qué el lector debe tomarse el tiempo para aprender este tema y leer tu artículo!</p> - -<h3 id="Paso_4_Cavar_más_profundo">Paso 4: Cavar más profundo</h3> - -<p>Cuando hayas terminado con todo eso, finalmente puedes sumergirte profundamente en el tema. Puedes estructurar esta parte de tu artículo como desees (aunque no dudes en consultar nuestra <a href="/en-US/docs/MDN/Contribute/Style_guide">guía de estilo</a>). ¡Esta es tu oportunidad para brillar! Entra en detalles explicando el tema sobre el que estás escribiendo. Proporciona enlaces a la documentación de referencia completa, explica cómo funciona la tecnología en detalle, brinda detalles de sintaxis y uso, etc. ¡Tú decides!</p> - -<p>Como guía, aquí hay algunos consejos de escritura para principiantes:</p> - -<ul> - <li>Centrarse en un solo tema. Si sientes que necesitas cubrir otros temas, significa que te estás perdiendo un artículo de requisito previo o debes dividir tu artículo en más de uno.</li> - <li>Usa un español simple. Evita los términos técnicos cuando puedas o al menos defínelos y haz un enlace a sus entradas del <a href="/es/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_.7B.7BGlossary.7D.7D_macro">glosario</a> cuando corresponda.</li> - <li>Incluye ejemplos sencillos para que los conceptos teóricos sean más fáciles de entender. Muchas personas aprenden mejor con el ejemplo. En lugar de escribir artículos académicos, queremos que los principiantes sigan el texto fácilmente.</li> - <li>Las ayudas visuales a menudo pueden hacer que las cosas sean más fáciles de digerir y transportar información adicional, así que siéntase libre de usar imágenes, diagramas, videos y tablas. Si está utilizando diagramas o cuadros que incluyen texto, le recomendamos que utilice {{Glossary("SVG")}} para que nuestros equipos de traducción puedan localizar el texto.</li> -</ul> - -<p>Eche un vistazo a las primeras secciones de nuestras <a href="/es/docs/Learn/JavaScript/Building_blocks/Functions">Funciones - Bloques de código reutilizables</a> para algunas buenas secciones descriptivas.</p> - -<h3 id="Paso_5_Proporcionar_material_de_aprendizaje_activo">Paso 5: Proporcionar material de "aprendizaje activo"</h3> - -<p>Para ilustrar el artículo y ayudar al lector a comprender mejor lo que están aprendiendo, asegúrese de proporcionar ejercicios, tutoriales y tareas que cumplir. Al hacer que utilicen y experimenten de forma activa y práctica con los conceptos que explica su artículo, puede ayudar a "bloquear" la información en sus cerebros.</p> - -<p>Puede elegir incluir los ejemplos directamente en la página como <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">muestras en vivo</a>, o <a href="/en-US/docs/MDN/Contribute/Editor/Links">vincularlos</a> si realmente no funcionan como una muestra en vivo. Si está interesado en ayudar a crear estos valiosos materiales, lea el artículo <a href="/es/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Cree un ejercicio interactivo para ayudar a aprender la web</a>.</p> - -<p>Si no puede proporcionar enlaces a materiales de aprendizaje activos existentes (no sabe de ninguno o no tiene tiempo para crearlos), debe agregar la etiqueta{{Tag("NeedsActiveLearning")}} al artículo. De esa manera, otros colaboradores pueden encontrar artículos que necesitan materiales de aprendizaje activo y quizás ayudarlo a encontrarlos.</p> - -<p>Eche un vistazo a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">Aprendizaje activo</a>: seleccione diferentes elementos para un ejercicio de aprendizaje interactivo en vivo, o <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">Aprendizaje activo juegue</a> con posibilidades para un estilo diferente de ejercicio que les exija descargar una plantilla localmente y modificarla siguiendo los pasos proporcionados.</p> - -<h3 id="Paso_6_Obtenga_el_artículo_revisado_y_póngalo_en_el_menú_de_navegación_del_Área_de_aprendizaje">Paso 6: Obtenga el artículo revisado y póngalo en el menú de navegación del Área de aprendizaje</h3> - -<p>Después de que hayas escrito tu artículo, avísanos para que podamos echarle un vistazo, hacer una revisión y sugerir mejoras. Una vez más, consulte nuestra sección <a href="/en-US/docs/Learn#Contact_us">Contáctenos</a> para conocer las mejores maneras de comunicarse.</p> - -<p>En el menú de navegación principal del Área de aprendizaje. Este menú es generado por la <a href="/en-US/docs/Template:LearnSidebar">macro Barra de aprendizaje</a>, que necesita privilegios especiales para editar, así como una vez más, hable con uno de nuestro equipo sobre cómo agregarlo.</p> - -<p>Al menos debe agregarlo a su página. Esto se hace agregando la llamada a la macro \{{LearnSidebar}} en un párrafo en la parte superior de su página.</p> - -<h2 id="Artículos_sugeridos">Artículos sugeridos</h2> - -<p>¿Así es que quieres contribuir?</p> - -<p>El equipo del Área de Aprendizaje Mantiene ONU Tablero de <a href="https://trello.com/b/LDggrYSV">Trello</a> las ideas Con de Artículos para Escribir. ¡Siéntete libre de elegir uno y ponte a trabajar!</p> diff --git a/files/es/orphaned/mdn/tools/page_regeneration/index.html b/files/es/orphaned/mdn/tools/page_regeneration/index.html deleted file mode 100644 index 672d24d853..0000000000 --- a/files/es/orphaned/mdn/tools/page_regeneration/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Renderizado de páginas en MDN -slug: orphaned/MDN/Tools/Page_regeneration -translation_of: MDN/Tools/Page_regeneration -original_slug: MDN/Tools/Page_regeneration ---- -<div>{{MDNSidebar}}</div> - -<p>El sitio MDN almacena en caché las páginas para que el usuario obtenga un mejor rendimiento. Como resultado, los cambios que guarde en una página podrían no aparecer la próxima vez que vuelva a cargar la página. A menudo, pero no siempre, aparece un banner en la página que indica que hay una actualización de la página en proceso. Puede hacer una "recarga forzada" (Shift + F5) en su navegador para volver a cargar la página desde el servidor, pero esto puede no tener efecto si la actualización en el servidor no se ha completado.</p> - -<p>Algunas páginas (especialmente las páginas de destino) usan macros para generar y actualizar automáticamente su contenido. Para las páginas de destino, esto asegura que los nuevos artículos se enumeren automáticamente en la página, sin que un escritor tenga que agregarlos manualmente. Esta es útil para los contribuyentes de mucho tiempo, y ayuda a los recién llegados a evitar que su trabajo se pierda en la confusión porque no sabían cómo vincular sus artículos en la jerarquía del sitio.</p> - -<p>Esto también se puede usar cuando se transmite contenido de una página a otras páginas (usando, por ejemplo, la macro {{TemplateLink ("Página")}}).</p> - -<p>Debido a que el caché de MDN almacena el contenido renderizado para mejorar el rendimiento, los cambios realizados en el material de origen (como salida de macro o páginas transcluidas) no se reflejan automáticamente en la página. Si espera cambios frecuentes en dichos materiales de origen, puede considerar habilitar la regeneración automática de su página.</p> - -<p>Siga los siguientes pasos para habilitar la regeneración automática:</p> - -<ol> - <li>Cambia el idioma del editor a inglés.</li> - <li>Haga clic en el botón <em><strong>Edit</strong> </em>en la página para ingresar al modo de edición.</li> - <li>Debajo del título de la página, haga clic en <em><strong>Edit page title and properties</strong></em> ubicados cerca del título de la página. Aparecen los campos de metadatos de la página.</li> - <li>Establezca un valor para <em><strong>Rendering max age</strong></em> . Este valor determina la cada cuánto tiempo se reconstruye la página en caché, incluida la ejecución de sus macros. Por lo general, usamos 4 u 8 por defecto. Para una tecnología cuya documentación está cambiando rápidamente, puede elegir un número más bajo.</li> - <li>Guarda tus cambios en la página. Es una buena práctica hacer un comentario de revisión que describa lo que hiciste, como "Establecer la Rendering max age en 4 horas".</li> -</ol> - -<p>La página se regenerará automáticamente en el horario que especificó.</p> - -<div class="note"> -<p>Nota: La opción <em>Edit page title and properties</em> no está disponible al crear una nueva página; tendrás que volver a abrir el editor después de tu primer guardado.</p> - -<p>La opción <em>Edit page title and properties</em> no está disponible de momento en otros idiomas que no sean inglés.</p> -</div> diff --git a/files/es/orphaned/mdn/tools/template_editing/index.html b/files/es/orphaned/mdn/tools/template_editing/index.html deleted file mode 100644 index 82e84e68cd..0000000000 --- a/files/es/orphaned/mdn/tools/template_editing/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Edición de plantillas -slug: orphaned/MDN/Tools/Template_editing -tags: - - Guía - - Herramientas - - MDN Meta - - Privilegios - - Roles(2) -translation_of: MDN/Tools/Template_editing -original_slug: MDN/Tools/Template_editing ---- -<div>{{MDNSidebar}}</div><p>En MDN, las plantillas escritas en <a href="/en-US/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> son usadas para automatizar la generación de contenido y la personalización de las páginas. Cada plantilla es un archivo separado <a href="https://github.com/mozilla/kumascript/tree/master/macros">del directorio de macros del repositorio GitHub KumaScript</a>.</p> - -<p><span class="seoSummary">Cualquiera que edite páginas wiki de MDN puede invocar plantillas utilizando <a href="/en-US/docs/MDN/Contribute/Structures/Macros">macros</a> en los artículos MDN. Cuaquiera puede crear y editar plantillas vía <a href="https://github.com/mozilla/kumascript">el repositorio GitHub KumaScript GitHub</a> usando prácticas open-source estándar (bifurcando el repositorio, creando una rama, haciendo tus cambios, y enviando una petición de incorporación de cambios para revisión). </span>Ten en cuenta que enviar una petición de incorporación de cambios es actualmente la única forma de actualizar cadenas traducidas en las plantillas que las contienen.</p> diff --git a/files/es/orphaned/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html b/files/es/orphaned/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html deleted file mode 100644 index 543bbec42d..0000000000 --- a/files/es/orphaned/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html +++ /dev/null @@ -1,1068 +0,0 @@ ---- -title: Migrar aplicaciones desde Internet Explorer a Mozilla -slug: orphaned/Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla -tags: - - Desarrollo_Web - - Todas_las_Categorías -original_slug: Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla ---- -<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3> -<p>Cuando Netscape comenzó con el navegador Mozilla, lo hizo con la decisión consciente de soportar los estándares del W3C. Como resultado, Mozilla no es totalmente compatible hacia atrás con el código heredado de Netscape Navigator 4.x ni de Microsoft Internet Explorer. Por ejemplo, Mozilla no soporta la etiqueta <code><layer></code> como se verá más adelante. Los navegadores como Internet Explorer 4 fueron construidos antes de la concepción de los estándares del W3C heredando muchos de sus extraños comportamientos. En este articulo se describirán las idiosincrasias de Mozilla que hacen que haya una fuerte compatibilidad del HTML hacia atrás con Internet Explorer y otros navegadores antiguos.</p> -<p>También se repasarán las tecnologías no estandarizadas soportadas por Mozilla, como el XMLHttpRequest y la edición de texto enriquecido, dado que existen sus equivalentes existentes en el W3C y que se incluyen en:</p> -<ul> - <li><a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a>, <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a> y <a class="external" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a></li> - <li>Hojas de estilo en cascada (CSS): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS nivel 1</a>, <a class="external" href="http://www.w3.org/TR/CSS21/">CSS nivel 2.1</a> y parte del <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS nivel 3</a></li> - <li>Modelo de objetos de documento (DOM): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM nivel 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM nivel 2</a> y parte del <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM nivel 3</a></li> - <li>Lenguaje de etiquetado matemático (MathML): <a class="external" href="http://www.w3.org/Math/">MathML versión 2.0</a></li> - <li>Lenguaje de etiquetado ampliable (XML): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Espacios de nombres en XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Asociando hojas de estilos con documentos XML 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li> - <li>Transformaciones XSL: <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li> - <li>Lenguaje XPath: <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li> - <li>Resource Description Framework (Infraestructura para la descripción de recursos): <a class="external" href="http://www.w3.org/RDF/">RDF</a></li> - <li>Simple Object Access Protocol (Protocolo simple de acceso a objetos): <a class="external" href="http://www.w3.org/TR/soap">SOAP 1.1</a></li> - <li>ECMA-262, revision 3 (JavaScript 1.5): <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li> -</ul> -<h3 id="Trucos_generales_para_la_programaci.C3.B3n_multinavegador" name="Trucos_generales_para_la_programaci.C3.B3n_multinavegador">Trucos generales para la programación multinavegador</h3> -<p>Pese a la existencia de los estándares web, los diferentes navegadores se comportan de manera distinta (de hecho, el mismo navegador puede comportarse de modo diferente dependiendo de la plataforma). Muchos navegadores, como Internet Explorer, también soportan el APIs anterior al W3C y nunca se han esforzado en añadir soporte para los navegadores compatibles con el W3C.</p> -<p>Antes de enumerar las diferencias entre Mozilla e Internet Explorer, sería conveniente cubrir algunas formas básicas en las que se pueden crear aplicaciones web ampliables a las que añadir soporte para nuevos navegadores más tarde.</p> -<p>Dado que los diferentes navegadores utilizan a veces diferentes APIs para una misma funcionalidad, es muy posible que encuentres múltiples bloques <code>if() else()</code> a lo largo y ancho del código para diferenciar el navegador que está ejecutando el documento. El siguiente código muestra un bloque diseñado para Internet Explorer:</p> -<pre>. . . - -var elm; - -if (ns4) - elm = document.layers["myID"]; -else if (ie4) - elm = document.all["myID"] -</pre> -<p>El anterior código no es ampliable por lo que si quieres soportar un nuevo navegador, deberás actualizar ese bloque de código en toda la aplicación web.</p> -<p>La forma más fácil de evitar la recodificación del documento para un nuevo navegador es abstraer la funcionalidad. En lugar de utilizar múltiples bloques <code>if() else()</code>, puedes incrementar la eficiencia tomando tareas comunes y abstrayéndolas en sus propias funciones. Esto no sólo hace al código más legible sino que simplifica el proceso añadir soporte para nuevos clientes.</p> -<pre>var elm = getElmById("myID"); - -function getElmById(aID){ - var element = null; - - if (isMozilla || isIE5) - element = document.getElementById(aID); - else if (isNetscape4) - element = document.layers[aID]; - else if (isIE4) - element = document.all[aID]; - - return element; -} -</pre> -<p>El código de arriba sigue arrastrando el problema del <em>browser sniffing</em> o el proceso de detección para saber qué navegador está utilizando el usuario. El browser sniffing es detectado generalmente gracias al parámetro <em>useragent</em>, como:</p> -<pre>Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016 -</pre> -<p>Mientras que la utilización del parámetro <em>useragent</em> para detectar el navegador proporciona información detallada del navegador en uso, el código que maneja esos parámetros genera errores con frecuencia cuando son publicadas nuevas versiones de los mismos, por lo que hay que cambiar el código.</p> -<p>Si el tipo de navegador no importa (supongamos que se ha bloquado el acceso a la aplicación web a navegadores no soportados), <strong>será mucho mejor y más fiable detectar las capacidades del navegador o el soporte de objetos en particular</strong>. Generalmente se puede hacer esto probando la funcionalidad requerida en JavaScript, por ejemplo, en lugar de:</p> -<pre>if (isMozilla || isIE5) -</pre> -<p>Se debería de usar:</p> -<pre>if (document.getElementById) -</pre> -<p>Esto permitiría a otros navegadores que soportan ese método estandar del W3C (tales como Opera o Safari) funcionar sin ningún cambio.</p> -<p>La detección del agente de usuario sin embargo tiene sentido cuando es importante acertar, como cuando estás verificando que un navegador coincide con los requerimientos de versión de la aplicación web o estás intentando sortear un fallo de programación.</p> -<p>JavaScript también permite sentencias condicionales en línea, lo que ayuda a la legibilidad:</p> -<pre>var foo = (condicion) ? condicionEsTrue : condicionEsFalse; -</pre> -<p>Por ejemplo, para obtener un elemento se debería usar:</p> -<pre> -function getElement(aID){ - return (document.getElementById) ? document.getElementById(aID) - : document.all[aID]; -} -</pre> -<h3 id="Diferencias_entre_Mozilla_e_Internet_Explorer" name="Diferencias_entre_Mozilla_e_Internet_Explorer">Diferencias entre Mozilla e Internet Explorer</h3> -<p>Primero se discutirán las diferencias en la forma en la que se comporta el HTML en Mozilla y en Internet Explorer.</p> -<h4 id="T.C3.ADtulos_emergentes" name="T.C3.ADtulos_emergentes">Títulos emergentes</h4> -<p>Los títulos emergentes son pequeños textos descriptivos que aparecen normalmente cuando se deja el cursor del ratón un cierto tiempo sobre un elemento.</p> -<p>Los navegadores antiguos introdujeron los títulos emergentes en el HTML mostrándolos en enlaces y usando el valor del atributo <code>alt</code> como contenido del título. La última especificación de W3C para HTML creó el atributo <code>title</code>, pensado para contener una descripción detallada del enlace. Los navegadores modernos utilizan el atributo <code>title</code> para mostrar títulos emergentes y Mozilla sólo muestra dichos títulos basándose en el ese atributo y no en el atributo <code>alt</code>.</p> -<h4 id="Entidades" name="Entidades">Entidades</h4> -<p>El marcado HTML puede contener varias entidades definidas por el <a class="external" href="http://www.w3.org/TR/REC-html40/sgml/entities.html">departamento de estándares web del W3C</a>. Se pueden referenciar entidades a través de su referencia numérica o alfabética. Por ejemplo, puedes referenciar el carácter de espacio en blanco #160 con <code>&#160</code> o con su referencia alfabética correspondiente <code>&nbsp;</code>.</p> -<p>Algunos navegadores antiguos, como Internet Explorer, son tan fulleros que permiten usar entidades reemplazando el carácter <code>;</code> (punto y coma) al final con contenido normal de texto.</p> -<pre>&nbsp Foo -&nbsp&nbsp Foo -</pre> -<p>Internet Explorer visualizará los <code>&nbsp</code> mostrados anteriormente como espacios en blanco, pese a que va en contra de la especificación del W3C. El navegador no analizará un <code>&nbsp</code> si va inmediatamente seguido por más caracteres. Por ejemplo:</p> -<pre>&nbsp12345 -</pre> -<p>Este código no funcionará en Mozilla, dado que va en contra de los estándares del W3C. Es mejor usar la forma correcta (<code>&nbsp;</code>) para evitar discrepancias entre navegadores.</p> -<h3 id="Diferencias_en_el_DOM" name="Diferencias_en_el_DOM">Diferencias en el DOM</h3> -<p>El Modelo de Objetos de Documento (DOM) es <strong>la estructura en árbol que contiene los elementos del documento</strong>. Se puede manipular a través de las APIs de JavaScript, las cuales han sido estandarizadas por el W3C. Sin embargo, antes de la estandarización del W3C, Netscape 4 e Internet Explorer 4 implementaron las APIs de modo similar. Mozilla implementa las APIs heredadas sólo si han sido aceptadas por los estándares del W3C.</p> -<h4 id="Accediendo_a_los_elementos" name="Accediendo_a_los_elementos">Accediendo a los elementos</h4> -<p>Para referenciar un elemento usando una técnicas multinavegador, debe de usarse <code>document.getElementById(id)</code>, que funciona tanto en Internet Explorer versión 5.0 y superiores, en navegadores basados en Mozilla y en otros navegadores compatibles con el W3C y es parte de la especificación DOM nivel 1.</p> -<p>Mozilla no soporta el acceso a elementos a través de <code>document.elementName</code>, ni siquiera a través del nombre del elemento; algo que Internet Explorer permite (llamado también <em>global namespace polluting</em>). Mozilla tampoco soporta el método <code>document.layers</code> de Netscape ni el <code>document.all</code> de Internet Explorer. Mientras que <code>document.getElementById</code> permite referenciar un único elemento, puedes usar <code>document.layers</code> y <code>document.all</code> para obtener una lista de todos los elementos del documento con un nombre determinado, como todos los elementos <code><div></code>.</p> -<p>El método del DOM nivel 1 del W3C que permite referenciar a todos los elementos con el mismo nombre de etiqueta es <code>getElementsByTagName()</code>. Este método devuelve un vector en JavaScript y puede ser invocado desde el elemento <code>document</code> o desde otros nodos para buscar sólo en su sub-árbol. Para obtener un vector con todos los elementos del árbol del DOM, se puede utilizar <code>getElementsByTagName("*")</code>.</p> -<p>Los métodos del DOM nivel 1, como muestra la tabla 1, son usados comúnmente para mover un elemento a una posición en particular y cambiar su visibilidad (menús, animaciones, etc...). Netscape 4 usaba la etiqueta <code><layer></code>(algo que Mozilla no soporta) como un elemento que podía posicionarse en cualquier lugar. En Mozilla se puede posicionar cualquier elemento utilizando la etiqueta <code><div></code>, algo que Internet Explorer también utiliza y que está presente en la especificación HTML.</p> -<table class="standard-table"> - <caption> - Tabla 1. Métodos usados para acceder a elementos</caption> - <tbody> - <tr> - <th>Método</th> - <th>Descripción</th> - </tr> - <tr> - <td>document.getElementById( unId )</td> - <td>Devuelve una referencia al elemento cuyo atributo id coincide con el pasado como parámetro.</td> - </tr> - <tr> - <td>document.getElementsByTagName( unNombre )</td> - <td>Devuelve un vector de elementos cuyo nombre de etiqueta coincide con el pasado como parámetro.</td> - </tr> - </tbody> -</table> -<h4 id="Recorrer_el_DOM" name="Recorrer_el_DOM">Recorrer el DOM</h4> -<p>Mozilla soporta las APIs del DOM del W3C que permiten recorrer el árbol del DOM a través de JavaScript (véase la tabla 2). Las APIs están disponibles para cada nodo del documento y permiten recorrer el árbol en cualquier dirección. Internet Explorer también soporta estas APIs y además sus APIs heredadas para recorrer el árbol del DOM, tales como la propiedad <code>children</code>.</p> -<table class="standard-table"> - <caption> - Tabla 2. Métodos usados para recorrer el DOM</caption> - <tbody> - <tr> - <th>Propiedad/Método</th> - <th>Descripción</th> - </tr> - <tr> - <td>childNodes</td> - <td>Devuelve un vector con todos los nodos hijos del elemento.</td> - </tr> - <tr> - <td>firstChild</td> - <td>Devuelve el primer nodo hijo del elemento.</td> - </tr> - <tr> - <td>getAttribute( nombre )</td> - <td>Devuelve el valor del atributo cuyo nombre se pasa como parámetro.</td> - </tr> - <tr> - <td>hasAttribute( nombre )</td> - <td>Devuelve un valor booleano que indica si el nodo actual tiene un atributo definido con el nombre especificado.</td> - </tr> - <tr> - <td>hasChildNodes()</td> - <td>Devuelve un valor booleano que indica si el nodo actual tiene al menos un elemento hijo.</td> - </tr> - <tr> - <td>lastChild</td> - <td>Devuelve el último nodo hijo del elemento.</td> - </tr> - <tr> - <td>nextSibling</td> - <td>Devuelve el nodo que sigue inmediatamente al actual.</td> - </tr> - <tr> - <td>nodeName</td> - <td>Devuelve el nombre del nodo actual como una cadena de texto.</td> - </tr> - <tr> - <td>nodeType</td> - <td>Devuelve un valor numérico que indica el tipo del nodo actual. - <table> - <tbody> - <tr> - <th>Valor</th> - <th>Descripción</th> - </tr> - <tr> - <td>1</td> - <td>Nodo elemento</td> - </tr> - <tr> - <td>2</td> - <td>Nodo atributo</td> - </tr> - <tr> - <td>3</td> - <td>Nodo de texto</td> - </tr> - <tr> - <td>4</td> - <td>Nodo de sección CDATA</td> - </tr> - <tr> - <td>5</td> - <td>Nodo de referencia a entidad</td> - </tr> - <tr> - <td>6</td> - <td>Nodo entidad</td> - </tr> - <tr> - <td>7</td> - <td>Nodo de instrucción de proceso</td> - </tr> - <tr> - <td>8</td> - <td>Nodo comentario</td> - </tr> - <tr> - <td>9</td> - <td>Nodo documento</td> - </tr> - <tr> - <td>10</td> - <td>Nodo tipo de documento</td> - </tr> - <tr> - <td>11</td> - <td>Nodo fragmento de documento</td> - </tr> - <tr> - <td>12</td> - <td>Nodo anotación</td> - </tr> - </tbody> - </table> - </td> - </tr> - <tr> - <td>nodeValue</td> - <td>Devuelve el valor del nodo actual. Para aquellos nodos que contentan texto, tales como los nodos de texto o los nodos comentario, se devolverá su valor alfabético. Para nodos atributo, se devolverá el valor de su atributo. Para el resto de nodos, se devolverá <code>null</code>.</td> - </tr> - <tr> - <td>ownerDocument</td> - <td>Devuelve el objeto <code>document</code> que contiene al nodo actual.</td> - </tr> - <tr> - <td>parentNode</td> - <td>Devuelve el nodo padre del nodo actual.</td> - </tr> - <tr> - <td>previousSibling</td> - <td>Devuelve el nodo inmediatamente anterior al nodo actual.</td> - </tr> - <tr> - <td>removeAttribute( nombre)</td> - <td>Elimina el atributo especificado del nodo actual.</td> - </tr> - <tr> - <td>setAttribute( nombre, valor )</td> - <td>Establece el valor de un atributo.</td> - </tr> - </tbody> -</table> -<p>Internet Explorer se comporta de un modo no estándar donde muchas de estas APIs ignorarán los nodos de texto en blanco que son generados, por ejemplo, mediante caracteres de nueva línea. Mozilla no las ignora por lo que a veces se necesita distinguir a estos nodos. Cada nodo posee la propiedad <code>nodeType</code> que especifica el tipo de nodo. Por ejemplo, un nodo elemento es de tipo 1 mientras que un nodo de texto es de tipo 3, un nodo comentario es de tipo 8, etc... La mejor forma de procesar sólo los nodos elemento es iterar todos los nodos hijos y procesar sólo aquellos cuya propiedad nodeType sea igual a 1:</p> -<pre>HTML: - <div id="foo"> - <span>Test</span> - </div> - -JavaScript: - var myDiv = document.getElementById("foo"); - var myChildren = myXMLDoc.childNodes; - for (var i = 0; i < myChildren.length; i++) { - if (myChildren[i].nodeType == 1){ - // Nodo elemento - }; - }; -</pre> -<h4 id="Generar_y_manejar_contenidos" name="Generar_y_manejar_contenidos">Generar y manejar contenidos</h4> -<p>Mozilla soporta los métodos heredados para añadir contenido al DOM dinámicamente, tales como <code>document.write</code>, <code>document.open</code> y <code>document.close</code>. Mozilla también soporta el método de Internet Explorer <code>innerHTML</code> el cual puede ser llamado desde casi cualquier nodo. Sin embargo no soporta el método <code>outerHTML</code> (que añade marcado alrededor de un elemento y no tiene un equivalente estándar) ni <code>innerText</code> (el cual establece el valor alfabético de su nodo y que puede usarse en Mozilla usando <code>textContent</code>).</p> -<p>Internet Explorer tiene varios métodos de manejo de contenidos que no son estándares y no son soportados en Mozilla, incluyendo obtener valores, insertar texto e insertar elementos adyacentes a un nodo tales como <code>getAdjacentElement</code> y <code>insertAdjacentHTML</code>. La tabla 3 muestra cómo el manipulan contenidos tanto Mozilla como el estándar del W3C, siendo todos ellos métodos aplicables a cualquier nodo del DOM.</p> -<table class="standard-table"> - <caption> - Tabla 3. Métodos usados por Mozilla para manipular contenidos</caption> - <tbody> - <tr> - <th>Método</th> - <th>Descripción</th> - </tr> - <tr> - <td>appendChild( nodo )</td> - <td>Crea un nuevo nodo hijo. Devuelve una referencia al nuevo nodo hijo.</td> - </tr> - <tr> - <td>cloneNode( profundidad )</td> - <td>Crea y devuelve una copia del nodo sobre el que se hace la llamada. Si <em>profundidad</em> es true, copia el sub-árbol completo del nodo.</td> - </tr> - <tr> - <td>createElement( tipo )</td> - <td>Crea y devuelve un nuevo nodo huérfano de tipo igual al especificado por <em>tipo</em>.</td> - </tr> - <tr> - <td>createTextNode( valor )</td> - <td>Crea y devuelve un nuevo nodo de texto huérfano asignándole el valor especificado por <em>valor</em>.</td> - </tr> - <tr> - <td>insertBefore( nuevoNodo, nodoHijo )</td> - <td>Inserta el nodo <em>nuevoNodo</em> antes de <em>nodoHijo</em>, el cual debe ser un hijo del nodo actual.</td> - </tr> - <tr> - <td>removeChild( nodoHijo )</td> - <td>Elimina el nodo <em>nodoHijo</em> y devuelve una referencia a él.</td> - </tr> - <tr> - <td>replaceChild( nuevoNodo, nodoHijo )</td> - <td>Reemplaza el nodo <em>nodoHijo</em> con el nodo <em>nuevoNodo</em> y devuelve una referencia al nodo eliminado.</td> - </tr> - </tbody> -</table> -<h4 id="Fragmentos_de_documento" name="Fragmentos_de_documento">Fragmentos de documento</h4> -<p>Por razones de eficiencia, pueden crearse documentos en memoria en lugar de trabajar con el DOM de un documento existente. El núcleo del DOM nivel 1 introdujo los fragmentos de documento, que son documentos ligeros que contienen un subconjunto de las interfaces de un documento normal. Por ejemplo, <code>getElementById</code> no existe pero <code>appendChild</code> sí. Además se pueden anexar fácilmente fragmentos de documento a los ya existentes.</p> -<p>Mozilla crea fragmentos de documento a través de <code>document.createDocumentFragment()</code>, el cual devuelve un fragmento de documento vacío.</p> -<p>Sin embargo, la implementación de Internet Explorer para los fragmentos de documentos no es compatible con el estándar del W3C y simplemente devuelve un documento normal.</p> -<h3 id="Diferencias_en_JavaScript" name="Diferencias_en_JavaScript">Diferencias en JavaScript</h3> -<p><span class="comment">Buscar traducción adecuada para hooks DOM. "timing related" traducido como "duración de la ejecución"</span></p> -<p>Por lo general, la mayoría de las diferencias entre Mozilla e Internet Explorer son las de JavaScript. Sin embargo, los problemas normalmente residen en las APIs que un navegador muestra a JavaScript, tales como hooks de DOM. A nivel del núcleo, los dos navegadores no poseen grandes diferencias. Los problemas se encuentran frecuentemente en la duración de la ejecución.</p> -<h4 id="Diferencias_en_las_fechas_de_JavaScript" name="Diferencias_en_las_fechas_de_JavaScript">Diferencias en las fechas de JavaScript</h4> -<p>La única diferencia en el objeto <code>Date</code> es el método <code>getYear</code>. Para la especificación ECMAScript (que es la que sigue JavaScript), el método no es compatible con el efecto 2000 y al ejecutar <code>new Date().getYear()</code> en 2004 se obtendrá un valor igual a "104". Para la especificación ECMAScript, <code>getYear</code> devuelve el año menos 1900 lo cual devolvía "98" para 1998. <code>getYear</code> quedó obsoleto en la versión 3 de ECMAScript y fue reemplazado por <code>getFullYear</code>. Internet Explorer cambió la implementación de <code>getYear</code> para que funcionara como <code>getFullYear</code> y fuese así compatible con el efecto 2000, mientras que Mozilla mantuvo el comportamiento estándar.</p> -<h4 id="Diferencias_de_ejecuci.C3.B3n_en_JavaScript" name="Diferencias_de_ejecuci.C3.B3n_en_JavaScript">Diferencias de ejecución en JavaScript</h4> -<p>Diferentes navegadores ejecutarán JavaScript de modo distinto. Por ejemplo, el siguiento código asume que el nodo <code>div</code> ya existe en el DOM en el momento en el que el bloque <code>script</code> se ejecuta:</p> -<pre>... -<div id="foo">Cargando...</div> - -<script> - document.getElementById("foo").innerHTML = "Cargado."; -</script> -</pre> -<p>Sin embargo esto no está garantizado. Para asegurarnos de que todos los elementos existen se debería usar el manejador de evento <code>onload</code> en la etiqueta <code><body></code>:</p> -<pre><body onload="doFinish();"> - -<div id="foo">Cargando...</div> - -<script> - function doFinish() { - var element = document.getElementById("foo"); - element.innerHTML = "Cargado."; - } -</script> -... -</pre> -<p>Tales problemas relativos a la duración de la ejecución están también relacionados con el hardware; los sistemas más lentos pueden mostar fallos que los más rápidos no provocan. Un ejemplo en concreto se puede encontrar en <code>window.open</code>, el cual abre una nueva ventana:</p> -<pre><script> - function doOpenWindow(){ - var myWindow = window.open("about:blank"); - myWindow.location.href = "http://www.ibm.com"; - } -</script> -</pre> -<p>El problema con el código es que <code>window.open</code> es asíncrono lo que implica que no se bloquee la ejecución de JavaScript hasta que la ventana haya terminado de cargarse. Por tanto, se puede ejecutar la línea siguiente a la línea <code>window.open</code> antes de que la nueva ventana haya terminado de cargarse. Se puede lidiar con esto poniendo un manejador <code>onload</code> en la nueva ventana y luego llamar desde ahí a la ventana padre (usando <code>window.opener</code>).</p> -<h4 id="Diferencias_en_la_generaci.C3.B3n_HTML_de_JavaScript" name="Diferencias_en_la_generaci.C3.B3n_HTML_de_JavaScript">Diferencias en la generación HTML de JavaScript</h4> -<p>JavaScript puede generar, a través de <code>document.write</code>, código HTML al vuelo a partir de una cadena de texto. El principal problema es cuando JavaScript está embebido dentro del documento HTML (es decir, dentro de la etiqueta <code><script></code>) y genera HTML que contiene una etiqueta <code><script></code>. Si el documento está en modo estricto de visualización, entonces se analizará la etiqueta <code></script></code> que se halla dentro de la cadena como la etiqueta de cierre de la etiqueta <code><script></code> que la contiene. El siguiente código ilustra mejor esto:</p> -<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" - "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -... -<script> - document.write("<script type='text\/javascript'>alert('Hola');<\/script>") -</script> -</pre> -<p>Dado que la página está en modo estricto, el analizador de Mozilla verá el primer <code><script></code> y lo analizará hasta que encuentre la etiqueta de cierre correspondiente, que será cuando encuentre el primer <code></script></code>. Se hace así porque el analizador no tiene conocimiento de la existencia de JavaScript (o cualquier otro lenguaje) cuando está en modo estricto. En modo quirks, el analizador conoce de la existencia de JavaScript cuando trabaja (algo que lo ralentiza). Internet Explorer siempre funciona en modo quirks porque no soporta el auténtico XHTML. Para hacer que esto funcione en modo estricto en Mozilla se puede separar la cadena en dos partes:</p> -<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" - "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -... -<script> - document.write("<script type='text\/javascript'>alert('Hola');</" + "script>") -</script> -</pre> -<h4 id="Depurando_JavaScript" name="Depurando_JavaScript">Depurando JavaScript</h4> -<p>Mozilla proporciona varias formas de depurar los fallos relacionados con JavaScript encontrados en las aplicaciones creadas para Internet Explorer. La primera herramienta es la consola integrada de JavaScript, mostrada en la figura 1, donde los errores y los avisos quedan registrados. Puedes acceder a ella en Mozilla yendo al menú <strong>Herramientas -> Desarrollo web -> Consola JavaScript</strong>, en Firefox 2.0 (el navegador ligero de Mozilla) en <strong>Herramientas -> Consola de errores</strong>.</p> -<p>Figura 1. Consola JavaScript</p> -<p><img alt="Javascript Console"></p> -<p>La consola JavaScript puede mostrar el registro completo o sólo los errores, avisos o mensajes. El mensaje de error de la figura 1 dice que en aol.com, la línea 95 ha intentado acceder a una variable no definida llamada is_ns70. Al hacer clic en el enlace se abrira el visualizador de código interno de Mozilla con la línea en cuestión resaltada.</p> -<p>La consola además permite evaluar JavaScript. Para probar la sintaxis de JavaScript introducida, se puede escribir <code>1+1</code> en el campo de entrada y pulsar <strong>Evaluar</strong>, como muestra la figura 2.</p> -<p>Figure 2. Evaluación en la consola de JavaScript</p> -<p><img alt="JavaScript Console evaluating"></p> -<p>El motor de JavaScript en Mozilla tiene integrado el soporte para la depuración convirtiéndose así en una potente herramienta para los desarrolladores de JavaScript. Venkman, mostrado en la figura 3, es un potente depurador multinavegador para JavaScript que se integra con Mozilla. Generalmente es empaquetado con los lanzamientos de Mozilla y puede ser encontrado en <strong>Herramientas -> Desarrollo web -> Depurador Javascript</strong>. En Firefox, el navegador no viene incluido. En lugar de eso, se puede descargar e instalar desde la <a class="external" href="http://www.mozilla.org/projects/venkman/">página del proyecto Venkman</a>. Además se pueden encontrar tutoriales en la página de desarrollo, ubicada en la <a class="external" href="http://www.hacksrus.com/%7Eginda/venkman/">página de desarrollo de Venkman</a>.</p> -<p>Figura 3. Depurador de JavaScript de Mozilla</p> -<p><img alt="Mozilla's JavaScript debugger"></p> -<p>El depurador de JavaScript puede depurar el código JavaScript que se ejecuta en la ventana del navegador de Mozilla. Soporta características estándar de depuración tales como puntos de interrupciones, revisión de la pila de llamadas e inspección de variables/objetos. Todas las caracterísitcas son accesibles a través de la interfaz de usuario y a través de la consola interactiva del depurador. Con la consola, se puede ejecutar código JavaScript arbitrario del mismo ámbito en el que JavaScript está siendo depurado.</p> -<h3 id="Diferencias_en_CSS" name="Diferencias_en_CSS">Diferencias en CSS</h3> -<p>Todos los productos basados en Mozilla poseen un fuerte soporte para CSS (hojas de estilo en cascada), en comparación con Internet Explorer y el resto de navegadores, ya que soportan la mayoría de CSS 1, CSS 2.1 y parte de CSS 3.</p> -<p>Para la mayoría de los problemas que se mostrarán a continuación, Mozilla mostrará un aviso o un error en la consola JavaScript. Se aconseja comprobar la consola JavaScript si se encuentran problemas relacionados con CSS.</p> -<h4 id="Tipos_MIME_.28cuando_no_se_aplican_a_los_ficheros_CSS.29" name="Tipos_MIME_.28cuando_no_se_aplican_a_los_ficheros_CSS.29">Tipos MIME (cuando no se aplican a los ficheros CSS)</h4> -<p>El problema más común relacionado con CSS ocurre cuando las definiciones CSS que se hallan dentro de los ficheros CSS referenciados no se aplican. Esto generalmente se debe a que el servidor envía un tipo MIME incorrecto para el fichero CSS. La especificación CSS dice que los ficheros CSS deberían ser servidos con el tipo MIME <code>text/css</code>. Mozilla respetará esto y sólo cargará los ficheros CSS con ese tipo MIME si la página web está en modo estricto de estándares. Internet Explorer siempre cargará el fichero CSS sin importar el tipo MIME con el que haya sido servido. Se considera que las páginas web están en modo estricto de estándares cuando comienzan con un doctype (tipo de documento) estricto. Para solventar este problema, se puede optar por hacer que el servidor envíe el tipo MIME correcto o eliminando el doctype. Se explicarán más a fondo los doctypes en la siguiente sección.</p> -<h4 id="CSS_y_las_unidades" name="CSS_y_las_unidades">CSS y las unidades</h4> -<p>Muchas aplicaciones web no usan unidades en sus hojas CSS, especialmente cuando se usa JavaScript para establecer el CSS. Mozilla permite esto sólo si la página no se visualiza en modo estricto. Dado que Internet Explorer no soporta el auténtico XHTML, no se preocupa por saber si se han especificado o no las unidades. Si la página está en modo estricto de estándares y no se usan unidades entonces Mozilla ignorará dicho estilo.</p> -<pre class="eval"><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" - "<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>CSS y unidades - Ejemplo</title> - </head> - <body> - // funciona en modo estricto - <div style="width: 40<span class="boldcode">px</span>; border: 1px solid black;"> - Text - </div> -</pre> -<pre class="eval"> // peta en modo estricto - <div style="width: 40; border: 1px solid black;"> - Text - </div> - </body> -</html> -</pre> -<p>Debido a que el ejemplo de antes tiene un doctype estricto, la página se visualizará en modo estricto de estándares. El primer div tendrá una anchura de 40px dado que se han usado unidades, pero el segundo div no tendrá anchura definida y se le asignará aquella por defecto (100%). Pasaría lo mismo si se estableciese la anchura a través de JavaScript.</p> -<h4 id="JavaScript_y_CSS" name="JavaScript_y_CSS">JavaScript y CSS</h4> -<p>Dado que Mozilla soporta los estándares CSS, también soporta el estándar DOM de CSS para poder establecer el estilo CSS a través de JavaScript. Se puede acceder a, eliminar y cambiar cualquier regla CSS de un elemento a través de su miembro <code>style</code>:</p> -<pre><div id="myDiv" style="border: 1px solid black;"> - Text -</div> - -<script> - var myElm = document.getElementById("myDiv"); - myElm.style.width = "40px"; -</script> -</pre> -<p>Igualmente se puede acceder a cada atributo CSS de la misma forma. De nuevo, si la página web está en modo estricto, se debe establecer una unidad o, en caso contrario, Mozilla ignorará el comando. Cuando se consulte un valor, digamos <code>.style.width</code>, Mozilla e Internet Explorer devolverán una cadena de texto incluyendo la unidad. Se puede convertir dicha cadena en un número a través de <code>parseFloat("40px")</code>.</p> -<h4 id="Diferencias_en_la_propiedad_CSS_overflow" name="Diferencias_en_la_propiedad_CSS_overflow">Diferencias en la propiedad CSS overflow</h4> -<p>Con CSS, se introduce el concepto de overflow que permite definir cómo se maneja el rebasamiento, por ejemplo, cuando la altura del contenido de un <code>div</code> es mayor que la altura del propio <code>div</code>. El estándar CSS indica que en caso de rebosamiento, si no se ha establecido dicho comportamiento, el contenido del <code>div</code> debe de rebosar.</p> -<p>Sin embargo, Internet Explorer no cumple esto y alargará el <code>div</code> más allá de su altura hasta que pueda albergar correctamente su contenido. Más abajo hay un ejemplo que muestra esta diferencia:</p> -<pre><div style="height: 100px; border: 1px solid black;"> - <div style="height: 150px; border: 1px solid red; margin: 10px;"> - a - </div> -</div> -</pre> -<p>Como se puede apreciar en la figura 4, Mozilla reacciona como especifican los estándares del W3C. Dichos estándares dicen que, en este caso, el <code>div</code> interior debería rebosar por la parte inferior dado que su contenido es más alto que el de su padre. Si se prefiere utilizar el comportamiento de Internet Explorer, simplemente no habría que especificar ninguna altura para el elemento exterior.</p> -<p>Figura 4. Rebosamiento DIV</p> -<p><img alt="DIV Overflow"></p> -<h4 id="Diferencias_con_la_pseudoclase_:hover" name="Diferencias_con_la_pseudoclase_:hover">Diferencias con la pseudoclase :hover</h4> -<p>El comportamiento no estándar de la pseudoclase CSS :hover ocurre en un gran número de sitios web. Generalmente se manifiesta por sí mismo cambiando el estilo de texto cuando el cursor del ratón se sitúa sobre un elemento en Mozilla, pero no en Internet Explorer. Esto es así porque el selector CSS <code>a:hover</code> en Internet Explorer coincide con <code><a href="">...</a></code> pero no con <code><a name="">...</a></code>, el cual establece los anclajes en HTML. El cambio de texto ocurre porque los autores encapsulan áreas con el etiquetado de anclajes:</p> -<pre>CSS: - a:hover {color: green;} - -HTML: - <a href="foo.com">Este texto debería volverse verde cuando el cursor del ratón se sitúe sobre él.</a> - - <a name="anchor-name"> - Este texto debería cambiar el color cuando fuese sobrevolado con el cursor pero no ocurre en Internet Explorer. - </a> -</pre> -<p>Mozilla sigue la especificación CSS correctamente y cambiará el color a verde en este ejemplo. Se pueden utilizar dos formas para que Mozilla se comporte como Internet Explorer y no cambie el color del texto cuando éste sea sobrevolado:</p> -<ul> - <li>Primero, se puede cambiar la regla CSS para que sea <code>a:link:hover {color: green;}</code>, lo que provocará que sólo se cambie el color si un elemento es un enlace (tiene un atributo <code>href</code>).</li> - <li>Alternativamente, es posible cambiar el marcado y cerrar la <code>< a/></code> abierta antes de que empiece el texto; el anclaje continuará funcionando de este modo.</li> -</ul> -<h3 id="Modo_quirks_vs._modo_est.C3.A1ndar" name="Modo_quirks_vs._modo_est.C3.A1ndar">Modo quirks vs. modo estándar</h3> -<p>Los antiguos navegadores, como Internet Explorer 4, visualizaban los documentos bajo ciertas condiciones con el llamado modo quirks (modo chapucero). Aunque Mozilla apunta a convertirse en un navegador respetuoso con los estándares, posee 3 modos que permiten soportar las antiguas páginas creadas para comportarse de ese modo tan peculiar. El contenido de la página y la forma en la que nos es enviada determinan el modo que Mozilla debe de utilizar. Mozilla muestra dicho modo en <strong>Ver -> Información de página</strong> (o <code>Ctrl+I</code>) y Firefox lo hace en <strong>Herramientas -> Información de la página</strong>. El modo en el que una página es visualizada depende de su doctype.</p> -<p>Los doctypes (contracción inglesa para las declaraciones de tipos de documento) tiene este aspecto:</p> -<p><code><!DOCTYPE HTML PUBLIC <span style="color: blue;">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span style="color: green;">"<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"</span>></code></p> -<p>La parte azul es llamada identificador público, la verde es el identificador de sistema que es un URI.</p> -<h4 id="Modo_est.C3.A1ndar" name="Modo_est.C3.A1ndar">Modo estándar</h4> -<p>El modo estándar es el modo de visualización más estricto: visualizará las páginas según las especificaciones HTML y CSS del W3C y no permitirá ninguna chapuza. Mozilla lo usa bajo las siguientes condiciones:</p> -<ul> - <li>Cuando una página es enviada con un tipo MIME igual a <code>text/xml</code> o cualquier otro tipo MIME XML o XHTML.</li> - <li>Con cualquier doctype "DOCTYPE HTML SYSTEM" (por ejemplo, <code><!DOCTYPE HTML SYSTEM "<span class="nowiki">http://www.w3.org/TR/REC-html40/strict.dtd</span>"></code>), exceptuando el doctype de IBM</li> - <li>Cuando se especifique un doctype desconocido o éste no esté asociado a un DTD.</li> -</ul> -<h4 id="Modo_casi_est.C3.A1ndar" name="Modo_casi_est.C3.A1ndar">Modo <em>casi</em> estándar</h4> -<p>Mozilla introdujo el modo <em>casi</em> estándar por una razón: una sección en la especificación CSS 2 daba al traste con los diseños que se basaban en la maquetación con tablas que contenían pequeñas imágenes. El usuario, en lugar de ver una imagen completa, veía cada imagen separada con un pequeño espacio en blanco. La antigua página de IBM mostrada en la figura 5 es un ejemplo de ello.</p> -<p>Figura 5. Hueco en imágenes</p> -<p><img alt="Image Gap"></p> -<p>El modo <em>casi</em> estándar se comporta de modo muy parecido al modo estándar exceptuando el problema del hueco en imágenes. Este problema ocurre frecuentemente en páginas diseñadas acorde a los estándares y hace que se muestren incorrectamente.</p> -<p>Mozilla utiliza el modo <em>casi</em> estándar bajo las siguientes condiciones:</p> -<ul> - <li>Ante cualquier doctype de tipo "loose" (obsoleto), por ejemplo <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"></code>, <code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"></code></li> - <li>Para el doctype de IBM (<code><!DOCTYPE html SYSTEM "<span class="nowiki">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</span>"></code>)</li> -</ul> -<p>Para más información, véase el <a href="/es/Im%C3%A1genes,_tablas_y_huecos_misteriosos" title="es/Imágenes,_tablas_y_huecos_misteriosos">problema de los huecos con imágenes</a></p> -<h4 id="Modo_quirks" name="Modo_quirks">Modo quirks</h4> -<p>Actualmente, el web está plagado de sitios con HTML no válido, además de marcado que sólo funciona gracias a fallos de ciertos navegadores. Los antiguos navegadores de Netscape, cuando eran los amos del mercado, tenían fallos. Cuando desembarcó Internet Explorer, plagió esos mismos fallos para poder visualizar correctamente las páginas de aquella época. Más tarde cuando los nuevos navegadores llegaron al mercado, la mayoría de estos fallos originales, usualmente llamados <strong>quirks</strong>, fueron mantenidos por razones de compatibilidad hacia atrás. Mozilla soporta muchos de estos fallos cuando visualiza páginas en modo quirks. Nótese que debido a estos quirks, las páginas se visualizan más lentamente que si estuvieran escritas para respetar los estándares. La mayoría de las páginas web son visualizadas utilizando este modo.</p> -<p>Mozilla utiliza este modo cuando encuentra las siguientes condiciones:</p> -<ul> - <li>Cuando no se ha especificado un doctype.</li> - <li>Cuando se ha especificado un doctype sin su identificador de sistema (por ejemplo, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></code>)</li> -</ul> -<p>Para más información, véase <a href="/es/Mozilla_Quirks_Mode_Behavior" title="es/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior</a> and <a href="/es/Mozilla's_DOCTYPE_sniffing" title="es/Mozilla's_DOCTYPE_sniffing">Mozilla's DOCTYPE sniffing</a>.</p> -<h3 id="Diferencias_en_eventos" name="Diferencias_en_eventos">Diferencias en eventos</h3> -<p>Mozilla e Internet Explorer son prácticamente incompatibles en cuanto al manejo de eventos se refiere. El modelo de eventos de Mozilla sigue al del W3C y al de Netscape. En Internet Explorer, si una función es llamada desde un evento, se puede acceder al objeto <code>event</code> a través de <code>window.event</code>. En cambio Mozilla pasa un objeto <code>event</code> a los manejadores de eventos. Éstos deben de pasar específicamente el objeto a la función llamada a través de un argumento. A continuación se muestra un ejemplo multiplataforma de manejador de evento:</p> -<pre><div onclick="handleEvent(event);">Click me!</div> - -<script> - function handleEvent(evento) { - // if evento es null, significa que es el modelo de eventos de IE - // así que se utiliza window.event - var miEvento = evento ? evento : window.event; - } -</script> -</pre> -<p>A veces, esto no funciona ya que Internet Explorer <em>coge</em> el parámetro <code>evento</code>, identificándolo como no nulo, lo que en el códico provoca que no se pueda asignar window.event. La solución consiste en comprobar la propiedad window.event:</p> -<pre><div onclick="handleEvent(event);">Click me!</div> - -<script> - function handleEvent(aEvent) { - var myEvent = window.event ? window.event : aEvent; - } -</script> -</pre> -<p>Las propiedades y funciones que el objeto <code>event</code> muestra son nombradas con frecuencia de forma diferente entre Mozilla e Internet Explorer, como muestra la tabla 4:</p> -<table class="standard-table"> - <caption> - Tabla 4. Diferencias entre las propiedades de eventos entre Mozilla e Internet Explorer</caption> - <tbody> - <tr> - <th>Nombre en Internet Explorer</th> - <th>Nombre en Mozilla</th> - <th>Descripción</th> - </tr> - <tr> - <td>altKey</td> - <td>altKey</td> - <td>Propiedad booleana que indica si la tecla <code>alt</code> estaba pulsada durante el evento.</td> - </tr> - <tr> - <td>cancelBubble</td> - <td>stopPropagation()</td> - <td>Usado para evitar que el evento sea propagado hacia los elementos ancestros en el árbol.</td> - </tr> - <tr> - <td>clientX</td> - <td>clientX</td> - <td>Coordenada X del evento, relativa al viewport.</td> - </tr> - <tr> - <td>clientY</td> - <td>clientY</td> - <td>Coordenada Y del evento, relativa al viewport.</td> - </tr> - <tr> - <td>ctrlKey</td> - <td>ctrlKey</td> - <td>Propiedad booleana que indica si la tecla <code>Ctrl</code> estaba pulsada durante el evento.</td> - </tr> - <tr> - <td>fromElement</td> - <td>relatedTarget</td> - <td>Para eventos de ratón, es el elemento desde el que partió el cursor del ratón.</td> - </tr> - <tr> - <td>keyCode</td> - <td>keyCode</td> - <td>Para eventos de teclado, es el número que representa a la tecla que estaba pulsada. 0 para los eventos de ratón.</td> - </tr> - <tr> - <td>returnValue</td> - <td>preventDefault()</td> - <td>Usado para evitar que se ejecute la acción por defecto del evento.</td> - </tr> - <tr> - <td>screenX</td> - <td>screenX</td> - <td>Coordenada X del evento, relativa a la pantalla.</td> - </tr> - <tr> - <td>screenY</td> - <td>screenY</td> - <td>Coordenada Y del evento, relativa a la pantalla.</td> - </tr> - <tr> - <td>shiftKey</td> - <td>shiftKey</td> - <td>Propiedad booleana que indica si la tecla <code>shift</code> estaba pulsada durante el evento.</td> - </tr> - <tr> - <td>srcElement</td> - <td>target</td> - <td>El elemento que provocó el evento.</td> - </tr> - <tr> - <td>toElement</td> - <td>currentTarget</td> - <td>Para eventos de ratón, es el elemento al que el ratón se dirigió cuando terminó el mismo.</td> - </tr> - <tr> - <td>type</td> - <td>type</td> - <td>Devuelve el nombre del evento.</td> - </tr> - </tbody> -</table> -<h4 id="A.C3.B1adir_manejadores_de_eventos" name="A.C3.B1adir_manejadores_de_eventos">Añadir manejadores de eventos</h4> -<p>Mozilla posee dos formas de añadir eventos a través de JavaScript. El primero, soportado por todos los navegadores, consiste en establecer propiedades de eventos directamente en los objetos. Para asignar un manejador de evento al evento <code>click</code> hay que pasar una referencia a dicha función manejadora a la propiedad <code>onclick</code> del objeto.</p> -<pre><div id="myDiv">Click me!</div> - -<script> - function handleEvent(aEvent) { - // if aEvent is null, means the Internet Explorer event model, - // so get window.event. - var myEvent = aEvent ? aEvent : window.event; - } - - function onPageLoad(){ - document.getElementById("myDiv").onclick = handleEvent; - } -</script> -</pre> -<p>Mozilla soporta al 100% la forma estándar del W3C para añadir <em>escuchadores</em> a los nodos del DOM: usando los métodos <code>addEventListener()</code> y <code>removeEventListener()</code>; y además con el beneplácito de poder añadir múltiples escuchadores para un mismo tipo de evento. Ambos métodos necesitan tres parámetros: el tipo de evento, una referencia a la función y un valor booleano que indica si el escuchador debe de capturar los eventos en su fase <em>captura</em>. Si el booleano es puesto a false, sólo capturará los eventos en la fase <em>burbuja</em>. Los eventos del W3C tienen tres fases: captura, objetivo y burbuja. Cada objeto <code>event</code> tiene un atributo <code>eventPhase</code> que indica la fase en la que se encuentra el evento mediante un número de base 0. Cuando se provoca un evento, éste comienza en el elemento más externamente situado del DOM, o sea, en el elemento superior del árbol DOM. Luego va atravesando el DOM usando el camino más corto hacia el objetivo. Estamos en la fase de <strong>captura</strong>. Cuando el evento alcanza al objetivo, el evento está en la fase <strong>objetivo</strong>. Tras alcanzar el objetivo, regresa por el árbol hasta alcanzar de nuevo el nodo más exteriormente situado. Esta es la fase <strong>burbuja</strong>. El modelo de eventos de Internet Explorer sólo tiene la fase burbuja por lo que estableciendo el tercer parámetro a false se conseguirá un comportamiento igual al de Internet Explorer.</p> -<pre><div id="myDiv">Click me!</div> - -<script> - - function handleEvent(aEvent) { - // if aEvent is null, it is the Internet Explorer event model, - // so get window.event. - var myEvent = aEvent ? aEvent : window.event; - } - - function onPageLoad() { - var element = document.getElementById("myDiv"); - element.addEventListener("click", handleEvent, false); - } -</script> -</pre> -<p>Una ventaja de <code>addEventListener()</code> y <code>removeEventListener()</code> sobre asignar las propiedades es que se pueden tener múltiples escuchadores de eventos para el mismo evento, cada cual llamando a una función diferente. Así, para eliminar un escuchador de evento se necesita que los tres parámetros sean los mismos que se usaron para añadir el escuchador.</p> -<p>Mozilla no soporta el método de Internet Explorer de convertir etiquetas <script> en manejadores de eventos, la cual amplía a <script> con los atributos <code>for</code> y <code>event</code> (véase tabla 5). Tampoco suporta los métodos <code>attachEvent</code> ni <code>detachEvent</code>. En vez de eso, se deberían de usar los métodos <code>addEventListener</code> y <code>removeEventListener</code>. Internet Explorer no soporta la especificación de eventos del W3C.</p> -<table class="standard-table"> - <caption> - Tabla 5. Diferencias en los métodos de eventos entre Mozilla e Internet Explorer</caption> - <tbody> - <tr> - <th>Método de Internet Explorer</th> - <th>Método de Mozilla</th> - <th>Descripción</th> - </tr> - <tr> - <td>attachEvent(tipoEvento, referenciaFuncion)</td> - <td>addEventListener(tipoEvento, referenciaFuncion, usarCaptura)</td> - <td>Añade un manejador de evento a un elemento del DOM</td> - </tr> - <tr> - <td>detachEvent(tipoEvento, referenciaFuncion)</td> - <td>removeEventListener(tipoEvento, referenciaFuncion, usarCaptura)</td> - <td>Elimina un manejador de evento a un elemento del DOM</td> - </tr> - </tbody> -</table> -<h3 id="Edici.C3.B3n_de_texto_enriquecido" name="Edici.C3.B3n_de_texto_enriquecido">Edición de texto enriquecido</h3> -<p>Aunque Mozilla está orgulloso de ser el navegador más compatible con los estándares del W3C, sigue soportando funcionalidades no estándar, tales como <code>innerHTML</code> o <a href="/es/Midas" title="es/Midas">editores de texto enriquecido</a>, al no existir los equivalentes del W3C.</p> -<p>Con Mozilla 1.3 se introdujo una implementación de la característica <a href="/es/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="es/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">designMode</a> de Internet Explorer, la cual convierte a un documento HTML en un editor de texto enriquecido.</p> -<p>Una vez se ha cambiado al editor, los comandos pueden ser ejecutados en el documento a través del comando <code>execCommand</code>. Mozilla no soporta el atributo <code>contentEditable</code> de Internet Explorer para hacer editable cualquier control. Se puede usar un <code>iframe</code> para crear un editor de texto enriquecido.</p> -<h4 id="Diferencias_en_el_texto_enriquecido" name="Diferencias_en_el_texto_enriquecido">Diferencias en el texto enriquecido</h4> -<p>Mozilla soporta el método estándar del W3C para acceder al objeto <code>document</code> del iframe a través de <code>IFrameElmRef.contentDocument</code> mientras que Internet Explorer lo hace a través de <code>document.frames{{ mediawiki.external('\"IframeName\"') }}</code> y luego accede al <code>document</code> resultante.</p> -<pre><script> -function getIFrameDocument(aID) { - var rv = null; - - // if contentDocument existe, entonces es compatible con el W3C (Mozilla) - if (document.getElementById(aID).contentDocument){ - rv = document.getElementById(aID).contentDocument; - } else { - // IE - rv = document.frames[aID].document; - } - return rv; -} -</script> -</pre> -<p>Otra diferencia entre Mozilla e Internet Explorer es el HTML que crea el editor de texto enriquecido. Por defecto, Mozilla usa CSS para generar marcado. Sin embargo, Mozilla permite alternar entre el modo HTML y CSS usando el comando <code>useCSS</code> del execCommand cambiándolo entre true y false. Internet Explorer siempre usa el marcado HTML.</p> -<pre>Mozilla (CSS): - <span style="color: blue;">Azul</span> - -Mozilla (HTML): - <font color="blue">Azul</font> - -Internet Explorer: - <FONT color="blue">Azul</FONT> -</pre> -<p>Más abajo hay una lista de comandos soportados por execCommand en Mozilla:</p> -<table class="standard-table"> - <caption> - Tabla 6. Comandos del editor de texto enriquecido.</caption> - <tbody> - <tr> - <th>Nombre</th> - <th>Descripción</th> - <th>Argumentos</th> - </tr> - <tr> - <td>bold</td> - <td>Alterna el modo en negrita de la selección.</td> - <td>---</td> - </tr> - <tr> - <td>createlink</td> - <td>Genera un enlace HTML a partir del texto seleccionado.</td> - <td>URL a usar para el enlace</td> - </tr> - <tr> - <td>delete</td> - <td>Borra la selección.</td> - <td>---</td> - </tr> - <tr> - <td>fontname</td> - <td>Cambia la fuente del texto seleccionado.</td> - <td>Nombre de la fuente (por ejemplo, Arial)</td> - </tr> - <tr> - <td>fontsize</td> - <td>Cambia el tamaño del texto seleccionado.</td> - <td>Tamaño de la fuente</td> - </tr> - <tr> - <td>fontcolor</td> - <td>Cambia el color de la fuente del texto seleccionado.</td> - <td>Color a usar</td> - </tr> - <tr> - <td>indent</td> - <td>Indenta el bloque donde el se encuentra el cursor.</td> - <td>---</td> - </tr> - <tr> - <td>inserthorizontalrule</td> - <td>Inserta un elemento <hr> en la posición del cursor.</td> - <td>---</td> - </tr> - <tr> - <td>insertimage</td> - <td>Inserta una imagen en la posición del cursor.</td> - <td>URL de la imagen</td> - </tr> - <tr> - <td>insertorderedlist</td> - <td>Inserta un elemento de lista ordeanda (<ol>) en la posición del cursor.</td> - <td>---</td> - </tr> - <tr> - <td>insertunorderedlist</td> - <td>Inserta un elemento de lista no ordenada (<ul>) en la posición del cursor.</td> - <td>---</td> - </tr> - <tr> - <td>italic</td> - <td>Alterna el modo en cursiva de la selección.</td> - <td>---</td> - </tr> - <tr> - <td>justifycenter</td> - <td>Centra el contenido de la línea actual.</td> - <td>---</td> - </tr> - <tr> - <td>justifyleft</td> - <td>Alinea el contenido de la línea actual a la izquierda.</td> - <td>---</td> - </tr> - <tr> - <td>justifyright</td> - <td>Alinea el contenido de la línea actual a la derecha.</td> - <td>---</td> - </tr> - <tr> - <td>outdent</td> - <td>Elimina la indentación del bloque donde se halla el cursor.</td> - <td>---</td> - </tr> - <tr> - <td>redo</td> - <td>Rehace el anterior comando deshecho.</td> - <td>---</td> - </tr> - <tr> - <td>removeformat</td> - <td>Elimina todo el formato de la selección.</td> - <td>---</td> - </tr> - <tr> - <td>selectall</td> - <td>Selecciona todo el texto del editor.</td> - <td>---</td> - </tr> - <tr> - <td>strikethrough</td> - <td>Alterna el modo tachado del texto seleccionado.</td> - <td>---</td> - </tr> - <tr> - <td>subscript</td> - <td>Convierte la selección actual a subíndice.</td> - <td>---</td> - </tr> - <tr> - <td>superscript</td> - <td>Convierte la selección actual a superíndice.</td> - <td>---</td> - </tr> - <tr> - <td>underline</td> - <td>Alterna el modo subrayado del texto seleccionado.</td> - <td>---</td> - </tr> - <tr> - <td>undo</td> - <td>Deshace el último comando ejecutado.</td> - <td>---</td> - </tr> - <tr> - <td>unlink</td> - <td>Elimina toda la información sobre enlaces de la selección.</td> - <td>---</td> - </tr> - <tr> - <td>useCSS</td> - <td>Alterna el uso de CSS en el marcado generado.</td> - <td>Valor booleano</td> - </tr> - </tbody> -</table> -<p>Para más información, véase <a href="/es/Rich-Text_Editing_in_Mozilla" title="es/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></p> -<h3 id="Diferencias_en_XML" name="Diferencias_en_XML">Diferencias en XML</h3> -<p>Mozilla posee un fuerte soporte para XML y todas sus tecnologías relacionadas, tales como XSLT y servicios web. Además soporta algunas extensiones no estándar de Internet Explorer, tales como XMLHttpRequest.</p> -<h4 id="C.C3.B3mo_manejar_XMLs" name="C.C3.B3mo_manejar_XMLs">Cómo manejar XMLs</h4> -<p>Al igual que ocurre con el estándar HTML, Mozilla soporta la especificación del DOM para XML del W3C, la cual permite manipular prácticamente cualquier aspecto de cualquier documento XML. Las diferencias entre el DOM para XML de Internet Explorer y Mozilla son provocadas por el comportamiento no estándar de Internet Explorer. Probablemente la diferencia más común es cómo ambos manejan los espacios en blanco en los nodos de texto. Con frecuencia cuando se genera un XML, contiene espacios en blanco entre los nodos XML. Internet Explorer, cuando usa <code>XMLNode.childNodes[]</code> no contendrá estos nodos de espacios en blanco. En Mozilla, estos nodos se incluirán en el vector.</p> -<pre>XML: - <?xml version="1.0"?> - <myXMLdoc xmlns:myns="http://myfoo.com"> - <myns:foo>bar</myns:foo> - </myXMLdoc> - -JavaScript: - var myXMLDoc = getXMLDocument().documentElement; - alert(myXMLDoc.childNodes.length); -</pre> -<p>La primera línea de JavaScript carga el documento XML y accede a su elemento ráiz (<code>myXMLDoc</code>) recuperando el <code>documentElement</code>. La segunda línea simplemente muestra el número de nodos hijos. Para la especificación del W3C, los espacios en blanco y los retornos de carro se unen bajo un nodo de texto si uno es seguido del otro. Para Mozilla, el nodo <code>myXMLdoc</code> tiene tres hijos: un nodo de texto que contiene un retorno de carro y dos espacios, el nodo <code>myns:foo</code>, y otro nodo de texto con un retorno de carro. No obstante, Internet Explorer no obedece esto y devolverá "1" para el anterior código, considerando sólamente el nodo <code>myns:foo</code> Por elli, para recorrer los nodos hijos y desechar los nodos de texto se deben distinguir tales nodos del resto.</p> -<p>Como se mencionó antes, cada nodo tiene un atributo <code>nodeType</code> que representa el tipo de nodo. Por ejemplo, un nodo elemento tiene tipo 1 mientras que un nodo documento posee tipo 9. Para distinguir los nodos de texto se deben buscar los nodos de tipo 3 (nodos de texto) y los de tipo 8 (nodos comentario).</p> -<pre>XML: - <?xml version="1.0"?> - <myXMLdoc xmlns:myns="http://myfoo.com"> - <myns:foo>bar</myns:foo> - </myXMLdoc> - -JavaScript: - var myXMLDoc = getXMLDocument().documentElement; - var myChildren = myXMLDoc.childNodes; - - for (var run = 0; run < myChildren.length; run++){ - if ( (myChildren[run].nodeType != 3) && - myChildren[run].nodeType != 8) ){ - // not a text or comment node - }; - }; -</pre> -<h4 id="Islas_de_datos_XML" name="Islas_de_datos_XML">Islas de datos XML</h4> -<p>Internet Explorer posee una peculiaridad no estándar llamada <em>islas de datos XML (XML data islands)</em>, que permite incrustar XML dentro de un documento HTML usando la etiqueta HTML no estándar <code><xml></code>. Mozilla no soporta las islas de datos XML y las maneja como etiquetas HTML desconocidas. Se puede obtener la misma funcionalidad utilizando XHTML, sin embargo, debido a que el soporte de Internet Explorer para XHTML es débil, esto no es generalmente una opción.</p> -<p>Una solución multiplataforma es usar analizadores DOM que generan, a partir de un documento XML serializado, el documento XML analizado. Mozilla usa la clase <code>DOMParser</code> la cual toma una cadena serializada crea un documento XML a partir de ella. En Internet Explorer se puede obtener la misma funcionalidad usando ActiveX. El nuevo <code>Microsoft.XMLDOM</code> genera y posee el método un método llamado <code>loadXML</code> que acepta una cadena de texto y genera un documento a partir de ella. El siguiente código muestra su funcionamiento:</p> -<p> </p> -<pre>Isla de datos XML para IE - .. - <xml id="xmldataisland"> - <foo>bar</foo> - </xml> - -Solución multiplataforma: - var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>"; - - var myDocument; - - if (document.implementation.createDocument){ - // Mozilla, create a new DOMParser - var parser = new DOMParser(); - myDocument = parser.parseFromString(xmlString, "text/xml"); - } else if (window.ActiveXObject){ - // Internet Explorer, create a new XML document using ActiveX - // and use loadXML as a DOM parser. - myDocument = new ActiveXObject("Microsoft.XMLDOM"); - myDocument.async="false"; - - myDocument.loadXML(xmlString); - } -</pre> -<h4 id="Peticiones_HTTP_para_XML" name="Peticiones_HTTP_para_XML">Peticiones HTTP para XML</h4> -<p>Internet Explorer permite el envío y recuperación de ficheros XML usando la clase de MSXML <code>XMLHTTP</code>, instanciada a través de ActiveX usando <code>new ActiveXObject("Msxml2.XMLHTTP")</code> o <code>new ActiveXObject("Microsoft.XMLHTTP")</code>. Dado que no hay un método estándar para hacer esto, Mozilla proporciona la misma funcionalidad en el objeto global <code>XMLHttpRequest</code> de JavaScript. El objeto genera peticiones asíncronas de modo predeterminado.</p> -<p>Tras instanciar el objeto usando <code>new XMLHttpRequest()</code> se puede usar el método <code>open</code> para especificar qué tipo de petición (GET o POST) se quiere usar, qué fichero se va a cargar y si será una petición asíncrona o no. Si la llamada es asíncrona, será necesario facilitar al miembro <code>onload</code> una referencia a una función que será invocada una vez la petición ha sido completada.</p> -<p>Petición síncrona:</p> -<pre class="eval"> var myXMLHTTPRequest = new XMLHttpRequest(); - myXMLHTTPRequest.open("GET", "data.xml", false); - - myXMLHTTPRequest.send(null); - - var myXMLDocument = myXMLHTTPRequest.responseXML; -</pre> -<p>Petición asíncrona:</p> -<pre class="eval"> var myXMLHTTPRequest; - - function <span class="boldcode">xmlLoaded</span>() { - var myXMLDocument = myXMLHTTPRequest.responseXML; - } - - function loadXML(){ - myXMLHTTPRequest = new XMLHttpRequest(); - - myXMLHTTPRequest.open("GET", "data.xml", true); - - myXMLHTTPRequest.onload = <span class="boldcode">xmlLoaded</span>; - - myXMLHTTPRequest.send(null); - } -</pre> -<p>La tabla 7 muestra una lista de métodos y propiedades disponibles para el objeto <code>XMLHttpRequest</code> de Mozilla.</p> -<table class="standard-table"> - <caption> - Tabla 7. Métodos y propiedades XMLHttpRequest</caption> - <tbody> - <tr> - <th>Nombre</th> - <th>Descripción</th> - </tr> - <tr> - <td>void abort()</td> - <td>Detiene la petición si ésta aún está en curso.</td> - </tr> - <tr> - <td>string getAllResponseHeaders()</td> - <td>Devuelve todas las cabeceras de respuesta como una única cadena.</td> - </tr> - <tr> - <td>string getResponseHeader(string headerName)</td> - <td>Devuelve el valor de la cabecera especificada.</td> - </tr> - <tr> - <td>functionRef onerror</td> - <td>La función que se le asigne será invocada cuando ocurran errores durante una petición.</td> - </tr> - <tr> - <td>functionRef onload</td> - <td>La función que se le asigne será invocada cuando la petición se complete con éxito y se haya recibido una respuesta. Se usa con las peticiones asíncronas.</td> - </tr> - <tr> - <td>void open (string HTTP_Method, string URL)<br> - <br> - void open (string HTTP_Method, string URL, boolean async, string userName, string password)</td> - <td>Inicializa la petición para la URL especificada, usando tanto GET o POST como el método HTTP. Para enviar la petición, es necesario llamar al método <code>send()</code> tras la inicialización. Si <code>async</code> se establece a false, la petición será síncrona. De modo predeterminado es asíncrona. Opcionalmente se puede especificar un nombre de usuario y contraseña por si la necesita la URL facilitada. Initializes the request for the specified URL, using either GET or POST as the HTTP method. To send the request, call the <code>send()</code> method after initialization. If <code>async</code> is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.</td> - </tr> - <tr> - <td>int readyState</td> - <td>Estado de la petición. Valores posibles: - <table> - <tbody> - <tr> - <th>Valor</th> - <th>Descripción</th> - </tr> - <tr> - <td>0</td> - <td>UNINITIALIZED - open() aún no ha sido llamado.</td> - </tr> - <tr> - <td>1</td> - <td>LOADING - send() aún no ha sido llamado.</td> - </tr> - <tr> - <td>2</td> - <td>LOADED - send() ha sido llamado y las cabeceras y el estado están disponibles.</td> - </tr> - <tr> - <td>3</td> - <td>INTERACTIVE - Descargando. responseText contiene datos parciales.</td> - </tr> - <tr> - <td>4</td> - <td>COMPLETED - Todas las operaciones han sido completadas.</td> - </tr> - </tbody> - </table> - </td> - </tr> - <tr> - <td>string responseText</td> - <td>Cadena que contiene la respuesta.</td> - </tr> - <tr> - <td>DOMDocument responseXML</td> - <td>Documento DOM que contiene la respuesta.</td> - </tr> - <tr> - <td>void send(variant body)</td> - <td>Realiza la petición. Si <code>body</code> está definido, será enviado como el cuerpo de la petición POST. <code>body</code> puede ser un documento XML o una cadena conteniendo un XML serializado.</td> - </tr> - <tr> - <td>void setRequestHeader (string headerName, string headerValue)</td> - <td>Establece una cabecera de petición HTTP para usarla en la petición HTTP. Ha de ser llamada tras invocar al método <code>open()</code>.</td> - </tr> - <tr> - <td>string status</td> - <td>El código de estado de la respuesta HTTP.</td> - </tr> - </tbody> -</table> -<h4 id="Diferencias_en_XSLT" name="Diferencias_en_XSLT">Diferencias en XSLT</h4> -<p>Mozilla soporta las transformaciones XSL 1.0 (XSLT). Además permite a JavaScript realizar tanto transformaciones XSLT como consultas XPath sobre un documento.</p> -<p>Mozilla necesita que se le pase el fichero XML y XSLT que contiene la hoja de estilos con un tipo MIME XML (<code>text/xml</code> o <code>application/xml</code>). Este es el motivo más común por el cual los XSLT no funcionan en Mozilla pero sí en Internet Explorer. En ese sentido, Mozilla es estricto.</p> -<p>Internet Explorer 5.0 y 5.5 soportan el borrador de XSLT, el cual es sustancialmente diferente a la recomendación final 1.0. La forma más fácil de distinguir la versión en la que ha sido escrito un fichero XSLT es mirando su espacio de nombres. El espacio de nombres para la recomendación 1.0 es <code><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span></code> mientras que el espacio de nombres del borrador es <code><span class="nowiki">http://www.w3.org/TR/WD-xsl</span></code>. Internet Explorer 6 soporta el borrador por razones de compatibilidad hacia atrás. Mozilla no soporta dicho borrador, sólo la recomendación final.</p> -<p>Si el XSLT necesita distinguir el navegador, se puede consultar la propiedad de sistema "xsl:vendor". El motor XSLT de Mozilla devolverá "Transformiix" mientras que Internet Explorer devolverá "Microsoft".</p> -<pre><xsl:if test="system-property('xsl:vendor') = 'Transformiix'"> - <!-- Marcado específico de Mozilla --> -</xsl:if> -<xsl:if test="system-property('xsl:vendor') = 'Microsoft'"> - <!-- Marcado específico de Internet Explorer --> -</xsl:if> -</pre> -<p>Mozilla también proporciona una interfaz de JavaScript para XSLT, permitiendo a un sitio web completar transformaciones XSLT en memoria. Esto puede hacerse usando el objeto global de JavaScript <code>XSLTProcessor</code>. <code>XSLTProcessor</code> necesita que se carge el XML y los ficheros XSLT ya que necesita sus documentos DOM. El documento XSLT importado por <code>XSLTProcessor</code> permite manipular los parámetros XSLT. <code>XSLTProcessor</code> puede generar un documento independiente utilizando <code>transformToDocument()</code> o puede crear un fragmento de documento utilizando <code>transformToFragment()</code> para poder ser anexado fácilmente a otro documento DOM. Más abajo se muestra un ejemplo:</p> -<pre>var xslStylesheet; -var xsltProcessor = new XSLTProcessor(); - -// carga el fichero XSLT example1.xsl -var myXMLHTTPRequest = new XMLHttpRequest(); -myXMLHTTPRequest.open("GET", "example1.xsl", false); -myXMLHTTPRequest.send(null); - -// obtiene el documento XML y lo importa -xslStylesheet = myXMLHTTPRequest.responseXML; - -xsltProcessor.importStylesheet(xslStylesheet); - -// carga el fichero xml example1.xml -myXMLHTTPRequest = new XMLHttpRequest(); -myXMLHTTPRequest.open("GET", "example1.xml", false); -myXMLHTTPRequest.send(null); - -var xmlSource = myXMLHTTPRequest.responseXML; - -var resultDocument = xsltProcessor.transformToDocument(xmlSource); -</pre> -<p>Tras crear un objeto <code>XSLTProcessor</code>, hay que cargar el fichero XSLT a través de <code>XMLHttpRequest</code>. El miembro <code>responseXML</code> del XMLHttpRequest contiene el documento XML del fichero XSLT, el cuas es pasado a <code>importStylesheet</code>. Luego hay que usar de nuevo <code>XMLHttpRequest</code> para cargar el documento XML que va a ser transformado. Ese documento es entonces pasado al método <code>transformToDocument</code> de <code>XSLTProcessor</code>. La tabla 8 muestra una lista con los métodos de <code>XSLTProcessor</code>.</p> -<table class="standard-table"> - <caption> - Tabla 8. Métodos de XSLTProcessor</caption> - <tbody> - <tr> - <th>Método</th> - <th>Descripción</th> - </tr> - <tr> - <td>void importStylesheet(Node styleSheet)</td> - <td>Importa la hoja de estilo XSLT. El argumento <code>styleSheet</code> es el nodo ráiz del documento DOM de la hoja de estilos XSLT.</td> - </tr> - <tr> - <td>DocumentFragment transformToFragment(Node source, Document owner)</td> - <td>Transforma el nodo <code>source</code> aplicando la hoja de estilos importada con el método <code>importStylesheet</code> y genera un DocumentFragment. <code>owner</code> especifica a qué documento DOM debe anexarse el DocumentFragment, haciéndolo compatible con ese documento DOM.</td> - </tr> - <tr> - <td>Document transformToDocument(Node source)</td> - <td>Transforma el nodo <code>source</code> aplicando la hoja de estilos importada a través del método <code>importStylesheet</code> y devuelve un documento DOM independiente.</td> - </tr> - <tr> - <td>void setParameter(String namespaceURI, String localName, Variant value)</td> - <td>Establece un parámetro en la hoja de estilos XSLT importada.</td> - </tr> - <tr> - <td>Variant getParameter(String namespaceURI, String localName)</td> - <td>Obtiene el valor de un parámetro en la hoja de estilos XSLT importada.</td> - </tr> - <tr> - <td>void removeParameter(String namespaceURI, String localName)</td> - <td>Elimina todos los parámetros establecidos para la hoja de estilos XSLT importada y establece sus valores a los predeterminados para el XSLT.</td> - </tr> - <tr> - <td>void clearParameters()</td> - <td>Elimina todos los parámetros establecidos y establece sus valores a los predeterminados en la hoja de estilos XSLT.</td> - </tr> - <tr> - <td>void reset()</td> - <td>Elimina todos los parámetros y hojas de estilos.</td> - </tr> - </tbody> -</table> -<div class="originaldocinfo"> - <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - <ul> - <li>Author(s): Doron Rosenberg, IBM Corporation</li> - <li>Published: 26 Jul 2005</li> - <li>Link: <a class="external" href="http://www.ibm.com/developerworks/web/library/wa-ie2mozgd/" rel="freelink">http://www.ibm.com/developerworks/we...y/wa-ie2mozgd/</a></li> - </ul> -</div> -<p> </p> diff --git a/files/es/orphaned/modo_casi_estándar_de_gecko/index.html b/files/es/orphaned/modo_casi_estándar_de_gecko/index.html deleted file mode 100644 index 712f8d57dd..0000000000 --- a/files/es/orphaned/modo_casi_estándar_de_gecko/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Modo casi estándar de Gecko -slug: orphaned/Modo_casi_estándar_de_Gecko -tags: - - Desarrollo_Web - - Estándares_Web - - Gecko - - HTML - - Todas_las_Categorías -original_slug: Modo_casi_estándar_de_Gecko ---- -<p> </p> -<p> </p> -<p>A partir de Mozilla 1.0.1 y 1.1 beta, hay un nuevo modo de renderizado llamado "casi estándar". Este modo se añade a los ya tradicionales y modo "estándar".</p> -<p>El modo de renderizado "casi estándar" es exactamente igual que el "modo estándar", en todo excepto en un detalle, la disposición de las imágenes dentro de las tablas se maneja tal y como se hace en el modo "Quirks" de Gecko, que es bastante comparable con la de otros navegadores, tales como Internet Explorer. Esto implica que los diseños basados en tablas con imágenes troceadas tienen más probabilidades de mostrarse correctamente en los navegadores basados en Gecko que utilicen el motor de renderizado de Mozilla 1.0.1 o posterior, tanto en el modo "Quirks" como en el "casi estándar". Léase el artículo "<a href="es/Im%c3%a1genes%2c_tablas_y_huecos_misteriosos">Imágenes, tablas y huecos misteriosos</a>" para una explicación detallada de cómo son tratados estos diseños en el modo "estándar".</p> -<p>Salvo esta diferencia, el modo "casi estándar" y el "estándar" son exactamente iguales en términos de maquetación y otros comportamientos.</p> -<h3 id="Activando_el_modo_.22casi_est.C3.A1ndar.22" name="Activando_el_modo_.22casi_est.C3.A1ndar.22">Activando el modo "casi estándar"</h3> -<p>Los DOCTYPEs que activan el modo "casi estándar" son los que contienen:</p> -<ul> - <li>El identificador público "<code>-//W3C//DTD XHTML 1.0 Transitional//EN</code>"</li> - <li>El identificador público "<code>-//W3C//DTD XHTML 1.0 Frameset//EN</code>"</li> - <li>El identificador público "<code>-//W3C//DTD HTML 4.01 Transitional//EN</code>", con un identificador de sistema</li> - <li>El identificador público "<code>-//W3C//DTD HTML 4.01 Frameset//EN</code>", con un identificador de sistema</li> - <li>The IBM system DOCTYPE "<code><span class="nowiki">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</span></code>"</li> -</ul> -<p>Un DOCTYPE completo contiene un identificador público y un identificador de sistema. Al hablar sobre los DOCTYPEs, mucha gente se refiere a ellos como "con URI" o "sin URI". El URI es el identificador de sistema. Por ejemplo, considere el DOCTYPE siguiente:</p> -<pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" - "http://www.w3.org/TR/html4/loose.dtd"></pre> -<p>Tiene dos partes:</p> -<ul> - <li>El identificador público: "<code>-//W3C//DTD HTML 4.01 Transitional//EN</code>"</li> - <li>El identificador de sistema: "<code><span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span></code>"</li> -</ul> -<p>Así, cualquier DOCTYPE HTML 4.01 transicional o Frameset con un URI (identificador de sistema) activará el modo "casi estándar", como cualquier DOCTYPE XHTML 1.0 transicional o Frameset, con o sin URI. Los Autores sin relación con IBM no deben preocuparse por su DOCTYPE a medida, también activará el modo "casi estándar".</p> -<h3 id="Recomendaciones" name="Recomendaciones">Recomendaciones</h3> -<ul> - <li>Los autores que están procurando migrar al código válido usando HTML 4,01 o XHTML 1,0, y que todavía utilizan conceptos de diseño con tablas e imágenes, deben asegurarse de utilizar un DOCTYPE que active el modo "casi estándar".</li> -</ul> -<h3 id="M.C3.A1s_en_MDC" name="M.C3.A1s_en_MDC">Más en MDC</h3> -<ul> - <li><a href="es/Im%c3%a1genes%2c_tablas_y_huecos_misteriosos">Imágenes, tablas y huecos misteriosos</a></li> -</ul> -<h3 id="Enlaces_relacionados" name="Enlaces_relacionados">Enlaces relacionados</h3> -<ul> - <li><a href="es/Selecci%c3%b3n_de_modo_en_Mozilla">Selección de modo en Mozilla</a></li> - <li><span class="comment">no sé si publicar esta sección: <div class="originaldocinfo"> == Original Document Information == * Author(s): Eric A. Meyer, Netscape Communications * Last Updated Date: Published 08 Nov 2002 * Cop</span></li> -</ul> diff --git a/files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html deleted file mode 100644 index f3fcefb3bd..0000000000 --- a/files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Depuración -slug: orphaned/Mozilla/Add-ons/WebExtensions/Debugging -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Debugging -original_slug: Mozilla/Add-ons/WebExtensions/Depuración ---- -<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/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html deleted file mode 100644 index 14d7d6c58f..0000000000 --- a/files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Publicando tu extensión -slug: orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ -tags: - - AMO - - Addons - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ -original_slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension ---- -<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/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html deleted file mode 100644 index 5b210d1016..0000000000 --- a/files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Conversión de extensiones de Google Chrome -slug: orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension -original_slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome ---- -<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/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html deleted file mode 100644 index 7a29fd0967..0000000000 --- a/files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Empaquetado e Instalación -slug: orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -original_slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation ---- -<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/orphaned/módulos_javascript/index.html b/files/es/orphaned/módulos_javascript/index.html deleted file mode 100644 index c0fb25c792..0000000000 --- a/files/es/orphaned/módulos_javascript/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Módulos JavaScript -slug: orphaned/Módulos_JavaScript -tags: - - Firefox 3 - - JavaScript - - Todas_las_Categorías - - XPConnect -original_slug: Módulos_JavaScript ---- - - -<p>Firefox 3 introduce el método <code><a href="es/Components.utils.import">Components.utils.import()</a></code> , que provee una sencilla forma de importar código JavaScript desde un módulo externo. Existe información sobre cómo configurar y <a href="es/Usando_m%c3%b3dulos_de_c%c3%b3digo_JavaScript">usar módulos JavaScript</a>. Los Módulos de JavaScript pueden también ser usados para <a href="es/Trabajar_con_ventanas_desde_c%c3%b3digo_chrome#Usando_m.C3.B3dulos_de_c.C3.B3digo_JavaScript">compartir datos</a> en extensiones.</p> - -<p>Además de ofrecer este método para importar módulos, Firefox incluye dos módulos por defecto:</p> - -<dl> - <dt>XPCOMUtils</dt> - <dd>El módulo <a href="es/XPCOMUtils.jsm">XPCOMUtils.jsm</a> provee facilidades para componentes de JavaScript cargados mediante el cargador de componentes de JavaScript.</dd> - <dt>JSON</dt> - <dd>El módulo <a href="es/JSON.jsm">JSON.jsm</a> provee facilidades para manipular datos JSON.</dd> - <dt>PluralForm</dt> - <dd>El módulo <a href="es/Localizaci%c3%b3n_y_Plurales">PluralForm.jsm</a> provee herramientas para pluralizar correctamente palabras en múltiples localizaciones.</dd> -</dl> diff --git a/files/es/orphaned/nsdirectoryservice/index.html b/files/es/orphaned/nsdirectoryservice/index.html deleted file mode 100644 index 528635d2e5..0000000000 --- a/files/es/orphaned/nsdirectoryservice/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: nsDirectoryService -slug: orphaned/nsDirectoryService -original_slug: nsDirectoryService ---- -<h3 id="Resumen" name="Resumen">Resumen</h3> -<p>El servicio de directorio XPCOM devuelve las ubicaciones de directorios "bien conocidos" en los sistemas operativos de una forma independiente. Por ejemplo puede indicarle la ruta del directorio temporal del sistema, el directorio de trabajo actual, etc.</p> -<pre class="eval"> ClassID: f00152d0-b40b-11d3-8c9c-000064657374 - ContractID: @mozilla.org/file/directory_service;1 -</pre> -<h3 id="Interfaces_soportados" name="Interfaces_soportados">Interfaces soportados</h3> -<p><code><a href="es/NsIProperties">nsIProperties</a></code>, <code><a href="es/NsIDirectoryService">nsIDirectoryService</a></code></p> diff --git a/files/es/orphaned/participar_en_el_proyecto_mozilla/index.html b/files/es/orphaned/participar_en_el_proyecto_mozilla/index.html deleted file mode 100644 index 9db164f92f..0000000000 --- a/files/es/orphaned/participar_en_el_proyecto_mozilla/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Participar en el proyecto Mozilla -slug: orphaned/Participar_en_el_proyecto_Mozilla -tags: - - para_revisar -original_slug: Participar_en_el_proyecto_Mozilla ---- -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si estás interesado en ayudar a corregir los errores o trabajar en el código detrás de la plataforma Mozilla, este es el lugar para encontrar la documentación que te guiará en la dirección correcta.</span></span></p> -<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="Temas_generales"><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Temas generales</span></span></h2> <dl> <dt><a class="internal" href="/En/Developer_Guide" title="En/Developer Guide"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Guía para desarrolladores de Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consejos y guías sobre desarrollo para contribuir al código base de Mozilla.</span></span></dd> <dt><a class="internal" href="/En/Developer_Guide/Source_Code" title="En/Developer Guide/Source Code"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Código fuente de Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Información acerca de cómo obtener el código de Mozilla, ya sea por descarga o por medio de control de versiones, y cómo obtener el código en el árbol.</span></span></dd> <dt><a class="internal" href="/En/The_Mozilla_platform" title="En/The Mozilla platform"><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Elaborar documentación</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Información acerca de cómo construir proyectos de Mozilla, incluyendo Firefox y Thunderbird.</span></span> <em><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Esta página necesita limpieza.</span></span></em></dd> <dt><a class="internal" href="/En/The_Mozilla_platform" title="En/The Mozilla platform"><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La plataforma Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información sobre la plataforma Mozilla, incluyendo todos sus APIs y tecnologías, así como la forma de utilizarlas en tus propios proyectos.</span></span></dd> <dt><a class="internal" href="/Project:en/How_to_Help" title="Project:en/How to Help"><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Documentar Mozilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Ayuda a crear y mejorar nuestra documentación para Mozilla y para la Web abierta.</span></span></dd> <dt><a class="internal" href="/En/Debugging" title="En/Debugging"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Depuración (Debugging)</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Consejos útiles y pautas a seguir para depurar el código de Mozilla.</span></span></dd> <dt><a class="internal" href="/en/QA" title="en/QA"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Aseguramiento/Control de calidad</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Información sobre pruebas y control de errores.</span></span></dd> <dt><a class="internal" href="/es/Localización" title="es/Localización"><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Localización</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Documentación en múltiples idiomas sobre traducción de los proyectos de Mozilla, documentación y otros muchos aspectos.</span></span></dd> <dt><a class="internal" href="/en/Glossary" title="en/Glossary"><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Glosario</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Términos y definiciones utilizadas por los hackers de Mozilla.</span></span></dd> </dl> <h2 id="Páginas_sobre_proyectos"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Páginas sobre proyectos</span></span></h2> <dl> <dt><a class="internal" href="/en/Thunderbird" title="en/Thunderbird"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Thunderbird</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cliente de correo Mozilla</span></span></dd> <dt><a class="internal" href="/en/Calendar" title="en/Calendar">Sunbird</a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Proyecto de calendario de Mozilla</span></span></dd> </dl> </td> <td> <h2 id="Herramientas"><span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Herramientas</span></span></h2> <dl> <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Bugzilla</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-ph-missing goog-gtc-from-human" dir="ltr" style="">La base de datos </span></span><a class="internal" href="/en/Bugzilla" title="En/Bugzilla">Bugzilla</a><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-ph-missing goog-gtc-from-human" dir="ltr" style=""> se usa para rastrear los problemas o incidencias relacionados con los proyectos de Mozilla.</span></span></dd> <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Navega y busca en el repositorio de código fuente de Mozilla en la Web.</span></span></dd> <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style="">La herramienta </span></span><a class="internal" href="/en/Bonsai" title="En/Bonsai">Bonsai</a><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style=""> te permite saber quién cambió qué archivo en el repositorio y cuándo lo hicieron.</span></span></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><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style=""> muestra el estado del árbol (si actualmente se construye o no con éxito).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Compruébalo antes de proteger (check in) o desplegar (check out) y asegúrate de que estás trabajando con un árbol de trabajo.</span></span></dd> <dt><a class="internal" href="/en/Crash_reporting" title="en/Crash reporting"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Seguimiento de errores</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style="">Información sobre los sistemas de notificación de fallos </span></span><a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-ph-missing" dir="ltr" style=""> y </span></span><a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a>.</dd> <dt><a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Seguimiento del rendimiento</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta la información de rendimiento para los proyectos de Mozilla.</span></span></dd> <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Foros para desarrolladores</span></span></a></dt> <dd><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Una lista de temas específicos de foros de discusión, donde puedes hablar sobre cuestiones de desarrollo de Mozilla.</span></span></dd> </dl> </td> </tr> </tbody> -</table> -<p> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ languages ({"en": "en/Participating_in_the_Mozilla_project", "zh-cn": "cn / Participating_in_the_Mozilla_project", "ja": "ja / Participating_in_the_Mozilla_project", "ko": "ko / Participating_in_the_Mozilla_project"}) }}</span></span></p> diff --git a/files/es/orphaned/preguntas_frecuentes_sobre_incrustación_en_mozilla/index.html b/files/es/orphaned/preguntas_frecuentes_sobre_incrustación_en_mozilla/index.html deleted file mode 100644 index e5a0fe2999..0000000000 --- a/files/es/orphaned/preguntas_frecuentes_sobre_incrustación_en_mozilla/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Preguntas frecuentes sobre incrustación en Mozilla -slug: orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla -original_slug: Preguntas_frecuentes_sobre_incrustación_en_Mozilla ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/es/orphaned/preguntas_frecuentes_sobre_incrustación_en_mozilla/introducción_a_gecko_e_inscrustación/index.html b/files/es/orphaned/preguntas_frecuentes_sobre_incrustación_en_mozilla/introducción_a_gecko_e_inscrustación/index.html deleted file mode 100644 index d8704e6489..0000000000 --- a/files/es/orphaned/preguntas_frecuentes_sobre_incrustación_en_mozilla/introducción_a_gecko_e_inscrustación/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Introducción a Gecko e inscrustación -slug: >- - orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación -tags: - - Incrustando_Mozilla - - Todas_las_Categorías -original_slug: >- - Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación ---- -<p> -</p> -<h2 id="Secci.C3.B3n_1:_Introducci.C3.B3n_a_Gecko_e_incrustaci.C3.B3n"> Sección 1: Introducción a Gecko e incrustación </h2> -<h3 id=".C2.BFQu.C3.A9_es_Gecko.3F"> ¿Qué es Gecko? </h3> -<p>Gecko es el motor del navegador, gestión de redes, analizadores, modelos de diseño, chrome y las otras tecnologías sobre las que Mozilla y otras apliaciones son construidas. En otras palabras, todo aquello queno es específico de la aplicación. -</p><p>Gecko tiene una ligeramente desactualizada <a class="external" href="http://www.mozilla.org/newlayout/faq.html">sección de preguntas frecuentes</a> of its own. -</p> -<h3 id=".C2.BFQu.C3.A9_es_Mozilla.3F"> ¿Qué es Mozilla? </h3> -<p>Mozilla es una aplicación multimplataforma formada por un navegador web,un editor de páginas web un gesator de correo /lector de noticiasn desarrollado sobre Gecko. -</p> -<h3 id=".C2.BFQu.C3.A9_es_the_GRE.3F"> ¿Qué es the GRE? </h3> -<p>El GRE (anteriormente conocido como MRE) es <a href="es/GRE">Gecko Runtime Environment</a> un entorno de ejecución que muchas aplicaciones pueden compartir. Actualmente se ha esta desarrollando como un proyecto independiente llamado <a href="es/XULRunner">XULRunner</a>. -</p> -<h3 id=".C2.BFQu.C3.A9_es_XPCOM.3F"> ¿Qué es XPCOM? </h3> -<p>XPCOM es una <i>tecnología de objetos</i> (similar al COM de MS Windows pero multiplataforma) cuya misión es to unificar la creación, el control y la eliminación de objetos y otros datosbajo Mozilla. El núcleo XPCOM es la interfaz nsISupports, que proporciona marco de referencia de conteo y un entorno de ejecución de búsquedas para capacidades. Todos los objetos XPCOM incluyen la interfaz nsISupports, además de las interfaces específicas de cadad objeto. Finalmente, XPCOM incluye una capa lenguaje-independiente llamada XPConnect que permite que el desarrrollo de objetos sea escrito en cualquier lenguage compatible y sean llamados desde cualquier lenguaje compatible. -</p><p>Puede encontrar más información <a class="external" href="http://www.mozilla.org/projects/xpcom/">aquí</a>. -</p> -<h3 id=".C2.BFQu.C3.A9_significa_Gecko_.E2.80.9Cincrustado.E2.80.9D.3F"> ¿Qué significa Gecko “incrustado”? </h3> -<p>Gecko permite a desarrolladores de terceros emplear la misma tecnología que Mozilla usa.. Esto significa que puede incrustar un navegador web dentro de una aplicación de terceros, abrir canales y descargas dentro de los límites de la red, navergar por el DOM y más. Incluso puede construir aplicaciones enteras empleando el chrome. -</p> -<h3 id=".C2.BFCuales_son_los_t.C3.A9rminos_de_licencia_para_incrustar_Gecko.3F"> ¿Cuales son los términos de licencia para incrustar Gecko? </h3> -<p>Los mismos que para el resto de Mozilla. Mire <a class="external" href="http://www.mozilla.org/MPL/">página MPL</a> fpara más información. -</p> -<h3 id=".C2.BFHay_disponible_un_SDK.3F"> ¿Hay disponible un SDK? </h3> -<p>Estamos trabajando lentamente para crear un SDK. De momento le recomendamos que <a class="external" href="http://www.mozilla.org/source.html">obtenga el código fuente</a> y compile desde ahí. -</p><p>Las versiones de desarrollo del SDK para Win32 pueden ser encontradas <a class="link-ftp" href="ftp://ftp.mozilla.org/pub/mozilla.org/mozilla/nightly/latest-trunk/gecko-sdk-i586-pc-msvc.zip">aquí</a>. -</p> -<h3 id=".C2.BFCu.C3.A1l_es_la_.C3.BAltima_versi.C3.B3n.3F_.C2.BFQue_versi.C3.B3n_deber.C3.ADa_usar.3F"> ¿Cuál es la última versión? ¿Que versión debería usar? </h3> -<p>Versiones incrustadas y el código fuente se generan con frecuencia y pueden descargarse <a class="link-ftp" href="ftp://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">aquí</a>. Si desea estabilidad se recomienda emplear versiones Mozilla de la rama 1.7.x. -</p> -<h3 id=".C2.BFQui.C3.A9n_est.C3.A1_usando_Gecko_actualmente.3F"> ¿Quién está usando Gecko actualmente? </h3> -<p>Mire <a class="external" href="http://www.mozilla.org/projects/embedding/examples/">aquí</a> para ver la creciente lista de programas que incrustan Gecko. -</p> diff --git a/files/es/orphaned/principios_básicos_de_los_servicios_web/index.html b/files/es/orphaned/principios_básicos_de_los_servicios_web/index.html deleted file mode 100644 index f94847ecf5..0000000000 --- a/files/es/orphaned/principios_básicos_de_los_servicios_web/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Principios básicos de los servicios Web -slug: orphaned/Principios_básicos_de_los_servicios_Web -tags: - - SOAP - - Servicios_Web_XML - - Todas_las_Categorías - - XML - - XML-RPC -original_slug: Principios_básicos_de_los_servicios_Web ---- -<p> -</p><p><span class="comment">Summary: Un tema candente en la Web últimamente son los servicios Web. Esta pequeña guía le permitirá aprender mas acerca de los servicios Web.</span> -</p> -<h3 id="Los_fundamentos"> Los fundamentos </h3> -<p>Los servicios Web no son realmente nada nuevo, y actualmente, si ha utilizado RSS o Atom para leer noticias desde un sitio web, tiene una idea de como funciona un servicio Web. -</p><p>Los servicios Web intercambian datos desde un servidor al cliente, utilizando el formato XML para enviar las peticiones, de modo que tanto el servidor como el cliente puede entenderse (<a href="es/Introducci%c3%b3n_a_XML">Introducción a XML</a>). -</p><p>Una mejor forma de entender un servicio Web es compararlo con un formulario HTML (en PHP o ASP) para postear y enviar datos. Ambos, el servicio Web y el formulario, reciben y envían peticiones. La única diferencia es que un servicio Web utiliza XML. -</p> -<h3 id="Ejemplos_de_servicios_Web_en_acci.C3.B3n"> Ejemplos de servicios Web en acción </h3> -<p>Como se dijo anteriormente, RSS y los alimentadores Atom son simplemente un ejemplo de como funciona un servicio Web, más comúnmente, XML-RPC o SOAP son también utilizados para realizar la comunicación entre el servidor y el cliente. -</p> -<h3 id="Introducci.C3.B3n_a_XML-RPC"> Introducción a XML-RPC </h3> -<p>XML-RPC es un tipo de servicio Web que ha existido desde 1998 y aunque no es un estándar oficial <a class="external" href="http://www.w3.org/">W3C</a>,es utilizado extensamente. XML-RPC fue desarrollado por Useful Inc, junto con Microsoft. -</p> -<h3 id="Introducci.C3.B3n_a__SOAP"> Introducción a SOAP </h3> -<p>SOAP, un servicio Web, está listado como un estándar <a class="external" href="http://www.w3.org/">W3C</a>, y es similar de diversas formas a XML_RPC. SOAP está respaldado por IBM, así como por Microsoft. -</p> -<h3 id=".C2.BFSOAP_0_XML-RPC.3F"> ¿SOAP 0 XML-RPC? </h3> -<p>Brevemente, SOAP fue pensado para rellenar los huecos de XML-RPC. Por ejemplo, es mucho más fácil enviar un array multi-dimensional con SOAP que con XML-RPC. SOAP tiene más funcionalidad que XML-RPC, aunque XML-RPC también tiene su propio uso. -</p> -<div class="originaldocinfo"> -<h3 id="Informaci.C3.B3n_sobre_el_documento"> Información sobre el documento </h3> -<ul><li> Autor(es): Justin G. Shreve -</li><li> Fecha de la última actualización : 19 de Mayo de 2005 -</li></ul> -</div> diff --git a/files/es/orphaned/recursos_en_modo_desconectado_en_firefox/index.html b/files/es/orphaned/recursos_en_modo_desconectado_en_firefox/index.html deleted file mode 100644 index 10ebefd805..0000000000 --- a/files/es/orphaned/recursos_en_modo_desconectado_en_firefox/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Recursos en modo desconectado en Firefox -slug: orphaned/Recursos_en_modo_desconectado_en_Firefox -tags: - - Aplicaciones_web_en_desconectado - - Firefox 3 -original_slug: Recursos_en_modo_desconectado_en_Firefox ---- - - -<p>Firefox 3 implementa en gran parte el soporte HTML 5 para la memoria<em>cache</em> (memoria temporal) de la aplicación web en modo desconectado. Esto lo hace por medio del cache de la aplicación (un conjunto de recursos obtenido con un manifiesto proporcionado por la aplicación web).</p> - -<h3 id="El_cache_de_la_aplicaci.C3.B3n" name="El_cache_de_la_aplicaci.C3.B3n">El cache de la aplicación</h3> - -<p>{{ Note("Firefox no gestiona actualmente ningún control de versión en el cache de aplicación.") }}</p> - -<p>Ya que múltiples aplicaciones web pueden compartir recursos (y pueden incluso compartir la misma URI) cada aplicación mantiene su propio cache (su propia memoria temporal). Sin embargo, las diferentes cache de las aplicaciones son agrupadas por su propio manifiesto de usuario y tienen un<em>estado de actualización</em> conjunto. El estado de actualización es uno de los siguientes:</p> - -<dl> - <dt><code>idle</code></dt> - <dd>El cache de aplicación no está descargando actualizaciones.</dd> - <dt><code>checking</code></dt> - <dd>El cache está comprobando su propio manifiesto de recursos, para ver si hay uno más reciente.</dd> - <dt><code>downloading</code></dt> - <dd>El cache está actualizando su manifiesto de recursos con información nueva, ya que el anterior fue modificado.</dd> -</dl> - -<p>{{ Fx_minversion_note(3, "Actualmente, sólo se permiten estradas de recursos. Firefox no admite aún cambios oportunistas o entradas de restitución (volver a versiones anteriores), sin embargo, es recomendable suministrar una lista blanca, si procede, para una compatibilidad futura.") }}</p> - -<h4 id="Recursos" name="Recursos">Recursos</h4> - -<p>El cache siempre incluye al menos un recurso, identificado por su URI, de al menos una de las siguientes categorías:</p> - -<dl> - <dt>Entradas implícitas (Implicit entries)</dt> - <dd>Son recursos agregados al cache por que un contexto de navegación principal visitado por el usuario incluyó un documento que indica que el recurso está en su cache, utilizando su atributo <code>manifest</code>.</dd> - <dt>El manifiesto (manifest)</dt> - <dd>Este es el manifiesto de recurso en sí mismo, cargado desde la URI especificada en una entrada de <code>html</code> implícita con el atributo <code>manifest</code>. El manifiesto es descargado y tratado durante el proceso de actualización del cache de la aplicación. Las entradas implícitas han de tener el mismo protocolo, servidor y puerto que el manifiesto.</dd> - <dt>Entradas explícitas (Explicit entries)</dt> - <dd>Son recursos listados en el manifiesto del cache.</dd> - <dt>Entradas de restitución/recuperación (Fallback entries)</dt> - <dd>Son recursos que fueron listados en el manifiesto del cache como entradas "fallback". <strong>No admitido aún en Firefox.</strong></dd> - <dt>Entradas oportunistas (Opportunistically cached entries)</dt> - <dd>Son recursos cuyas URI correspondían a un espacio de nombre de puesta en cache oportunista cuando se descargaron y que por tanto, fueron puestas automáticamente en la memoria de la aplicación. <strong>No admitido aún en Firefox.</strong></dd> - <dt>Entradas dinámicas (Dynamic entries)</dt> - <dd>Son recursos añadidos por programa, con el método <code><a href="es/NsIDOMOfflineResourceList#add.28.29">add()</a></code>.</dd> -</dl> - -<h4 id="La_lista_blanca_en_l.C3.ADnea" name="La_lista_blanca_en_l.C3.ADnea">La lista blanca en línea</h4> - -<p>La lista blanca puede contener cero o más URIs de recursos, que la aplicación web necesitará obtener del servidor en lugar de desde la memoria cache. Esto permite al modelo de seguridad del navegador proteger al usuario de posibles brechas de seguridad, limitando el acceso sólo a recursos aprobados.</p> - -<p>{{ Note("La lista blanca no se usa en Firefox 3, sin embargo, convendría facilitar una si se necesita, tanto para tener y/o mantener la compatibilidad con versiones futuras de Firefox u otros navegadores que implementen recursos en modo desconectado.") }}</p> - -<h3 id="El_manifiesto" name="El_manifiesto">El manifiesto</h3> - -<p>Los archivos de manifiesto deben darse con el tipo MIME <code>text/cache-manifest</code>, y todos los recursos entregados con este tipo MIME deben seguir la sintaxis para un manifiesto de aplicación cache, según se define más abajo. Los manifiestos de cache son archivo de texto con formato 'UTF-8' y pueden, opcionalmente, incluir un carácter BOM. Las líneas nuevas pueden ser representadas por un carácter de nueva linea (U+000A) o por uno de retorno de carro (U+000D) o por ambos caracteres.</p> - -<p>La primera línea de un manifiesto cache debe contener la cadena de orden: "CACHE MANIFEST" (con un espacio simple U´0020 entre las dos palabras), seguido por nada, espacios o caracteres de tabulador. Cualquier otro texto en esta línea será ignorado.</p> - -<p>El resto del manifiesto debe estar compuesto por ninguna , alguna o todas las líneas siguientes:</p> - -<dl> - <dt>Línea vacía</dt> - <dd>Podemos utilizar líneas vacías (sin nada) o con caracteres de espacio o tabulador.</dd> - <dt>Comentario</dt> - <dd>Los comentarios son formados por un sólo carácter <strong>"#"</strong>, seguido por nada o con el texto del comentario, si se quiere se puede poner espacio/s antes (por ejemplo: <code> # Aquí va mi comentario </code>). Los comentarios sólo se pueden escribir en sus propias líneas y no se pueden añadir en otras líneas.</dd> - <dt>Cabecera de sección</dt> - <dd>Las cabeceras de sección especifican qué sección del manifiesto se está manipulando. Hay tres posibles cabeceras de sección:</dd> -</dl> - -<blockquote> -<table class="standard-table"> - <tbody> - <tr> - <th>Cabecera de sección</th> - <th>Descripción</th> - </tr> - <tr> - <td><code>CACHE:</code></td> - <td>Pasa a la sección explícita. Esta es la sección por defecto.</td> - </tr> - <tr> - <td><code>FALLBACK:</code></td> - <td>Pasa a la sección de recuperación ("fallback"). - <p>{{ Note("Esta sección no está aún implementada en Firefox y será ignorada.") }}</p> - </td> - </tr> - <tr> - <td><code>NETWORK:</code></td> - <td>Pasa a la sección de la lista blanca en línea. - <p>{{ Note("La sección de lista blanca en línea, no está aún implementada en Firefox y será ignorada, sin embargo, suministrar una lista blanca apropiada está fuertemente recomendado.") }}</p> - </td> - </tr> - </tbody> -</table> -</blockquote> - -<dl> - <dd>La línea de cabecera de sección puede contener espacios vacíos, pero es obligatorio incluir el carácter <strong>":"</strong> después del nombre.</dd> - <dt>Datos para la sección activa.</dt> - <dd>El formato de las líneas de datos cambia de sección a sección. En la sección explícita, cada línea es una URI válida o referencia IRI a un recurso del cache. Los espacios vacíos están permitidos antes y después de la URI o IRI en cada línea.</dd> -</dl> - -<p>El manifiesto puede pasar de atrás a delante de sección a sección como quiere (de modo que cada cabecera de sección se puede usar más de una vez) y las secciones pueden estar vacías. {{ Note("Las URI relativas son relativas a la URI del manifiesto del cache, no a la URI del documento que referencia el manifiesto.") }}</p> - -<h4 id="Un_manifiesto_de_ejemplo" name="Un_manifiesto_de_ejemplo">Un manifiesto de ejemplo</h4> - -<p>Este es un manifiesto simple para una página web imaginaria cuyo sitio es <span class="nowiki">foo.com</span>.</p> - -<pre class="eval">CACHE MANIFEST -# v1 -# Esto es un comentario. -<span class="nowiki">http://www.foo.com/index.html</span> -<span class="nowiki">http://www.foo.com/header.png</span> -<span class="nowiki">http://www.foo.com/blah/blah</span> -</pre> - -<p>En este ejemplo, no hay cabecera de sección, por lo que se considera que todas las líneas de datos están en la sección explícita.</p> - -<p>El comentario "v1" está ahí por una buena razón. Ya que el cache es actualizado sólo cuando el manifiesto cambia, si cambia el recurso (por ejemplo, actualizando la imagen <code>header.png</code> con nuevo contenido), el archivo del manifiesto debe modificarse para advertir el navegador que necesita refrescar el cache. Se puede hacer con cualquier truco en el manifiesto, pero tener un número de versión es una buena forma de hacerlo.</p> - -<p>Para indicar a Firefox que use aplicaciones en modo desconectado (almacenadas en el cache) para un sitio determinado, el sitio debe utilizar el atributo <code>manifest</code> en el elemento <code>html</code>, de forma parecida a:</p> - -<pre class="eval"><span class="nowiki"><html manifest="http://www.foo.com/cache-manifest"></span> - ... -</html> -</pre> - -<h3 id="El_proceso_de_actualizaci.C3.B3n" name="El_proceso_de_actualizaci.C3.B3n">El proceso de actualización</h3> - -<ol> - <li>Cuando Firefox visita un documento que incluye el atributo <code>manifest</code>, envía un evento <code>checking</code> al objeto <code><a href="es/DOM/window.applicationCache">window.applicationCache</a></code>, y a continuación recupera el archivo del manifiesto, siguiendo las reglas HTTP apropiadas. Si la copia actualmente en cache del manifiesto está al día, se envía el evento <code>noupdate</code> a la <code>applicationCache</code>, y el proceso de actualización está completado.</li> - <li>Si el archivo del manifiesto no ha cambiado desde la última actualización, de nuevo, se envía el evento <code>noupdate</code> a la <code>applicationCache</code>, y el proceso de actualización está completado. Esta es la razón por la que, si los recursos cambian, el archivo del manifiesto debe modificarse para que Firefox sepa que necesita refrescar la cache de recursos.</li> - <li>Si el manifiesto ha cambiado, todos los archivos en el manifiesto -- así como aquellos agregados al manifiesto mediante la llamada a <code><a href="es/NsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code> -- son agregados al cache temporal, siguiendo las reglas apropiadas de HTTP. Para cada archivo agregado a la cache, se envía un evento <code>progress</code> al objeto <code>applicationCache</code>. Si ocurre algún error, se envía un evento <code>error</code> y se detiene la actualización.</li> - <li>Una vez que se han recuperado todos los archivos, son movidos al cache real y se envía un evento <code>cached</code> al objeto <code>applicationCache</code>.</li> -</ol> - -<h3 id="Caracter.C3.ADsticas_a.C3.BAn_sin_implementar_en_Firefox" name="Caracter.C3.ADsticas_a.C3.BAn_sin_implementar_en_Firefox">Características aún sin implementar en Firefox</h3> - -<p>Debido a que el borrador estándar para HTML 5 estaba aún cambiando cuando llegamos a la fecha de congelación de características de Firefox 3, hay partes de las capacidades en modo desconectado que no han sido implementadas:</p> - -<ol> - <li>La especificación del WHATWG indica que todas las peticiones deben venir de la copia cache desconectada, cuando es posible, aún cuando el navegador esté conectado. Firefox sólo accede a la copia cache desconectada, cuando el navegador no está conectado. Por esta razón, la lista blanca tampoco está aún funcionando.</li> - <li>Firefox no mantiene actualmente copias cache separadas para las distintas aplicaciones. Las aplicaciones deberían evitar compartir recursos entre diferentes manifiestos, a no ser que no produzcan conflicto entre diferentes versiones de los recursos. En general, las aplicaciones deberían mantener copias separadas de cada recurso.</li> - <li>Firefox no gestiona aún entradas de recuperación o de oportunidad.</li> -</ol> - -<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/2008/WD-html5-20080122/#appcache">HTML 5 working draft: Application caches</a></li> - <li>{{ Interface("nsIDOMOfflineResourceList") }}</li> -</ul> - -<p> </p> - -<p> </p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/Offline_resources_in_Firefox", "fr": "fr/Ressources_hors_ligne_dans_Firefox", "ja": "ja/Offline_resources_in_Firefox", "pl": "pl/Zasoby_offline_w_Firefoksie", "zh-tw": "zh_tw/Offline_resources_on_Firefox" } ) }}</p> diff --git a/files/es/orphaned/referencia_de_xul/index.html b/files/es/orphaned/referencia_de_xul/index.html deleted file mode 100644 index 0541bd7a2a..0000000000 --- a/files/es/orphaned/referencia_de_xul/index.html +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: Referencia de XUL -slug: orphaned/Referencia_de_XUL -original_slug: Referencia_de_XUL ---- -<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th colspan="3">Todos los elementos XUL (ordenados alfabéticamente)</th> - </tr> - <tr> - <td> - <p><a href="/en/XUL/action" title="en/XUL/action">action</a><br> - <a href="/en/XUL/arrowscrollbox" title="en/XUL/arrowscrollbox">arrowscrollbox</a><br> - <a href="/en/XUL/assign" title="en/XUL/assign">assign</a><br> - <a href="/en/XUL/bbox" title="en/XUL/bbox">bbox</a><br> - <a href="/en/XUL/binding" title="en/XUL/binding">binding</a><br> - <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a><br> - <a href="/en/XUL/box" title="en/XUL/box">box</a><br> - <a href="/en/XUL/broadcaster" title="en/XUL/broadcaster">broadcaster</a><br> - <a href="/en/XUL/broadcasterset" title="en/XUL/broadcasterset">broadcasterset</a><br> - <a href="/en/XUL/button" title="en/XUL/button">button</a><br> - <a href="/en/XUL/browser" title="en/XUL/browser">browser</a><br> - <a href="/en/XUL/checkbox" title="en/XUL/checkbox">checkbox</a><br> - <a href="/en/XUL/caption" title="en/XUL/caption">caption</a><br> - <a href="/en/XUL/colorpicker" title="en/XUL/colorpicker">colorpicker</a><br> - <a href="/en/XUL/column" title="en/XUL/column">column</a><br> - <a href="/en/XUL/columns" title="en/XUL/columns">columns</a><br> - <a href="/en/XUL/commandset" title="en/XUL/commandset">commandset</a><br> - <a href="/en/XUL/command" title="en/XUL/command">command</a><br> - <a href="/en/XUL/conditions" title="en/XUL/conditions">conditions</a><br> - <a href="/en/XUL/content" title="en/XUL/content">content</a><br> - <a href="/en/XUL/datepicker" title="en/XUL/datepicker">datepicker</a><br> - <a href="/en/XUL/deck" title="en/XUL/deck">deck</a><br> - <a href="/en/XUL/description" title="en/XUL/description">description</a><br> - <a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a><br> - <a href="/en/XUL/dialogheader" title="en/XUL/dialogheader">dialogheader</a><br> - <a href="/en/XUL/dropmarker" title="en/XUL/dropmarker">dropmarker</a><br> - <a href="/en/XUL/editor" title="en/XUL/editor">editor</a><br> - <a href="/en/XUL/grid" title="en/XUL/grid">grid</a><br> - <a href="/en/XUL/grippy" title="en/XUL/grippy">grippy</a><br> - <a href="/en/XUL/groupbox" title="en/XUL/groupbox">groupbox</a><br> - <a href="/en/XUL/hbox" title="en/XUL/hbox">hbox</a><br> - <a href="/en/XUL/iframe" title="en/XUL/iframe">iframe</a><br> - <a href="/en/XUL/image" title="en/XUL/image">image</a><br> - <a href="/en/XUL/key" title="en/XUL/key">key</a><br> - <a href="/en/XUL/keyset" title="en/XUL/keyset">keyset</a><br> - <a href="/en/XUL/label" title="en/XUL/label">label</a><br> - <a href="/en/XUL/listbox" title="en/XUL/listbox">listbox</a><br> - <a href="/en/XUL/listcell" title="en/XUL/listcell">listcell</a><br> - <a href="/en/XUL/listcol" title="en/XUL/listcol">listcol</a><br> - <a href="/en/XUL/listcols" title="en/XUL/listcols">listcols</a><br> - <a href="/en/XUL/listhead" title="en/XUL/listhead">listhead</a><br> - <a href="/en/XUL/listheader" title="en/XUL/listheader">listheader</a><br> - <a href="/en/XUL/listitem" title="en/XUL/listitem">listitem</a></p> - </td> - <td> - <p><a href="/en/XUL/member" title="en/XUL/member">member</a><br> - <a href="/en/XUL/menu" title="en/XUL/menu">menu</a><br> - <a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a><br> - <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a><br> - <a href="/en/XUL/menulist" title="en/XUL/menulist">menulist</a><br> - <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a><br> - <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a><br> - <a href="/en/XUL/notification" title="en/XUL/notification">notification</a><br> - <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a><br> - <a href="/en/XUL/observes" title="en/XUL/observes">observes</a><br> - <a href="/en/XUL/overlay" title="en/XUL/overlay">overlay</a><br> - <a href="/en/XUL/page" title="en/XUL/page">page</a><br> - <a href="/en/XUL/panel" title="en/XUL/panel">panel</a><br> - <a href="/en/XUL/param" title="en/XUL/param">param</a><br> - <a href="/en/XUL/popupset" title="en/XUL/popupset">popupset</a><br> - <a href="/en/XUL/preference" title="en/XUL/preference">preference</a><br> - <a href="/en/XUL/preferences" title="en/XUL/preferences">preferences</a><br> - <a href="/en/XUL/prefpane" title="en/XUL/prefpane">prefpane</a><br> - <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a><br> - <a href="/en/XUL/progressmeter" title="en/XUL/progressmeter">progressmeter</a><br> - <a href="/en/XUL/query" title="en/XUL/query">query</a><br> - <a href="/en/XUL/queryset" title="en/XUL/queryset">queryset</a><br> - <a href="/en/XUL/radio" title="en/XUL/radio">radio</a><br> - <a href="/en/XUL/radiogroup" title="en/XUL/radiogroup">radiogroup</a><br> - <a href="/en/XUL/resizer" title="en/XUL/resizer">resizer</a><br> - <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a><br> - <a href="/en/XUL/richlistitem" title="en/XUL/richlistitem">richlistitem</a><br> - <a href="/en/XUL/row" title="en/XUL/row">row</a><br> - <a href="/en/XUL/rows" title="en/XUL/rows">rows</a><br> - <a href="/en/XUL/rule" title="en/XUL/rule">rule</a><br> - <a href="/en/XUL/scale" title="en/XUL/scale">scale</a><br> - <a href="/en/XUL/script" title="en/XUL/script">script</a><br> - <a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">scrollbar</a><br> - <a href="/en/XUL/scrollbox" title="en/XUL/scrollbox">scrollbox</a><br> - <a href="/en/XUL/scrollcorner" title="en/XUL/scrollcorner">scrollcorner</a><br> - <a href="/en/XUL/separator" title="en/XUL/separator">separator</a><br> - <a href="/en/XUL/spacer" title="en/XUL/spacer">spacer</a><br> - <a href="/en/XUL/spinbuttons" title="en/XUL/spinbuttons">spinbuttons</a><br> - <a href="/en/XUL/splitter" title="en/XUL/splitter">splitter</a><br> - <a href="/en/XUL/stack" title="en/XUL/stack">stack</a><br> - <a href="/en/XUL/statusbar" title="en/XUL/statusbar">statusbar</a></p> - </td> - <td> - <p><a href="/en/XUL/statusbarpanel" title="en/XUL/statusbarpanel">statusbarpanel</a><br> - <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a><br> - <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a><br> - <a href="/en/XUL/tab" title="en/XUL/tab">tab</a><br> - <a href="/en/XUL/tabbrowser" title="en/XUL/tabbrowser">tabbrowser</a> (Firefox-a partir de<br> - Firefox 3/Gecko 1.9)<br> - <a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a><br> - <a href="/en/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a><br> - <a href="/en/XUL/tabpanels" title="en/XUL/tabpanels">tabpanels</a><br> - <a href="/en/XUL/tabs" title="en/XUL/tabs">tabs</a><br> - <a href="/en/XUL/template" title="en/XUL/template">template</a><br> - <a href="/en/XUL/textnode" title="en/XUL/textnode">textnode</a><br> - <a href="/en/XUL/textbox" title="en/XUL/textbox">textbox</a><br> - <a href="/en/XUL/textbox_(Firefox_autocomplete)" title="en/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br> - <a href="/en/XUL/textbox_(Mozilla_autocomplete)" title="en/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br> - <a href="/en/XUL/timepicker" title="en/XUL/timepicker">timepicker</a><br> - <a href="/en/XUL/titlebar" title="en/XUL/titlebar">titlebar</a><br> - <a href="/en/XUL/toolbar" title="en/XUL/toolbar">toolbar</a><br> - <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a><br> - <a href="/en/XUL/toolbargrippy" title="en/XUL/toolbargrippy">toolbargrippy</a><br> - <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a><br> - <a href="/en/XUL/toolbarpalette" title="en/XUL/toolbarpalette">toolbarpalette</a><br> - <a href="/en/XUL/toolbarseparator" title="en/XUL/toolbarseparator">toolbarseparator</a><br> - <a href="/en/XUL/toolbarset" title="en/XUL/toolbarset">toolbarset</a><br> - <a href="/en/XUL/toolbarspacer" title="en/XUL/toolbarspacer">toolbarspacer</a><br> - <a href="/en/XUL/toolbarspring" title="en/XUL/toolbarspring">toolbarspring</a><br> - <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a><br> - <a href="/en/XUL/tooltip" title="en/XUL/tooltip">tooltip</a><br> - <a href="/en/XUL/tree" title="en/XUL/tree">tree</a><br> - <a href="/en/XUL/treecell" title="en/XUL/treecell">treecell</a><br> - <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a><br> - <a href="/en/XUL/treecol" title="en/XUL/treecol">treecol</a><br> - <a href="/en/XUL/treecols" title="en/XUL/treecols">treecols</a><br> - <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a><br> - <a href="/en/XUL/treerow" title="en/XUL/treerow">treerow</a><br> - <a href="/en/XUL/treeseparator" title="en/XUL/treeseparator">treeseparator</a><br> - <a href="/en/XUL/triple" title="en/XUL/triple">triple</a><br> - <a href="/en/XUL/vbox" title="en/XUL/vbox">vbox</a><br> - <a href="/en/XUL/where" title="en/XUL/where">where</a><br> - <a href="/en/XUL/window" title="en/XUL/window">window</a><br> - <a href="/en/XUL/wizard" title="en/XUL/wizard">wizard</a><br> - <a href="/en/XUL/wizardpage" title="en/XUL/wizardpage">wizardpage</a></p> - </td> - </tr> - </tbody> -</table> -<h1 id="Referencia_de_XUL">Referencia de XUL</h1> -<p>« <a href="/es/docs/XUL" title="es/XUL">Referencia de XUL</a> «</p> -<table class="fullwidth-table"> - <tbody> - <tr> - <th colspan="3">Elementos XUL por categoría</th> - </tr> - <tr> - <td> - <p><u><strong>VENTANAS</strong></u></p> - <p><a href="/en/XUL/dialog" title="en/XUL/dialog">dialog</a><br> - <a href="/en/XUL/overlay" title="en/XUL/overlay">overlay</a><br> - <a href="/en/XUL/page" title="en/XUL/page">page</a><br> - <a href="/en/XUL/window" title="en/XUL/window">window</a><br> - <a href="/en/XUL/wizard" title="en/XUL/wizard">wizard</a><br> - <a href="/en/XUL/wizardpage" title="en/XUL/wizardpage">wizardpage</a><br> - <a href="/en/XUL/preference" title="en/XUL/preference">preference</a><br> - <a href="/en/XUL/preferences" title="en/XUL/preferences">preferences</a><br> - <a href="/en/XUL/prefpane" title="en/XUL/prefpane">prefpane</a><br> - <a href="/en/XUL/prefwindow" title="en/XUL/prefwindow">prefwindow</a></p> - <p><u><strong>ESTRUCTURA<br> - DE VENTANAS</strong></u></p> - <p><a href="/en/XUL/browser" title="en/XUL/browser">browser</a><br> - <a href="/en/XUL/tabbrowser" title="en/XUL/tabbrowser">tabbrowser</a><br> - <a href="/en/XUL/editor" title="en/XUL/editor">editor</a><br> - <a href="/en/XUL/iframe" title="en/XUL/iframe">iframe</a><br> - <a href="/en/XUL/titlebar" title="en/XUL/titlebar">titlebar</a><br> - <a href="/en/XUL/resizer" title="en/XUL/resizer">resizer</a><br> - <a href="/en/XUL/statusbar" title="en/XUL/statusbar">statusbar</a><br> - <a href="/en/XUL/statusbarpanel" title="en/XUL/statusbarpanel">statusbarpanel</a><br> - <a href="/en/XUL/dialogheader" title="en/XUL/dialogheader">dialogheader</a><br> - <a href="/en/XUL/notification" title="en/XUL/notification">notification</a><br> - <a href="/en/XUL/notificationbox" title="en/XUL/notificationbox">notificationbox</a></p> - <p><u><strong>MENUS Y VENTANAS<br> - EMERGENTES</strong></u></p> - <p><a href="/en/XUL/menubar" title="en/XUL/menubar">menubar</a><br> - <a href="/en/XUL/menu" title="en/XUL/menu">menu</a><br> - <a href="/en/XUL/menuitem" title="en/XUL/menuitem">menuitem</a><br> - <a href="/en/XUL/menuseparator" title="en/XUL/menuseparator">menuseparator</a><br> - <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menupopup</a><br> - <a href="/en/XUL/panel" title="en/XUL/panel">panel</a><br> - <a href="/en/XUL/tooltip" title="en/XUL/tooltip">tooltip</a><br> - <a href="/en/XUL/popupset" title="en/XUL/popupset">popupset</a></p> - <p><u><strong>BARRAS DE<br> - HERRAMIENTAS</strong></u></p> - <p><a href="/en/XUL/toolbar" title="en/XUL/toolbar">toolbar</a><br> - <a href="/en/XUL/toolbarbutton" title="en/XUL/toolbarbutton">toolbarbutton</a><br> - <a href="/en/XUL/toolbargrippy" title="en/XUL/toolbargrippy">toolbargrippy</a><br> - <a href="/en/XUL/toolbaritem" title="en/XUL/toolbaritem">toolbaritem</a><br> - <a href="/en/XUL/toolbarpalette" title="en/XUL/toolbarpalette">toolbarpalette</a><br> - <a href="/en/XUL/toolbarseparator" title="en/XUL/toolbarseparator">toolbarseparator</a><br> - <a href="/en/XUL/toolbarset" title="en/XUL/toolbarset">toolbarset</a><br> - <a href="/en/XUL/toolbarspacer" title="en/XUL/toolbarspacer">toolbarspacer</a><br> - <a href="/en/XUL/toolbarspring" title="en/XUL/toolbarspring">toolbarspring</a><br> - <a href="/en/XUL/toolbox" title="en/XUL/toolbox">toolbox</a></p> - <p><u><strong>PESTAÑAS Y<br> - AGRUPAMIENTO</strong></u></p> - <p><a href="/en/XUL/tabbox" title="en/XUL/tabbox">tabbox</a><br> - <a href="/en/XUL/tabs" title="en/XUL/tabs">tabs</a><br> - <a href="/en/XUL/tab" title="en/XUL/tab">tab</a><br> - <a href="/en/XUL/tabpanels" title="en/XUL/tabpanels">tabpanels</a><br> - <a href="/en/XUL/tabpanel" title="en/XUL/tabpanel">tabpanel</a><br> - <a href="/en/XUL/groupbox" title="en/XUL/groupbox">groupbox</a><br> - <a href="/en/XUL/caption" title="en/XUL/caption">caption</a><br> - <a href="/en/XUL/separator" title="en/XUL/separator">separator</a><br> - <a href="/en/XUL/spacer" title="en/XUL/spacer">spacer</a></p> - </td> - <td> - <p><u><strong>CONTROLES</strong></u></p> - <p><a href="/en/XUL/button" title="en/XUL/button">button</a><br> - <a href="/en/XUL/checkbox" title="en/XUL/checkbox">checkbox</a><br> - <a href="/en/XUL/colorpicker" title="en/XUL/colorpicker">colorpicker</a><br> - <a href="/en/XUL/datepicker" title="en/XUL/datepicker">datepicker</a><br> - <a href="/en/XUL/menulist" title="en/XUL/menulist">menulist</a><br> - <a href="/en/XUL/progressmeter" title="en/XUL/progressmeter">progressmeter</a><br> - <a href="/en/XUL/radio" title="en/XUL/radio">radio</a><br> - <a href="/en/XUL/radiogroup" title="en/XUL/radiogroup">radiogroup</a><br> - <a href="/en/XUL/scale" title="en/XUL/scale">scale</a><br> - <a href="/en/XUL/splitter" title="en/XUL/splitter">splitter</a><br> - <a href="/en/XUL/textbox" title="en/XUL/textbox">textbox</a><br> - <a href="/en/XUL/textbox_(Firefox_autocomplete)" title="en/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br> - <a href="/en/XUL/textbox_(Mozilla_autocomplete)" title="en/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br> - <a href="/en/XUL/timepicker" title="en/XUL/timepicker">timepicker</a></p> - <p><u><strong>TEXTO E<br> - IMAGENES</strong></u></p> - <p><a href="/en/XUL/description" title="en/XUL/description">description</a><br> - <a href="/en/XUL/label" title="en/XUL/label">label</a><br> - <a href="/en/XUL/image" title="en/XUL/image">image</a></p> - <p><u><strong>LISTSS</strong></u></p> - <p><a href="/en/XUL/listbox" title="en/XUL/listbox">listbox</a><br> - <a href="/en/XUL/listitem" title="en/XUL/listitem">listitem</a><br> - <a href="/en/XUL/listcell" title="en/XUL/listcell">listcell</a><br> - <a href="/en/XUL/listcol" title="en/XUL/listcol">listcol</a><br> - <a href="/en/XUL/listcols" title="en/XUL/listcols">listcols</a><br> - <a href="/en/XUL/listhead" title="en/XUL/listhead">listhead</a><br> - <a href="/en/XUL/listheader" title="en/XUL/listheader">listheader</a><br> - <a href="/en/XUL/richlistbox" title="en/XUL/richlistbox">richlistbox</a><br> - <a href="/en/XUL/richlistitem" title="en/XUL/richlistitem">richlistitem</a></p> - <p><u><strong>ARBOLES</strong></u></p> - <p><a href="/en/XUL/tree" title="en/XUL/tree">tree</a><br> - <a href="/en/XUL/treecell" title="en/XUL/treecell">treecell</a><br> - <a href="/en/XUL/treechildren" title="en/XUL/treechildren">treechildren</a><br> - <a href="/en/XUL/treecol" title="en/XUL/treecol">treecol</a><br> - <a href="/en/XUL/treecols" title="en/XUL/treecols">treecols</a><br> - <a href="/en/XUL/treeitem" title="en/XUL/treeitem">treeitem</a><br> - <a href="/en/XUL/treerow" title="en/XUL/treerow">treerow</a><br> - <a href="/en/XUL/treeseparator" title="en/XUL/treeseparator">treeseparator</a></p> - <p> </p> - </td> - <td> - <p><u><strong>DISPOSICION</strong></u></p> - <p><a href="/en/XUL/box" title="en/XUL/box">box</a><br> - <a href="/en/XUL/hbox" title="en/XUL/hbox">hbox</a><br> - <a href="/en/XUL/vbox" title="en/XUL/vbox">vbox</a><br> - <a href="/en/XUL/bbox" title="en/XUL/bbox">bbox</a><br> - <a href="/en/XUL/deck" title="en/XUL/deck">deck</a><br> - <a href="/en/XUL/stack" title="en/XUL/stack">stack</a><br> - <a href="/en/XUL/grid" title="en/XUL/grid">grid</a><br> - <a href="/en/XUL/columns" title="en/XUL/columns">columns</a><br> - <a href="/en/XUL/column" title="en/XUL/column">column</a><br> - <a href="/en/XUL/rows" title="en/XUL/rows">rows</a><br> - <a href="/en/XUL/row" title="en/XUL/row">row</a><br> - <a href="/en/XUL/scrollbox" title="en/XUL/scrollbox">scrollbox</a></p> - <p><u><strong>PLANTILLAS</strong></u></p> - <p><a href="/en/XUL/action" title="en/XUL/action">action</a><br> - <a href="/en/XUL/assign" title="en/XUL/assign">assign</a><br> - <a href="/en/XUL/binding" title="en/XUL/binding">binding</a><br> - <a href="/en/XUL/bindings" title="en/XUL/bindings">bindings</a><br> - <a href="/en/XUL/conditions" title="en/XUL/conditions">conditions</a><br> - <a href="/en/XUL/content" title="en/XUL/content">content</a><br> - <a href="/en/XUL/member" title="en/XUL/member">member</a><br> - <a href="/en/XUL/param" title="en/XUL/param">param</a><br> - <a href="/en/XUL/query" title="en/XUL/query">query</a><br> - <a href="/en/XUL/queryset" title="en/XUL/queryset">queryset</a><br> - <a href="/en/XUL/rule" title="en/XUL/rule">rule</a><br> - <a href="/en/XUL/template" title="en/XUL/template">template</a><br> - <a href="/en/XUL/textnode" title="en/XUL/textnode">textnode</a><br> - <a href="/en/XUL/triple" title="en/XUL/triple">triple</a><br> - <a href="/en/XUL/where" title="en/XUL/where">where</a></p> - <p><u><strong>SCRIPTING</strong></u></p> - <p><a href="/en/XUL/script" title="en/XUL/script">script</a><br> - <a href="/en/XUL/commandset" title="en/XUL/commandset">commandset</a><br> - <a href="/en/XUL/command" title="en/XUL/command">command</a><br> - <a href="/en/XUL/broadcaster" title="en/XUL/broadcaster">broadcaster</a><br> - <a href="/en/XUL/broadcasterset" title="en/XUL/broadcasterset">broadcasterset</a><br> - <a href="/en/XUL/observes" title="en/XUL/observes">observes</a><br> - <a href="/en/XUL/key" title="en/XUL/key">key</a><br> - <a href="/en/XUL/keyset" title="en/XUL/keyset">keyset</a><br> - <a href="/en/XUL/stringbundle" title="en/XUL/stringbundle">stringbundle</a><br> - <a href="/en/XUL/stringbundleset" title="en/XUL/stringbundleset">stringbundleset</a></p> - <p><u><strong>ELEMENTOS DE AYUDA</strong></u></p> - <p><a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">arrowscrollbox</a><br> - <a href="/en/XUL/dropmarker" title="en/XUL/dropmarker">dropmarker</a><br> - <a href="/en/XUL/grippy" title="en/XUL/grippy">grippy</a><br> - <a href="/en/XUL/scrollbar" title="en/XUL/scrollbar">scrollbar</a><br> - <a href="/en/XUL/scrollcorner" title="en/XUL/scrollcorner">scrollcorner</a><br> - <a href="/en/XUL/spinbuttons" title="en/XUL/spinbuttons">spinbuttons</a></p> - </td> - </tr> - </tbody> -</table> -<h3 id="Other_XUL_lists" name="Other_XUL_lists">Otras listas XUL</h3> -<ul> - <li><a href="/en/XUL/Attribute" title="en/XUL/Attribute">Todos los atributos</a></li> - <li><a href="/en/XUL/Property" title="en/XUL/Property">Todas las propiedades</a></li> - <li><a href="/en/XUL/Method" title="en/XUL/Method">Todos los métodos</a></li> - <li><a href="/en/XUL_element_attributes" title="en/XUL_element_attributes">Atributos definidos por todos los elementos XUL</a></li> - <li><a href="/en/XUL/Style" title="en/XUL/Style">Clases de estilos</a></li> - <li><a href="/en/XUL/Events" title="en/XUL/Events">Manipuladores de eventos</a></li> - <li><a href="/en/XUL/Deprecated//Defunct_Markup" title="en/XUL/Deprecated//Defunct_Markup">Obsoletos/Marcas extintas</a></li> -</ul> diff --git a/files/es/orphaned/selección_de_modo_en_mozilla/index.html b/files/es/orphaned/selección_de_modo_en_mozilla/index.html deleted file mode 100644 index 65fbb9cebc..0000000000 --- a/files/es/orphaned/selección_de_modo_en_mozilla/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Selección de modo en Mozilla -slug: orphaned/Selección_de_modo_en_Mozilla -tags: - - Desarrollo_Web - - HTML - - Todas_las_Categorías - - XHTML - - XML -original_slug: Selección_de_modo_en_Mozilla ---- -<p> </p> -<p>Este documento describe cómo Mozilla utiliza el declaración de DOCTYPE para determinar si utilizar el modo estricto o el. El código que toma la decisión está actualmente en <a href="https://dxr.mozilla.org/mozilla-central/source/parser/htmlparser/src/nsParser.cpp#1021" rel="custom">DetermineParseMode() in nsParser.cpp</a>. Vea los <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1312" title='FIXED: "Standard" compatibility mode needs to be hooked to DOCTYPE'>error 1312</a> y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=55264" title="FIXED: [DOCTYPE] Documents with unknown DOCTYPE should be displayed in strict mode">error 55264</a> para saber más sobre la historia de la selección del modo. Vea el <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=153032" title="FIXED: Implement almost-standards rendering mode">error 153032</a> sobre la creación del modo Casi-Estándar en Mozilla 1.0.</p> -<p>Las metas que indujeron a elegir este comportamiento fueron las siguientes::</p> -<ul> - <li>Casi todas las páginas existentes de <code>text/html</code> en la web que necesiten estar en el modo quirks para visualizarse correctamente deben exhibirse usando el modo quirks. (<em>Almost</em> all, rather than all, to allow for the following points as well.)</li> - <li>Los autores que escriben páginas web según los estándares actuales deben poder activar el modo estricto.</li> - <li>Cualquier página escrita usando un identificador público en las declaraciones de DOCTYPE que aparezcan en el futuro deberán exhibirse usando el modo estricto.</li> -</ul> -<p>En otras palabras, el algoritmo es la mejor aproximación que podemos encontrar para determinarse qué páginas fueron escritas después de que Mozilla se convirtiese en un 'agente de usuario' importante en la Web.</p> -<h2 id="Modo_Est.C3.A1ndar_Completo" name="Modo_Est.C3.A1ndar_Completo">Modo Estándar Completo</h2> -<p>Lo siguiente activa el modo estándar completo:</p> -<ul> - <li>Cualquier documento enviado con un tipo MIME de XML como son: <code>text/xml</code>, <code>application/xml</code>, o <code>application/xhtml+xml</code> (la selección del modo solo se aplica a documentos enviados como text/html).</li> - <li>Cualquier <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+SYSTEM+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Fstrict.dtd%22%3E">"DOCTYPE HTML SYSTEM"</a> sin un "DOCTYPE HTML PUBLIC", excepto para el doctype de IBM indicado mas abajo.</li> - <li>Una declaración de DOCTYPE sin DTD, i.e., <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML%3E"><!DOCTYPE HTML></a>.</li> - <li>Una declaración de DOCTYPE con un <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+%5B+%3C%21ELEMENT+TEST+-+-+%28P%29+%3E+%5D%3E+">subconjunto interno</a>.</li> - <li>Un doctype desconocido, incluyendo los siguentes doctypes (tecnicamente conocidos): - <ul> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Strict%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Strict//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22ISO%2FIEC+15445:2000%2F%2FDTD+HyperText+Markup+Language%2F%2FEN%22%3E">"ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22ISO%2FIEC+15445:2000%2F%2FDTD+HTML%2F%2FEN%22%3E">"ISO/IEC 15445:2000//DTD HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+i18n%2F%2FEN%22%3E">"-//IETF//DTD HTML i18n//EN"</a>.</li> - </ul> - </li> -</ul> -<h2 id="Modo_casi_est.C3.A1ndar" name="Modo_casi_est.C3.A1ndar">Modo casi estándar</h2> -<p>Lo siguiente activa el modo casi estándar. el fue creado entre (1.0 y 1.1alpha) y (1.0.1 y 1.1beta). Antes de su creación estos DOCTYPE activaban el modo estándar completo.</p> -<ul> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Transitional%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Transitional//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Frameset%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Frameset//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Transitional%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Floose.dtd%22%3E">"-//W3C//DTD HTML 4.01 Transitional//EN"</a>, con identificador de sistema.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Frameset%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Fframeset.dtd%22%3E">"-//W3C//DTD HTML 4.01 Frameset//EN"</a>, con identificador de sistema.</li> -</ul> -<h2 id="Modo_Quirks" name="Modo_Quirks">Modo Quirks</h2> -<p>Lo siguiente activa el modo quirks (esta lista necesita ser completa para garantizar que todas las páginas ya existentes en la www pueden activar el modo quirks):</p> -<p>En la elaboración de esta lista han sido utilizados los siguientes sitios: <a class="external" href="http://validator.w3.org/sgml-lib/catalog">W3C HTML Validator</a>, <a class="external" href="http://www.htmlhelp.com/tools/validator/lib/catalog">HTMLHelp HTML Validator</a>.</p> -<ul> - <li>la <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=">ausencia de DOCTYPE</a>.</li> - <li>Una <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%3Fxml+version%3D%221.0%22%3F%3E">declaración XML (pseudo-PI) sin doctype</a> (osea, ignora la declaración XML y usa el DOCTYPE). En 1.0 y 1.1alpha o superior (Pero no en 1.0.1 o 1.1beta), la presencia de una declaración XML activa el modo estándar completo.</li> - <li>Una declaración de DOCTYPE que <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+NOT+UNDERSTOOD%3E">no puede ser entendida</a> (Ejemplo: comillas desparejadas).</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+html+SYSTEM+%22http%3A%2F%2Fwww.ibm.com%2Fdata%2Fdtd%2Fv11%2Fibmxhtml1-transitional.dtd%22%3E">"http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"</a> (Antes de 1.5b y 1.4.2, esto activaba el Modo casi estándar).</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Transitional%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01 Transitional//EN"</a>, sin identificador de sistema.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Frameset%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01 Frameset//EN"</a>, sin identificador de sistema.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Transitional%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0 Transitional//EN"</a> (vea también <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Transitional%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Floose.dtd%22%3E">test with a system identifier</a>).</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Frameset%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0 Frameset//EN"</a> (vea también <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Frameset%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Fframeset.dtd%22%3E">test with a system identifier</a>).</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSoftQuad+Software%2F%2FDTD+HoTMetaL+PRO+6.0::19990601::extensions+to+HTML+4.0%2F%2FEN%22%3E">"-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSoftQuad%2F%2FDTD+HoTMetaL+PRO+4.0::19971010::extensions+to+HTML+4.0%2F%2FEN%22%3E">"-//SoftQuad//DTD HoTMetaL PRO 4.0::19971010::extensions to HTML 4.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML//EN//3.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+3.0%2F%2FEN%2F%2F%22%3E">"-//W3O//DTD W3 HTML 3.0//EN//"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+3.0%2F%2FEN%22%3E">"-//W3O//DTD W3 HTML 3.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3+1995-03-24%2F%2FEN%22%3E">"-//W3C//DTD HTML 3 1995-03-24//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.0%2F%2FEN%22%3E">"-//IETF//DTD HTML 3.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.0%2F%2FEN%2F%2F%22%3E">"-//IETF//DTD HTML 3.0//EN//"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3%2F%2FEN%22%3E">"-//IETF//DTD HTML 3//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+3%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 3//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+3%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Level 3//EN//3.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.2%2F%2FEN%22%3E">"-//IETF//DTD HTML 3.2//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FAdvaSoft+Ltd%2F%2FDTD+HTML+3.0+asWedit+%2B+extensions%2F%2FEN%22%3E">"-//AS//DTD HTML 3.0 asWedit + extensions//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FAdvaSoft+Ltd%2F%2FDTD+HTML+3.0+asWedit+%2B+extensions%2F%2FEN%22%3E">"-//AdvaSoft Ltd//DTD HTML 3.0 asWedit + extensions//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Strict//EN//3.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+Strict+3.0%2F%2FEN%2F%2F%22%3E">"-//W3O//DTD W3 HTML Strict 3.0//EN//"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+3%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 3//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+3%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Strict Level 3//EN//3.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22HTML%22%3E">"HTML"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//IETF//DTD HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 2//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+2%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 2//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Level 2//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 1//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+1%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 1//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Level 1//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+0%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+0%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 0//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 2//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+2%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 2//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict Level 2//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 1//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+1%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 1//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict Level 1//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+0%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+0%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 0//EN//2.0"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FWebTechs%2F%2FDTD+Mozilla+HTML%2F%2FEN%22%3E">"-//WebTechs//DTD Mozilla HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FWebTechs%2F%2FDTD+Mozilla+HTML+2.0%2F%2FEN%22%3E">"-//WebTechs//DTD Mozilla HTML 2.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+Strict+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD Strict HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+HTML%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+HTML+Strict%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 HTML Strict//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+Tables%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 Tables//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+HTML%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+HTML+Strict%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 HTML Strict//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+Tables%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 Tables//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSun+Microsystems+Corp.%2F%2FDTD+HotJava+HTML%2F%2FEN%22%3E">"-//Sun Microsystems Corp.//DTD HotJava HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSun+Microsystems+Corp.%2F%2FDTD+HotJava+Strict+HTML%2F%2FEN%22%3E">"-//Sun Microsystems Corp.//DTD HotJava Strict HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.1E%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.1E//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+Extended+1.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML Extended 1.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+Extended+Relaxed+1.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML Extended Relaxed 1.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+2.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML 2.0//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSQ%2F%2FDTD+HTML+2.0+HoTMetaL+%2B+extensions%2F%2FEN%22%3E">"-//SQ//DTD HTML 2.0 HoTMetaL + extensions//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSpyglass%2F%2FDTD+HTML+2.0+Extended%2F%2FEN%22%3E">"-//Spyglass//DTD HTML 2.0 Extended//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22%2B%2F%2FSilmaril%2F%2FDTD+HTML+Pro+v0r11+19970101%2F%2FEN%22%3E">"+//Silmaril//DTD HTML Pro v0r11 19970101//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+Experimental+19960712%2F%2FEN%22%3E">"-//W3C//DTD HTML Experimental 19960712//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2+Final%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2 Final//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2+Draft%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2 Draft//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+Experimental+970421%2F%2FEN%22%3E">"-//W3C//DTD HTML Experimental 970421//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2S+Draft%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2S Draft//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+W3+HTML%2F%2FEN%22%3E">"-//W3C//DTD W3 HTML//EN"</a>.</li> - <li>El identificador público <a class="external" href="http://dbaron.org/mozilla/tests/compat?pubid=-%2F%2FMetrius%2F%2FDTD+Metrius+Presentational%2F%2FEN">"-//Metrius//DTD Metrius Presentational//EN"</a>.</li> -</ul> -<p>Tenga en cuenta que todas las comparaciones de los identificadores públicos son insensibles a mayúsculas o minúsculas (técnicamente esto es incorrecto, puesto que las cadenas sí son sensibles). Esto se hace así por el gran número de páginas con identificadores públicos en los que se usan mal.</p> -<h2 id="Ver_m.C3.A1s" name="Ver_m.C3.A1s">Ver más</h2> -<ul> - <li><a href="/es/Desarrollo_Web" title="es/Desarrollo_Web">Desarrollo Web</a></li> - <li><a href="/es/Modo_Quirks_en_Mozilla" title="es/Modo_Quirks_en_Mozilla">Modo Quirks en Mozilla</a></li> - <li><a href="/en/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior (en)</a></li> -</ul> -<div class="originaldocinfo"> - <h2 id="Informaci.C3.B3n_sobre_el_Documento_Original" name="Informaci.C3.B3n_sobre_el_Documento_Original">Información sobre el Documento Original</h2> - <ul> - <li>Author(s): <a class="external" href="http://dbaron.org/">David Baron</a></li> - <li>Last Updated Date: August 2, 2005</li> - <li>Copyright Information: Copyright (C) <a class="external" href="http://dbaron.org/">David Baron</a></li> - </ul> -</div> -<p> </p> diff --git a/files/es/orphaned/storage/index.html b/files/es/orphaned/storage/index.html deleted file mode 100644 index b7d81491aa..0000000000 --- a/files/es/orphaned/storage/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Storage -slug: orphaned/Storage -tags: - - Interfaces - - Storage - - Todas_las_Categorías - - Toolkit API - - páginas_a_traducir -original_slug: Storage ---- -<br> -<p><strong>Storage</strong> es una API para la base de datos <a class="external" href="http://www.sqlite.org/">SQLite</a>. Responde a las llamadas entidades de confianza, es decir, componentes internos de Firefox y extensiones. hace referencia completa a todos los métodos y propiedades de las conexiones de la interfaz de la base de datos, lee <a href="/es/mozIStorageConnection" title="es/mozIStorageConnection">mozIStorageConnection</a>.</p> -<p>El API está actualmente "unfrozen," lo que significa que está sujeto a cambios en cualquier momento. Es muy probable que el API cambie en la transición entre Firefox 2 y Firefox 3.</p> -<p> </p> -<div class="note"><strong>Nota:</strong> Storage no es lo mismo que la característica <a href="/es/DOM/Storage" title="es/DOM/Storage">DOM:Storage</a> que puede ser usada por páginas web para almacenar datos persistentes o la <a href="/es/Session_store_API" title="es/Session_store_API">Session store API</a> (una utilidad <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> de almacenaje para usar con las extensiones).</div> -<p> </p> -<h2 id="Empezando" name="Empezando">Empezando</h2> -<p>Este documento cubre el API mozStorage y algunas peculiaridades de sqlite. <em>No</em> cubre SQL o el sqlite. Sin embargo, puedes encontrar varios enlaces útiles en la sección <a href="#Ver_tambi.C3.A9n"> Ver también</a>. Para obtener ayuda sobre el API mozStorage, puedes escribir a mozilla.dev.apps.firefox en el servidor de noticias news.mozilla.org. Para reportar errores, usa <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit&component=Storage">Bugzilla</a> (producto "Toolkit", componente "Storage").</p> -<p>Bueno, aquí vamos. mozStorage fue diseñado igual que muchos otros sistemas de base de datos. El procedimiento general de su uso es:</p> -<ul> <li>Abre una conexión con la base de datos de tu elección.</li> <li>Crea las sentencias a ejecutar en tu conexión.</li> <li>Agrega los parámetros de las sentencias si es necesario.</li> <li>Ejecuta las sentencias.</li> <li>Comprueba si hay errores.</li> <li>Comienza de nuevo con las sentencias.</li> -</ul> -<h2 id="Abrir_una_conexi.C3.B3n" name="Abrir_una_conexi.C3.B3n">Abrir una conexión</h2> -<p>Para los usuarios de C++: La inicialización del servicio de storage debe hacerse desde el mismo hilo principal.Si lo inicializas por primera vez desde otro hilo, obtendrás un error. Por tanto, si quieres usar el servicio dentro de un hilo, asegúrate de llamar a getService desde el hilo principal para estar seguro de que el servicio ha sido creado.</p> -<p>Ejemplo de apertura de una conexión a "asdf.sqlite" en el directorio del perfil del usuario, en C++:</p> -<pre>nsCOMPtr<nsIFile> dbFile; -rv = NS_GetSpecialDirectory(NS_APP_USER_PROFILE_50_DIR, - getter_AddRefs(dbFile)); -NS_ENSURE_SUCCESS(rv, rv); -rv = dbFile->Append(NS_LITERAL_STRING("asdf.sqlite")); -NS_ENSURE_SUCCESS(rv, rv); - -mDBService = do_GetService(MOZ_STORAGE_SERVICE_CONTRACTID, &rv); -NS_ENSURE_SUCCESS(rv, rv); -rv = mDBService->OpenDatabase(dbFile, getter_AddRefs(mDBConn)); -NS_ENSURE_SUCCESS(rv, rv); -</pre> -<p><code>MOZ_STORAGE_SERVICE_CONTRACTID</code> está definido en {{ Source("storage/build/mozStorageCID.h") }}. Su valor es <code>"@mozilla.org/storage/service;1"</code></p> -<p>Ejemplo en JavaScript:</p> -<pre>var file = Components.classes["@mozilla.org/file/directory_service;1"] - .getService(Components.interfaces.nsIProperties) - .get("ProfD", Components.interfaces.nsIFile); -file.append("my_db_file_name.sqlite"); - -var storageService = Components.classes["@mozilla.org/storage/service;1"] - .getService(Components.interfaces.mozIStorageService); -var mDBConn = storageService.openDatabase(file); -</pre> -<dl> <dd> <div class="note">Nota: La función OpenDatabase está sujeta a cambios. Seguramente será simplificada y ampliada para que sea más difícil meterse en problemas.</div> </dd> -</dl> -<p>Sería tentador nombrar a tu base de datos con un nombre terminado en ".sdb" por <strong>s</strong>qlite <strong>d</strong>ata<strong>b</strong>ase, pero esto <em>no es recomendable</em>. Esta extensión es tratada de forma especial por Windows como una extensión para "Application Compatibility Database" y sus cambios están respaldados por el sistema automáticamente como parte del sistema de recuperación del sistema. Esto puede dar lugar a un tratamiento desmesurado de las operaciones del archivo.</p> -<h2 id="Sentencias" name="Sentencias">Sentencias</h2> -<p>Sigue los pasos para crear y ejecutar sentencias SQL en tu base de datos SQLite. Para una completa referencia, lee <a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a>.</p> -<h3 id="Creando_una_sentencia" name="Creando_una_sentencia">Creando una sentencia</h3> -<p>Hay dos maneras de crear una sentencia. Si no tienes parámetros y la sentencia no devuelve ningún dato, usa <code>mozIStorageConnection.executeSimpleSQL</code>.</p> -<pre>C++: -rv = mDBConn->ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)")); - -JS: -mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)"); -</pre> -<p>De otra forma, deberías preparar la sentencia usando <code>mozIStorageConnection.createStatement</code>:</p> -<pre>C++: -nsCOMPtr<mozIStorageStatement> statement; -rv = mDBConn->CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1"), - getter_AddRefs(statement)); -NS_ENSURE_SUCCESS(rv, rv); - -JS: -var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1"); -</pre> -<p>Este ejemplo usa el comodín "?1" para recoger un parámetro devuelto más adelante (lee la próxima sección).</p> -<p>Una vez que has preparado la sentencia, puedes agrupar su parámetros, ejecutarla y re usarla una y otra vez. Si utilizas una sentencia repetidamente, el uso de sentencias pre compiladas te brindará una mejora notable en la ejecución, ya que las consultas SQL no necesitan ser analizadas cada vez.</p> -<p>If you are familiar with sqlite, you may know that prepared statements are invalidated when the schema of the database changes. Fortunately, mozIStorageStatement detects the error and will recompile the statement as needed. Therefore, once you create a statement, you don't need to worry when changing the schema; all statements will continue to transparently work.</p> -<h3 id="Agregar_los_par.C3.A1metros" name="Agregar_los_par.C3.A1metros">Agregar los parámetros</h3> -<p>Generalmente es mucho mejor agregar los parámetros separadamente, en lugar de intentar construir una sentencia SQL en una cadena conteniendo los parámetros. Entre otras cosas, esto evita el ataque de inyección de SQL, ya que un parámetro suelto nunca podrá ser ejecutado como una sentencia SQL.</p> -<p>Se agregan los parámetros a una sentencia SQL reemplazando los comodines. Los comodines son llamados por orden, empezando con el "?1", luego el "?2", etcétera. Usa la función BindXXXParameter(0) BindXXXParameter(1)... para cambiar esos comodines.</p> -<dl> <dd> <div class="note">Presta atención: Los indices en los comodines van a partir de 1. Los indices de las funciones de cambio, empiezan en 0. Esto es: el "?1" corresponde al parámetro 0, "?1" corresponde al parámetro 1, etcétera.</div> </dd> -</dl> -<p>Tambien puedes usar parámetros con nombre como: ":ejemplo" en lugar de "?xx".</p> -<p>Un comodín puede aparecer varias veces en una cadena SQL y todas las veces será reemplazado por el correspondiente valos. Los parámetros que no han sido agragados (unbound) serán interpretados como <code>NULL</code></p> -<p>Los ejemplos a continuación, usan <code>bindUTF8StringParameter()</code> y <code>bindInt32Parameter()</code>. Para una lista de todas las demás funciones, lee <a href="/es/MozIStorageStatement#Binding_functions" title="es/MozIStorageStatement#Binding_functions">mozIStorageStatement</a>.</p> -<p>Ejemplo en C++:</p> -<pre>nsCOMPtr<mozIStorageStatement> statement; -rv = mDBConn->CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1 AND b > ?2"), - getter_AddRefs(statement)); -NS_ENSURE_SUCCESS(rv, rv); -rv = statement->BindUTF8StringParameter(0, "hello"); // "hello" será sustituido por "?1" -NS_ENSURE_SUCCESS(rv, rv); -rv = statement->BindInt32Parameter(1, 1234); // 1234 será sustituido por "?2" -NS_ENSURE_SUCCESS(rv, rv); -</pre> -<p>Ejemplo en JavaScript:</p> -<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b > ?2"); -statement.bindUTF8StringParameter(0, "hello"); -statement.bindInt32Parameter(1, 1234); -</pre> -<p>Si usas parámetros con nombre, deberías usar el método <code>getParameterIndex</code> para obtener el índice del parámetro con nombre. Aquí hay un ejemplo en JavaScript:</p> -<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = :myfirstparam AND b > :mysecondparam"); - -var firstidx = statement.getParameterIndex(":myfirstparam"); -statement.bindUTF8StringParameter(firstidx, "hello"); - -var secondidx = statement.getParameterIndex(":mysecondparam"); -statement.bindInt32Parameter(secondidx, 1234); -</pre> -<p>Por supuesto, puedes mezclar parámetros con nombre y con índice en la misma consulta:</p> -<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b > :mysecondparam"); - -statement.bindUTF8StringParameter(0, "hello"); -// you can also use -// var firstidx = statement.getParameterIndex("?1"); -// statement.bindUTF8StringParameter(firstidx, "hello"); - -var secondidx = statement.getParameterIndex(":mysecondparam"); -statement.bindInt32Parameter(secondidx, 1234); -</pre> -<p>Si quieres usar la clausula <code>WHERE</code> con una expresión <code>IN ( value-list )</code>, las sentencias de Bindings no funcionarán. En su lugar, construye una cadena. Si no estas usando unstradas del usuario, la seguridad no es una de tus preocupaciones:</p> -<pre>var ids = "3,21,72,89"; -var sql = "DELETE FROM table WHERE id IN ( "+ ids +" )"; -</pre> -<h3 id="Ejecutar_una_sentencia" name="Ejecutar_una_sentencia">Ejecutar una sentencia</h3> -<p>La manera principal de ejecutar una sentencia es con <code>mozIStorageStatement.executeStep</code>. Esta función te permite enumerar todos los resultados (filas / registros) que produzca tu sentencia y te notificará cuando no hay más resultados.</p> -<p>Después de una llamada a <code>executeStep</code>, debes usar la <strong>función de recogida apropiada</strong> en <a href="/es/MozIStorageValueArray" title="es/MozIStorageValueArray">mozIStorageValueArray</a> para recoger el valor en una fila (mozIStorageStatement implementa mozIStorageValueArray). El ejemplo de abajo sólo usa <code>getInt32()</code>.</p> -<p>Puedes obtener el tipo de un valor desde <code>mozIStorageValueArray.getTypeOfIndex</code>, que devuelve el tipo de la columna especificada. Ten cuidado: sqlite no es una base de datos que maneje tipos. Si requieres un tipo diferente, sqlite hará lo mejor que pueda para convertirlo, y dará algún tipo por defecto si no lo consigue. Por tanto, es imposible obtener errores de tipo, pero puedes obtener datos extraños como valor devuelto.</p> -<p>En código C++ se puede también usar las funciones <code>AsInt32</code>, <code>AsDouble</code>, etcétera. que devuelven el valor como un valor más manejable en C++. Ten precaución, sin embargo, ya que no tendrás errores si tu índice es invalido. Es imposible obtener otros errores, yq que sqlite siempre convertirá los tipos, aún si no tienen sentido.</p> -<p>Ejemplo C++:</p> -<pre>PRBool hasMoreData; -while (NS_SUCCEEDED(statement->ExecuteStep(&hasMoreData)) && hasMoreData) { - PRInt32 value = statement->AsInt32(0); - // use the value... -} -</pre> -<p>Ejemplo Javascript:</p> -<pre>while (statement.executeStep()) { - var value = statement.getInt32(0); // ¡usa la función correcta! - // usa el valor... -} -</pre> -<p>La función <code>mozIStorageStatement.execute()</code> es útil cuando no estás obteniendo datos de la sentencia. Lo que hace es ejecutar la sentencia una vez y luego volverla al estado inicial. Esto puede ser útil para las sentencias de inserción, ya que realmente limpia el código:</p> -<pre>var statement = mDBConn.createStatement("INSERT INTO my_table VALUES (?1)"); -statement.bindInt32Parameter(52); -statement.execute(); -</pre> -<p>Este es un ejemplo simple pero completo en JavaScript y XUL, de cómo ejecutar sentencias SQL en una base de datos: <img alt="Image:TTRW2.zip">.</p> -<h3 id="Re_crear_una_sentencia_.28reset.29" name="Re_crear_una_sentencia_.28reset.29">Re crear una sentencia (reset)</h3> -<p>Es importante re crear sentencias que no han sido usadas nuevamente. Las sentencias no re creadas, dejarán un bloqueo en las tablas y evitarán que otras sentencias puedan acceder a los datos. Sentencias de lectura no re creadas evitarán que funcionen las sentencias de escritura.</p> -<p>Cuando los objetos sentencias son liberados, su correspondiente sentencia en la base de datos es liberada. Si estás usando C++ y sabes que todas las referencias serán destruidas, no tienes que re crear explicitamente las sentencias. Además, si usas <code>mozIStorageStatement.execute()</code>, tampoco necesitas re crear explicitamente las sentencias, esta función lo hará por ti. En otro caso, llama a <code>mozIStorageStatement.reset()</code>.</p> -<p>Los que usáis JavaScript, deberéis aseguraros de re crear las sentencias. Se particularmente escrupuloso con las excepciones. Querrás estar seguro de re crear las sentencias aún si ocurre una excepción, o los accesos subsiguientes pueden no ser posibles. Re crear una sentencia es relativamente poco pesado y no ocurre nada malo si ya ha sido re creada, así que no te preocupes por re creaciones innecesarias.</p> -<pre>var statement = connection.createStatement(...); -try { - // usa la sentencia... -} finally { - statement.reset(); -} -</pre> -<p>Los que usáis C++ debéis hacer lo mismo. Existe un objeto en {{ Source("storage/public/mozStorageHelper.h") }} llamado mozStorageStatementScoper que se asegurará que una sentencia dada sea re creada cuando sales del ámbito. Es muy recomendable que uses este objeto si te es posible.</p> -<pre>void someClass::someFunction() -{ - mozStorageStatementScoper scoper(mStatement) - // use the statement -} -</pre> -<h2 id="id_de_la_.C3.BAltima_inserci.C3.B3n" name="id_de_la_.C3.BAltima_inserci.C3.B3n">id de la última inserción</h2> -<p>Usa la propiedad <code>lastInsertRowID</code> en la conexión para obtener el id (id de la fila) de la última operación <code>INSERT</code> operation en la base de datos.<br> -Esto es útil si tienes una columna en tu tabla que sea la clave primaria (como <code>INTEGER PRIMARY KEY</code> o <code>INTEGER PRIMARY KEY AUTOINCREMENT</code>) en cuyo caso SQLite asigna automáticamente un valor a cada fila insertada, si tu no proporcionas alguno. <a class="external" href="http://www.sqlite.org/capi3ref.html#sqlite3_last_insert_rowid"></a><a class="external" href="http://www.sqlite.org/faq.html#q1"></a> El valor devuelto es del tipo <code>number</code> en JS y <code>long long</code> en C++.</p> -<p><code>lastInsertRowID</code> JS example:</p> -<pre>var sql = "INSERT INTO contacts_table (number_col, name_col) VALUES (?1, ?2)" -var statement = mDBConn.createStatement(sql); - statement.bindUTF8StringParameter(0, number); - statement.bindUTF8StringParameter(1, name); - statement.execute(); - statement.reset(); - -var rowid = mDBConn.lastInsertRowID; -</pre> -<h2 id="Transacciones" name="Transacciones">Transacciones</h2> -<p>mozIStorageConnection tiene funciones para las transacciones de comienzo y final. Si no usas transacciones explicitamente, se creará una transacción implícita por ti para cada sentencia. Esto tiene una gran implicación en el rendimiento. Hay una sobrecarga en cada transacción, especialmente para las transacciones de confianza. Por tanto verás una apreciable ganancia en el rendimiento, cuando estés haciendo ejecutando varias sentencias en una fila, si las agrupas en una transacción. Ver <a href="/es/Storage/Performance" title="es/Storage/Performance">Storage:Performance</a> para más detalles.</p> -<p>La mayor diferencia entre otros sitemas de base de datos y sqlite es que éste último no implementa transacciones anidadas. Esto significa que en el momento en que una transacción es abierta, no puedes abrir otra transacción. Puedes usar <code>mozIStorageConnection.transactionInProgress</code> para ver si la transacción está en progreso.</p> -<p>También puedes simplemente ejecutar "BEGIN TRANSACTION" y "END TRANSACTION" directamente como sentencias SQL (esto es lo que hace la conexión cuando llamas a las funciones). Sin embargo, el uso de <code>mozIStorageConnection.beginTransaction</code> y las funciones relacionadas, está <em>fuertemente</em> recomendado, ya que guarda el estado de la transacción en la conexión. De otra forma, el atributo <code>transactionInProgress</code> tendrá el valor erróneo.</p> -<p>sqlite tiene vario tipos de transacción:</p> -<ul> <li>mozIStorageConnection.TRANSACTION_DEFERRED: Por defecto. El bloqueo de la base de datos es adquirido cuando es necesario (generalmente cuando ejecutas una sentencia, por primera vez, en una transacción).</li> -</ul> -<ul> <li>mozIStorageConnection.TRANSACTION_IMMEDIATE: Adquiere inmediatamente, un bloqueo de lectura en la base de datos.immediately.</li> -</ul> -<ul> <li>mozIStorageConnection.TRANSACTION_EXCLUSIVE: Adquiere inmediatamente, un bloqueo de escritura en la base de datos.immediately.</li> -</ul> -<p>Puedes pasar este tipo de transacción a <code>mozIStorageConnection.beginTransactionAs</code> para determinar que clase de transacción necesitas. Recuerda que si ya se ha iniciado otra transacción, esta operación no tendrá éxito. Generalmente, el tipo por defecto de TRANSACTION_DEFERRED es suficiente y no deberías usar otro tipo, a no ser, que realmente sepas porqué lo necesitas. Para más información, lee la documentación de sqlite: <a class="external" href="http://www.sqlite.org/lang_transaction.html">BEGIN TRANSACTION</a> y <a class="external" href="http://www.sqlite.org/lockingv3.html">locking</a>.</p> -<pre>var ourTransaction = false; -if (!mDBConn.transactionInProgress) { - ourTransaction = true; - mDBConn.beginTransactionAs(mDBConn.TRANSACTION_DEFERRED); -} - -// ... usa la conexión ... - -if (ourTransaction) - mDBConn.commitTransaction(); -</pre> -<p>A partir de código C++, puedes usar la clase mozStorageTransaction definida en {{ Source("storage/public/mozStorageHelper.h") }}. Esta clase iniciará una transacción del tipo especificado en la conexión especificada y, cuando salga del entorno, bien confiará o bien volverá la transacción a su estado inicial. Si ya hay una transacción en progreso, la clase de ayuda de la transacción no hará nada.</p> -<p>También tiene funciones de confianza explicitas. El uso típico es que crees la clase que por defecto vuelva a su estado original (rollback) y luego realices la confianza de la transacción explicitamente cuando tenga éxito:</p> -<pre>nsresult someFunction() -{ - // deferred transaction (the default) with rollback on failure - mozStorageTransaction transaction(mDBConn, PR_FALSE); - - // ... use the connection ... - - // everything succeeded, now explicitly commit - return transaction.Commit(); -} -</pre> -<h2 id="C.C3.B3mo_corromper_tu_base_de_datos" name="C.C3.B3mo_corromper_tu_base_de_datos">Cómo corromper tu base de datos</h2> -<ul> <li>Lee este documento: <a class="external" href="http://www.sqlite.org/lockingv3.html">File locking and concurrency in sqlite version 3</a>, especialmente la sección sobre corrupción.</li> -</ul> -<ul> <li>Abre más de una conexión hacia el mismo archivo con nombres que no son exactaente los determinados por <code>strcmp</code>. Esto incluye "my.db" y "../dir/my.db" o, en Windows (sin diferencia Mayúsculas/minúsculas) "my.db" y "My.db". Sqlite intentará manejar muchos de estos casos, pero no debes porfiar en ello.</li> -</ul> -<ul> <li>Accede una base de datos desde un enlace simbólico.</li> -</ul> -<ul> <li>Abre conexiones a la misma base de datos desde más de un hilo (Ver Seguridad de los hilos" más abajo).</li> -</ul> -<ul> <li>Accede a una conexión o a una sentencia desde más de un hilo (Ver Seguridad de los hilos" más abajo).</li> -</ul> -<ul> <li>Abre la base de datos desde un programa externo mientras está abierto en Mozilla. Nuestro sistema de cache rompe la reglas normales de bloqueo de archivos en sqlite que permitirían hacer esto de forma segura.</li> -</ul> -<h2 id="Bloqueo_en_SQLite" name="Bloqueo_en_SQLite">Bloqueo en SQLite</h2> -<p>SQLite bloquea la base de datos enteramente, esto es, cualquier intento de lectura causará un que intento de escritura devuelva SQLITE_BUSY, y una escritura activa causará que cualquier intento de lectura devuelva SQLITE_BUSY. Una sentencia es considerada activa a partir del primer step() hasta que se llame a reset(). execute() llama a step() y reset() a un tiempo. Un problema común es olvidar reset() una sentencia después de haber terminado con step().</p> -<p>Mientras que una conexión SQLite dada es capaz de tener muchas sentencias abiertas, su modelo de bloqueo limita lo que estas sentencias pueden realmente hacer simultáneamente (leer o escribir). De hecho es posible que muchas sentencias estén leyendo al mismo tiempo, sin embargo, no es posible que varias sentencias estén leyendo y escribiendo a la vez <em>en la misma tabla</em> -- aún cuando deriven de la misma conexión.</p> -<p>El modelo de bloque de SQLite se conoce como "two-tiered": nivel de conexión y nivel de tabla. La mayoría de las personas están familiarizadas con el nivel de conexión (base de datos): múltiples lecturas pero solo una escritura. El nivel de tabla (B-Tree) es lo que a veces puede resultar confuso. (Internamente, cada tabla en la base de datos tiene su propio B-Tree, de modo que tabla y "B-Tree" son técnicamente sinonimos).</p> -<h3 id="Bloqueo_a_nivel_de_tabla" name="Bloqueo_a_nivel_de_tabla">Bloqueo a nivel de tabla</h3> -<p>Podrías pensar que si tienes sólo una conexión, i esta bloquea la base da datos para escritura, podrías usar multiples sentencias para hacer lo que quieras. No exactamente. Debes tener en cuenta que los bloqueos a nivel de tabla (B-Tree) que están mantenidos por sentencias se mantienen a lo largo de la base de datos (por ejemplo, las sentencias de manejo SELECT).</p> -<p>La regla general es esta: una sentencia de manejo puede <strong>not</strong> modificar una tabla (B-Tree) que otras sentencias de manejo están leyendo (tienen el cursor abierto sobre ellas) -- aún cuando la sentencia de manejo comparte la misma conexión (contenido de la transacción, bloqueo de la base de datos, etcétera) con las otras sentencias de manejo. <em>Intentar hacer eso, también bloqueará (o devolverá SQLITE_BUSY)</em>.</p> -<p>Este problema a menudo aparece cuando intestas interactuar en una tabla usando una sentencia mientras modificas registros en la tabla con otra sentencia. Esto no funcionará (o entraña muchas posibilidades de no funcionar, dependiendo del optimizador (ver más abajo)). Las sentencias de modificación causarán un bloque ya que la sentencia de lectura tiene el cursor abierto sobre la tabla.</p> -<h3 id="Trabajando_con_los_problemas_de_bloqueo" name="Trabajando_con_los_problemas_de_bloqueo">Trabajando con los problemas de bloqueo</h3> -<p>La solución es seguir (1) como se dice más arriba. Teóricamente, (2) actualmente no debería funcionar con SQLite 3.x En este escenario, los bloqueos de base de datos entran en juego (con múltiples conexiones) adicionalmente a los bloqueos de tablas. La conexión 2 (conexiones de cambio) no serán capaces de modificar (escribir en) la base de datos mientras que la conexión 1 (conexión de lectura) esté leyendo. La conexión 2 requerirá un bloqueo exclusivo para ejecutar una sentencia de modificación SQL, que no podrá obtener mientras la conexión 1 tenga sentencias activas leyendo la base de datos (La conexión 1 tiene un bloqueo de lectura compartido durante este tiempo que prohíbe a cualquier otra conexión tener un bloqueo exclusivo).</p> -<p>Otra opción es usar una tabla temporal. Crea una tabla temporal que contenga los resultados de la tabla de interés, interactúa con ella (poniendo los bloqueos de la tabla con las sentencias de lectura en la tabla temporal) y entonces las sentencias de modificación pueden hacer cambios en la tabla real sin ningún problema). Esto puede hacerse con sentencias derivadas de una conexión simple (contexto de la transacción). Esta escena ocurre algunas veces 'detrás del escenario' ya que ORDERED BY puede producir tablas temporales internamente. Sin embargo, no es seguro asumir que el optimizador hará esto en todos los casos. Crear tablas temporales explicitamente, es la única forma segura de realizar esta última opción.</p> -<h2 id="Seguridad_de_los_hilos" name="Seguridad_de_los_hilos">Seguridad de los hilos</h2> -<p>El servicio mozStorage y sqlite son hilos seguros. Sin embargo, ningún otro mozStorage u objeto sqlite son hilos seguros.</p> -<ul> <li>El servicio storage debe ser creado en el hilo principal. Si quieres acceder al servicio desde otro hilo, debes asegurarte de llamar a getService desde el hilo principal con antelación.</li> -</ul> -<ul> <li>No puedes acceder a una conexión o una sentencia desde múltiples hilos. Esos objetos storage no son seguros y las representaciones sqlite tampoco son seguras. Aún cuando hagas bloqueo y te asegures que sólo ese hilo está haciendo algo, puede haber problemas. Este caso no ha sido probado y puede haber algún estado pre-implementación en el hilo de sqlite. Se recomienda fuertemente que no hagas esto.</li> -</ul> -<ul> <li>No puedes acceder una base de datos simple desde múltiples conexiones en múltiples hilos. Normalmente, sqlite permite esto. Sin embargo, hacemos <code>sqlite3_enable_shared_cache(1);</code> (ver <a class="external" href="http://www.sqlite.org/sharedcache.html">sqlite shared-cache mode</a>) que hace que múltiples conexiones compartan la misma memoria cache. Esto es importante para el rendimiento. Sin embargo, no hay bloqueos para el acceso a la memoria cache, lo que significa que se romperá si se usa desde más de un hilo.</li> -</ul> -<p>De nada vale, sin embargo, que los autores de las extensiones de JavaScript del navegador, esten menos impactados por estas restricciones de lo que estaban al principio. Si una base de datos es creada y usada de forma exclusiva desde JavaScript, la seguridad de los hilos no será, normalmente, una preocupación. El motor JavaScript interno de Firefox (SpiderMonkey) ejecuta el JavaScript dentro de un único y persistente hilo, excepto cuando JavaScript se ejecuta en un hilo diferente o es ejecutado a partir de una llamada realizada desde otro hilo (p.e. desde interfaces de stream o delde la red). Con excepción del uso incorrecto de JavaScript en múltiples hilos, los problemas solo deberían ocurrir si se accede aun hilo asociado a una base de datos previamente en uso a través de mozStorage.</p> -<h2 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h2> -<ul> <li><a href="/es/mozIStorageConnection" title="es/mozIStorageConnection">mozIStorageConnection</a> Conexión de la base de datos a un archivo específico o almacenamiento en memoria.</li> <li><a href="/es/MozIStorageStatement" title="es/MozIStorageStatement">mozIStorageStatement</a> Crea y ejecuta sentencias SQL en bases de datos SQLite.</li> <li><a href="/es/MozIStorageValueArray" title="es/MozIStorageValueArray">mozIStorageValueArray</a> Agrupa una matriz de valores SQL, como una fila resultante.</li> <li><a href="/es/MozIStorageFunction" title="es/MozIStorageFunction">mozIStorageFunction</a> Crea una nueva función SQLite.</li> <li><a href="/es/MozIStorageAggregateFunction" title="es/MozIStorageAggregateFunction">mozIStorageAggregateFunction</a> Crea una nueva función agregada SQLite.</li> <li><a href="/es/MozIStorageProgressHandler" title="es/MozIStorageProgressHandler">mozIStorageProgressHandler</a> Vigilar progresos durante la ejecución de una sentencia.</li> <li><a href="/es/MozIStorageStatementWrapper" title="es/MozIStorageStatementWrapper">mozIStorageStatementWrapper</a> Agrupador de la sentencia Storage.</li> <li><a href="/es/MozIStorageService" title="es/MozIStorageService">mozIStorageService</a> Servicio Storage.</li> -</ul> -<ul> <li><a href="/es/Storage/Performance" title="es/Storage/Performance">Storage:Rendimiento</a> Cómo hacer que tu conexión de base de datos rinda bien.</li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3072">Storage Inspector Extension</a><span class="goog-zippy-collapsed" id="romanspan" class="hidden"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span><span class="short_text" id="result_box"><span title=""><br> </span></span></span> <span class="short_text" id="result_box"><span title="">Hace que sea fácil de ver los archivos de base de datos SQLite en el perfil actual.</span></span></li> <li><a class="external" href="http://www.sqlite.org/lang.html">SQLite Syntax</a> Query <span class="short_text" id="result_box"><span style="" title="">lengua que comprenda </span></span>SQLite</li> <li><a class="external" href="http://sqlitebrowser.sourceforge.net/">SQLite Database Browser</a><span class="medium_text" id="result_box"><span title="">es una herramienta capaz libre disponible para muchas plataformas. </span><span title="">Puede ser útil para examinar las bases de datos existentes y las pruebas sentencias SQL.</span></span> <span class="goog-zippy-collapsed" id="romanspan" class="hidden"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager Extension</a><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="">ayuda a administrar los archivos de base de datos SQLite en el equipo.</span></span> <span class="goog-zippy-collapsed" id="romanspan" class="hidden"><img alt="" class="buttons square13 zippy-plus" id="romanimg" src="http://www.google.es/images/cleardot.gif"><span id="romantext">Mostrar forma romanizada</span></span> <div class="almost_half_cell" style=""> <div dir="ltr" style=""><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title=""><br> </span></span></div> </div> </li> -</ul> -<p> </p> -<p>{{ languages( { "es": "es/Almacenamiento", "fr": "fr/Storage", "ja": "ja/Storage", "pl": "pl/Storage", "en": "en/Storage" } ) }}</p> diff --git a/files/es/orphaned/tools/add-ons/dom_inspector/index.html b/files/es/orphaned/tools/add-ons/dom_inspector/index.html deleted file mode 100644 index a567e8fb2e..0000000000 --- a/files/es/orphaned/tools/add-ons/dom_inspector/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: DOM Inspector -slug: orphaned/Tools/Add-ons/DOM_Inspector -tags: - - CSS - - CSS:Herramientas - - DOM - - DOM:Herramientas - - Extensiones:Herramientas - - HTML - - HTML:Herramientas - - JavaScript - - JavaScript:Herramientas - - Temas - - Temas:Herramientas - - Todas_las_Categorías - - XUL - - XUL:Herramientas - - extensiones -translation_of: Tools/Add-ons/DOM_Inspector -original_slug: DOM_Inspector ---- -<p> -</p><p>El <b><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a></b> (conocido como <b>DOMi</b>) es una herramienta de Mozilla utilizada para inspeccionar, navegar y editar el <i>Modelo de Objetos del Documento</i>(<a href="es/DOM">Document Object Model</a> en inglés) de los documentos - normalmente páginas web o ventanas <a href="es/XUL">XUL</a> . -</p><p>Para más información sobre el DOMi, consulta <a class="external" href="http://kb.mozillazine.org/DOM_Inspector">la página del DOM Inspector en MozillaZine</a>. -</p><p><span>Categorías</span> -</p> -<div class="noinclude"> -</div> -{{ languages( { "en": "en/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "it": "it/DOM_Inspector", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }} diff --git a/files/es/orphaned/tools/add-ons/index.html b/files/es/orphaned/tools/add-ons/index.html deleted file mode 100644 index 416e88484d..0000000000 --- a/files/es/orphaned/tools/add-ons/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Add-ons -slug: orphaned/Tools/Add-ons -tags: - - NeedsTranslation - - TopicStub - - Web Development - - Web Development:Tools -translation_of: Tools/Add-ons -original_slug: Tools/Add-ons ---- -<p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p> - -<dl> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt> - <dd>Examine the data exchanged in a WebSocket connection.</dd> - <dd> </dd> -</dl> diff --git a/files/es/orphaned/traducir_las_descripciones_de_las_extensiones/index.html b/files/es/orphaned/traducir_las_descripciones_de_las_extensiones/index.html deleted file mode 100644 index a20740b175..0000000000 --- a/files/es/orphaned/traducir_las_descripciones_de_las_extensiones/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Traducir las descripciones de las extensiones -slug: orphaned/Traducir_las_descripciones_de_las_extensiones -tags: - - Complementos - - Localización - - Todas_las_Categorías - - extensiones -original_slug: Traducir_las_descripciones_de_las_extensiones ---- -<p> </p> -<h3 id="Localizing_in_Gecko_1.9" name="Localizing_in_Gecko_1.9">Localizing in Gecko 1.9</h3> -<p>Gecko 1.9 incluye un nuevo y más robusto método para localizar descripciones añadidas y otros metadatos. Todas las diferentes descripciones aparecen ahora en el fichero <a href="es/Install_Manifests">install.rdf</a> utilizando las propedades <code>em:localized</code>. Cada una contiene al menos una propiedad <code>em:locale</code> que marca el localizador (locale) para el cual deberá utilizarse la citada información y, además, todas las diversas cadenas (strings) del localizador. El siguiente ejemplo demuestra lo dicho (la mayoría de las propiedades normales del manifiesto han sido suprimidas para abreviar):</p> -<pre><?xml version="1.0"?> - -<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:em="http://www.mozilla.org/2004/em-rdf#"> - <Description about="urn:mozilla:install-manifest"> - <em:id>TabSidebar@blueprintit.co.uk</em:id> - <em:localized> - <Description> - <em:locale>de-DE</em:locale> - <em:name>Tab Sidebar</em:name> - <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description> - </Description> - </em:localized> - <em:localized> - <Description> - <em:locale>es-ES</em:locale> - <em:name>Tab Sidebar</em:name> - <em:description>Muestra una vista previa de sus pestañas en su panel lateral.</em:description> - </Description> - </em:localized> - <em:localized> - <Description> - <em:locale>nl-NL</em:locale> - <em:name>Tab Sidebar</em:name> - <em:description>Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.</em:description> - </Description> - </em:localized> - <em:name>Tab Sidebar</em:name> - <em:description>Displays previews of your tabs in your sidebar.</em:description> - </Description> -</RDF> -</pre> -<p>Todos los metadatos mencionados más abajo pueden localizarse mediante este procedimiento. La información de localización "por defecto" proporcionada por la propiedad <code>em:localized</code>, puede ser pasada por alto utilizando un conjunto de preferencias de localización, según se detalla a continuación.</p> -<p>El proceso para seleccionar la propiedad <code>em:localized</code> a utilizar para una determinada localización (locale) es el siguiente:</p> -<ol> - <li>Si existe una propiedad con un identificador <code>em:locale</code> que se corresponde exactamente con la localización (locale) entonces se usará esa propiedad.</li> - <li>Si se encuentran comparaciones inexactas, entonces se utilizará aquella que tenga el máximo de partes coincidentes, estando dichas partes separadas entre sí por un guión (es decir, "es" coincidiría con "es-ES" y viceversa).</li> - <li>Si existe más de un localizador (locale) con el mismo número de partes coincidentes, entonces se utilizará el más general (es decir, "en" será preferente en "en-GB" cuando se busque, antes que "en-US").</li> -</ol> -<p>En primer lugar se mostrará la localización actual "en-GB" y posteriormente se mostrará la segunda localización correspondiente a "en-US".</p> -<p>Si no se ha establecido ninguna preferencia y no se encuentra una coindidencia <code>em:localized property</code> para la localización actual "en-GB" o "en-US" entonces se utilizarán las propiedades especificadas directamente en el manifiesto de instalación, como último recurso, tal y como se utilizaban en las versiones anteriores a la versión Gecko 1.9.</p> -<h3 id="Localizar_antes_de_Gecko_1.9" name="Localizar_antes_de_Gecko_1.9">Localizar antes de Gecko 1.9</h3> -<p>Antes de Gecko 1.9, los desarrolladores de extensiones o aplicaciones añadidas (add-ons) tenían que seguir un procedimiento especial para definir las descripciones adicionales locales para las aplicaciones añadidas orientadas a las aplicaciones basadas en el juego de herraminetas "toolkit" original (tales como Firefox o Thunderbird).</p> -<ul> - <li>Si aún no dispone de ellas, cree <a href="es/Localizing_an_extension#Localizing_strings_in_JavaScript_code"> localized properties files</a>. Asegúrese de que utiliza la codificación UTF-8 para garantizar que los caracteres extranjeros se muestren correctamente.</li> - <li>Añada la siguiente línea a cada uno de sus ficheros de propiedades de localización (donde: <var>EXTENSION_ID</var> corresponda a su identificador de extensión (extension ID) (<code><em:id></code> de <a href="es/Install.rdf">install.rdf</a>) y <var>LOCALIZED_DESCRIPTION</var> es la descripción de su extensión, que usted desea que aparezca en el idioma determinado): - <pre>extensions.EXTENSION_ID.description=LOCALIZED_DESCRIPTION</pre> - </li> - <li>Si aún no dispone de uno, cree <a href="es/Building_an_Extension#Defaults_Files"> a default preferences file</a>.</li> - <li>Añádale la siguiente línea (donde: <var>EXTENSION_ID</var> coincida con su identificador de aplicación (application ID) de <a href="es/Install_Manifests">install.rdf</a> y <var>PATH_TO_LOCALIZATION_FILE</var> sea la ruta correcta del fichero de localización que usted añadió anteriormente): - <pre>pref("extensions.EXTENSION_ID.description", "PATH_TO_LOCALIZATION_FILE");</pre> - </li> -</ul> -<h4 id="Cadenas_Localizables" name="Cadenas_Localizables">Cadenas Localizables</h4> -<p>Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden ser localizados utilizando este proceso:</p> -<ul> - <li>name (nombre)</li> - <li>description (descripción)</li> - <li>creator (creador)</li> - <li>homepageURL (URL de la página de inicio)</li> -</ul> -<h4 id="Listas_Localizables" name="Listas_Localizables">Listas Localizables</h4> -<p>En los casos en que puedan existir múltiples valores, se añade un índice numérico al final del nombre de cada preferencia:</p> -<pre>extensions.EXTENSION_ID.contributor.1=FIRST_LOCALIZED_CONTRIBUTOR_NAME -extensions.EXTENSION_ID.contributor.2=SECOND_LOCALIZED_CONTRIBUTOR_NAME -extensions.EXTENSION_ID.contributor.3=THRID_LOCALIZED_CONTRIBUTOR_NAME - -pref("extensions.EXTENSION_ID.contributor.1", "PATH_TO_LOCALIZATION_FILE"); -pref("extensions.EXTENSION_ID.contributor.2", "PATH_TO_LOCALIZATION_FILE"); -pref("extensions.EXTENSION_ID.contributor.3", "PATH_TO_LOCALIZATION_FILE"); -</pre> -<p>Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden localizarse utilizando este proceso:</p> -<ul> - <li>developer (desarrollador)</li> - <li>translator (traductor)</li> - <li>contributor (contribuidor)</li> -</ul> diff --git a/files/es/orphaned/traducir_una_extensión/index.html b/files/es/orphaned/traducir_una_extensión/index.html deleted file mode 100644 index 5691f27418..0000000000 --- a/files/es/orphaned/traducir_una_extensión/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Traducir una extensión -slug: orphaned/Traducir_una_extensión -tags: - - Complementos - - Localización - - Todas_las_Categorías - - extensiones -original_slug: Traducir_una_extensión ---- -<p>{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}</p> - -<p>Este artículo está construido sobre los anteriores ejemplos de programación de extensiones añadiendo soporte para traducción a nuestra extensión. Realizando unos pocos y simples pasos se conseguirá hacer la extensión mucho más fácil de traducir en varios idiomas sin tener que editar los ficheros XUL o JavaScript.</p> - -<p>Si aún no has creado ninguna extensión o te gustaría refrescar la memoria, echa un vistazo a los anteriores artículos de la serie:</p> - -<ul> - <li><a href="/es/Crear_una_extensi%C3%B3n_en_la_barra_de_estado" title="es/Crear_una_extensión_en_la_barra_de_estado">Crear una extensión en la barra de estado</a></li> - <li><a href="/es/Crear_una_extensi%C3%B3n_din%C3%A1mica_en_la_barra_de_estado" title="es/Crear_una_extensión_dinámica_en_la_barra_de_estado">Crear una extensión dinámica en la barra de estado</a></li> - <li><a href="/es/A%C3%B1adir_preferencias_a_una_extensi%C3%B3n" title="es/Añadir_preferencias_a_una_extensión">Añadir preferencias a una extensión</a></li> -</ul> - -<h2 id="Descargar_el_ejemplo" name="Descargar_el_ejemplo">Descargar el ejemplo</h2> - -<p>Puedes descargar el código de ejemplo de este artículo para poder compararlo o para usarlo como base para tu propia extensión.</p> - -<p>http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip</p> - -<h2 id="Traducir_cadenas_en_los_ficheros_XUL" name="Traducir_cadenas_en_los_ficheros_XUL">Traducir cadenas en los ficheros XUL</h2> - -<h3 id="Crear_los_ficheros_de_configuraci.C3.B3n_regional_necesarios" name="Crear_los_ficheros_de_configuraci.C3.B3n_regional_necesarios">Crear los ficheros de configuración regional necesarios</h3> - -<p>Cada fichero XUL que comprende la interfaz de usuario de tu extensión debería tener un fichero local en su directorio locale.</p> - -<p>Cada fichero locale mapea los nombres de las entidades referenciadas en los ficheros XUL a las mismas cadenas. El diálogo de preferencias, cuyo fichero XUL es <code>options.xul</code>, tiene un fichero <code>options.dtd</code> correspondiente con este aspecto:</p> - -<pre class="eval"> <!ENTITY options_window_title "StockWatcher 2 Preferences"> - <!ENTITY options_symbol.label "Stock to watch: "> -</pre> - -<p>La entidad "options_window_title" está mapeada a la cadena "StockWatcher 2 Preferences", la cual es usada como título de la ventana de preferencias.</p> - -<p>El fichero <code>stockwatcher2.dtd</code> contiene el mapa para el fichero <code>stockwatcher2.xul</code>:</p> - -<pre class="eval"> <!ENTITY panel_loading "Loading..."> - <!ENTITY menu_refresh_now.label "Refresh Now"> - <!ENTITY menu_apple.label "Apple (AAPL)"> - <!ENTITY menu_google.label "Google (GOOG)"> - <!ENTITY menu_microsoft.label "Microsoft (MSFT)"> - <!ENTITY menu_yahoo.label "Yahoo (YHOO)"> -</pre> - -<h3 id="Actualizar_los_ficheros_XUL" name="Actualizar_los_ficheros_XUL">Actualizar los ficheros XUL</h3> - -<p>Cada fichero XUL necesita referenciar su correspondiente fichero de configuración regional. Además necesitamos actualizar el código para utilizar entidades en lugar de cadenas, por lo que las sustituciones tomarán lugar basándose en la configuración regional actualmente activa.</p> - -<p>Para añadir una referencia al fichero de configuración regional correcto dado un fichero XUL necesitamos añadir una línea al fichero XUL. Para <code>options.xul</code> añadimos esta línea:</p> - -<pre class="eval"> <!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/options.dtd</a>"> -</pre> - -<p>Añadimos una línea similar al fichero <code>stockwatcher.xul</code>:</p> - -<pre class="eval"> <!DOCTYPE overlay SYSTEM "<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockwatcher2.dtd</a>"> -</pre> - -<p>En aplicaciones mayores podrías necesitar utilizar entidades de diversos ficheros de configuración regional en un único fichero XUL. <a href="/es/Utilizar_m%C3%BAltiples_DTDs" title="es/Utilizar_múltiples_DTDs">Utilizar múltiples DTDs</a> explica cómo hacer esto.</p> - -<p>Date cuenta de que las URLs de los ficheros DTD no incluyen realmente el nombre del idioma a utilizar. el registro chrome resuelve los URIs basándose en la configuración regional actual y los datos que proporcionas en tu <a href="#actualizar_el_manifiesto_chrome">manifiesto chrome</a>.</p> - -<p>Luego simplemente reemplazaremos cada cadena de texto en nuestros ficheros XUL con la correspondiente entidad. Por ejemplo, en <code>stockwatcher2.xul</code> cambiamos la línea:</p> - -<pre class="eval"> <menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/> -</pre> - -<p>por</p> - -<pre class="eval"> <menuitem label="&menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/> -</pre> - -<p>Haremos esto para cada cadena utilizada en cada fichero XUL.</p> - -<h2 id="Actualizar_el_manifiesto_chrome" name="Actualizar_el_manifiesto_chrome">Actualizar el manifiesto chrome</h2> - -<p>Para que Firefox conozca los ficheros de configuración regional necesitamos revisar nuestro fichero <code><a href="/es/Registro_chrome" title="es/Registro_chrome">|chrome.manifest</a></code>, añadiendo una línea por cada idioma.</p> - -<pre class="eval"> locale stockwatcher2 en-US chrome/locale/en-US/ -</pre> - -<p>Esto le dice a Firefox que el idioma en-US está ubicado en el directorio <code>chrome/locale/en-US</code>.</p> - -<h2 id="Traducir_cadenas_en_el_c.C3.B3digo_JavaScript" name="Traducir_cadenas_en_el_c.C3.B3digo_JavaScript">Traducir cadenas en el código JavaScript</h2> - -<p>Si tu código JavaScript contiene cadenas literales que necesitan ser traducidas, como hace nuestro ejemplo visualizador de stocks, también necesitaremos hacerlo traducible. Podemos hacer esto moviendo las cadenas a un conjunto. Los conjuntos de cadenas son creados mediante el establecimiento de un fichero de propiedades que mapea claves a valores de cadena. Para una explicación detallada de cómo funciona esto, lee <a href="/es/Tutorial_XUL/Ficheros_de_propiedades" title="es/Tutorial_XUL/Ficheros_de_propiedades">Tutorial XUL:Ficheros de propiedades</a>.</p> - -<h3 id="Crear_un_fichero_de_propiedades" name="Crear_un_fichero_de_propiedades">Crear un fichero de propiedades</h3> - -<p>Lo primero que hacemos es crear un fichero de propiedades para los literales usados por el código JavaScript en <code>stockwatcher2.js</code>:</p> - -<pre class="eval">changeString=Chg: -openString=Open: -lowString=Low: -highString=High: -volumeString=Vol: -</pre> - -<p>El fichero <code>stockwatcher2.properties</code> mostrado anteriormente mapea cinco claves (<code>changeString</code>, <code>openString</code>, <code>lowString</code>, <code>highString</code>, y <code>volumeString</code>) a su correspondiente texto en inglés.</p> - -<h3 id="Crear_un_conjunto_de_cadenas" name="Crear_un_conjunto_de_cadenas">Crear un conjunto de cadenas</h3> - -<p>El siguiente paso es modificar el fichero <code>stockwatcher2.xul</code> para referenciar este fichero de propiedades. Haremos esto creando un conjunto de cadenas utilizando el siguiente código:</p> - -<pre class="eval"> <stringbundleset id="stringbundleset"> - <stringbundle id="string-bundle" src="<a class="external" rel="freelink">chrome://stockwatcher2/locale/stockw...er2.properties</a>"/> - </stringbundleset> -</pre> - -<p>Esto establece un nuevo conjunto de cadenas, referenciados por el ID "string-bundle", cuyas claves y valores han de ser cargados desde el fichero <code>stockwatcher2.properties</code> que ya habíamos creado.</p> - -<h3 id="Actualizando_el_c.C3.B3digo_JavaScript" name="Actualizando_el_c.C3.B3digo_JavaScript">Actualizando el código JavaScript</h3> - -<p>Ahora estamos listos para revisar el código JavaScript para cargar las cadenas desde el conjunto de cadenas en lugar de utilizar literales. Esto implica la reescritura de la función <code>refreshInformation()</code> para cargar las cadenas y su función interna <code>infoReceived()</code> para utilizar las cadenas cargadas y traducidas en lugar de literales.</p> - -<p>Añadimos a <code>refreshInformation()</code> el siguiente código:</p> - -<pre class="eval"> var stringsBundle = document.getElementById("string-bundle"); - var changeString = stringsBundle.getString('changeString') + " "; - var openString = stringsBundle.getString('openString') + " "; - var lowString = stringsBundle.getString('lowString') + " "; - var highString = stringsBundle.getString('highString') + " "; - var volumeString = stringsBundle.getString('volumeString') + " "; -</pre> - -<p>Este código obtiene una referencia al elemento conjunto de cadenas que hemos añadido a <code>stockwatcher2.xul</code> llamando a <code>document.getElementById()</code>, especificando el ID "string-bundle". Luego recupera todas las cadenas que necesitamos desde el conjunto, una a una, llamando al método del conjunto de cadenas <code><a class="external" href="http://www.xulplanet.com/references/elemref/ref_stringbundle.html#prop_getString">getString()</a></code>, pasando la clave apropiada para cada cadena.</p> - -<p>En este caso, también añadimos un espacio al final de cada cadena. Hacemos esto porque este programa funciona así en particular y no tienes porqué hacerlo siempre.</p> - -<p>Luego reemplazamos toda ocurrencia de las cadenas literales con las variables apropiadas:</p> - -<pre class="eval"> samplePanel.tooltipText = changeString + fieldArray[4] + " | " + - openString + fieldArray[5] + " | " + - lowString + fieldArray[6] + " | " + - highString + fieldArray[7] + " | " + - volumeString + fieldArray[8]; -</pre> - -<h2 id="Traducir_la_descripci.C3.B3n_en_install.rdf" name="Traducir_la_descripci.C3.B3n_en_install.rdf">Traducir la descripción en install.rdf</h2> - -<p>Mira <a href="/es/Traducir_descripciones_de_extensiones" title="es/Traducir_descripciones_de_extensiones">Traducir descripciones de extensiones</a>.</p> - -<h2 id="A.C3.B1adir_m.C3.A1s_traducciones" name="A.C3.B1adir_m.C3.A1s_traducciones">Añadir más traducciones</h2> - -<p>Para añadir otra traducción a un nuevo idioma, todo lo que necesitas hacer es añadir otra línea al manifiesto chrome referenciando la nueva configuración regional. Por ejemplo, para añadir una traducción al español deberías añadir:</p> - -<pre class="eval"> locale stockwatcher2 es-ES chrome/locale/es-ES/ -</pre> - -<p>Luego sólo hay que crear un subdirectorio <code>chrome/locale/es-ES</code> y añadir los ficheros DTD necesarios; en este caso <code>options.dtd</code> y <code>stockwatcher2.dtd</code>. Dichos ficheros deberían mapear las mismas etiquetas para la traducción al español de las cadenas utilizadas por la extensión.</p> - -<p>Del mismo modo, si tenemos algún fichero de propiedades que contenga cadenas traducidas para nuestro código JavaScript también necesitaremos crear versiones de configuración regional para aquellos ficheros de propiedades en el directorio <code>chrome/locale/es-ES</code>. Sólo las cadenas deberían ser traducidas; las claves deberían ser las mismas para cada traducción.</p> - -<p>{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}</p> diff --git a/files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html b/files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html deleted file mode 100644 index 7130b99de3..0000000000 --- a/files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html +++ /dev/null @@ -1,378 +0,0 @@ ---- -title: Usando archivos desde aplicaciones web -slug: orphaned/Usando_archivos_desde_aplicaciones_web -tags: - - Archivos - - HTML5 - - para_revisar - - páginas_a_traducir -original_slug: Usando_archivos_desde_aplicaciones_web ---- -<p>{{ gecko_minversion_header("1.9.2") }}</p> - -<p> </p> - -<p>Al usar la API de Archivos agregada al DOM en HTML5, ahora es posible que el contenido de una página web solicite al usuario que elija un archivo local para luego leer el contenido de esos archivos. Esta selección puede hacerse tanto usando un elemento <code class="western"><a href="/en/DOM/HTMLInputElement" title="en/DOM/HTMLInputElement">input</a></code> de HTML o arrastrando y soltando el archivo.</p> - -<h2 id="Seleccionar_archivos_usando_HTML"> Seleccionar archivos usando HTML</h2> - -<p> Seleccionar un solo archivo para usar con la API de archivo es simple:</p> - -<pre><code><input type="file" id="input" onchange="handleFiles(this.files)"></code> -</pre> - -<p>Cuando el usuario selecciona un archivo, se llama a la función <code>handleFiles()</code> con un objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> que contiene el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File </code></a>representando el archivo seleccionado por el usuario.</p> - -<p>Si desea permitir al usuario seleccionar varios archivos, simplemente use el atributo <code>multiple</code> en el elemento <code>input</code>:</p> - -<pre><code><input type="file" id="input" multiple="true" onchange="handleFiles(this.files)"></code> -</pre> - -<p>En este caso, la lista de archivos se pasa a la función <code>handleFiles()contiene </code><code>un objeto</code> <a href="/en/DOM/File" title="en/DOM/File"> <code>File</code></a> por cada archivo que el usuario ha seleccionado.</p> - -<p>{{ h2_gecko_minversion("Uso de elementos ocultos del archivo de entrada usando el método click() ", "2.0") }}</p> - -<p>Desde la versión 2.0 de Gecko {{ geckoRelease("2.0") }}, puedes esconder el elemento file {{ HTMLElement("input") }} y mostrar una interfaz propia para abrir el examinador de archivos y para mostrar que archivo o archivos ha seleccionado el usuario. Puedes hacerlo agregándole al estilo del elemento input la instrucción "display:none" y usando el método <code>click()</code> en el elemento {{ HTMLElement("input") }}.</p> - -<p>Considere este código HTML:</p> - -<pre class="deki-transform"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> -<a href="#" id="fileSelect">Select some files</a> -</pre> - -<p>Tu método <code>doClick()</code> puede verse como esto:</p> - -<pre class="deki-transform">var fileSelect = document.getElementById("fileSelect"), - fileElem = document.getElementById("fileElem"); - -fileSelect.addEventListener("click", function (e) { - if (fileElem) { - fileElem.click(); - } - e.preventDefault(); // prevent navigation to "#" -}, false); -</pre> - -<p>Obiamente puedes darle estilo al nuevo botón para abrir el selector de archivos como desees.</p> - -<h3 id="Dinámica_de_la_adición_de_un_detector_de_cambio">Dinámica de la adición de un detector de cambio</h3> - -<p> Si tu campo de entrada fue creado con una librería de JavaScript como <a class="external" href="http://www.jquery.com/">jQuery</a>, necesitarás usar {{ domxref("element.addEventListener()") }} para agregar un manejador de eventos de cambio, como este:</p> - -<pre class="deki-transform">var inputElement = document.getElementById("inputField"); -inputElement.addEventListener("change", handleFiles, false); - -function handleFiles() { - var fileList = this.files; - - /* now you can work with the file list */ -} -</pre> - -<p> Nota que en este caso, la función <code class="western">handleFiles()</code> busca la lista de archivos en lugar de aceptar un parámetro, ya que los detectores de eventos añadidos de esta manera no pueden aceptar un parámetro de entrada.</p> - -<p> </p> - -<p>{{ h1_gecko_minversion("Usando Objetos URL", "2.0") }}</p> - -<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduce asistencia para el DOM {{ domxref("window.URL.createObjectURL()") }} y los métodos {{ domxref("window.URL.revokeObjectURL()") }} Esto te permite crear URLs simples para ser usadas como referencia a cualquier dato que pueda ser referenciado usando un objeto DOM <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a>, incluyendo archivos locales en el computador del usuario.</p> - -<p>Cuando tienes un objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> te gustaría hacer referencia por URL desde HTML, puedes crear un objeto URL para que quede así :</p> - -<pre>var objectURL = window.URL.createObjectURL(fileObj); -</pre> - -<p>El objeto URL es una cadena de caracteres que identifica el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> . Cada vez que invocas {{ domxref("window.URL.createObjectURL()") }}, un único objeto URL es creado, <span class="long_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener traducciones alternativas">incluso, si usted</span> ya <span class="hps" title="Haz clic para obtener traducciones alternativas">ha</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">creado</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">un</span><span class="hps" title="Haz clic para obtener traducciones alternativas"> objeto URL de</span> <span class="hps" title="Haz clic para obtener traducciones alternativas">ese archivo</span></span>. Cada uno de estos debe ser liberado. Mientras se liberan automáticamente cuando se libera la memoria utilizada por el documento, sí tu página los usa dinámicamente, podrías liberarlos explicitamente invocando {{ domxref("window.URL.revokeObjectURL()") }}:</p> - -<pre>window.URL.revokeObjectURL(objectURL); -</pre> - -<h2 id="Selección_de_archivos_usando_arrastrar_y_soltar">Selección de archivos usando arrastrar y soltar</h2> - -<p> <span lang="es-ES">También puedes dejar que el usuario arrastre y suelte los archivos en la aplicación Web.</span></p> - -<p>El primer paso es establecer una zona para soltar. Exactamente que parte de tu contenido aceptara soltar puede variar dependiendo de el diseño de tu aplicación, pero hacer un elemento que reciba eventos de soltar es fácil:</p> - -<pre class="deki-transform">var dropbox; - -dropbox = document.getElementById("dropbox"); -dropbox.addEventListener("dragenter", dragenter, false); -dropbox.addEventListener("dragover", dragover, false); -dropbox.addEventListener("drop", drop, false); -</pre> - -<p> En este ejemplo, estamos girando el elemento con el ID "dropbox" en nuestra zona para soltar. Esto se hace mediante la adicción de manejadores que escuchen los eventos <code class="western">dragenter</code>, <code class="western">dragover</code>, y <code class="western">drop</code>.</p> - -<p>En realidad no necesitamos hacer nada con los eventos <code class="western">dragenter</code> and <code class="western">dragover</code> en nuestro caso, por lo que estas funciones son a la vez simples. Acabar de detener la propagación del evento y evitar que la acción predeterminada ocurra:</p> - -<pre class="deki-transform">function dragenter(e) { - e.stopPropagation(); - e.preventDefault(); -} - -function dragover(e) { - e.stopPropagation(); - e.preventDefault(); -} -</pre> - -<p>La verdadera magia pasa en la función <code class="western">drop()</code>:</p> - -<pre class="deki-transform">function drop(e) { - e.stopPropagation(); - e.preventDefault(); - - var dt = e.dataTransfer; - var files = dt.files; - - handleFiles(files); -} -</pre> - -<p>Aquí, recuperamos el campo <code>dataTransfer</code> del evento, a continuación tomamos la lista de archivos fuera de él, que pasa para <code>handleFiles()</code>. Desde este punto, el manejo de los archivos es el mismo si el usuario utiliza el elemento de entrada o arrastrar y soltar. Obteniendo información de los archivos seleccionados.</p> - -<p>El objeto <a href="/en/DOM/FileList" title="en/DOM/FileList"><code>FileList</code></a> proporcionado por el DOM de las listas de todos los archivos seleccionados por el usuario, cada una se especifica como un objeto<a href="/en/DOM/File" title="en/DOM/File"><code> File</code></a>. Tu puedes determinar cuantos archivos el usuario selecciona, al verificar el valor del atributo <code>length</code>:</p> - -<pre>var numFiles = files.length; -</pre> - -<p>Individualmente los objetos <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> pueden ser recuperados simplemente accediendo a la lista como una matriz:</p> - -<pre class="deki-transform">for (var i = 0; i < files.length; i++) { - var file = files[i]; - .. -} -</pre> - -<p> Este bucle se repite en todos los archivos de la lista de archivos.</p> - -<p>Hay tres atributos proporcionados por el objeto <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> que contienen información útil sobre el archivo.</p> - -<dl> - <dt><code>name</code></dt> - <dd>El nombre de archivo como cadena de sólo lectura. Esto es sólo el nombre de el archivo y no incluye ninguna información de la ruta.</dd> - <dt><code>size</code></dt> - <dd>El tamaño del archivo en bytes como de solo lectura entero de 64 bits.</dd> - <dt><code>type</code></dt> - <dd>El tipo MIME de el archivo como una cadena de sólo lectura, o "" si el tipo no puede ser determinado.</dd> -</dl> - -<h2 id="Ejemplo_Mostrando_miniaturas_de_las_imágenes_seleccionadas_por_el_usuario">Ejemplo: Mostrando miniaturas de las imágenes seleccionadas por el usuario</h2> - -<p>Digamos que estás desarrollando el próximo gran sitio web para compartir fotos,y deseas usar HTML5 para mostrar vistas previas en miniaturas de las imágenes antes de que el usuario realmente suba los archivos. Simplemente basta con establecer el elemento de entrada o de soltar como se indicó anteriormente, y llamar una función, como la función <code>handleFiles()</code> de abajo.</p> - -<pre class="deki-transform">function handleFiles(files) { - for (var i = 0; i < files.length; i++) { - var file = files[i]; - var imageType = /image.*/; - - if (!file.type.match(imageType)) { - continue; - } - - var img = document.createElement("img"); - img.classList.add("obj"); - img.file = file; - preview.appendChild(img); - - var reader = new FileReader(); - reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); - reader.readAsDataURL(file); - } -} -</pre> - -<p>Aquí nuestro bucle maneja los archivos seleccionados por el usuario buscando en cada tipo de atributo del archivo para ver si es un archivo imagen (Buscando coincidencias con la cadena de expresión regular "image.*"). Por cada archivo de tipo imagen, creamos un nuevo elemento img. El CSS puede ser usado para crear bordes, sombras y/o especificar el tamaño de la imagen, por lo cual no es necesario hacerlo aquí.</p> - -<p>Cada imagen tiene añadida la clase CSS "obj", para que sean fáciles de encontrar en el árbol DOM. También vamos a añadir un archivo atributo a cada imagen especificando el archivo de la imagen, o que nos permitirá buscar las imágenes para en realidad subirlas mas tarde. Por último se utilizamos {{ domxref("Node.appendChild()") }} para agregar la nueva miniatura para el área de previsualización de nuestro documento.</p> - -<p>A continuación, se establece <a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a> para manejar de forma asincrónica la carga de la imagen y lo conecta con el elemento img.Después se crea el nuevo objeto <code>FileReader</code>, hemos creado la función <code>load</code>, a continuación llamamos <code>readAsDataURL()</code> para empezar la operación de lectura de fondo. cuando todo el contenido del archivo de imagen se carga, se convierten en una <code>data:</code> URL, cada uno se pasa por <code>onload</code> callback. Nuestra implementación de esta rutina se limita a establecer el atributo src del elemento img de la imagen cargada, lo que resulta en la imagen que aparece en la miniatura en la pantalla del usuario.</p> - -<p>{{ h1_gecko_minversion("Ejemplo: Usar URL objeto para mostrar imágenes", "2.0") }}</p> - -<p>En este ejemplo se utiliza el objeto URL para mostrar miniaturas de las imágenes. Además, se muestra la información de otro archivo con su nonbre y tamaño. Tu puedes <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">ver el ejemplo vivo </a>(nota se requiere <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">versión nocturna (nightly build</a>) de Firefox del 22 de noviembre o posterior, o Firefox 4.0 beta 8).</p> - -<div class="note"><strong>Nota:</strong> Esta API existía en versiones beta de Firefox 4, pero cambio el 22 de noviembre, ¡así que asegúrate que estas en una versión actual!</div> - -<p>Escuchar<br> - traducción del inglés al español<br> - El código HTML que presenta la interfaz se parece a esto:</p> - -<pre class="deki-transform"><input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> -<a href="#" id="fileSelect">Select some files</a> -<div id="fileList"> - <p>¡No se han seleccionado archivos!</p> -</div> -</pre> - -<p>Este establece nuestro archivo {{ HTMLElement("input") }} elemento, así como un enlace que invoca el selector de archivos , ya que mantener la entrada de archivo oculto para para evitar que lo menos atractivo de la interfaz sea mostrado. Esto se explica más arriba en la sección {{ anch("Using hidden file input elements using the click() method") }}, como es el método <code>doClick()</code> que invoca el selector de archivos.</p> - -<p>El método siguiente <code>handleFiles()</code>:</p> - -<pre class="deki-transform">var fileSelect = document.getElementById("fileSelect"), - fileElem = document.getElementById("fileElem"), - fileList = document.getElementById("fileList"); - -fileSelect.addEventListener("click", function (e) { - if (fileElem) { - fileElem.click(); - } - e.preventDefault(); // evitar la navegación a "#" -}, false); - -function handleFiles(files) { - if (!files.length) { - fileList.innerHTML = "<p>¡No se han seleccionado archivos!</p>"; - } - else { - var list = document.createElement("ul"); - for (var i = 0; i < files.length; i++) { - var li = document.createElement("li"); - list.appendChild(li); - - var img = document.createElement("img"); - img.src = window.URL.createObjectURL(files[i]);; - img.height = 60; - img.onload = function () { - window.URL.revokeObjectURL(this.src); - } - li.appendChild(img); - - var info = document.createElement("span"); - info.innerHTML = files[i].name + ": " + files[i].size + " bytes"; - li.appendChild(info); - } - fileList.appendChild(list); - } -} -</pre> - -<p>Esto comienza por ir a buscar el {{ HTMLElement("div") }} con el ID "fileList". Este es el bloque en el que vamos a insertar la lista de archivos, incluyendo vistas en miniaturas.</p> - -<p>Si el objeto {{ domxref("FileList") }} <code>handleFiles()</code> es <code>null</code>, se establece dentro del código HTML interno del bloque para que no aparezca "¡No se han seleccionado archivos!". De lo contrario, empezamos a contruir nuestra lista de archivos, de la siguiente manera:</p> - -<p>Una nueva lista desordenada elemento ({{ HTMLElement("ul") }} es creada.</p> - -<ol> - <li>La nueva lista de elementos se inserta en el bloque {{ HTMLElement("div") }} llamando a este método {{ domxref("element.appendChild()") }}.</li> - <li>Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado por <code>files</code>: - <ol> - <li>Crear un nuevo elemento de la lista ({{ HTMLElement("li") }}) y se inserta en la lista.</li> - <li>Crear un nuevo elemento imagen ({{ HTMLElement("img") }}).</li> - <li>Ajuste de la imagen de origen a un nuevo objeto URL representando el archivo, usando {{ domxref("window.URL.createObjectURL()") }} para crear la blob URL.</li> - <li>Ajuste la altura de la imagen a 60 píxeles.</li> - <li>Establecer el manejador de el evento de carga de imagen para liberar el objeto URL, Set up the image's load event handler to release the object URL, puesto que ya no se necesita una vez que la imagen se ha cargado. esto se hace llamando a el método {{ domxref("window.URL.revokeObjectURL()") }} , pasando en el objeto URL la cadena como lo especifica <code>img.src</code>.</li> - <li>Anexar el nuevo elemento lista a la lista.</li> - </ol> - </li> -</ol> - -<h2 id="Ejemplo_Cargando_archivos_seleccionado_por_el_usuario_(user-selected_file)">Ejemplo: Cargando archivos seleccionado por el usuario (user-selected file)</h2> - -<p>Otra cosa que tu podrías querer hacer es permitir al usuario cargar un archivo o archivos seleccionados (por ejemplo, las imagenes seleccionadas con el ejemplo previo) a un servidor. Esto puede hacerse asincrónicamente muy facil.</p> - -<h3 id="Creando_las_tareas_de_carga">Creando las tareas de carga</h3> - -<p>Continuando con el código que genera las imágenes en miniatura en el ejemplo anterior, recordemos que cada imagen en la clase CSS "obj", con el correspondiente <a href="/en/DOM/File" title="en/DOM/File"><code>File</code></a> adjunto en el atributo de el archivo. Esto nos permite fácilmente seleccionar todas las imagenes que el usuario ha escogido para ser cargadas con {{ domxref("Document.querySelectorAll()") }}, así:</p> - -<pre class="deki-transform">function sendFiles() { - var imgs = document.querySelectorAll(".obj"); - - for (var i = 0; i < imgs.length; i++) { - new FileUpload(imgs[i], imgs[i].file); - } -} -</pre> - -<p>En la linea 2 se crea una matriz, llamada <code>imgs</code>, de todos los elemtos in el documento con la clase CSS "obj". en nuestro caso, estas serán todas las miniaturas de las imágenes.Una vez que obtenemos esa lista, es trivial pasar por la lista, creando una nueva instancia <code>FileUpload</code> para cada uno. Cada uno de estos manejadores de carga el archivo correspondiente.</p> - -<h3 id="Manejadores_de_procesos_de_carga_de_un_archivo">Manejadores de procesos de carga de un archivo</h3> - -<p>La función <code>FileUpload</code> acepta dos entradas: un elemento imagen y un archivo desde donde se leerán los datos de la imagen</p> - -<pre class="deki-transform">function FileUpload(img, file) { - this.ctrl = createThrobber(img); - var xhr = new XMLHttpRequest(); - this.xhr = xhr; - - var self = this; - this.xhr.upload.addEventListener("progress", function(e) { - if (e.lengthComputable) { - var percentage = Math.round((e.loaded * 100) / e.total); - self.ctrl.update(percentage); - } - }, false); - - xhr.upload.addEventListener("load", function(e){ - self.ctrl.update(100); - var canvas = self.ctrl.ctx.canvas; - canvas.parentNode.removeChild(canvas); - }, false); - - xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); - xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); - xhr.sendAsBinary(file.getAsBinary()); -} -</pre> - -<p>La función <code>FileUpload()</code> muestra arriba crear un throbber, cada uno es usado para mostrar la información de progreso, a continuación se crea un <a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a> para manejar la carga de los datos.</p> - -<p>Antes de transferir los datos actualmente, varios pasos preparatorios se tienen:</p> - -<ol> - <li>El <code>XMLHttpRequest</code>'s upload "progress" listener esta configurado para actualizar la información Throbber con nuevo porcentaje, de modo que a medida que avanza la carga, el Throbber sera actualizado basado en la ultima información.</li> - <li>El <code>XMLHttpRequest</code>'s upload "load" manejador de evento esta configurado para actualizar como un 100% como la información de progreso (para garantizar que el indicador de progreso realmente alcanza el 100%, en caso de peculiaridades y granulidades durante el proceso). A continuación se elimina el thobber, puesto que este no es necesario. Esto hace que el Thobber desaparezca una vez que la carga esta completa.</li> - <li>La solicitud de carga de imagen se abre llamando el método <code>XMLHttpRequest</code>'s <code>open()</code> para empezar a generar la POST solicitud.</li> - <li>El tipo MIME para la carga esta configurada para llamar la función<code> XMLHttpRequest</code> function <code>overrideMimeType()</code>. En este caso, estamos usando un tipo MIME genérico; puede o no ser necesario para configurar el tipo MIME para todo, dependiendo de su caso de uso.</li> - <li>Finalmente la función <code>XMLHttpRequest</code> <code>sendAsBinary()</code> es llamada para cargar el contenido de el archivo. <em>Esto necesita ser revisado; en la actualidad esta obsoleto la rutina para extraer datos desde archivos getAsBinary() síncrona.</em></li> -</ol> - -<h3 id="Manejando_el_proceso_de_carga_para_un_archivo_asíncronicamente">Manejando el proceso de carga para un archivo, asíncronicamente</h3> - -<pre class="deki-transform">function fileUpload(file) { - // Please report improvements to: marco.buratto at tiscali.it - - var fileName = file.name, - fileSize = file.size, - fileData = file.getAsBinary(), // works on TEXT data ONLY. - boundary = "xxxxxxxxx", - uri = "serverLogic.php", - xhr = new XMLHttpRequest(); - - xhr.open("POST", uri, true); - xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request. - xhr.setRequestHeader("Content-Length", fileSize); - - xhr.onreadystatechange = function() { - if (xhr.readyState == 4) { - if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) { - - if (xhr.responseText != "") { - alert(xhr.responseText); // display response. - } - } - } - } - - var body = "--" + boundary + "\r\n"; - body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n"; - body += "Content-Type: application/octet-stream\r\n\r\n"; - body += fileData + "\r\n"; - body += "--" + boundary + "--"; - - xhr.send(body); - return true; -} -</pre> - -<p><em>Esto también necesita ser modificado para trabajar con datos binarios.</em></p> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li><code><a href="/en/DOM/File" title="en/DOM/File">File</a></code></li> - <li><code><a href="/en/DOM/FileList" title="en/DOM/FileList">FileList</a></code></li> - <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> - <li><a href="/En/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a></li> -</ul> diff --git a/files/es/orphaned/usar_código_de_mozilla_en_otros_proyectos/index.html b/files/es/orphaned/usar_código_de_mozilla_en_otros_proyectos/index.html deleted file mode 100644 index f5ac459e31..0000000000 --- a/files/es/orphaned/usar_código_de_mozilla_en_otros_proyectos/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Usando código de Mozilla en otros proyectos -slug: orphaned/Usar_código_de_Mozilla_en_otros_proyectos -tags: - - para_revisar - - páginas_a_traducir -original_slug: Usar_código_de_Mozilla_en_otros_proyectos ---- -<p>Hay varias maneras en las que puede usar código de Mozilla en su propio proyecto.</p> -<ul> <li>Mozilla proporciona un plataforma de desarrollo para aplicaciones de escritorio, llama <a class="internal" href="/en/XUL" title="En/XUL">XUL</a>, sobre la cual usted puede construir aplicaciones.</li> <li>Varios componentes de la plataforma, tales como el motor de JavaScript <a class="internal" href="/en/SpiderMonkey" title="En/SpiderMonkey">SpiderMonkey</a>, pueden ser utilizados en su propio proyecto.</li> <li>Varios componentes de la plataforma, tales como el motor de JavaScript <a class="internal" href="/en/SpiderMonkey" title="En/SpiderMonkey">SpiderMonkey</a>, pueden ser utilizados en su propio proyecto sin el resto de la plataforma.</li> <li>También hay módulos que no son utilizados en Firefox pero están disponibles para el uso de otras aplicaciones; un ejemplo de esto es <a class="internal" href="/en/Rhino" title="En/Rhino">Rhino</a>, el motor JavaScript escrito en Java.</li> <li>Usted puede embeber <a class="internal" href="/en/Gecko" title="En/Gecko">Gecko</a>, el motor de renderizado utilizado por Firefox para procesar paginas web, como un navegador dentro de su propia aplicación.</li> -</ul> -<table class="mainpage-table"> <tbody> <tr> <td> <h2 id="Construyendo_aplicaciones_XUL">Construyendo aplicaciones XUL</h2> <dl> <dt><a class="internal" href="/en/The_Joy_of_XUL" title="En/The Joy of XUL">La alegria XUL</a></dt> <dd>La introducción a XUL; una lectura necesaria para los nuevos desarrolladores.</dd> <dt><a class="internal" href="/en/XUL_Reference" title="En/XUL Reference">XUL Referencia</a></dt> <dd>La referencia completa a XUL.</dd> <dt><a class="internal" href="../../../../en/XULRunner" rel="internal">XULRunner</a></dt> <dd>Un paquete runtime que puede ser utilizado para arrancar aplicaciones XUL y XPCOM con facilidad.</dd> <dt><a class="internal" href="../../../../en/Toolkit_API" rel="internal">Mozilla Toolkit</a></dt> <dd>Información acerca de la API Mozilla Toolkit.</dd> </dl> </td> <td> <h2 id="Usando_componentes_Mozilla">Usando componentes Mozilla</h2> <dl> <dt><a class="internal" href="/en/SpiderMonkey" title="en/SpiderMonkey">SpiderMonkey</a></dt> <dd>SpiderMonkey es el motor JavaScript runtime utilizado por proyectos de Mozilla.</dd> <dt><a class="internal" href="/en/NSPR" title="En/NSPR">NSPR</a></dt> <dd>El Netscape Portable Runtime proporciona una API de plataforma-neutal para nivel de sistema y funciones libc-type.</dd> <dt><a class="internal" href="/en/Necko" title="En/Necko">Necko</a></dt> <dd>La librería de red Mozilla proporciona la funcionalidad multi-plataforma de redes.</dd> </dl> </td> </tr> </tbody> -</table> -<h2 id="Embeber_Mozilla">Embeber Mozilla</h2> -<p>Para información sobre embeber un buscador web en su propio proyecto vea <a class="internal" href="/en/Embedding_Mozilla" title="En/Embedding Mozilla">Embeber Mozilla</a>.</p> -<p>{{ languages( { "ja": "ja/Using_Mozilla_code_in_other_projects", "zh-cn": "cn/Using_Mozilla_code_in_other_projects"} ) }}</p> diff --git a/files/es/orphaned/usar_web_workers/index.html b/files/es/orphaned/usar_web_workers/index.html deleted file mode 100644 index 5d3b471e08..0000000000 --- a/files/es/orphaned/usar_web_workers/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: Usar web workers -slug: orphaned/Usar_web_workers -tags: - - Firefox 3.5 - - Gecko 1.9.1 - - HTML5 - - JavaScript - - Workers - - para_revisar -original_slug: Usar_web_workers ---- -<p>{{ gecko_minversion_header ("1.9.2") }}</p> -<p>Workers constituye un medio sencillo para que el contenido web ejecute secuencias de comandos en subprocesos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea de generación mediante la publicación de mensajes en un controlador de eventos especificado por el creador.</p> -<p>El subproceso del worker puede realizar tareas sin interferir con la interfaz de usuario. Además, pueden realizar E / S utilizando <code><a class="internal" href="/en/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code> (aunque los atributos <code>responseXML</code> y <code>channel</code> siempre son nulos).</p> -<div class="note"> - <strong>Nota:</strong> como de costumbre, los subprocesos en segundo plano, incluyendo los workers, no pueden manipular el DOM. Si las acciones adoptadas por el subproceso en segundo plano tienen que dar lugar a cambios en el DOM, deben enviar mensajes a sus creadores para hacer ese trabajo.</div> -<p>Consulta el documento de referencia <a class="internal" href="/En/DOM/Worker" title="En/DOM/Worker">Worker</a> , al que este artículo complementa ofreciendo ejemplos y añadiendo detalles. Para obtener una lista de funciones disponibles para workers, consulta <a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Funciones disponibles para workers</a> .</p> -<h2 id="Acerca_de_la_seguridad_en_los_subprocesos">Acerca de la seguridad en los subprocesos</h2> -<p>La interfaz <code>Worker</code> genera subprocesos a nivel del sistema operativo y la simultaneidad puede producir efectos interesantes en el código si no tienes cuidado. Sin embargo, en el caso de web workers, los puntos de comunicación controlados cuidadosamente con otros subprocesos supone que en realidad sea muy difícil causar problemas de simultaneidad. No hay acceso a componentes sin subprocesos seguros o al DOM y tienes que pasar datos específicos dentro y fuera de un subproceso a través de objetos serializados. Así que te tienes que esforzar mucho para causar problemas en el código.</p> -<h2 id="Generar_un_worker">Generar un worker</h2> -<p>Crear un nuevo worker es simple. Lo único que tienes que hacer es llamar al constructor <code>Worker()</code>, especificando el URI de un script para ejecutar en el subproceso del worker y, si deseas poder recibir las notificaciones del worker, establece la propiedad <code>onmessage</code> del worker a una función de manejador de evento adecuada.</p> -<pre class="brush: js">var myWorker = new Worker('my_worker.js'); -myWorker.onmessage = function(event) { - print("Llamado de nuevo por el worker\n"); -};</pre> -<p>De forma alternativa, podemos usar <code>addEventListener()</code>:</p> -<pre class="brush: js">var worker = new Worker('my_worker.js'); -worker.addEventListener('message', function(event) { - console.log("Called back by the worker!\n"); -}, false); - -worker.postMessage(""); // Iniciar el worker. -</pre> -<p>La línea 1 de este ejemplo crea e inicia el subproceso del worker. La línea 2 establece el controlador <code>onmessage</code> para el worker a una función que se llama cuando éste pide su propia función <code>postMessage()</code>.</p> -<div class="note"> - <strong>Nota</strong>: La URI pasada como parámetro del constructor del <code>Worker</code> debe obedecer la política del <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">mismo origen o same-origin policy</a>. Actualmente hay un desacuerdo en los diferentes desarrolladores de navegadores acerca de si las URIs han de ser del mismo origen o no; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores permiten cualquier URI como script válido para workers, otros navegadores pueden no permitirlo.</div> -<h2 id="Generar_subworkers">Generar subworkers</h2> -<p>Los workers pueden generar más workers si así lo desean. Los llamados subworkers deben estar alojados en el mismo origen que la página principal. Además, los URI para los subworkers se resuelven en relación a la ubicación del worker principal y no en relación a la de la página propietaria. Esto hace que sea más fácil que los workers realicen un seguimiento de dónde están sus dependencias.</p> -<h2 id="Tiempos_de_espera_e_intervalos">Tiempos de espera e intervalos</h2> -<p>Los workers pueden utilizar los tiempos de espera y los intervalos al igual que el proceso principal. Esto puede ser útil, por ejemplo, si quieres hacer que tu subproceso del worker ejecute código de manera periódica en lugar de ininterrumpidamente.</p> -<p>Consulta <a class="internal" href="/en/DOM/window.setTimeout" title="En/DOM/Window.setTimeout"><code>setTimeout()</code></a>, <a class="internal" href="/en/DOM/window.clearTimeout" title="En/DOM/Window.clearTimeout"><code>clearTimeout()</code></a>, <a class="internal" href="/en/DOM/window.setInterval" title="En/DOM/Window.setInterval"><code>setInterval()</code></a> y <a class="internal" href="/en/DOM/window.clearInterval" title="En/DOM/Window.clearInterval"><code>clearInterval()</code></a> si deseas tener más detalles.</p> -<h2 id="Terminar_un_worker">Terminar un worker</h2> -<p>Si tienes que cancelar inmediatamente un worker que se está ejecutando, puedes hacerlo llamando al método <code>terminate()</code> del worker:</p> -<pre class="brush: js">myWorker.terminate(); -</pre> -<p>El subproceso del worker se interrumpe inmediatamente y sin tener la posibilidad de terminar sus operaciones o limpiar por sí mismo.</p> -<p>Los workers pueden cerrarse llamando a su propio método {{ ifmethod("nsIWorkerScope", "close") }}.</p> -<h2 id="Gestión_de_errores">Gestión de errores</h2> -<p>Cuando se produce un error de ejecución en el worker, es llamado su controlador de enventos <code>onerror</code>. Recibe un evento denominado <code>error</code> que implementa la interfaz <code>ErrorEvent</code>. El evento no se lanza y se puede cancelar, para evitar que la acción predeterminada tenga lugar, el worker puede llamar al método <a class="internal" href="../../../../en/DOM/event.preventDefault" rel="internal"><code>preventDefault()</code></a> del evento de error.</p> -<p>El evento de error tiene los siguientes tres campos que son de interés:</p> -<dl> - <dt> - <code>message</code></dt> - <dd> - Un mensaje de error legible para el ojo humano.</dd> - <dt> - <code>filename</code></dt> - <dd> - El nombre del archivo de script en el que se produjo el error.</dd> - <dt> - <code>lineno</code></dt> - <dd> - El número de línea del archivo de script en el que se produjo el error.</dd> -</dl> -<h2 id="Acceder_al_objeto_navegador">Acceder al objeto navegador</h2> -<p>Los workers pueden acceder al objeto <code>navigator</code>, que está disponible dentro de su ámbito. Contiene las siguientes cadenas de texto que pueden usarse para identificar el navegador, tal y como se puede hacer a partir de secuencias de comandos normales:</p> -<ul> - <li><code>appName</code></li> - <li><code>appVersion</code></li> - <li><code>platform</code></li> - <li><code>userAgent</code></li> -</ul> -<h2 id="Importar_de_secuencias_de_comandos_y_bibliotecas">Importar de secuencias de comandos y bibliotecas</h2> -<p>Los subprocesos de trabajo tienen acceso a una función global, importScripts (), que les permite importar secuencias de comandos de comandos o bibliotecas dentro de su ámbito. Acepta como parámetros cero o más URI de recursos para la importación, todos los ejemplos siguientes son válidos:</p> -<pre class="brush: js">importScripts(); /* no importa nada */ -importScripts('foo.js'); /* importa solo "foo.js" */ -importScripts('foo.js', 'bar.js'); /* importa dos scripts */ -</pre> -<p>Firefox carga cada secuencia de comandos de la lista, luego los ejecuta para permitirles que se inicialicen ellos mismos. Los objetos globales de cada secuencia de comandos pueden entonces ser utilizados por el worker.</p> -<div class="note"> - <strong>Nota:</strong> los scripts pueden ser descargados en cualquier orden, pero no se ejecutarán en el orden en que pasas los nombres de archivo a <code>importScripts()</code> . Esto se realiza de forma sincrónica; <code>importScripts()</code> no retorna hasta que todas las secuencias de comandos se han cargado y ejecutado.</div> -<p> </p> -<h2 id="Ejemplos">Ejemplos</h2> -<p>Esta sección incluye varios ejemplos de cómo utilizar los DOM workers.</p> -<h3 id="Realizar_cálculos_en_segundo_plano">Realizar cálculos en segundo plano</h3> -<p>Una utilidad de los workers es permitir que tu código realice cálculos intensivos en el procesador sin bloquear el subproceso de interfaz de usuario. En este ejemplo, un worker se utiliza para calcular los números de Fibonacci.</p> -<h4 id="El_código_JavaScript">El código JavaScript</h4> -<pre class="brush: js">var results = []; - -function resultReceiver(event) { - results.push(parseInt(event.data)); - if (results.length == 2) { - postMessage(results[0] + results[1]); - } -} - -function errorReceiver(event) { - throw event.data; -} - -onmessage = function(event) { - var n = parseInt(event.data); - - if (n == 0 || n == 1) { - postMessage(n); - return; - } - - for (var i = 1; i <= 2; i++) { - var worker = new Worker("fibonacci.js"); - worker.onmessage = resultReceiver; - worker.onerror = errorReceiver; - worker.postMessage(n - i); - } - };</pre> -<p>La función <code>onmessage</code> es llamada cuando el código HTML llamada al <code>postMessage()</code> en el worker. Esto inicia la recursividad, generando copias nuevas de sí mismo para controlar cada iteración del cálculo.</p> -<h4 id="El_código_HTML">El código HTML</h4> -<pre class="brush: html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> -<html> - <title>Test threads fibonacci</title> - <body> - - <div id="result"></div> - - <script language="javascript"> - - var worker = new Worker("fibonacci.js"); - - worker.onmessage = function(event) { - document.getElementById("result").textContent = event.data; - dump("Got: " + event.data + "\n"); - }; - - worker.onerror = function(error) { - dump("Worker error: " + error.message + "\n"); - throw error; - }; - - worker.postMessage("5"); - - </script> - </body> -</html> -</pre> -<p>La página web crea un elemento <code>div</code> con el id. de cliente <code>result</code> , que se utiliza para mostrar el resultado, a continuación, genera el worker. Tras generar el worker, el manejador<code>onmessage</code> está configurado para mostrar los resultados mediante el ajuste de los contenidos del elemento <code>div</code>, y el manejador <code>onerror</code> se establece para <a href="/en/Debugging_JavaScript#dump()" title="en/Debugging JavaScript#dump()">volcar</a> el mensaje de error.</p> -<p>Por último, se envía un mensaje al worker para iniciarlo.</p> -<p><a href="/samples/workers/fibonacci" title="samples/workers/fibonacci">Prueba este ejemplo</a> .</p> -<h3 id="Realizar_E_S_de_web_en_segundo_plano">Realizar E / S de web en segundo plano</h3> -<p>Puedes encontrar un ejemplo de esto en el artículo <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Usar workers en las extensiones</a> .</p> -<h3 id="Dividir_tareas_entre_varios_workers">Dividir tareas entre varios workers</h3> -<p>A medida que los equipos con varios núcleos se hacen cada vez más frecuentes, resulta útil dividir las tareas complejas, desde el punto de vista computacional, entre varios workers, que a su vez pueden llevar a cabo esas tareas en núcleos de procesador múltiple.</p> -<p>el ejemplo se incluirá muy pronto</p> -<h3 id="Crear_workers_desde_dentro_de_los_workers">Crear workers desde dentro de los workers</h3> -<p>El ejemplo de Fibonacci mostrado anteriormente demuestra que los workers pueden, de hecho, generar más workers. Esto facilita crear rutinas repetitivas.</p> -<h3 id="Enviar_objetos_a_los_workers">Enviar objetos a los workers</h3> -<p>Puede pasar con seguridad los objetos dentro y fuera de los workers que utilizan el método <code>postMessage()</code>, los objetos se convierten automáticamente en <a class="internal" href="/en/JSON" title="En/JSON">JSON</a> de manera interna.</p> -<pre class="brush: js">var onmessage = function(e) { - postMessage(e.data); -};</pre> -<div class="note"> - <strong>Nota: los</strong> objetos que se introducen o se extraer de los workers no deben contener funciones o referencias cíclicas, ya que JSON no es compatible con ellas.</div> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Workers dedicados</td> - <td>3</td> - <td>3.5 (1.9.1)</td> - <td>10</td> - <td>10.60</td> - <td>4</td> - </tr> - <tr> - <td>Workers compartidos</td> - <td>5</td> - <td>---</td> - <td>---</td> - <td>10.60</td> - <td>5</td> - </tr> - <tr> - <td>Pasar datos usando <a href="/en/DOM/The_structured_clone_algorithm" title="El algoritmo de clonación estructurada">clonación estructurada</a>. </td> - <td>13</td> - <td>8</td> - <td>10</td> - <td>11.50</td> - <td>5.1</td> - </tr> - <tr> - <td>Pasar datos usando <a class="external" href="http://dev.w3.org/html5/spec/common-dom-interfaces.html#transferable-objects" title="http://dev.w3.org/html5/spec/common-dom-interfaces.html#transferable-objects">objetos transferibles</a></td> - <td>17 {{ property_prefix("webkit") }}</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Workers dedicados</td> - <td>---</td> - <td>0.16</td> - <td>---</td> - <td>---</td> - <td>11</td> - <td>5</td> - </tr> - <tr> - <td>Workers compartidos</td> - <td>---</td> - <td>{{ CompatNo() }}</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - <tr> - <td>Pasar datos usando <a href="/en/DOM/The_structured_clone_algorithm" title="El algoritmo de clonación estructurada">clonación estructurada</a>. </td> - <td>---</td> - <td>0.16</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - </tbody> - </table> -</div> -<h2 id="Consulta_también">Consulta también</h2> -<ul> - <li>{{ spec("http://dev.w3.org/html5/workers/", "Especificación API de ficheros: Web Workers", "ED") }}</li> - <li><a class="internal" href="/En/DOM/Worker" title="En/DOM/Worker">Worker</a> interface</li> - <li><a class="internal" href="/En/DOM/SharedWorker" title="En/DOM/SharedWorker">SharedWorker</a> interface</li> - <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Funciones disponibles para workers</a></li> - <li><a class="external" href="http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers" title="http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-subworkers">HTML5Rocks - Lo básico sobre Web Workers</a></li> -</ul> -<p>{{ HTML5ArticleTOC() }}</p> -<p>{{ languages ( {"en": "En/Using_web_workers"} ) }}</p> diff --git a/files/es/orphaned/usar_xpinstall_para_instalar_plugins/index.html b/files/es/orphaned/usar_xpinstall_para_instalar_plugins/index.html deleted file mode 100644 index 13e2dd9678..0000000000 --- a/files/es/orphaned/usar_xpinstall_para_instalar_plugins/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Usar XPInstall para instalar plugins -slug: orphaned/Usar_XPInstall_para_instalar_plugins -tags: - - Plugins - - Todas_las_Categorías - - XPInstall -original_slug: Usar_XPInstall_para_instalar_plugins ---- -<p> -</p><p><a href="es/XPInstall">XPInstall</a> es una tecnología de instalación basada en JavaScript que funciona en todas las plataformas en las que pueden instalarse los navegadores de <a class="external" href="http://mozilla.org">Mozilla</a> y los de Netscape basados en Mozilla. Puede ser un modo para asegurarle al usuario una plácida experiencia a la hora de obtener plugins, sin obligarlo a abandonar el entorno de navegación para ejecutar un instalador binario (el típico setup.exe en Windows) ni forzarlo a reiniciar su navegador. Los fabricantes de plugins que ya hayan escrito un instalador en código nativo (p.e., EXE) pueden incluir dicho instalador y ejecutarlo para que el usuario no tenga que abandonar el entorno del navegador y hacer clic en el EXE para ejecutarlo. Este artículo muestra una guía de estilo para mejorar la experiencia en la instalación de un plugin para los navegadores de Netscape Gecko utilizando <a href="es/XPInstall_API_Reference">XPInstall</a>. -</p> -<h3 id="Definici.C3.B3n_de_t.C3.A9rminos"> Definición de términos </h3> -<p>XPInstall es una tecnología de instalación. El propio nombre significa "Cross Platform Install" (instalador multiplataforma) y de ahí lo de "XP" (abreviatura en inglés de "multiplataforma"). Un paquete XPInstall es generalmente llamado un paquete XPI para abreviar (y pronunciado generalmente "zippy" en inglés). Este artículo explica cómo se puede usar XPInstall para instalar plugin en los navegadores que soporten XPInstall. -</p><p>Un paquete XPI es de hecho un fichero ZIP con la extensión XPI (p.e., myPluginInstaller.xip) y puede ser creado en Windows con utilidades tipo WinZip. Los paquetes XPI, como los ficheros ZIP, <i>contienen</i> otros ficheros, normalmente: -</p> -<ul><li> El componente software que va a ser instalado. En nuestro caso es el software del plugin. -</li><li> Un fichero JavaScript llamado install.js, el cual contiene la lógica que conduce la instalación. Esto incluye instrucciones que indican dónde se va a instalar el software y mensajes para informar al usuario. -</li></ul> -<p>Un fichero XPInstall se puede crear empaquetando primero los elementos que se quieran instalar con WinZip (es decir, crear un fichero ZIP) y renombrarlo con la extensión XPI en lugar de ZIP. -</p><p>A diferencia de los instaladores compilados para código nativo (p.e., los típicos ficheros setup.exe), el lenguaje de programación para las operaciones de instalación en XPI es JavaScript. Como el formato de fichero que contiene al software y al fichero JavaScript install.js es multiplataforma (Zip) y ya que los navegadores de Mozilla para todas las plataformas reconocen JavaScript, generalmente un único paquete XPI sirve para todas las plataformas. Así es, de hecho, <a class="external" href="http://www.mozilla.org/docs/xul/xulnotes/xulnote_packages.html">cómo las pieles y los temas son instalados en los navegadores de Mozilla</a>, cambiando su aspecto y apariencia. Este artículo se centra en cómo instalar plugins. -</p> -<h3 id=".C2.BFQu.C3.A9_navegadores_soportan_XPInstall.3F"> ¿Qué navegadores soportan XPInstall? </h3> -<p>Actualmente, todos los <a class="external" href="http://mozilla.org/releases/stable.html">navegadores de Mozilla liberados por mozilla.org</a> y la familia de navegadores basados en el código de Mozilla soportan XPInstall. Concretamente, están incluidos: -</p> -<ul><li> Los navegadores recientes de Netscape tales como Netscape 6.2.x y Netscape 7.0, ambos basados en Netscape Gecko que es el núcleo del navegador Mozilla. -</li></ul> -<ul><li> Las versiones recientes <b>sólo beta</b> del software de AOL basado en Netscape Gecko, el motor de renderizado del proyecto Mozilla. -</li></ul> -<p><b>Advertencias:</b> -</p> -<ul><li> El <a class="external" href="http://www.compuserve.com/">navegador CompuServe</a> de AOL Time Warner, basado también en Netscape Gecko, no soporta XPInstall. -</li></ul> -<ul><li> Netscape Communicator 4.x no soporta XPInstall. -</li></ul> -<h3 id=".C2.BFEn_qu.C3.A9_consiste_un_plugin.3F"> ¿En qué consiste un plugin? </h3> -<p>Los plugins pueden estar compuestos de los siguientes tipos de fichero, pudiendo ser todos ellos instalados desde un paquete XPI: -</p> -<ul><li> <b>Bibliotecas compartidas</b> (p.e., en Windows, son DLLs, en Unix son los ficheros *.so). Dichos ficheros están compilados en código nativo con la <a href="es/Gecko_Plugin_API_Reference">API para plugins de Netscape</a>. -</li></ul> -<ul><li> Si el plugin es scriptable, entonces también consistirá en un <a href="es/Gecko_Plugin_API_Reference/Plug-in_Development_Overview">fichero XPT</a>. Un ejemplo podría ser Flash 6r47 en Windows, el cual está compuesto por una DLL (llamada npswf32.dll) y un fichero XPT para la programación (llamado flashplayer.xpt). Si estás desarrollando un plugin y quieres <a href="es/Gecko_Plugin_API_Reference/Plug-in_Development_Overview">hacerlo scriptable</a>, mírate las partes importantes de la <a href="es/Gecko_Plugin_API_Reference">API para plugins</a>. -</li></ul> -<ul><li> <b>Software adicional</b>. Muchos plugins son parte de software adicional para tipos multimedia. Por ejemplo, RealPlayer para Windows consta de un plugin DLL pero también de la aplicación RealPlayer (EXE), de la que el plugin DLL es subconjunto. En este caso, el plugin es parte del paquete de software específico del navegador como mecanismo para darle a la aplicación <i>ganchos</i> adicionales en el navegador. -</li></ul> -<p>XPInstall puede ser utilizado para instalar cualquier combinación de estos ficheros en el ordenador del usuario final. Para aquellos que les suene la tecnología SmartUpdate de Netscape Communicator 4.x, esto les resultará familiar. -</p> -<h3 id="Breve_historia_de_las_tecnolog.C3.ADas_de_instalaci.C3.B3n_de_Netscape"> Breve historia de las tecnologías de instalación de Netscape </h3> -<p>Esta sección es importante si estás familiarizado con la tecnología de instalación SmartUpdate de Netscape Communicator 4.x. El uso de JavaScript como lógica de instalación no tiene precedentes en los navegadores de Netscape. Netscape Communicator 4.x utilizaba la noción de SmartUpdate para instalar el software, concretamente los plugins y los applets de Java para que fuesen ejecutados localmente. SmartUpdate <i><b>no está soportado</b></i> por los navegadores de Mozilla (ni los navegadores de Netscape/AOL basados en Mozilla tales como Netscape 7) pero debido a la similitud entre ambas tecnologías de instalación, es fácil convertir los ficheros SmartUpdate a ficheros XPInstall. SmartUpdate utiliza un fichero JAR firmado digitalmente que contiene los componentes de software a instalar además del fichero JavaScript install.js (el llamado script de instalación) como lógica del instalador. Las descargas y los instaladores deberían empezar mostrando un cuadro de diálogo de seguridad que aclarase la autoridad certificadora y el firmante. Frecuentemente, la descarga SmartUpdate era disparada a través del atributo <code>pluginurl</code> de la etiqueta <code><embed></code>. -</p> -<pre><embed type="application/x-randomtype" src="myfile.typ" width="50" height="50" -pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed> -</pre> -<p>En el ejemplo anterior, el atributo <code>pluginurl</code> referencia a un fichero firmado JAR, el cual sería descargado por Netscape Communicator 4.x (dependiendo de la elección en el cuadro de diálogo de seguridad) <b>si</b> el plugin no estuviera instalado en la máquina del usuario. SmartUpdate difiere de XPInstall en esto: -</p> -<ul><li> XPInstall utiliza ficheros ZIP renombrados a XPI (*.xpi) y SmartUpdate utiliza ficheros JAR (*.jar) -</li><li> A diferencia de los ficheros JAR de SmartUpdate, los paquetes XPI no tienen que estar firmados digitalmente con un certificado digital. -</li><li> Los paquetes XPI hacen uso de <a href="es/XPInstall_API_Reference">diferentes APIs</a> dentro de install.js, aunque el concepto es el mismo. -</li></ul> -<p>XPInstall para los navegadores basados en Mozilla es análogo a SmartUpdate en el navegador Netscape Communicator 4.x. Portar SmartUpdate a XPInstall es trivial tras haberse familiarizado con la <a href="es/XPInstall_API_Reference">nueva API de XPInstall</a>. -</p> -<h3 id="Proceso_de_instalaci.C3.B3n_recomendado"> Proceso de instalación recomendado </h3> -<p>XPInstall suministra una API unificada para llevar a cabo una rápida instalación y configuración del software del plugin para los usuarios finales. Los beneficios de usar XPInstall son porporcionar un mecanismo de instalación para descargas en flujo. Esta sección explica lo que tendría que hacer un paquete XPInstall ideal, además de descubrir algunas de las llamadas API de JavaScript que llevan a cabo estas tareas. Un paquete XPI ideal debería: -</p> -<ol><li> Instalarse en el navegador actual que ha llamado a la instalación XPInstall vía HTML o que la ha ejecutado a través de un script. Usaremos el término "navegador actual" para referirnos al navegador que inicia la descarga del XPInstall visitando un sitio que requiere un plugin que el navegador actual no encuentra localmente. Este paso implica el uso de la llamada a la API <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> para inicializarlo todo y además la llamada <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a> que ayuda a encontrar el directorio de plugins del navegador actual. -</li><li> Instalar el software del plugin en otra ubicación del disco duro del usuario para que otros navegadores basados en Mozilla que el usuario pudiese instalar más tarde encontrasen y pudieran utilizar el plugin (los componentes específicos del navegador). La meta es asegurar que futuros navegadores Netscape Gecko que pudieran ser instalados más adelante puedan beneficiarse de la instalación iniciada por el usuario con el navegador actual. Un ejemplo lo tenemos si el navegador actual fuese Netscape 7 y más adelante el usuario descargase una beta del software de AOL que usase Netscape Gecko. En lugar de descargar de nuevo el plugin con el otro navegador, éste podría detectar que ya se llevó a cabo la instalación. Este mecanismo de descubrimiento necesita que la creación de la localización secundaria quede reflejada en algún repositorio común de metadatos. En Windows es el registro del sistema. De nuevo, este paso implica llamadas a <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a> para localizar un directorio "bien conocido" y usarlo como localización secundaria. -</li><li> En Windows: escribir claves de registro que pudiesen ser analizadas por los navegadores Netscape Gecko (instalados tras el navegador actual) para detectar dónde está instalado el plugin en el ordenador. En particular, las claves de registro deberían referenciar a la localización de instalación secundaria para que los futuros navegadores Netscape Gecko pudiesen encontrar y añadir su lista de ubicaciones de plugins disponibles. El formato exacto de dichas claves y cómo deberían ser escritas es tratado en la sección <a href="#Problemas_con_la_primera_instalaci.C3.B3n">#Problemas con la primera instalación</a>. Para crear y escribir realmente claves en el registro de sistema de Windows se debe usar las funciones del <a href="es/XPInstall_API_Reference/WinReg_Object">objeto WinReg</a>. -</li><li> Asegurar que el plugin recién instalado es actualizado correctamente llamando a la <a href="es/XPInstall_API_Reference/Install_Object/Methods/refreshPlugins">API refreshPlugins</a>. Actualizando el plugin, te estarás asegurando de que el plugin está disponible para uso inmediato, sin obligar al usuario a reiniciar su navegador. Esta es una de las ventajas clave de una experiencia con XPInstall depurada. -</li></ol> -<h3 id="El_problema_de_la_primera_instalaci.C3.B3n"> El problema de la primera instalación </h3> -<p>El problema de la primera instalación hace referencia a los problemas que surgen cuando un plugin es instalado en el ordenador de un usuario antes de instalar un navegador. El proceso de instalación recomendado intenta resolver este problema instalando el plugin en una ubicación secundaria tras instalar el navegador actual. En pocas palabras, el problema de la primera instalación podría resumirse con la pregunta: ¿cómo puede un navegador instalado en el ordenador de un usuario después de que un plugin haya sido instalado previamente con el beneplácito del usuario desde una instalación existente en lugar de haber descargado el mismo plugin de nuevo? Para resolver este incoveniente, se aconseja a los vendedores a: -</p> -<ul><li> Instalar los componentes del software del plugin para el navegador (p.e., DLLs en Windows y ficheros XPT si procede) a una ubicación secundaria además de en el directorio de plugins del navegador actual. -</li><li> Escribir claves en el registro de Windows para que guarden la información de esta ubicación secundaria, en particular la ruta de los plugins y la de los XPT (si procede) para que los navegadores de Netscape Gecko puedan buscar el plugin desde la ubicación secundaria si son instalados después de que lo fuese el plugin (o si un navegador de Netscape Gecko concreto reemplaza al navegador actual). La información que deberían contener las claves es <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">explicada con detalle en la especificación publicada en mozilla.org</a>. Existe además un <a class="external" href="http://www.mozilla.org/projects/plugins/example-scobe.txt">ejemplo de una entrada de registro</a> creada por una compañía imaginaria que ilustra lo que se explica en la <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">especificación para dichas claves de registro</a>. -</li><li> En Windows, las claves del registro mencionadas antes siguen una nomenclatura usando el concepto de <a class="external" href="http://www.mozilla.org/projects/plugins/plugin-identifier.html">identificador de plugin</a> como nombre de clave bajo la subclave MozillaPlugins. El <a class="external" href="http://www.mozilla.org/projects/plugins/plugin-identifier.html">identificador de plugin (o PLID)</a> es un concepto útil que es también aplicable cuando se inicializa la instalación a través de la <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">API initInstall</a>. -</li></ul> -<h3 id="Disecci.C3.B3n_de_las_APIs_utilizadas"> Disección de las APIs utilizadas </h3> -<p>El proceso recomendado de instalación de plugins hace uso de las APIs de XPInstall para instalarlos en el directorio Plugins del navegador actual, en una ubicación secundaria y para <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">escribir una clave en el registro del sistema de Windows que permita recuperar esta última ubicación</a>. Esta sección describe algunas de las APIs de XPInstall que pueden hacer esto y muestra además una plantilla completa de un paquete XPI. No todo el trabajo necesita ser hecho en JavaScript (si tienes un instalador nativo (EXE) que <a class="external" href="http://mozilla.org/projects/plugins/install-scheme.html">reconoce a los navegadores Netscape Gecko</a> y simplemente deseas incluir el instalador ejecutable en un paquete XPI para que el usuario pueda descargarlo, puedes hacerlo fácilmente). Esta sección hace referencia de modo extensivo a la <a href="es/XPInstall_API_Reference">documentación API de XPInstall</a>. -</p> -<h4 id="Inicializar_la_instalaci.C3.B3n_con_el_identificador_del_plugin"> Inicializar la instalación con el identificador del plugin </h4> -<p>Toda instalación XPInstall es inicializada con el <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">método initInstall del objeto Install</a>. Ya que el objeto Install está disponible para el script de instalación no necesita ser mencionado en dicho script (p.e., no hay necesidad de utilizar Install.initInstall. Con invocar simplemente a <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> será suficiente). El método initInstall es polimórfico aunque a continuación se muestra el mecanismo de invocación recomendado: -</p> -<pre>initInstall("My Plugin Software", "@myplugin.com/MyPlugin,version=2.5", "2.5.0.0"); -</pre> -<p>En el trozo de código anterior, el método <a href="es/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> es invocado con tres parámetros: -</p> -<ul><li> Una cadena con el nombre de la aplicación. -</li><li> Una cadena representando el <a class="external" href="http://mozilla.org/projects/plugins/plugin-identifier.html">identificador del plugin</a> asociado con el plugin. En realidad, este valor se guarda en el registro de versión de cliente tras la instalación, un fichero de los navegadores Mozilla que guarda metadatos con el software que acaba de ser instalado. Este valor puede ser consultado con JavaScript a través de una página web y es útil para inicializar descargas XPInstall vía <a href="es/XPInstall_API_Reference/InstallTrigger_Object">scripts disparados</a>. Se puede determinar la versión del software que ha sido instalado y determinar si se tiene que actualizar o no, todo esto utilizando JavaScript en una página web. -</li><li> Una cadena que represnta la versión de cuatro dígitos del software. -</li></ul> -<p><b>Advertencia:</b> Ciertas versiones de los navegadores basados en Mozilla (tales como Netscape 6.x) tratan al carácter igual ("=") como un token ilegal, por lo que no permitirán la invocación de initInstall con cadenas que contengan "=". Un truco podría ser detectar si initInstall ha fallado y, en caso afirmativo, invocarlo de nuevo sin el "=". A continuación se muestra un ejemplo: -</p> -<pre>var PLID = "MyPlugin.plug/version=6.5"; -err = initInstall(SOFTWARE_NAME, PLID, VERSION); - -if (err != 0) -{ - // la instalación debería fallar: se usa N6 y = - // reemplazamos PLID con una cadena simple - err = initInstall(SOFTWARE_NAME, "MyPluginString", VERSION); - if (err != 0) - cancelInstall(err); -} -</pre> -<p>Nótese que en el ejemplo anterior el PLID contiene un "=" y, en caso de que el paquete XPI esté siendo ejecutado en navegadores que tratan a "=" como un token ilegal, el truco capturará el error e invocará de nuevo a initInstall. -</p> -<h3 id="Usar_XPInstall_junto_con_un_instalador_ejecutable_.28c.C3.B3digo_nativo.29"> Usar XPInstall junto con un instalador ejecutable (código nativo) </h3> -<p>Si lo que deseas es ejecutar un instalador nativo (EXE) para instalar el software de un plugin pero prefieres que el instalador sea descargado dentro del proceso del navegador entonces probablemente deberías considerar incluirlo en un paquete XPI. Desde JavaScript, puedes llamar al <a href="es/XPInstall_API_Reference/Install_Object/Methods/execute">método execute del objeto Install</a> del XPInstall para ejecutar el binario. Además puedes llamar al <a href="es/XPInstall_API_Reference/File_Object/Methods/execute">método execute del objeto File</a> si lo que realmente quieres instalar es el fichero que estás ejecutando en lugar de borrarlo. Puedes pasar parámetros de línea de comandos al ejecutable. Un ejemplo de llamada al método execute desde el objeto Install sobre un ejecutable que tiene un período de vida temporal (y no se necesita tras la instalación) es: -</p> -<pre>// Initialize the installation .... - -// initInstall(..... ) has already been called - -// Using the Install Object's execute method to block on a native installer - -execute("setup.exe", "-s", true); - -// En el ejemplo anterior, se supone que se ha ejecutado "setup -s" desde -// la línea de comandos que arranca el instalador y que "-s" es algún -// tipo de parámetro definido por el fichero setup.exe, quizá para forzar -// al instalador a ejecutarse en modo silencioso. Se pasa el "-s" al instalador. -// Pasando 'true' le estamos diciendo al script de instalación que bloquee -// la ejecución del instalador y que lo haga síncronamente. - -// Se debería llamar a performInstall para hacer que suceda... - -err = getLastError(); -if (!err) - performInstall(); -else - cancelInstall(err); -</pre> -<h4 id="Instalar_los_ficheros_del_plugin_en_el_navegador_actual"> Instalar los ficheros del plugin en el navegador actual </h4> -<p>La instalación en el navegador actual es la tarea más importante que debe de hacerse bien para un paquete XPI. A continuación se muestra un trozo de código que lleva a cabo esto: -</p> -<pre>// Name of the files to be installed -var PLUGIN_FILE = "NPMyPlugin.dll"; -var COMPONENT_FILE = "NPMyPluginScriptablePeer.xpt"; - -// invoke initInstall to start the installation - -.... - -var pluginFolder = getFolder("Plugins"); - -// verify disk space is appropriate - -.... - -err = addFile("@myplugin.com/MyPlugin,version=2.5.0.0", - "2.5.0.0", PLUGIN_FILE, pluginsFolder, null); - if (err != 0) - { - //alert("Installation of MyPlugin plug-in failed. Error code "+err); - logComment("adding file "+PLUGIN_FILE+" failed. Errror conde: " + err); - return err; - } - -err = addFile(null, CULT_VERSION, COMPONENT_FILE, componentsFolder, null); - if (err != 0) - { - alert("Installation of MyPlugin component failed. Error code "+err); - logComment("adding file "+COMPONENT_FILE+" failed. Error conde: " + err); - return err; - } -</pre> -<h4 id="Instalaci.C3.B3n_en_una_ubicaci.C3.B3n_secundaria"> Instalación en una ubicación secundaria </h4> -<p>Para solventar el <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">problema de la primera instalación</a> es necesario instalar en una segunda ubicación para asegurar que otros navegadores de Netscape Gecko puedan encontrar el plugin, además del navegador actual. Una buena elección para esta ubicación secundaria podría ser el directorio Windows en ordenadores con Windows. <b>Advertencia:</b> Debido a posibles problemas de permisos se aconseja manejar los errores con sumo cuidado. -</p> -<pre>// Obtenemos el directorio de sistema de Windows, p.e., el directorio C:\WINNT\system32\ - -var winDirectory = getFolder("Win System"); - -// Create the Folder C:\WINNT\system32\MyPlugin - -var dllWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\"); -//Install DLL to C:\Windows Folder - copyErr = addFile("", VERSION, PLUGIN_FILE, dllWin32Folder, null); - if (copyErr != 0) - { - logComment("First Install:"+copyErr); - return copyErr; - } - -// Install the XPT file to C:\WINNT\system32\MyPlugin folder - -var xptWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\"); - copyErr = addFile("", VERSION, COMPONENT_FILE, xptWin32Folder, null); - if (copyErr != 0) - { - logComment("First Install:"+copyErr); - return copyErr; - } -</pre> -<p>Una vez decidida la ubicación secundaria, el <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">registro de windows ha de ser actualizado</a> con la ruta de dicha ubicación para que futuros navegadores puedan recuperarla. Esto es realizado con el objeto <a href="es/XPInstall_API_Reference/WinReg_Object">WinReg</a> proporcionado por XPInstall. Todas las piezas quedan ensambladas en la plantilla mostrada a continuación. -</p> -<h3 id="Plantilla_XPInstall"> Plantilla XPInstall </h3> -<p>Se ha mostrado <a href="es/Using_XPInstall_to_Install_Plugins/Install_script_template">una plantilla para un script de instalación</a> que quizá te gustaría abrir en otra pestaña o ventana. Dicho script de instalación hace lo siguiente: -</p> -<ul><li> Instala tanto el fichero DLL como el XPT en el directorio de plugins del navegador. El propio plugin es imaginario: MyPlugin. Sin embargo, las variables que determinan el nombre del plugin pueden ser modificadas fácilmente. Este fichero install.js supone que el software del plugin que va a ser instalado está compuesto por un fichero DLL y por otro XBT, lo cual no siempre es cierto. Muchos plugins pueden traer más de una DLL o quizá código nativo adicional. No obstante, es una suposición más que segura para la mayoría de los plugins, especialmente para <a class="external" href="http://www.macromedia.com/go/getflashplayerbutton/">el plugin Flash de Macromedia</a> compuesto por una única DLL (en Windows es npswf32.dll) y un único fichero XPT para script (llamado flashplayer.xpt). -</li><li> Adicionalmente, instala el plugin en una ubicación secundaria en el ordenador del usuario. Concretamente, como muchos ficheros OCX (los controles ActiveX), se instala en un directorio especial dentro de C:\WINNT\System32, llamado C:\WINNT\System32\MyPlugin. XPInstall es capaz de determinar cuál es este directorio gracias a la llamada API <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a>. Hemos escrito nuestra propia función de JavaScript que contiene todo el código de la instalación secundaria (la función createSecondaryInstall()). -</li><li> Y por último, escribe <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">las claves de registro requeridas en Windows</a>. Esto se hace a través de la función creada, llamada registerPLID(). -</li></ul> -<p>Es cierto que este secript se centra en Windows, pero es fácil portarlo a cualquier otra plataforma. Quizá esto sea todavía más fácil, ya que ni en Linux ni en Mac OSX hay que trabajar con la tediosa manipulación del registro de Windows. La <a href="es/XPInstall_API_Reference/Install_Object/Methods/getFolder">API getFolder</a> proporciona suficientes "golosinas sintácticas" como para determinar otras ubicaciones del ordenador del usuario en distintas plataformas y sistemas operativos. Un único install.js es casi siempre capaz de ejecutarse en muchas plataformas diferentes. -</p> -<h3 id="Algunas_notas_sobre_la_instalaci.C3.B3n"> Algunas notas sobre la instalación </h3> -<p>Esta sección comprende algunas de las notas clave sobre el envío de paquetes XPI, en particular: ¿cómo puede ser iniciada la descarga de un plugin vía XPI? ¿Y qué pasa con la desinstalación de plugins? -</p> -<h3 id="Ejecutar_una_descarga_XPInstall_con_un_script_autoejecutable"> Ejecutar una descarga XPInstall con un script autoejecutable </h3> -<p>Un <a href="es/XPInstall_API_Reference/Examples/Trigger_Scripts_and_Install_Scripts">script autoejecutable</a> es un trozo de JavaScript de una página web que puede iniciar automáticamente una descarga XPInstall. Esto puede estar condicionado al hecho de que los <a href="es/XPInstall_API_Reference/Examples/Trigger_Scripts_and_Install_Scripts">scripts autodisparados</a> pueden detectar además el software que ya está instalado en el ordenador del usuario a través de XPInstall. Esta opción es útil para los sitios web porque: -</p> -<ul><li> Las páginas HTML y JavaScript ya poseen un modo de detectar qué plugins están instalados. Además, gracias al objeto <a href="es/XPInstall_API_Reference/InstallTrigger_Object">InstallTrigger</a> el cual es accesible por las páginas web, se puede conocer la última versión del paquete XPI instalado. -</li><li> El objeto <a href="es/XPInstall_API_Reference/InstallTrigger_Object">InstallTrigger</a> también puede iniciar una descarga XPI automáticamente. Esto es útil ya que los usuarios pueden visitar un sitio web y, de forma opcional, obtener el software del servidor (mediante flujo de datos) ofrecido al usuario por la página web. -</li></ul> -<p>Los scripts autoejecutables son la forma recomendada de iniciar las descargas XPInstall. -</p> -<h3 id="Ejecutar_una_descarga_XPInstall_desde_HTML"> Ejecutar una descarga XPInstall desde HTML </h3> -<p>De manera análoga a como son inicializadas las descargas SmartUpdate por el atributo pluginurl de la etiqueta <code><embed></code>, las descargas XPInstall pueden ser también iniciadas por las etiquetas HTML que invocan a plugins, sobre todo a través del atributo <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#adef-codebase-OBJECT"><code>codebase</code></a> de la etiqueta <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT"><code><object></code></a>. Esto es análogo a cómo Internet Explorer descarga ficheros CAB referenciados por el atributo <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#adef-codebase-OBJECT"><code>codebase</code></a> de la etiqueta <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT"><code><object></code></a>. A continuación se muestra un ejemplo de una hipotética etiqueta <code><object></code> usada para invocar a MyPlugin (una aplicación imaginaria): -</p> -<pre> <object id="thePlugin" type="application/x-myplugin" width="100" - height="100" codebase="http://location/XPI/myplugin.xpi"> - -<param .... > -</pre> -<p>En el caso anterior, el atributo <code>codebase</code> apunta directamente al paquete XPI y si el navegador no pudiese identificar ningún plugin para manejar el tipo MIME (imaginario) application/x-myplugin, entonces descargaría el paquete XPI. -</p><p><b>Nota:</b> Los paquetes XPI (los ficheros con extensión xpi) utilizan el tipo MIME application/x-xpinstall. Al servir los paquetes XPI a los clientes desde el servidor, asegúrate de que los paquetes son servidos con este tipo MIME en las cabeceras HTTP. Asocia el tipo MIME application/x-xpinstall con los paquetes XPI. -</p> -<h3 id="El_problema_de_la_desinstalaci.C3.B3n"> El problema de la desinstalación </h3> -<p>En su versión actual, XPInstall no posee una tecnología de desinstalación. Ya que sólo puede ser usado para instalar ficheros o para servir de transporte a instaladores de código nativo para el cliente, sería una buena idea escribir un desinstalador de código nativo para el cliente, si es procedente. XPInstall puede por tanto ser un "agente de transporte" para llevar el software del ejecutable y con éste la lógica de instalación y desinstalación que será manejada por él, el cual puede crear ficheros y entradas de registro además de limpiarlo todo después de eliminarlo. -</p> -<div class="originaldocinfo"> -<h3 id="Informaci.C3.B3n_original_del_documento"> Información original del documento </h3> -<ul><li> Author(s): Arun K. Ranganathan, Netscape Communications -</li><li> Last Updated Date: 05 Aug 2002 -</li><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved. -</li><li> Link: <a class=" external" href="http://devedge-temp.mozilla.org/viewsource/2002/xpinstall-guidelines/index_en.html">http://devedge-temp.mozilla.org/view.../index_en.html</a> -</li></ul> -</div> diff --git a/files/es/orphaned/uso_del_núcleo_del_nivel_1_del_dom/index.html b/files/es/orphaned/uso_del_núcleo_del_nivel_1_del_dom/index.html deleted file mode 100644 index a1f476dfb1..0000000000 --- a/files/es/orphaned/uso_del_núcleo_del_nivel_1_del_dom/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Uso del núcleo del nivel 1 del DOM -slug: orphaned/Uso_del_núcleo_del_nivel_1_del_DOM -tags: - - DOM - - Todas_las_Categorías -original_slug: Uso_del_núcleo_del_nivel_1_del_DOM ---- -<p>El núcleo del DOM nivel 1 del W3C es un potente modelo de objetos para cambiar el árbol de contenidos de los documentos. Está soportado en Mozilla (en el cual está basado Netscape 6) y (la mayor parte de) MSIE 5.0 para Windows. Es una potente base para la futura programación de la web.</p> - -<h3 id=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F" name=".C2.BFQu.C3.A9_es_un_.C3.A1rbol_de_contenidos.3F">¿Qué es un árbol de contenidos?</h3> - -<p>Muchos de los que trabajan con HTML pueden pensar que HTML es algo plano, un montón de texto con etiquetas en medio. Sin embargo es mucho más que eso. Todo documento HTML (y por extensión todo documento SGML o XML) posee una estructura en árbol. Por ejemplo, el siguiente documento y la estructura en árbol son similares (aunque no idénticas; ver anotaciones en <a href="es/The_DOM_and_JavaScript">espacios en blanco en DOM</a>):</p> - -<pre class="eval"><html> -<head> - <title>Mi documento</title> -</head> -<body> - <h1>Cabecera</h1> - <p>Párrafo</p> -</body> -</html> -</pre> - - - -<p>Cuando analiza un documento, Mozilla construye un árbol de contenidos y luego lo utiliza para mostrar el documento.</p> - -<p>Los términos usados para describir los árboles show up frecuentemente en el núcleo del DOM nivel 1. Cada caja dibujada en el árbol de arriba es un nodo en el árbol. La línea sobre cada nodo expresa una relación padre-hijo: el nodo superior es el padre y el inferior, el hijo. Dos hijos del mismo padre son por tanto hermanos. Similarmente, uno puede referirse a sus ancestros y descendientes (incluso a los nodos primos, aunque es más complicado de explicar).</p> - -<h3 id=".C2.BFQu.C3.A9_me_permite_hacer_el_Nivel_1_del_DOM.3F" name=".C2.BFQu.C3.A9_me_permite_hacer_el_Nivel_1_del_DOM.3F">¿Qué me permite hacer el Nivel 1 del DOM?</h3> - -<p>El nivel 1 del DOM del W3C te permite cambiar el árbol de contenidos<em>como te de la gana</em> . Es lo suficientemente poderoso como para construir cualquier documento HTML a partir de la nada. Permite a los desarrolladores cambiar cualquier cosa en el documento desde un script, en cualquier momento. La forma más fácil para desarrolladores de páginas web para cambiar el DOM dinámicamente es usando JavaScript. En JavaScript, el documento es accesible en el mismo modo que lo era en los viejos navegadores: desde la propiedad global <code>document</code>. El objeto <code>document</code> implementa el <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interfaz de documento</a> del nivel 1 de la especificación para el DOM del W3C.</p> - -<h3 id="Un_ejemplo_simple" name="Un_ejemplo_simple">Un ejemplo simple</h3> - -<p>Supongamos que el autor del documento de arriba coge y cambia los contenidos de la cabecera y escribe dos párrafos en lugar de uno. El siguiente script debería hacer lo mismo (Resaltado de sintaxis: <code><span class="highlightred">palabras reservadas Javascript</span></code>, <code><span class="highlightblue">métodos y propiedades DOM</span></code> predefinidos y <code><span class="highlightgreen">comentarios en Javascript</span></code>):</p> - -<pre class="eval"><span class="highlightgreen"> -// document.getElementsByTagName("H1") devuelve un NodeList de los -// elementos H1 del documento; el primer elemento tiene índice 0: -</span> -<span class="highlightred">var</span> header = <span class="highlightblue">document.getElementsByTagName</span>("H1").<span class="highlightblue">item</span>(0); -<span class="highlightgreen"> -// La propiedad firstChild de la cabecera contiene un nodo de texto y su propiedad -// data contiene el texto del nodo: -</span> -header.<span class="highlightblue">firstChild.data</span> = "Un documento dinámico"; -<span class="highlightgreen"> -// Ahora la cabecera es "Un documento dinámico". -// Obtenemos el primer elemento P del documento de la misma forma: -</span> -<span class="highlightred">var</span> para = <span class="highlightblue">document.getElementsByTagName</span>("P").<span class="highlightblue">item</span>(0); -<span class="highlightgreen"> -// y cambiamos su texto: -</span> -para.<span class="highlightblue">firstChild.data = "Este es el primer párrafo.";</span> -<span class="highlightgreen"> -// creamos un nodo de texto para el segundo párrafo -</span> -<span class="highlightred">var</span> newText = <span class="highlightblue">document.createTextNode</span>("This is the second paragraph."); -<span class="highlightgreen"> -// creamos un nuevo elemento que sea el segundo párrafo -</span> -<span class="highlightred">var</span> newElement = <span class="highlightblue">document.createElement</span>("P"); -<span class="highlightgreen"> -// ponemos el texto en el párrafo -</span> -newElement.<span class="highlightblue">appendChild</span>(newText); -<span class="highlightgreen"> -// y ponemos el párrafo al final del documento anexándolo -// a la etiqueta BODY (que es el padre del párrafo -</span> -para.<span class="highlightblue">parentNode.appendChild</span>(newElement); -</pre> - -<p>Puedes ver este script en acción en el <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">ejemplo completo</a>.</p> - -<h3 id=".C2.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F" name=".C2.BFC.C3.B3mo_puedo_aprender_m.C3.A1s.3F">¿Cómo puedo aprender más?</h3> - -<p>Una vez familiarizado con los conceptos básicos del DOM, puedes leer el documento que explica los <a href="es/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">métodos fundamentales del DOM nivel 1</a>. Es lo que sigue a este documento.</p> - -<p>Véase también la <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">especificación del núcleo de DOM nivel 1</a> del W3C. Es una especificación razonablemente clara a pesar de ser una especificación formal. Lo más útil para los desarrolladores es la descripción de los diferentes objetos del DOM y todas sus propiedades y métodos. Véase también nuestra <a href="es/DOM">otra documentación del DOM</a>.</p> - -<div class="originaldocinfo"> -<p><strong>Original Document Information</strong></p> - -<ul> - <li>Author(s): L. David Baron <dbaron at dbaron dot org></li> - <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> diff --git a/files/es/orphaned/vigilar_plugins/index.html b/files/es/orphaned/vigilar_plugins/index.html deleted file mode 100644 index a2352fb3cc..0000000000 --- a/files/es/orphaned/vigilar_plugins/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Vigilar plugins -slug: orphaned/Vigilar_plugins -tags: - - Firefox 3 - - Plugins - - Todas_las_Categorías -original_slug: Vigilar_plugins ---- -<h3 id="Resumen" name="Resumen">Resumen</h3> -<p>Ya está disponible un nuevo componente de los plugin que permite saber cuanto tiempo le toma a un determinado plugin (p.e. Adobe Flash) ejecutar sus llamadas. Este componente presenta el runtime del plugin usando el <a href="es/NsIObserverService">observer service</a> a cualquiera que reciba la notificación. Este artículo cuenta cómo los desarrolladores pueden hacer uso de esta facilidad. -</p><p><br> -</p> -<h3 id="Datos_del_Runtime" name="Datos_del_Runtime">Datos del Runtime</h3> -<p>La información del runtime presentada es siempre en fracciones de segundo. Ya que el componente mide el tiempo que le toma a las llamadas de bloque del plugin, el valor incluye tanto el tiempo de CPU, el tiempo de espera entre asignaciones de tiempo de CPU al proceso, como cualquier tiempo de e/s del disco. Es técnicamente incorrecto decir que el runtime es una medida del uso de CPU, sin embargo, es una buena representación de los recursos totales consumidos por el plugin. -</p> -<h3 id="Uso" name="Uso">Uso</h3> -<p>Para hacer uso del nuevo componente, debes registrarte para recibir las notificaciones del runtime usando el <a href="es/NsIObserverService">observer service</a>. El tópico de la notificación es <code>experimental-notify-plugin-call</code>. Si eres novato con el servicio de observación de Mozilla, querrás familiarizarte con él antes de proseguir. Puedes encontrar información acerca del servicio de observación <a href="es/NsIObserverService"> aquí</a> y <a href="es/NsIObserver"> aquí</a>. -</p><p>Debajo hay un número de conversaciones sobre JavaScript que podrían ser útiles para desarrolladores que quieran usar esta facilidad: -</p> -<h4 id="Registro" name="Registro">Registro</h4> -<p>Para registrase en el servicio de notificaciones con el observador debes crear una clase con un método <code>observe</code> que recibe tres parámetros (<code>subject</code>, <code>topic</code> y <code>data</code>) así como un método <code>register</code> que contiene el siguiente código: -</p><p><br> -<code> -</code></p> -<pre class="eval">var observerService = Components.classes["@mozilla.org/observer-service;1"] - .getService (Components.interfaces.nsIObserverService); -observerService.addObserver(this, "experimental-notify-plugin-call", false); -</pre> -<p> -</p><p><br> -</p> -<h4 id="Observando" name="Observando">Observando</h4> -<p>Como hemos dicho arriba, para especificar lo que quieres que se haga cuando llega una notificación, tu clase debe tener un método <code>observe</code>, que recibe tres parámetros (<code>subject</code>, <code>topic</code> y <code>data</code>). El <code>topic</code> contiene el tópico de la notificación - <code>experimental-notify-plugin-call</code> en este caso, <code>data</code> es el runtime en mili segundos y <code>subject</code> es siempre <code>null</code> y no debería usarse. -</p><p>Aquí hay un ejemplo que muestra el runtime en una caja de alerta al usuario si el runtime excede medio segundo de longitud: -</p><p><code> -</code></p> -<pre class="eval"> observe: function(subject, topic, data) { - if (topic == "experimental-notify-plugin-call" ) { - if (data > 0.500) { - alert("Runtime is: " + data); - } - } - } -</pre> -<p> -</p><p><b>NOTA: Esto es un ejemplo simplificado y se desaconseja el uso de <code>alert()</code> ya que el componente puede enviar cientos de notificaciones por segundo y puede, potencialmente, causar la parada del navegador si se abre un número excesivo de cajas de alerta.</b> -</p><p>Téngase también en cuenta que en el ejemplo anterior una sentencia if primero comprueba que el tópico de la notificación es el correcto. Esto es útil en casos en los que la clase se registra para recibir notificaciones de más de un tópico en el servicio de observación. -</p> -<h4 id="Limpieza" name="Limpieza">Limpieza</h4> -<p>Para des-registrar tu clase en el servicio de observación - cuando ya no quieres escuchar las notificaciones del runtime - tu clase debe incluir un método <code>unregister</code> que contenga el siguiente código: -</p><p><code> -</code></p> -<pre class="eval">var observerService = Components.classes["@mozilla.org/observer-service;1"] - .getService(Components.interfaces.nsIObserverService); -observerService.removeObserver(this, "experimental-notify-plugin-call"); -</pre> -<p> -</p><p><br> -</p> -<h4 id="Esquema_de_una_clase_para_el_observador" name="Esquema_de_una_clase_para_el_observador">Esquema de una clase para el observador</h4> -<p>A continuación presentamos un esquema de una clase que puedes usar para escuchar el servicio de notificaciones: -</p><p><code> -</code></p> -<pre class="eval"> function PluginObserver() { - this.registered = false; - this.register(); // se cuida de registrar esta clase en el servicio de observación como un observador para el servicio de notificación - } - - PluginWatcherObserver.prototype = { - observe: function(subject, topic, data) { - - if (topic == "experimental-notify-plugin-call") //En caso de que tu clase esté registrada para escuchar otros tópicos - //Esto es ejecutado cada vez que llega una notificación - // --AQUÍ VA TU CÓDIGO-- - } - - - }, - //Se cuida de registrar el observador para el tópico "experimental-notify-plugin-call" - register: function() { - if (this.registered == false) { //Este evento previene el doble registro -- ¡algo que quieres evitar! - var observerService = Components.classes["@mozilla.org/observer-service;1"] - .getService(Components.interfaces.nsIObserverService); - observerService.addObserver(this, "experimental-notify-plugin-call", false); - this.registered = true; - } - }, - //Des-registra del servicio de observación - unregister: function() { - if (this.registered == true) { - var observerService = Components.classes["@mozilla.org/observer-service;1"] - .getService(Components.interfaces.nsIObserverService); - observerService.removeObserver(this, "experimental-notify-plugin-call"); - this.registered = false; - } - } - } -</pre> -<p> -</p><p><br> -</p> -<h3 id="Recursos_adicionales" name="Recursos_adicionales">Recursos adicionales</h3> -<p>Más información sobre el servicio de observación: -</p> -<ul><li> <a href="es/NsIObserverService">nsIObserverService</a> -</li><li> <a href="es/NsIObserver">nsIObserver</a> -</li></ul> -{{ languages( { "ja": "ja/Monitoring_plugins" } ) }} diff --git a/files/es/orphaned/web/api/abstractworker/index.html b/files/es/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index a2ffb4c950..0000000000 --- a/files/es/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<p>La interfaz <strong><code>AbstractWorker</code></strong> de la <a href="/en-US/docs/Web/API/Web_Workers_API">API de Web Workers</a> es una interfaz abstracta que define propiedades métodos comunes a toda clase de workers, no sólo al {{domxref("Worker")}} básico sino también el {{domxref("ServiceWorker")}} y el {{domxref("SharedWorker")}}.<br> - Al ser una clase abstracta, usted no interactúa directamente con el <code>AbstractWorker</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<p><em>La interfaz <code>AbstractWorker</code></em><em> no hereda ninguna propiedad.</em></p> - -<h3 id="Gestor_de_eventos">Gestor de eventos</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo <code>error</code> se gatilla através del worker.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>La interfaz <code>AbstractWorker</code></em><em> no implementa o hereda ningún método.</em></p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Note que usted no estará usando la interfaz <code>AbstractWorker</code> diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.</p> - -<p>El siguiente fragmento de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor {{domxref("Worker.Worker", "Worker()")}} , junto con la forma de uso del objeto creado:</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Mensaje enviado al worker'); -}</pre> - -<p>El código del worker se carga desde el archivo <code>"worker.js"</code>. Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como <code>first</code>; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de <code>first</code>, un mensaje se enviará al worker haciendoselo saber.</p> - -<p>Para ejemplos completos, visitar:</p> - -<ul> - <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li> - <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>No existen cambios para {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2("Web Workers")}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> - -<div>{{CompatibilityTable()}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatChrome(4)}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>10</td> - <td>10.6</td> - <td>4</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>4.4</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>1.0.1</td> - <td>10</td> - <td>11.5</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vease_también">Vease también</h2> - -<ul> - <li>Las interfaces de {{domxref("Worker")}}, {{domxref("ServiceWorker")}} y {{domxref("SharedWorker")}}, que están basadas en el <code>AbstractWorker</code> .</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Usando Web Workers</a></li> -</ul> diff --git a/files/es/orphaned/web/api/ambient_light_events/index.html b/files/es/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 79f4c1ef65..0000000000 --- a/files/es/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Luz Ambiental Eventos -slug: orphaned/Web/API/Ambient_Light_Events -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>Los eventos de luz ambiental son una forma práctica de hacer una página web o una aplicación al tanto de cualquier cambio en la intensidad de la luz. Se les permite reaccionar a un cambio de este tipo, por ejemplo, cambiando el contraste de color de la interfaz de usuario (UI) o cambiando la exposición necesaria para tomar una foto.</p> - -<h2 id="Eventos_de_luz"><span class="short_text" id="result_box" lang="es"><span>Eventos</span> <span>de luz</span></span></h2> - -<p>Cuando el sensor de luz de un dispositivo detecta un cambio en el nivel de luz, notifica al navegador de ese cambio. Cuando el navegador recibe dicha notificación, se dispara un {{domxref ( "DeviceLightEvent")}} evento que proporciona información sobre la intensidad de la luz exacta.</p> - -<p>Este evento puede ser capturado en el plano objeto de la ventana mediante el uso de la {{domxref ( "EventTarget.addEventListener", "addEventListener")}} El método (usando el {{event( "devicelight")}} nombre del evento) o adjuntando una controlador de eventos al {{domxref ( "window.ondevicelight")}} propiedad.</p> - -<p>Una vez capturado, el objeto de evento da acceso a la intensidad de la luz expresada en lux a través de la {{domxref ( "DeviceLightEvent.value")}} propiedad.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: js">if ('ondevicelight' in window) { - window.addEventListener('devicelight', function(event) { - var body = document.querySelector('body'); - if (event.value < 50) { - body.classList.add('darklight'); - body.classList.remove('brightlight'); - } else { - body.classList.add('brightlight'); - body.classList.remove('darklight'); - } - }); -} else { - console.log('devicelight event not supported'); -} -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <td>Especificaciones</td> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td>definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] The {{event("devicelight")}} event is implemented and preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}} a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/body/formdata/index.html b/files/es/orphaned/web/api/body/formdata/index.html deleted file mode 100644 index a7cb72413c..0000000000 --- a/files/es/orphaned/web/api/body/formdata/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - FormData - - Method - - NeedsExample - - Reference -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData ---- -<div>{{APIRef("Fetch")}}</div> - -<p>El método <strong><code>formData()</code></strong> de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.</p> - -<div class="note"> -<p><strong>Nota</strong>: Esto es principalmente relevante en <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a>. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a <code>formData()</code> para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).</p> -</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">response.formData() -.then(function(formdata) { - // hacer algo con tu formdata -});</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<p>Ninguno.</p> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>TBD.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#dom-body-formdata','formData()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.Body.formData")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/es/orphaned/web/api/body/index.html b/files/es/orphaned/web/api/body/index.html deleted file mode 100644 index 346e7b2286..0000000000 --- a/files/es/orphaned/web/api/body/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - TopicStub - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p> - -<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js">const myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') - .then(res => res.blob()) - .then(res => { - const objectURL = URL.createObjectURL(res); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/es/orphaned/web/api/body/json/index.html b/files/es/orphaned/web/api/body/json/index.html deleted file mode 100644 index 35f7811df3..0000000000 --- a/files/es/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch API")}}</div> - -<p>El método <strong><code>json()</code></strong> de {{DOMxRef("Body")}} recibe un flujo de datos {{DOMxRef("Response")}} y lo lee a término. Devuelve una promesa con el cuerpo del texto transformado a {{JSxRef("JSON")}}.</p> - -<h2 id="Sintáxis">Sintáxis</h2> - -<pre class="syntaxbox"><em>response</em>.json().then(<em>data</em> => { - // do something with your data -});</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<p>No.</p> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p>Una {{jsxref("Promise")}} que se resuelve a un objeto JavaScript. Este objeto puede ser cualquier cosa que pueda ser representada por JSON (un objeto, un array, una cadena de caracteres, un número...).</p> - -<h2 id="Example">Example</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a <code>.json</code> file. When the fetch is successful, we read and parse the data using <code>json()</code>, then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.</p> - -<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); -const myRequest = new Request('products.json'); - -fetch(myRequest) - .then(response => response.json()) - .then(data => { - for (const product of data.products) { - let listItem = document.createElement('li'); - listItem.appendChild( - document.createElement('strong') - ).textContent = product.Name; - listItem.append( - ` can be found in ${ - product.Location - }. Cost: ` - ); - listItem.appendChild( - document.createElement('strong') - ).textContent = `£${product.Price}`; - myList.appendChild(listItem); - } - });</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/after/index.html b/files/es/orphaned/web/api/childnode/after/index.html deleted file mode 100644 index 468dfd58ae..0000000000 --- a/files/es/orphaned/web/api/childnode/after/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: ChildNode.after() -slug: orphaned/Web/API/ChildNode/after -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/after -original_slug: Web/API/ChildNode/after ---- -<p>{{APIRef("DOM")}} {{SeeCompatTable}}<br> - <span lang="es"><span>El método <code><strong>ChildNode.after()</strong></code> inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este <code>ChildNode</code> del padre, justo después de este <code>ChildNode</code>.</span> <span>Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.</span></span></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.after((Node o DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos </span></span><span lang="es"><span>{{domxref("Node")}} o </span></span>{{domxref("DOMString")}}<span lang="es"><span> para insertar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Insertando_un_elemento">Insertando un elemento</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.after(span); - -console.log(parent.outerHTML); -// "<div><p></p><span></span></div>" -</pre> - -<h3 id="Insertando_texto">Insertando texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.after("Text"); - -console.log(parent.outerHTML); -// "<div><p></p>Text</div>"</pre> - -<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.after(span, "Text"); - -console.log(parent.outerHTML); -// "<div><p></p><span></span>Text</div>"</pre> - -<h3 id="ChildNode.after_es_unscopable"><code>ChildNode.after()</code> es unscopable</h3> - -<p>El método <code>after()</code> no está incluido en la declaración <code>with</code>.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.</p> - -<pre class="brush: js">with(node) { - after("foo"); -} -// ReferenceError: after is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Puedes usar un polyfill del método <code>after()</code> en Internet Explorer 9 y superiores con el siguente código:</p> - -<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('after')) { - return; - } - Object.defineProperty(item, 'after', { - configurable: true, - enumerable: true, - writable: true, - value: function after() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this.nextSibling); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h3 id="Otro_polyfill">Otro polyfill</h3> - -<pre class="brush: js">// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js - -(function(x){ - var o=x.prototype,p='after'; - if(!o[p]){ - o[p]=function(){ - var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document; - if(p!==null){ - while(i<l){ - e=m[i]; - if(e instanceof n){ - t=t.nextSibling; - if(t!==null){ - p.insertBefore(e,t); - }else{ - p.appendChild(e); - }; - }else{ - p.appendChild(d.createTextNode(s(e))); - }; - ++i; - }; - }; - }; - }; -})(Element); - - - -/* -minified: - -(function(x){ - var o=x.prototype; - o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}}); -}(Element)); -*/ -</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("api.ChildNode.after")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("ChildNode")}} y {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/before/index.html b/files/es/orphaned/web/api/childnode/before/index.html deleted file mode 100644 index cfede06158..0000000000 --- a/files/es/orphaned/web/api/childnode/before/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: ChildNode.before() -slug: orphaned/Web/API/ChildNode/before -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/before -original_slug: Web/API/ChildNode/before ---- -<p><textarea></textarea></p> - -<div id="gt-input-tool"> -<div id="itamenu"> </div> -</div> - -<div class="g-unit" id="gt-src-c"> -<div id="gt-src-p"> </div> -</div> - -<div id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br> -<br> -<span>El método <strong>ChildNode.before</strong> inserta un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} en la lista de hijos de este ChildNode del padre, justo antes de este ChildNode.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></div> -</div> - -<h2 id="Síntasix">Síntasix</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.before((Node or DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodos</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Insertando_un_elemento">Insertando un elemento</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span); - -console.log(parent.outerHTML); -// "<div><span></span><p></p></div>" -</pre> - -<h3 id="Insertando_texto">Insertando texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.before("Text"); - -console.log(parent.outerHTML); -// "<div>Text<p></p></div>"</pre> - -<h3 id="Insertando_un_elemento_y_texto">Insertando un elemento y texto</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span, "Text"); - -console.log(parent.outerHTML); -// "<div><span></span>Text<p></p></div>"</pre> - -<h3 id="ChildNode.before()_es_unscopable"><code>ChildNode.before()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método before () no está definido en la declaración <em>with</em>.</span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - before("foo"); -} -// ReferenceError: before is not defined </pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/index.html b/files/es/orphaned/web/api/childnode/index.html deleted file mode 100644 index 2cdd1c573b..0000000000 --- a/files/es/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Interface - - NeedsTranslation - - Node - - TopicStub -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p> - -<p><code>ChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>There are neither inherited, nor specific properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>There are no inherited methods.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill">Polyfill</h2> - -<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{CompatChrome(1.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> - <td>{{CompatChrome(23.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>remove()</code>{{experimental_inline}}</td> - <td>{{CompatChrome(29.0)}}</td> - <td>{{CompatGeckoDesktop(23)}}</td> - <td>Edge</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>remove()</code>{{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(23)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>before()</code>, <code>after()</code>, and <code>replaceWith()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOperaMobile(39)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/remove/index.html b/files/es/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 069ed69160..0000000000 --- a/files/es/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - Experimental - - metodo -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}}</span><br> - <span>El método<strong> ChildNode.remove ( ) </strong>elimina el objeto del árbol al que pertenece.</span></span></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>node</em>.remove(); -</pre> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Utilizando_remove">Utilizando <code>remove()</code></h3> - -<pre class="brush: html"><div id="div-01">Este es el div-01</div> -<div id="div-02">Este es el div-02</div> -<div id="div-03">Este es el div-03</div> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-02'); -el.nextElementSibling.remove(); // Elimina el div con el id 'div-03' -</pre> - -<h3 id="ChildNode.remove_es_unscopable"><code>ChildNode.remove()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método <code>remove()</code> no está definido en el contexto de las declaración <code>with</code>.</span> <span>Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>El código a continuación es un polyfill del método <code>remove()</code> para Internet Explorer 9 y superiores:</p> - -<pre class="brush: js">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - if (this.parentNode !== null) - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_navegadores">Compatibilidad en los navegadores</h2> - -<div> -<p>{{Compat("api.ChildNode.remove")}}</p> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><span class="short_text" id="result_box" lang="es"><span>La interfaz pura {{domxref ( "ChildNode")}} .</span></span></li> - <li> - <div class="syntaxbox"><span id="result_box" lang="es"><span>Tipos de objetos que implementan esta interfaz pura: {{domxref ( "CharacterData")}}, {{domxref ( "Elemento")}} y {{domxref ( "DocumentType")}}.</span></span></div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/childnode/replacewith/index.html b/files/es/orphaned/web/api/childnode/replacewith/index.html deleted file mode 100644 index a9aa23ce79..0000000000 --- a/files/es/orphaned/web/api/childnode/replacewith/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: ChildNode.replaceWith() -slug: orphaned/Web/API/ChildNode/replaceWith -tags: - - API - - DOM - - Experimental - - Nodo - - Referencia - - metodo -translation_of: Web/API/ChildNode/replaceWith -original_slug: Web/API/ChildNode/replaceWith ---- -<p><span id="result_box" lang="es"><span>{{APIRef ( "DOM")}} {{SeeCompatTable}}</span><br> - <br> - <span>El método <strong>ChildNode.replaceWith () </strong>reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}.</span> <span>Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.</span></span></p> - -<p> </p> - -<h2 id="Síntasix">Síntasix</h2> - -<p> </p> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.replaceWith((Node or DOMString)... nodes); -</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nodos</code></dt> - <dd><span id="result_box" lang="es"><span>Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.</span></span></dd> -</dl> - -<h3 id="Excepciones">Excepciones</h3> - -<ul> - <li><span id="result_box" lang="es"><span>{{Domxref ( "HierarchyRequestError")}}: No se puede insertar nodo en el punto especificado de la jerarquía.</span></span></li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Utilizando_replaceWith()">Utilizando <code>replaceWith()</code></h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.replaceWith(span); - -console.log(parent.outerHTML); -// "<div><span></span></div>" -</pre> - -<h3 id="ChildNode.replaceWith()_es_unscopable"><code>ChildNode.replaceWith()</code> es unscopable</h3> - -<p><span id="result_box" lang="es"><span>El método replaceWith () no está incluido en la declaracion <em><code>with</code>.</em></span> <span>Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.</span></span></p> - -<pre class="brush: js">with(node) { - replaceWith("foo"); -} -// ReferenceError: replaceWith is not defined </pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(39)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/detecting_device_orientation/index.html b/files/es/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index 96afd861e0..0000000000 --- a/files/es/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,279 +0,0 @@ ---- -title: Detectando la orientación del dispositivo -slug: orphaned/Web/API/Detecting_device_orientation -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -<div>{{SeeCompatTable}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>Cada vez más, los dispositivos habilitados para la web son capaces de determinar su <strong>orientación</strong>; esto hace que estos puedan reportar datos indicando los cambios de su orientación con relación a la fuerza de gravedad. In particular, dispositivos de mano como los teléfonos móviles pueden usar esta información para rotar la pantalla automaticamente para mostrar información en de forma vertical, presentando un vista extendida del contenido de la web cuando el dispositivo de forma que el ancho es mayor que el alto. </p> - -<p>Hay dos eventos JavaScript que manejan la información de orientación. El primero es {{domxref("DeviceOrientationEvent")}}, que es enviado cuando el aceleromentro detecta un cambio de orientación del dispositivo. Recibiendo y procesando los datos reportados por el evento es posible responder interactivamente a la rotación y aplicar cambios correspondientes al movimiento del dispositivo.</p> - -<p>El segundo evento es {{domxref("DeviceMotionEvent")}}, que es enviado cuando un cambio de la aceleración fue añadido. Esto es diferente de {{domxref("DeviceOrientationEvent")}} por que está escuchando cambios de aceleración mas no de orientación. Los sensores son comunmente capaces de detetar {{domxref("DeviceMotionEvent")}} incluso aquellos sensores de laptops que protegen del movimiento a los disposivitos de almacenamiento. {{domxref("DeviceOrientationEvent")}} es comunmente encontrado en dispositivos móviles.</p> - -<h2 id="Trabajando_con_eventos_de_orientación">Trabajando con eventos de orientación</h2> - -<p>Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:</p> - -<pre class="brush: js notranslate">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>Después de registrar el evento de escucha (en este caso, una función de JavaScript llamada handleOrientation()), tu función de escucha periodicamente será invocada con una actualización de datos.</p> - -<p>La información del evento contiene 4 valores:</p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.absolute") }}</li> - <li>{{ domxref("DeviceOrientationEvent.alpha") }}</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }}</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }}</li> -</ul> - -<p>El manejador del evento puede ser similar a lo siguiente:</p> - -<pre class="brush: js notranslate">function handleOrientation(event) { - var absolute = event.absolute; - var alpha = event.alpha; - var beta = event.beta; - var gamma = event.gamma; - - // Do stuff with the new orientation data -} -</pre> - -<h3 id="Explicación_de_los_Valores_de_Orientación">Explicación de los Valores de Orientación</h3> - -<p>El valor reportado para cada eje indica la cantidad de rotación alrededor de un eje dado, con referencia a un estandar marco de coordenadas. El siguiente enlace describe con mayor detalle la <a href="/en-US/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientacíon y datos del movimiento explicado</a> que es resumido abajo. </p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.alpha") }} representa el movimiento alrededor del eje z, representado en grados con valores que van desde 0 a 360.</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }} representa el movimiento del dispositivo alrededor del eje x, representado en grados con valores que van desde -180 a 180. Esto representa un movimiento de frente hacia atrás del dispositivo.</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }} representa el movimiento del dispositivo alrededor del eje y, representado en grados con valores que van de -90 a 90. Esto representa un movimiento de izquierda a derecha del dispositivo.</li> -</ul> - -<h3 id="Ejemplo_de_orientación">Ejemplo de orientación</h3> - -<p>Este ejemplo va a funcionar en cualquier nevegador que soporte el evento {{event("deviceorientation")}} y funcione en un dispositivo con capacidades de detectar la orientación.</p> - -<p>Imaginemos una pelota en un jardin:</p> - -<pre class="brush: html notranslate"><div class="garden"> - <div class="ball"></div> -</div> - -<pre class="output"></pre> -</pre> - -<p>Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:</p> - -<pre class="brush: css notranslate">.garden { - position: relative; - width : 200px; - height: 200px; - border: 5px solid #CCC; - border-radius: 10px; -} - -.ball { - position: absolute; - top : 90px; - left : 90px; - width : 20px; - height: 20px; - background: green; - border-radius: 100%; -} -</pre> - -<p>Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:</p> - -<pre class="brush: js notranslate">var ball = document.querySelector('.ball'); -var garden = document.querySelector('.garden'); -var output = document.querySelector('.output'); - -var maxX = garden.clientWidth - ball.clientWidth; -var maxY = garden.clientHeight - ball.clientHeight; - -function handleOrientation(event) { - var x = event.beta; // In degree in the range [-180,180] - var y = event.gamma; // In degree in the range [-90,90] - - output.innerHTML = "beta : " + x + "\n"; - output.innerHTML += "gamma: " + y + "\n"; - - // Because we don't want to have the device upside down - // We constrain the x value to the range [-90,90] - if (x > 90) { x = 90}; - if (x < -90) { x = -90}; - - // To make computation easier we shift the range of - // x and y to [0,180] - x += 90; - y += 90; - - // 10 is half the size of the ball - // It center the positioning point to the center of the ball - ball.style.top = (maxX*x/180 - 10) + "px"; - ball.style.left = (maxY*y/180 - 10) + "px"; -} - -window.addEventListener('deviceorientation', handleOrientation); -</pre> - -<p>Aqui el resultado en vivo:</p> - -<div>{{ EmbedLiveSample('Orientation_example', '230', '260') }}</div> - -<div class="warning"> -<p><strong>Tener en cuenta:</strong> Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.</p> -</div> - -<h2 id="Procesando_eventos_de_movimiento">Procesando eventos de movimiento</h2> - -<p>Eventos de movimiento son manejados de la misma manera que la orientación, con la excepción de que estos tienen sus propios nombres de evento: {{ event("devicemotion") }}</p> - -<pre class="brush: js notranslate">window.addEventListener("devicemotion", <em>handleMotion</em>, true);</pre> - -<p>Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función <em>HandleMotion.</em></p> - -<p>El evento de movimiento tiene cuatro propiedades:</p> - -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> - <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> - <li>{{ domxref("DeviceMotionEvent.interval") }}</li> -</ul> - -<h3 id="Valores_de_movimiento_explicados">Valores de movimiento explicados</h3> - -<p>{{ domxref("DeviceMotionEvent") }} proporciona a los desarrolladores web información sobre la velocidad de los cambios de la posición y orientación del dispositivo. Los cambios son proporcionados por sus tres ejes (ver <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Datos de orientación y movimiento explicados</a> por más detalles).</p> - -<p>Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:</p> - -<ul> - <li><code>x</code>: Representa el eje de oeste a este.</li> - <li><code>y</code>: Representa el eje de sur a norte.</li> - <li><code>z</code>: Representa el eje perpendicular al suelo.</li> -</ul> - -<p>Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:</p> - -<ul> - <li><code>alpha</code>: Representa la velocidad de rotación a lo largo del eje perpendicular a la pantalla ( teclado para desktop).</li> - <li><code>beta</code>: Representa la velocidad de rotación a lo largo del eje que va de la izquierda a la derecha del plano de la pantalla (o teclado para desktop).</li> - <li><code>gamma</code>: Representa la velocidad de rotación a lo largo del eje que va desde la parte inferior a la parte superrior del plano de la pantalla (o teclado para desktop).</li> -</ul> - -<p>Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Device Orientation')}}</td> - <td>{{Spec2('Device Orientation')}}</td> - <td>Especificación inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>7.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceOrientationEvent")}}</td> - <td>3.0</td> - <td>3.6<sup>[1]</sup><br> - 6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.2</td> - </tr> - <tr> - <td>{{domxref("DeviceMotionEvent")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>6</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div class="note"> -<p><strong>Note</strong>: <a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> es un <em>polyfill</em> para normalizar los datos del acelerómetro y giroscopio en dispositivos móviles. Esto es útil para superar algunas de las diferencias en la compatibilidad del dispositivo con la orientación del dispositivo..</p> -</div> - -<h3 id="Gecko_implementation_notes">Gecko implementation notes</h3> - -<ol> - <li>Firefox 3.6, 4, and 5 supported <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>versus the standard {{domxref("DeviceOrientationEvent")}} event</li> -</ol> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> - <li><a href="/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation" title="2D maze game with device orientation">Cyber Orb: 2D maze game with device orientation</a></li> -</ul> diff --git a/files/es/orphaned/web/api/document_object_model/events/index.html b/files/es/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index b40c7ce7ae..0000000000 --- a/files/es/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Eventos y el DOM -slug: orphaned/Web/API/Document_Object_Model/Events -tags: - - DOM - - Guía -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -<h2 id="Introduction" name="Introduction">Introducción</h2> - -<p>Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, así como las interfaces para el registro de eventos en los nodos del DOM, y los <a href="/en-US/docs/Web/API/EventTarget.addEventListener">oyentes de eventos</a>, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.</p> - -<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a>.</p> - -<p>Vea también el <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Ejemplo 5: Propagación de eventos</a> en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando oyentes de eventos</h2> - -<p>Hay 3 formas de registrar gestores de eventos para un elemento DOM.</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3> - -<pre class="brush: js">// Se supone que myButton es un elemento de botón -myButton.addEventListener('click', function(){alert('Hello world');}, false); -</pre> - -<p>Este es el método que debe usar en las páginas web modernas. </p> - -<p>Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.</p> - -<p>Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">Atributo HTML</a></h3> - -<pre class="brush: html"><button onclick="alert('Hello world!')"> -</pre> - -<p>El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> - -<p>Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.</p> - -<h3 id="DOM_element_properties" name="DOM_element_properties">Propiedades del elemento DOM</h3> - -<pre class="brush: js">// Se supone que myButton es un elemento de botón -myButton.onclick = function(event){alert('Hello world');}; -</pre> - -<p>La función se puede defirnir para que tome un parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> - -<p>El problema con este método es que solo se puede establecer un gestor por elemento y por evento.</p> - -<h2 id="Accediendo_a_las_Interfaces_de_eventos">Accediendo a las Interfaces de eventos</h2> - -<p>Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">objeto window</a>, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.</p> - -<p>Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.</p> - -<pre class="brush: js">function foo(evt) { - // al parámetro evt se le asigna automáticamente el objeto event - alert(evt); -} -table_el.onclick = foo; -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> diff --git a/files/es/orphaned/web/api/element/currentstyle/index.html b/files/es/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index 0b329e5d0e..0000000000 --- a/files/es/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -tags: - - API - - Compatibilidad en los navegadores móviles - - Property -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Sumario">Sumario</h2> - -<p><strong><code>Element.currentStyle </code></strong><span lang="es"><span>es</span> <span>una propiedad</span> <span>que es una</span> <span>alternativa propietaria</span> <span>del método estandarizado</span></span> {{domxref("window.getComputedStyle")}} . <span id="result_box" lang="es"><span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> - -<h2 id="Especificación">Especificación</h2> - -<p>No forma parte de ninguna especificación.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">tiene una descripción MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en los Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li>{{domxref("Element.runtimeStyle")}} </li> -</ul> diff --git a/files/es/orphaned/web/api/element/runtimestyle/index.html b/files/es/orphaned/web/api/element/runtimestyle/index.html deleted file mode 100644 index 71ff184062..0000000000 --- a/files/es/orphaned/web/api/element/runtimestyle/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Element.runtimeStyle -slug: orphaned/Web/API/Element/runtimeStyle -tags: - - API - - Necesidad de compatibilidad de los navegadores - - Necesidad de compatibilidad de los navegadores móviles - - Necesidad de ejemplo - - Propiedad -translation_of: Web/API/Element/runtimeStyle -original_slug: Web/API/Element/runtimeStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="Sumario">Sumario</h2> - -<p><span id="result_box" lang="es"><strong><span>Element.runtimeStyle</span></strong> <span>es una</span> <span>propiedad exclusiva</span> <span>similar a</span> <span>{</span><span>{</span><span>domxref</span> <span>(</span><span>"</span><span>HTMLElement.style</span><span>"</span><span>)</span><span>}</span><span>}</span><span>, excepto</span> <span>sus</span> <span>estilos,</span> <span>que tienen</span> <span>mayor precedencia</span> <span>y</span> <span>modificaciön.It</span> <span>no modifica</span> <span>el contenido del atributo</span> </span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> <span lang="es"><span>.</span> <span>Está disponible en</span> <span>las versiones anteriores de</span> <span>Microsoft</span> <span>Internet Explorer</span><span>.</span></span></p> - -<h2 id="especificación">especificación</h2> - -<p>No forma parte de ninguna especificación.</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">tiene una descripción en MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad de los Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Función</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("Element.currentStyle")}} </li> -</ul> diff --git a/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index add3fa5480..0000000000 --- a/files/es/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Element.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -<p>{{ ApiRef("HTML DOM") }}</p> - -<h3 id="Summary" name="Summary">Resumen</h3> - -<p>Devuelve un objeto que representa el atributo <code>style </code>del elemento.</p> - -<h3 id="Example" name="Example">Ejemplo</h3> - -<pre class="eval">var div = document.getElementById("div1"); -div.style.marginTop = ".25in"; -</pre> - -<h3 id="Notes" name="Notes">Notas</h3> - -<p>Ya que la propiedad <code>style </code>tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones <em>in-line</em> hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. </p> - -<p>Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style <em>in-line</em> y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.</p> - -<p>Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar <a href="/Es/DOM/Window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> en su lugar.</p> - -<p>Mira la lista de Propiedades CSS del DOM (<a href="/es/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a>) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.</p> - -<p>Generalmente es mejor usarla propiedad <code>style </code>que usar <code>elt.setAttribute('style', '...')</code>, ya que el uso de la propiedad <code>style </code>no reemplazará otras propiedades CSS que puedan especificarse en el atributo <code>style</code>.</p> - -<p>Los estilos <em>no</em> pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en <code>elt.style = "color: blue;"</code>. Esto es porque el atributo <code>style </code>devuelve un objeto del tipo <code>CSSStyleDeclaration</code>. En su lugar, pueds establecer las propiedades como:</p> - -<pre class="eval">elt.style.color = "blue"; // Asignación directa - -var st = elt.style; -st.color = "blue"; // Asignación Indirecta -</pre> - -<p>El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos<code> elt </code>y sus valores heredados: </p> - -<pre class="eval">var elt = document.getElementById("elementIdHere"); -var out = ""; -var st = elt.style; -var cs = window.getComputedStyle(elt, null); -for (x in st) - out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n"; -</pre> - -<p> </p> - -<h3 id="Specification" name="Specification">Especificación</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> diff --git a/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index 7fb7d2a62e..0000000000 --- a/files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary">La propiedad <code><strong>dataset</strong></code> en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los <a href="/es/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de datos personalizados</a> (<code>data-*</code>) de cada uno de los elementos.</span> Está disponible el acceso en HTML y en el DOM. Dentro del <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad<strong> </strong><code>dataset</code><strong> </strong>puede leerse, pero no modificarse directamente. En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del <code>dataset</code>, que representan a cada atributo correspondiente. Además un HTML <code><strong>data-</strong></code><em>attribute</em> y su correspondiente DOM<strong> </strong><code>dataset.</code><em>property</em> no comparten el mismo nombre, pero son siempre similares:</p> - -<ul> - <li>El nombre de un attributo de datos comienza en HTML con <code>data-</code>. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (<code>-</code>), punto (<code>.</code>), dos puntos (<code>:</code>) y guión bajo (<code>_</code>) -- NUNCA una letra mayúscula (A a Z).</li> - <li>El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.</li> -</ul> - -<p>Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> - -<h3 id="Conversion_de_nombres">Conversion de nombres</h3> - -<p><code>dash-style</code> a <code>camelCase</code>: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas</p> - -<ul> - <li>el prefijo <code>data-</code> es eliminado (incluyendo el guión);</li> - <li>por cada guión (<code>U+002D</code>) seguido de un caracter ASCII que sea una letra en minuscula<span style="line-height: 1.5;"> </span><code>a</code><span style="line-height: 1.5;"> a la </span><code>z</code><span style="line-height: 1.5;">, el guión es removido y la letra se transforma en su contraparte en mayuscula;</span></li> - <li>otros caracteres (incluyendo otros guines) se mantienen intactos.</li> -</ul> - -<p><code>camelCase</code> a <code>dash-style</code>: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:</p> - -<ul> - <li>Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la <code>a</code> a la <code>z</code> (antes de la conversión);</li> - <li>se agrega el prefijo <code>data-</code>;</li> - <li>cualquier caracter ASCII que sea una letra mayuscula de la <code>A</code> a la <code>Z</code> se convierte en un guión seguido de se contraparte en minuscula;</li> - <li>otros caracteres se mantienen intactos.</li> -</ul> - -<p>La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.</p> - -<p>Por ejemplo, el atributo nombrado <code>data-abc-def</code> corresponde a la clave <code>abcDef</code>.</p> - -<ul> -</ul> - -<h3 id="Accediendo_valores">Accediendo valores</h3> - -<ul> - <li>Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en <code>element.dataset.keyname</code></li> - <li>Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en <code>element.dataset[keyname]</code></li> - <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code></a> puede ser usado para checar si un atributo dado existe.</li> -</ul> - -<h3 id="Definiendo_valores">Definiendo valores</h3> - -<ul> - <li>Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, <code>null</code> siempre se convierte en el string "null".</li> - <li>Cuando quieras remover un atributo, puedes usar el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operador <code>delete</code></a>.</li> -</ul> - -<h2 id="Sintaxis">Sintaxis</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <br> - <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">const el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -// set the data attribute -el.dataset.dateOfBirth = '1960-10-03'; -// Result: el.dataset.dateOfBirth === 1960-10-03 - -delete el.dataset.dateOfBirth; -// Result: el.dataset.dateOfBirth === undefined - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// Result: 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> - <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 81bfcf5693..0000000000 --- a/files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Conceptos Básicos -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p><strong>IndexedDB</strong> es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).</p> - -<h2 id="Sobre_este_documento">Sobre este documento</h2> - -<p>Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de <a href="#definitions">Definiciones</a>.</p> - -<p>Para un tutorial sobre cómo usar la API, vea <a href="/es/IndexedDB/Usando_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.</p> - -<h2 id="Visión_general_de_IndexedDB">Visión general de IndexedDB</h2> - -<p>IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">política de mismo origen</a>, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.</p> - -<p>La API incluye una variante <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asíncrona</a> y una <a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">síncrona</a>. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo <a href="/En/DOM/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.</p> - -<p>IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.</p> - -<h2 id="concepts" name="concepts">Conceptos principales</h2> - -<p>Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:</p> - -<ul> - <li> - <p><strong>IndexedDB almacena pares llave-valor.</strong> Los valores pueden ser objetos con estructuras complejas, y las llaves pueden ser propiedades de esos objetos. Se pueden crear índices que usan cualquier propiedad de los objetos para realizar búsquedas rápidas o enumeraciones ordenadas.</p> - </li> - <li> - <p><strong>IndexedDB está hecho sobre un modelo de base de datos transaccional.</strong> Todo lo que usted haga en IndexedDB siempre ocurre en el contexto de una <a href="#gloss_transaction">transacción</a>. La API de IndexedDB provee una gran cantidad de objetos que representan índices, tablas, cursores, y más, pero cada uno de ellos están atados a una transacción particular. Así, usted no puede ejecutar ningún comando o abrir un cursor fuera de una transacción.</p> - - <p>Las transacciones tienen un período de vida bien definido. Por esta razón, cualquier intento de utilizar una transacción que ya se ha completado ocasionará excepciones. Igualmente, las transacciones aplican los cambios automáticamente y no se puede hacer <em>commit</em> automáticamente.</p> - - <p>Este modelo de transacciones es realmente útil cuando se considera qué podría pasar si un usuario abre dos instancias de una aplicación simultáneamente en dos pestañas. Sin operaciones transaccionales, las dos instancias podrían hacer que los cambios se <em>pisen</em> o se sobreescriban entre sí. Si no está familiarizado con el concepto de transacción en una base de datos, lea el <a class="link-https" href="https://es.wikipedia.org/wiki/Transacci%C3%B3n_%28base_de_datos%29" title="https://secure.wikimedia.org/wikipedia/en/wiki/Database_transaction">artículo correspondiente en la Wikipedia</a> y <a href="#gloss_transaction">transacción</a> en la sección de definiciones.</p> - </li> - <li> - <p><strong>La API de IndexedDB es mayormente asincrona.</strong> La API no devuelve datos regresando un valor; en cambio, es necesario pasarle una funcion como <em>callback</em>. Usted no "guarda" un valor en la base de datos, o "lee" un valor de la misma por medios síncronos. En cambio, usted "solicita" una operación a la base de datos. Un evento del DOM es utilizado para notificarle que la operación terminó, y el tipo de evento recibido le permite saber si ésta falló o si fue exitosa. Esto puede sonar complicado al comienzo, pero hay algunas medidas de sanidad incluidas por defecto. Esto no es muy distinto de cómo funciona <a href="/es/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a>.</p> - </li> - <li> - <p><strong>IndexedDB usa solicitudes en todos lados. </strong>Las solicitudes (<em>requests</em>) son objetos que reciben los eventos del DOM mencionados previamente. Éstas cuentan con las propiedades <code style="font-size: 14px;">onsuccess</code> y <code style="font-size: 14px;">onerror</code>, sobre las cuales se puede aplicar <code style="font-size: 14px;">addEventListener()</code> y <code style="font-size: 14px;">removeEventListener()</code>. Estas también tienen las propiedades <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, y <code style="font-size: 14px;">errorCode</code> que permiten conocer el estado de la solicitud. La propiedad <code style="font-size: 14px;">result</code> es particularmente mágica, dado que puede ser muchas cosas distintas, dependiendo de cómo se generó la solicitud (por ejemplo, una instancia de <code>IDBCursor</code>, o la llave de un valor recién insertado en la base de datos).</p> - </li> - <li> - <p><strong>IndexedDB usa eventos DOM para notificar cuando los resultados están disponibles.</strong> Los eventos del DOM siempre tienen una propiedad <code style="font-size: 14px;">type</code> (en IndexedDB, ésta es generalmente <code style="font-size: 14px;">"success"</code> o <code style="font-size: 14px;">"error"</code>). Los eventos del DOM también tienen una propiedad <code style="font-size: 14px;">target</code> que dice a dónde apunta el evento. En la mayoría de los casos, el <code style="font-size: 14px;">target</code> de un evento es el objeto <code style="font-size: 14px;">IDBRequest</code> que se generó como resultado de una operación sobre la base de datos. Los eventos exitosos no son pasados a los padres y no pueden ser cancelados. Por otro lado, los eventos de error son pasados a los padres del target y pueden cancelarse. Esto es importante, dado que los eventos de error cancelan cualquier transacción sobre la que estén corriendo a menos que sean cancelados.</p> - </li> - <li> - <p><strong>IndexedDB es orientada a objetos.</strong> IndexedDB no es una base de datos relacional, con tablas, filas y columnas. Esta diferencia fundamental e importante afecta la manera como usted diseña e implementa sus aplicaciones.</p> - - <p>En un almacén de datos relacional, usted podría tener una tabla que almacena una colección de filas de datos y columnas de tipos de datos con un nombre. IndexedDB, por otro lado, necesita que usted cree un almacén de objetos para un tipo de datos y sencillamente almacena objetos JavaScript en ese almacén. Cada almacén de objetos puede tener una colección de índices que hacen que la iteración y la búsqueda de elementos sea más eficiente. Si usted no está familiarizado con los sistemas de manejo de datos orientados a objetos, lea el <a class="external" href="https://es.wikipedia.org/wiki/Base_de_datos_orientada_a_objetos" title="http://en.wikipedia.org/wiki/Object_database">artículo de la Wikipedia sobre bases de datos orientadas a objetos</a>.</p> - </li> - <li> - <p><strong>IndexedDB no utiliza SQL (</strong><strong>Structured Query Language).</strong> En cambio usa consultas sobre un índice que producen un cursor. Éste puede utilizarse para iterar sobre el conjunto de resultados. Si no está familiarizado con sistemas NoSQL, lea el <a class="external" href="https://es.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">artículo de Wikipedia sobre NoSQL</a>.</p> - </li> - <li> - <p><a name="origin"><strong>IndexedDB se adhiere a una política de mismo origen</strong></a>. Un orígen es el dominio, protocolo de la capa de aplicación, y el puerto de la URL del documento donde se está ejecutando la aplicación. Cada orígen tiene su propio conjunto de bases de datos asociado. Cada base de datos tiene un nombre que la identifica dentro de un orígen.</p> - - <p>El límite de seguridad impuesto en IndexedDB prevé que las aplicaciones puedan acceder a datos de un orígen diferente. Por ejemplo, mientras una aplicación en <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> puede obtener datos desde <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, debido a que comparten un mismo orígen, esta no puede leer datos desde <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (puerto distinto) o desde <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (protocolo distinto), debido a que tienen distintos orígenes.</p> - </li> -</ul> - -<h2 id="definitions" name="definitions">Definiciones</h2> - -<p>Esta sección define y explica los términos utilizados en la API de IndexedDB.</p> - -<h3 id="database" name="database">Base de Datos</h3> - -<dl> - <dt><a name="gloss_database">base de datos</a></dt> - <dd>Un repositorio de información, típicamente compuesto de uno o más <a href="#gloss_object_store" title="#gloss_object_store"><em>almacenes de objetos</em></a>. Cada base de datos debe tener: - <ul> - <li><strong>Nombre</strong>. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).</li> - <li> - <p><strong><a href="#gloss_version"><em>Versión</em></a> actual</strong>. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.</p> - </li> - </ul> - </dd> - <dt><a name="gloss_object_store">almacén de objetos</a></dt> - <dd> - <p>El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las <em><a href="#gloss_key">llaves</a></em> en orden ascendente.</p> - - <p>Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un <em><a href="#gloss_keygenerator">generador de llaves</a></em> y una <em><a href="#gloss_keypath">ruta de llaves</a></em>. Si el almacén tiene una ruta de llaves, éste utiliza <em><a href="#gloss_inline_key">llaves en línea</a></em>; si no, utiliza <em><a href="#gloss_outofline_key">llaves fuera de línea</a></em>.</p> - - <p>Para documentación de referencia sobre los almacenes de objetos, vew <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> o <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p> - </dd> - <dt><a name="gloss_version">versión</a></dt> - <dd>Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una <em>transacción</em> <code>versionchang<em>e</em></code> y dispara el evento <code>upgradeneeded</code>. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.</dd> - <dd>Nota: Esta definición describe la <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación más actual</a>, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>, que ya ha sido marcado obsoleto y removido.</dd> - <dt><a name="gloss_database_connection">conexión a la base de datos</a></dt> - <dd>Una operación creada al abrir una <em><a href="#gloss_database">base de datos</a></em>. Una base de datos puede tener múltiples conexiónes al mismo tiempo.</dd> - <dt><a name="gloss_transaction">transacción</a></dt> - <dd> - <p>Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.</p> - - <p>Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan <a href="#scope"><em>ámbitos</em></a> que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén <code>flyingMonkey</code>, se puede iniciar una segunda que tenga como ámbito los almacenes <code>unicornCentaur</code> y <code>unicornPegasus</code>. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.</p> - - <p>Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.</p> - - <p>Los tres modos de transacción son: <code>readwrite</code>, <code>readonly</code>, y <code>versionchange</code>. La única manera de crear y borrar almacenes es usar una transacción <code>versionchange</code>. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p> - - <p>Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p> - </dd> - <dt><a name="gloss_request">solicitud</a></dt> - <dd>La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.</dd> - <dt><a name="gloss_index">índice</a></dt> - <dd> - <p>Un almacén especializado para buscar registros en otro almacén, llamado <em>almacén de objetos referenciado</em>. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.</p> - - <p>Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la <a href="#gloss_key">llave</a><em>.</em></p> - - <p>Para aprender más sobre el uso de los índices, vea <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Usando IndexedDB</a>. Para documentación de referencia, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h3 id="key" name="key">Llave y valor</h3> - -<dl> - <dt><a name="gloss_key">llave</a></dt> - <dd> - <p>Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un <em><a href="#gloss_keygenerator">generador de llaves</a></em>, una <em><a href="#gloss_keypath">ruta de llave</a></em><a>, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.</a></p> - <a> </a> - - <p><a>Una llave puede ser de uno de los siguientes tipos: </a><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">String</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">Date</a>, float, y <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" title="Array">Array</a>. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves.</p> - - <p>Como alternativa, se pueden realizar búsquedas de objetos usando un <em><a href="#gloss_index">índice</a>.</em></p> - </dd> - <dt><a name="gloss_keygenerator">generador de llaves</a></dt> - <dd>Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.</dd> - <dt><a name="gloss_inline_key">llaves en línea</a></dt> - <dd>Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una <em>ruta de llave</em>. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.</dd> - <dt><a name="gloss_outofline_key">llave fuera de línea</a></dt> - <dd>Una llave que se almacena separada del valor.</dd> - <dt><a name="gloss_keypath">ruta de llave</a></dt> - <dd>Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.</dd> - <dt><a name="gloss_value">valor</a></dt> - <dd> - <p>Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean" rel="internal" title="Boolean">booleanos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number" rel="internal" title="Number">números</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String" title="String">cadenas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date" title="Date">fechas</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object" title="Object">objetos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array" rel="internal" title="Array">arreglos</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp" rel="internal" title="RegExp">expresiones regulares</a>, <a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/undefined" title="undefined">undefined</a>, y null.</p> - - <p>Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.</p> - - <p>Se pueden almacenar <a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> y archivos. cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">especificación</a>.</p> - </dd> -</dl> - -<h3 id="range" name="range">Rango y ámbito</h3> - -<dl> - <dt>ámbito</dt> - <dd>El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.</dd> - <dt>cursor</dt> - <dd>Un mecanismo para iterar a través de múltiples registros con un <em>rango de llaves</em>. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> o <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd> - <dt>rango de llaves</dt> - <dd> - <p>Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.</p> - - <p>Para documentación de referencia sobre los rangos de llaves, vea <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h2 id="limitations" name="limitations">Limitaciones</h2> - -<p>IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:</p> - -<ul> - <li>Ordenamiento internacionalizado. No todos los idiomas ordenan las cadenas de la misma forma, por lo que el ordenamiento internacionalizado no está soportado. Aún cuando la base de datos no puede ordenar los datos respetando su idioma, usted puede ordenar los datos obtenidos de la base de datos por su cuenta.</li> - <li>Sincronización. La API no está diseñada para tomar en cuenta la sincronización con una base de datos del lado del servidor. Usted debe escribir el código de sincronización para estos casos.</li> - <li>Búsqueda de Texto Completo. La API no ofrece un equivalente al operador <span style="direction: ltr;"><code>LIKE</code> en SQL. </span></li> -</ul> - -<p>Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:</p> - -<ul> - <li>El usuario pide borrar los datos del navegador.<br> - Muchos navegadores tienen opciones que permiten al usuario eliminar todos los datos almacenados de un sitio, incluyendo cookies, marcadores, contraseñas, y datos de IndexedDB.</li> - <li>El navegador está en modo de navegación privada.<br> - Algunos navegadores tienen modos de "navegación privada" (Firefox) o "incógnito" (Chrome). Al final de la sesión, el navegador elimina la base de datos.</li> - <li>Se alcanza el límite de espacio en disco.</li> - <li>Los datos se corrompen.</li> - <li>Se realiza un cambio incompatible a ésta característica.</li> -</ul> - -<p>Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.</p> - -<div class="warning"> -<p><strong>Advertencia:</strong> Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un <a href="https://developer.mozilla.org/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets">Web App</a>. Esto requiere mayor investigación para documentarlo.</p> -</div> - -<h2 id="next" name="next">Próximo paso</h2> - -<p>Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a>.</p> - -<h2 id="Vea_también">Vea también</h2> - -<p>Especificación</p> - -<ul> - <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Especificación de la API de IndexedDB</span></a></li> -</ul> - -<p>Referencia</p> - -<ul> - <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">Referencia de la API de IndexedDB</a></li> -</ul> - -<p>Tutoriales</p> - -<ul> - <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li> - <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">Una lista de tareas sencilla usando HTML5 e IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("Este ejemplo usa una versión antigua de la especificación y no funciona en las versiones más recientes de los navegadores principales (aún utiliza el método <code>setVersion()</code>, que fue removido.") }}</span></li> -</ul> - -<p>Artículo relacionado</p> - -<ul> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — El almacén en su navegador</a></li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/append/index.html b/files/es/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 4944a7fe68..0000000000 --- a/files/es/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -<div>{{APIRef("DOM")}}</div> - -<p><code style=""><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El método </span></font><strong>ParentNode.append()</strong></code> inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de <code>ParentNode</code>. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.</p> - -<p>Diferencias con {{domxref("Node.appendChild()")}}:</p> - -<ul> - <li><code>ParentNode.append()</code> te permite también agregar objetos {{domxref("DOMString")}}, mientras que <code>Node.appendChild()</code> solo acepta objetos {{domxref("Node")}}.</li> - <li><code>ParentNode.append()</code> no tiene valor de retorno, en cambio, <code>Node.appendChild()</code> devuelve el objeto {{domxref("Node")}} agregado.</li> - <li><code>ParentNode.append()</code> puede agregar varios nodos y cadenas, mientras que <code>Node.appendChild()</code> sólo puede agregar uno.</li> -</ul> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ParentNode.append((Node or DOMString)... nodes); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.</dd> -</dl> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Node cannot be inserted at the specified point in the hierarchy.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<h3 id="Appending_an_element">Appending an element</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append(p); - -console.log(parent.childNodes); // NodeList [ <p> ] -</pre> - -<h3 id="Appending_text">Appending text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); - -console.log(parent.textContent); // "Some text"</pre> - -<h3 id="Appending_an_element_and_text">Appending an element and text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_is_unscopable"><code>ParentNode.append()</code> is unscopable</h3> - -<p>The <code>append()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - append("foo"); -} -// ReferenceError: append is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>You can polyfill the <code>append() method</code> in Internet Explorer 9 and higher with the following code:</p> - -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/children/index.html b/files/es/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index f8ae9e5831..0000000000 --- a/files/es/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - API - - DOM - - ParentNode - - Propiedad -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<p>{{ APIRef("DOM") }}</p> - -<p><code><strong>Node.children</strong></code> es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un <code>Node</code>.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children; </pre> - -<p><code><var>children</var></code> es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos <code>de <em>node</em></code>. Si no hay elementos hijos, entonces <code><var>children</var></code> no contendrá elementos y su longitud ( <code>length</code> ) será <code>0</code>.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: js">var foo = document.getElementById('foo'); -for (var i = 0; i < foo.children.length; i++) { - console.log(foo.children[i].tagName); -} -</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<pre class="brush: js">// Sobrescribe el prototipo 'children' nativo. -// Añade soporte para Document y DocumentFragment en IE9 y Safari. -// Devuelve un array en lugar de HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.children == null) { - Object.defineProperty(constructor.prototype, 'children', { - get: function() { - var i = 0, node, nodes = this.childNodes, children = []; - while (node = nodes[i++]) { - if (node.nodeType === 1) { - children.push(node); - } - } - return children; - } - }); - } -})(window.Node || window.Element); -</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definición Inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Edge</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>38.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Soporte en {{domxref("SVGElement")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Las interfaces {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos e objetos que implementan este interfaz: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/firstelementchild/index.html b/files/es/orphaned/web/api/parentnode/firstelementchild/index.html deleted file mode 100644 index c809951fdf..0000000000 --- a/files/es/orphaned/web/api/parentnode/firstelementchild/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ParentNode.firstElementChild -slug: orphaned/Web/API/ParentNode/firstElementChild -translation_of: Web/API/ParentNode/firstElementChild -original_slug: Web/API/ParentNode/firstElementChild ---- -<p>{{ APIRef("DOM") }}</p> - -<p><span style="font-family: verdana,tahoma,sans-serif;">La propiedad de sólo lectura </span><strong><code>ParentNode.firstElementChild</code></strong> retorna el primer hijo del objeto {{domxref("Element")}}, o bien <code>null</code> si no existen elementos hijos.</p> - -<div class="note"> -<p>Esta propiedada fue definida inicialmente en el interfaz puro {{domxref("ElementTraversal")}}. Como este interfaz contenía dos juegos distintos de propiedades, uno orientado a {{domxref("Node")}} que tenía hijos, y otro a aquellos que eran hijos, se trasladaron a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, <code>firstElementChild</code> fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.</p> -</div> - -<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> - -<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.firstElementChild; -</pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="brush: html"><p id="para-01"> - <span>First span</span> -</p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.firstElementChild.nodeName) -</script></pre> - -<p>En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.</p> - -<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2> - -<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:</p> - -<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js -if(!("firstElementChild" in document.documentElement)){ - Object.defineProperty(Element.prototype, "firstElementChild", { - get: function(){ - for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i) - if(n = nodes[i], 1 === n.nodeType) return n; - return null; - } - }); -}</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda definido ahora en el segundo.<br> - Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Objetos que implementan estos interfaces puros: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/index.html b/files/es/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 726bd7d0f5..0000000000 --- a/files/es/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API DOM Tab - - NeedsTranslation - - TopicStub -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<p>{{ APIRef("DOM") }}</p> - -<p>The <code><strong>ParentNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have children.</p> - -<p><code>ParentNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p> - -<p> </p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this <code>ParentNode</code>.</dd> - <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the first child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the last child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns an <code>unsigned long</code> giving the amount of children that the object has.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>There is no inherited or specific and implemented methods.</em></p> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br> - The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br> - Added the <code>children</code> property.<br> - Added the <code>append()</code> and <code>prepend()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/parentnode/lastelementchild/index.html b/files/es/orphaned/web/api/parentnode/lastelementchild/index.html deleted file mode 100644 index 621e139fb8..0000000000 --- a/files/es/orphaned/web/api/parentnode/lastelementchild/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ParentNode.lastElementChild -slug: orphaned/Web/API/ParentNode/lastElementChild -translation_of: Web/API/ParentNode/lastElementChild -original_slug: Web/API/ParentNode/lastElementChild ---- -<p>{{ APIRef("DOM") }}</p> - -<p>La propiedad de sólo lectura <code><strong>ParentNode.lastElementChild</strong></code> retorna el último hijo del objeto {{domxref("Element")}} o bien <code>null</code> si no hay elementos hijos.</p> - -<div class="note"> -<p>Esta propiedad fue inicialmente definida en el interfaz puro {{domxref("ElementTraversal")}}. Dado que este interfaz contenía dos juegos distintos de propiedades, uno dirigido al nodo {{domxref("Node")}} que tiene hijos, y otro a aquellos que son hijos, se han trasladado a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, <code>lastElementChild</code> fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.</p> -</div> - -<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxis</h2> - -<pre class="syntaxbox">var <em>childNode</em> = elementNodeReference.lastElementChild; </pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="brush: html"><p id="para-01"> - <span>First span</span> - <b>bold</b> -</p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.lastElementChild.nodeName) -</script> -</pre> - -<p>En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").</p> - -<h2 id="Polyfill_para_Internet_Explorer_8">Polyfill para Internet Explorer 8</h2> - -<p>Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:</p> - -<pre class="brush: js">// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js -if(!("lastElementChild" in document.documentElement)){ - Object.defineProperty(Element.prototype, "lastElementChild", { - get: function(){ - for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i) - if(n = nodes[i], 1 === n.nodeType) return n; - return null; - } - }); -}</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Dividido el interfaz <code>ElementTraversal</code> en {{domxref("ChildNode")}} y <code>ParentNode</code>. Este método queda ahora definido en el segundo.<br> - {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Añadida su definición inicial al interfaz puro <code>ElementTraversal</code> y lo usa en {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>Los interfaces puros {{domxref("ParentNode")}} y {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos de objetos que implementan este interfaz puro: {{domxref("Document")}}, {{domxref("Element")}}, y {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index 6ff8e52560..0000000000 --- a/files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Verificando la autenticidad usando contraseña -slug: orphaned/Web/API/Web_Crypto_API/Checking_authenticity_with_password -translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password -original_slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password ---- -<p>{{APIRef("Web Crypto API")}}{{draft}}</p> - -<p>La autenticidad del mensaje puede ser verificada usando el API Crypto Web. En este artículo mostrarémos como crear y controlar una firma digital utilizando una contraseña y una función hash.</p> - -<p>Un algoritmo HMAC toma una llave y genera un código digerido de la llave y los datos a firmar. Posteriormente, cualquiera con la llave puede volver a generar el mismo código digerido para verificar si los datos han sido alterados. Además, mediante el conocimiento de una clave secreta, permite almacenar juntos el código digerido y los datos: un atacante no podrá generar un código digerido sobre datos manipulados si no conoce la clave secreta.</p> - -<p>Note that this algorithm doesn't carry any information about the person owning the data, nor its unicity: the mere knowledge of the key is enough to alter the data.</p> - -<p>Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use <code>localforage.js</code> a small library wrapping the different storages capabilities of a browser in the same interface. This library is not an essential component of this use case and is used here for convenience, to keep focused on what really matter, the cryptographic part.</p> - -<p>The data we want to access is of the form:</p> - -<p> </p> - -<p>where <code>data</code><em> </em>is the information to guarantee the integrity and <code>signature</code> the information used to verify it.</p> - -<p>Cryptographic keys can't be remembered by heart by human, and passwords, or passphrases, make bad, that is unsecure, cryptographic key. To solve this problem, cryptographers have designed algorithms generating cryptographically-sound keys from password. Knowing the password allowed to regenerate the same key and to use it.</p> - -<p>We ask the user for a password, and we use it to generate the key:</p> - -<pre> </pre> - -<p>With that key, we will be able to compute the <em>mac</em> of the data.</p> - -<pre> </pre> diff --git a/files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html b/files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html deleted file mode 100644 index 0e8b963374..0000000000 --- a/files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ':-moz-ui-valid' -slug: orphaned/Web/CSS/:-moz-ui-valid -tags: - - CSS - - NeedsExample - - NeedsMobileBrowserCompatibility - - No estándar(2) - - Pseudo clase CSS - - Referencia CSS -translation_of: Web/CSS/:-moz-ui-valid -original_slug: Web/CSS/:-moz-ui-valid ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase</a><code> CSS:-moz-ui-valid</code> CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">restricciones de validación</a>.</p> - -<p>Se aplica siguiendo las siguientes reglas:</p> - -<ul> - <li>Se aplica la psuedo clase si el control no tiene el foco y el valor es válido.</li> - <li>Si el control tiene el foco y el valor era válido (esto incluye cuando está vacío), al obtener el foco de aplica la pseudo clase.</li> - <li>Si el control tiene el foco y el valor era inválido, una vez obtenido el foco se vuelve a validar cada vez que presionamos una tecla para ver si el nuevo valor es válido.</li> - <li>Si el elemento es requerido la reglas anteriores sólo se aplican si el usuario ha cambiado el valor o intenta enviar el formulario.</li> -</ul> - -<p>El resultado es que, si el control era válido cuando el usuario empieza a interactuar con él, el estilo de validación sólo se cambia cuando el usuario cambia el foco a otro control. Sin embargo, si el usuario está intentando corregir un campo que previamente se ha marcado como un valor inválido, cuando el control sea ya correcto esto se mostrará de manera inmediata. Los elementos requeridos sólo se marcan como inválidos si el usuario lo cambia o si lo intenta enviar con un valor inválido.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación.</p> - -<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(2)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref(":valid")}}</li> - <li>{{cssxref(":invalid")}}</li> - <li>{{cssxref(":required")}}</li> - <li>{{cssxref(":optional")}}</li> - <li>{{cssxref(":-moz-ui-invalid")}}</li> -</ul> diff --git a/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html b/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html deleted file mode 100644 index d611859f41..0000000000 --- a/files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Comenzando (tutorial CSS) -slug: orphaned/Web/CSS/Comenzando_(tutorial_CSS) -original_slug: Web/CSS/Comenzando_(tutorial_CSS) ---- -<p> </p> -<h2 id="Introducción">Introducción</h2> -<p>Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).</p> -<p>Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.</p> -<ul> <li>La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.</li> -</ul> -<ul> <li>La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.</li> -</ul> -<p>Este tutorial se base en la <a class=" external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">especificación CSS 2.1</a></p> -<h3 id="¿Quienes_deberían_usar_este_tutorial">¿Quienes deberían usar este tutorial?</h3> -<p>Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.</p> -<p>Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.</p> -<p>Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.</p> -<p>Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.</p> -<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> -<p>Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.</p> -<p>Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.</p> -<p>Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.</p> -<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> -</ul> -<p><strong>Nota: </strong> CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.</p> -<h3 id="Como_usar_este_tutorial">Como usar este tutorial</h3> -<p>Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.</p> -<p>En cada página, usa la sección <em>Información</em> para entender como funciona CSS. Usa la sección <em>Acción</em> para tratar de usar CSS en tu computadora.</p> -<p>Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.</p> -<p>Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas <em>Más detalles</em>. Usa los enlaces allí para encontrar información de referencia acerca de CSS.</p> -<h2 id="Tutorial_Parte_I">Tutorial Parte I</h2> -<p>Una guía de CSS paso a paso.</p> -<ol> <li><strong><a href="/es/CSS/Getting_Started/Que_es_css" title="es/CSS/Getting_Started/Que_es_css">Que es CSS</a></strong></li> <li><a href="/es/CSS/Getting_Started/Por_que_usar_css" title="es/CSS/Getting_Started/Por_que_usar_css"><strong>Por qué usar CSS</strong></a></li> <li><a href="/es/CSS/Getting_Started/Como_funciona_css" title="es/CSS/Getting_Started/Como_funciona_css"><strong>Como funciona CSS</strong></a></li> <li><strong><a href="/es/CSS/Getting_Started/Cascada_y_herencia" title="es/CSS/Getting_Started/Cascada_y_herencia">Cascada y herencia</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Selectores" title="es/CSS/Getting_Started/Selectores">Selectores</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/CSS_legible" title="es/CSS/Getting_Started/CSS_legible">CSS legible</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estilos_de_texto" title="es/CSS/Getting_Started/Estilos_de_texto">Estilos de texto</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Color" title="es/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Contenido" title="es/CSS/Getting_Started/Contenido">Contenido</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Listas" title="es/CSS/Getting_Started/Listas">Listas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Cajas" title="es/CSS/Getting_Started/Cajas">Cajas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estructura" title="es/CSS/Getting_Started/Estructura">Estructura</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Tablas" title="es/CSS/Getting_Started/Tablas">Tablas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Media" title="es/CSS/Getting_Started/Media">Media</a></strong></li> -</ol> -<h2 id="Tutorial_Parte_II">Tutorial Parte II</h2> -<p>Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.</p> -<ol> <li><strong><a href="/es/CSS/Getting_Started/Javascript" title="es/CSS/Getting_Started/Javascript">JavaScript</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Graficos_svg" title="es/CSS/Getting_Started/Graficos_svg">Gráficos SVG</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Data_xml" title="es/CSS/Getting_Started/Data_xml">Data XML</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/XBL_bindings" title="es/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Interfaces_de_usuario_XUL" title="es/CSS/Getting_Started/Interfaces_de_usuario_XUL">Interfaces de usuario XUL</a></strong></li> -</ol> -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/es/orphaned/web/css/como_iniciar/index.html b/files/es/orphaned/web/css/como_iniciar/index.html deleted file mode 100644 index ac3a0b3836..0000000000 --- a/files/es/orphaned/web/css/como_iniciar/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Como iniciar -slug: orphaned/Web/CSS/Como_iniciar -original_slug: Web/CSS/Como_iniciar ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/es/orphaned/web/css/linear-gradient()/index.html b/files/es/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index 94289c2695..0000000000 --- a/files/es/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: linear-gradient -slug: orphaned/Web/CSS/linear-gradient() -tags: - - CSS - - Función CSS - - Imágenes CSS - - Plantilla - - Referencia - - Web - - graficos -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumen">Resumen</h2> - -<p>La función CSS <code>linear-gradient()</code> crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("<gradient>")}}, que es una forma especial de {{cssxref("<image>")}}.</p> - -<p>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</p> - -<p>Cómo cualquier otro degradado, un degradado lineal no tiene<a href="/en/CSS/image#no_intrinsic"> dimensiones intrínsecas</a>; es decir, no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.</p> - -<p>Los gradientes lineales están definidos por un eje, la <em>línea gradiente</em>, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la <em>línea gradiente</em> tienen un único color, para cada punto de la <em>línea gradiente</em>.</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p>La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.</p> - -<p>El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.</p> - -<p>De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.</p> - -<p>Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda <em>magic corners</em> (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.</p> - -<p>Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.</p> - -<p>La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.</p> - -<p>When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it. The position can also be explicitly defined by using a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} CSS data type.</p> - -<div class="note">Gradients are defined as CSS <code><image></code> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.<br> -For this reason, <code>linear-gradient</code> won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="twopartsyntaxbox notranslate">Formal grammar: linear-gradient( [ <a href="/en-US/CSS/angle" title="angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - - where <code><side-or-corner> = [left | right] || [top | bottom]</code> - and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> -</pre> - -<pre class="notranslate">linear-gradient( 45deg, blue, red ); /* A gradient on 45deg axis starting blue and finishing red */ -linear-gradient( to left top, blue, red); /* A gradient going from the bottom right to the top left starting blue and - finishing red */ - -linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% - and finishing red */ -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br> - The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code><color-stop></code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd> - <dt><code><angle></code></dt> - <dd>An angle of direction for the gradient. See {{ cssxref("<angle>") }}.</dd> - <dt><code><color-stop></code></dt> - <dd>This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).<br> - Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd> -</dl> - -<h3 id="History_of_the_syntax">History of the syntax</h3> - -<p>The syntax of <code>linear-gradient</code> has evolved since the <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a> implemented in 2008:</p> - -<pre class="notranslate"><code>-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)</code> -</pre> - -<p>In the original syntax, the same function was used to create both linear and radial gradients. However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter. The situation became more complicated if other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications. No draft was proposed to the W3C.</p> - -<p>An alternative syntax was proposed and implemented by Mozilla in 2009. In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product. A third syntax was proposed. This third syntax simplified the syntax for linear gradients to:</p> - -<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>The new syntax did not require the <code>to()</code>, <code>from()</code>and <code>color-stop()</code> functions, so they were dropped. The order of the <code>top</code>/<code>bottom</code> and <code>left</code>/<code>right</code> keywords was also recognized as unimportant, so Mozilla removed the constraint of having <code>top</code>/<code>bottom</code> defined first. </p> - -<p>But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients. Finally, the syntax below was proposed to the W3C. Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.</p> - -<ul> - <li>The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.</li> - <li>The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.</li> -</ul> - -<p>The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):</p> - -<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("<angle>")}} | <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>This was fixed by a new syntax where the keyword are directions too, and preceded by the <code>to</code> keyword.</p> - -<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("<angle>")}} | to <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>This should be the final syntax.</p> - -<p>A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with <code>0deg</code> representing the East. To be coherent with the rest of CSS, the specification defines an angle with <code>0deg</code> representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (<code>0deg</code> = East<code>)</code>. They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the <code>to</code> keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Gradient_at_a_45_degree_angle">Gradient at a 45 degree angle</h3> - -<p>Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.</p> - -<p><img alt="lingradexample.png" class="default internal" src="/files/2843/lingradexample.png" style="height: 329px; width: 453px;"></p> - -<h3 id="Gradient_with_multiple_color_stops">Gradient with multiple color stops</h3> - -<p>If the first color-stop does not have a <code><length></code> or <code><percentage></code>, it defaults to 0%. If the last color-stop does not have a <code><length></code> or <code><percentage></code>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.</p> - -<p>Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.</p> - -<div>A rainbow made from a gradient</div> - -<pre class="notranslate">background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -</pre> - -<h3 id="Repeating_a_linear_gradient">Repeating a linear gradient</h3> - -<p>The <code>linear-gradient</code> does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.</p> - -<h3 id="Using_transparency">Using transparency</h3> - -<div>Linear with transparency</div> - -<pre class="notranslate">background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));</pre> - -<p>Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of <code>background-size</code>).</p> - -<h2 id="Notes">Notes</h2> - -<p>If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a <code>linear-gradient</code>, the gradient <a class="external" href="http://richard.milewski.org/archives/1014" title="http://richard.milewski.org/archives/1014">won't fill the browser screen unless </a>you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}</td> - <td>{{ Spec2('CSS3 Images') }}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br> - {{ CompatGeckoDesktop("16") }}</td> - <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> - <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> - <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td> - <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> - </tr> - <tr> - <td>On any properties that accept {{cssxref("<image>")}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> - </tr> - <tr> - <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td> - <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - <td>10</td> - <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td> - <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td> - </tr> - <tr> - <td>Standard syntax (using the <code>to</code> keyword)</td> - <td>16</td> - <td>26.0 (537.27)</td> - <td>10</td> - <td>12.10</td> - <td>6.1</td> - </tr> - </tbody> -</table> - -<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p> - -<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> - -<pre class="notranslate">linear-gradient(to top left, blue, red);</pre> - -<p>is almost the same as:</p> - -<pre class="notranslate">-moz-linear-gradient(bottom right, blue, red);</pre> - -<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> - -<h3 id="Cross-browser_gradients">Cross-browser gradients</h3> - -<p>Considering all prefixes above, here is a gradient from pink to green, top to bottom.</p> - -<pre class="brush: css notranslate">.grad { - background-color: #F07575; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ - background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */ - background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ -} -</pre> - -<p>The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li> - <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }};</li> - <li><a class="external" href="http://lea.verou.me/css3patterns/" title="http://leaverou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a><span class="external">;</span></li> - <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li> -</ul> diff --git a/files/es/orphaned/web/css/primeros_pasos/index.html b/files/es/orphaned/web/css/primeros_pasos/index.html deleted file mode 100644 index e9a41b9331..0000000000 --- a/files/es/orphaned/web/css/primeros_pasos/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Primeros pasos -slug: orphaned/Web/CSS/Primeros_pasos -original_slug: Web/CSS/Primeros_pasos ---- -<p> </p> -<h2 id="Introducción">Introducción</h2> -<p>Este tutorial es una introducción a las hojas de estilo en cascada (CSS).</p> -<p>Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.</p> -<ul> <li>La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.</li> -</ul> -<ul> <li>La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.</li> -</ul> -<p>El tutorial está basado en la <a class="external" href="http://www.w3.org/TR/CSS21/">especificación 2.1 de CSS 2.1</a>.</p> -<h3 id="¿Quién_debe_usar_este_tutorial">¿Quién debe usar este tutorial?</h3> -<p>Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.</p> -<p>Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.</p> -<p>Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.</p> -<p>Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.</p> -<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> -<p>Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.</p> -<p>Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.</p> -<p>Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:</p> -<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> -</ul> -<p><strong>Nota: </strong> CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.</p> -<h3 id="Cómo_usar_este_tutorial">Cómo usar este tutorial</h3> -<p>Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.</p> -<p>En cada página, usa la sección de <em>Información</em> para entender cómo funciona CSS. Usa la sección <em>Acción</em> para probar el uso de CSS en tu propio equipo.</p> -<p>Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.</p> -<p>Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título <em>Más detalles</em>. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.</p> -<h2 id="Primera_parte_del_tutorial">Primera parte del tutorial</h2> -<p>Una guía básica paso a paso de CSS.</p> -<ol> <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">What is CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Why use CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">How CSS works</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Selectors</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">Readable CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Text styles</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Lists</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Boxes</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tables</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Media</a></strong></li> -</ol> -<h2 id="Segunda_parte_del_tutorial">Segunda parte del tutorial</h2> -<p>Ejemplos que muestran el alcance del CSS en Mozilla.</p> -<ol> <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></strong></li> -</ol> -<p>{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/es/orphaned/web/css/radial-gradient()/index.html b/files/es/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index bb61f0c811..0000000000 --- a/files/es/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -tags: - - Función CSS - - Gráficos(2) - - Imagen CSS -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() ---- -<p>{{CSSRef}}</p> - -<p>La función CSS <code>radial-gradient()</code> crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (<em>center</em>) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.</p> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Los gradientes radiales son definidos por su centro (<em>center</em>), el contorno y posición de la <em>figura resultante</em> y los puntos de definición de color (<em>color stops</em>). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un <em>rayo de gradiente virtual</em> que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el <code>100%</code>. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.</p> - -<p>Las figuras resultantes solo pueden ser círculos (<code>circle</code>) o elipses (<code>ellipse</code>).</p> - -<p>Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen <a href="/es/docs/Web/CSS/image#no_intrinsic">sin dimensiones intrínsecas</a>, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.</p> - -<p>La función <code>radial-gradient</code> no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="brush: css notranslate">// Definición de la figura -radial-gradient( circle, … ) /* Sinónimo de radial-gradient( circle farthest-corner, … ) */ -radial-gradient( ellipse, … ) /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */ -radial-gradient( <em><extent-keyword></em>, … ) /* Dibuja un círculo */ -radial-gradient( circle <em>radius</em>, … ) /* Un círculo centrado con longitud dada. Puede ser un porcentaje */ -radial-gradient( ellipse <em>x-axis</em> <em>y-axis</em>, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */ - -// Definición de la posición de la figura -radial-gradient ( … at <position>, … ) - -// Definición de los stops de colores -radial-gradient ( …, <color-stop>, … ) -radial-gradient ( …, <color-stop>, <color-stop> )</pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code><position></code></dt> - <dd>Una posición ({{cssxref("<position>")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es <code>center</code>.</dd> - <dt><code><shape></code></dt> - <dd>La figura del gradiente. Puede ser un valor <code>circle</code> (que indica que la figura del gradiente es un círculo con radio constante) o <code>ellipse</code> (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es <code>ellipse</code>.</dd> - <dt><code><color-stop></code></dt> - <dd>Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("<color>")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("<percentage>")}} o {{cssxref("<length>")}} a lo largo del rayo de gradiente). Un porcentaje de <code>0%</code>, o una longitud de <code>0</code>, representan el centro del gradiente, mientras que el valor de <code>100%</code> representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.</dd> - <dt><code><extent-keyword></code></dt> - <dd>Valores clave que describen la longitud de la figura resultante. Los valores posibles son:</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>Constante</th> - <th>Descripción</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>La figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>Similar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>El tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.</td> - </tr> - </tbody> - </table> - Los borradores anteriores del estándar incluyeron otras palabras clave (<code>cover</code> y <code>contain</code>) como sinónimos de los estándares <span class="st"><code>farthest-corner</code></span> y <code>closest-side</code> respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.</dd> -</dl> - -<h3 id="Sintaxis_formal">Sintaxis formal</h3> - -<pre class="syntaxbox notranslate"><code>radial-gradient( - [ [ circle || {{cssxref("<length>")}} ] [ at {{cssxref("<position>")}} ]? , | - [ ellipse || [ <length> | {{cssxref("<percentage>")}} ]{2} ] [ at <position> ]? , | - [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | - at <position> , - ]? - <color-stop> [ , <color-stop> ]+ -) -where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side - and<code> <color-stop> = <color> [ <percentage> | <length> ]?</code> -</code></pre> - -<h2 id="Example_1" name="Example_1">Ejemplo 1</h2> - -<p>Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de turquesa (<code>#00FFFF</code>), a blanco, a azul (<code>#0000FF</code>):</p> - -<pre class="brush: css notranslate">body { - width: 100vh; - height: 100vh; - background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); -} </pre> - -<p>{{ EmbedLiveSample('Example_1') }}</p> - -<h2 id="Example_2" name="Example_2">Ejemplo 2</h2> - -<p>Este código generará un fondo de elipse in la esquina más lejana (<code>farthest-corner</code>) a <code>470px 45px</code>, cambiando el color de amarillo (<code>#FFFF80</code>), a marrón pálido, a azul pálido (<code>#E6E6FF</code>):</p> - -<pre class="brush: css notranslate">body { - width: 100vh; - height: 100vh; - background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%); -}</pre> - -<p>{{ EmbedLiveSample('Example_2') }}</p> - -<h2 id="Example_3" name="Example_3">Ejemplo 3</h2> - -<p>Este código generará un fondo de elipse en la esquina más lejana (<code>farthest-corner</code>) a <code>45px 45px</code>, cambiando el color de rojo (<code>#FF0000</code>) a azul (<code>#0000FF</code>):</p> - -<pre class="brush: css notranslate">body { - width: 100vh; - height: 100vh; - background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%); -}</pre> - -<p>{{ EmbedLiveSample('Example_3') }}</p> - -<h2 id="Example_4" name="Example_4">Ejemplo 4</h2> - -<p>Este código producirá un círculo difuso con radio de <code>16px</code>:</p> - -<pre class="brush: css notranslate">body { - width: 100vh; - height: 100vh; - background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px); -} </pre> - -<p>{{ EmbedLiveSample('Example_4') }}</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16")}}</td> - <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td> - <td>10.0<sup>[3]</sup></td> - <td>11.60{{property_prefix("-o")}}</td> - <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td> - </tr> - <tr> - <td>En {{cssxref("border-image")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>3{{property_prefix("-webkit")}}<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> - </tr> - <tr> - <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td> - <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16")}}<sup>[4]</sup></td> - <td>26</td> - <td>10.0</td> - <td>11.60{{property_prefix("-o")}}<sup>[2]</sup><br> - 2.12</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Consejos de interpolación (un porcentaje sin color)</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td>40</td> - <td> </td> - <td>27</td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}})</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("16")}}</td> - <td>10</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>En {{cssxref("border-image")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxis anterior de webkit</a> {{non-standard_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Sintaxis de <code>at</code> (sintaxis estándar final)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("16")}}</td> - <td>10</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción <code>layout.css.prefixes.gradients</code> en <code>false</code>.</p> - -<p>[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Véase también su <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">soporte actual</a> para gradientes radiales.</p> - -<p>[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva <a href="https://msdn.microsoft.com/es-es/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p>[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo <code>-webkit</code> de la función, por razones de compatibilidad, dentro de la opción <code>layout.css.prefixes.webkit</code>, con valor <code>false</code> de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es <code>true</code>.</p> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li><a href="/es/docs/CSS/Using_CSS_gradients">Usando gradientes con CSS</a>, {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}</li> - <li>Propuesta original de WebKit: <a href="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> - <li>Nueva implementación de WebKit: <a href="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li> -</ul> diff --git a/files/es/orphaned/web/css/rtl/index.html b/files/es/orphaned/web/css/rtl/index.html deleted file mode 100644 index 6497cf094d..0000000000 --- a/files/es/orphaned/web/css/rtl/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: rtl -slug: orphaned/Web/CSS/rtl -original_slug: Web/CSS/rtl ---- -<h3 id="Sumario" name="Sumario"> Sumario </h3> -<p>El valor <i>rtl</i> es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda. -</p><p><br> -</p> -<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> -<pre class="eval">div { - position: absolute; - right: 20px; - height: 200px; - border: 1px solid #000; - direction: rtl; -} -</pre> -<p><br> -</p> -<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> -<p>{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} -</p> diff --git a/files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html b/files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html deleted file mode 100644 index 0cb95888b6..0000000000 --- a/files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html +++ /dev/null @@ -1,321 +0,0 @@ ---- -title: Generador de curvas de bézier -slug: orphaned/Web/CSS/Tools/Cubic_Bezier_Generator -translation_of: Web/CSS/Tools/Cubic_Bezier_Generator -original_slug: Web/CSS/Tools/Cubic_Bezier_Generator ---- -<div id="Tool"> -<div class="hidden"> -<pre class="brush:html"><html> - <canvas id="bezier" width="336" height="336"> - </canvas> - <form> - <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> - <label for="y1">y1 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> - <label for="x2">x2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> - <label for="y2">y2 = </label><input onchange="updateCanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> - <br> - <output id="output">Log</output> - </form> -</html> - </pre> - -<pre class="brush:css">.field { - width: 40px; -} - </pre> - -<pre class="brush:js">function updateCanvas() { - - var x1 = document.getElementById('x1').value; - var y1 = document.getElementById('y1').value; - var x2 = document.getElementById('x2').value; - var y2 = document.getElementById('y2').value; - - drawBezierCurve(x1, y1, x2, y2); -} - -const radius = 4; -// Place needed to draw the rulers -const rulers = 30.5; -const margin = 10.5; -const basic_scale_size = 5; // Size of 0.1 tick on the rulers -var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated -var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged - -function initCanvas() { - // get the canvas element using the DOM - var canvas = document.getElementById('bezier'); - - // Make sure we don't execute when canvas isn't supported - if (canvas.getContext) { - // use getContext to use the canvas for drawing - var ctx = canvas.getContext('2d'); - - scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); - - canvas.onmousedown = mouseDown; - canvas.onmouseup = mouseUp; - } else { - alert('You need Safari or Firefox 1.5+ to see this demo.'); - } -} - -function cX(x) { - return x * scaling + rulers; -} - -function reverseX(x) { - return (x - rulers) / scaling; -} - -function lX(x) { - //Used when drawing vertical lines to prevent subpixel blur - var result = cX(x); - return Math.round(result) == result ? result + 0.5 : result; -} - -function cY(y) { - - return (1 - y) * scaling + margin; -} - -function reverseY(y) { - return (margin - y) / scaling + 1; -} - -function lY(y) { - // Used when drawing horizontal lines to prevent subpixel blur - var result = cY(y); - return Math.round(result) == result ? result + 0.5 : result; -} - -function drawBezierCurve(x1, y1, x2, y2) { - - // get the canvas element using the DOM - var canvas = document.getElementById('bezier'); - - // Make sure we don't execute when canvas isn't supported - if (canvas.getContext) { - - // use getContext to use the canvas for drawing - var ctx = canvas.getContext('2d'); - - - - // Clear canvas - ctx.clearRect(0, 0, canvas.width, canvas.height); - - // Draw the rulers - ctx.beginPath(); - ctx.strokeStyle = "black"; - - // Draw the Y axis - ctx.moveTo(cX(0), cY(0)); - ctx.lineTo(cX(1), cY(0)); - ctx.textAlign = "right"; - - for (var i = 0.1; i <= 1; i = i + 0.1) { - ctx.moveTo(-basic_scale_size + cX(0), lY(i)); - if ((i == 0.5) || (i > 0.9)) { - ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i)); - ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4); - // Limitation the constant 4 should be font size dependant - } - ctx.lineTo(cX(0), lY(i)); - } - ctx.stroke(); - ctx.closePath(); - ctx.beginPath(); - - // Draw the Y axis label - ctx.save(); - ctx.rotate(-Math.PI / 2); - ctx.textAlign = "left"; - ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0)); - ctx.restore(); - - // Draw the X axis - ctx.moveTo(cX(0), cY(0)); - ctx.lineTo(cX(0), cY(1)); - ctx.textAlign = "center"; - for (i = 0.1; i <= 1; i = i + 0.1) { - ctx.moveTo(lX(i), basic_scale_size + cY(0)); - if ((i == 0.5) || (i > 0.9)) { - ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0)); - ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0)); - // Limitation the constant 4 should be dependant of the font size - } - ctx.lineTo(lX(i), cY(0)); - } - - // Draw the X axis label - ctx.textAlign = "left"; - ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0)); - // Limitation the constant 4 should be dependant of the font size - ctx.stroke(); - ctx.closePath(); - - // Draw the Bézier Curve - ctx.beginPath(); - ctx.moveTo(cX(0), cY(0)); - ctx.strokeStyle = 'blue'; - ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1)); - ctx.stroke(); - ctx.closePath(); - - - - // Draw the P2 point (with a line to P0) - ctx.beginPath(); - ctx.strokeStyle = 'red'; - ctx.moveTo(cX(x1), cY(y1)); - ctx.lineTo(cX(0), cY(0)); - ctx.stroke(); - ctx.closePath(); - ctx.beginPath(); - ctx.moveTo(cX(x1), cY(y1)); - ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI); - ctx.stroke(); - ctx.fillStyle = 'white'; - ctx.fill(); - ctx.closePath(); - - - - // Draw the P3 point (with a line to P1) - ctx.beginPath(); - ctx.strokeStyle = 'red'; - ctx.moveTo(cX(x2), cY(y2)); - ctx.lineTo(cX(1), cY(1)); - ctx.stroke(); - ctx.closePath(); - - ctx.beginPath(); - ctx.moveTo(cX(x2), cY(y2)); - ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI); - ctx.stroke(); - ctx.fill(); - ctx.closePath(); - - // Draw the P1(1,1) point (with dashed hints) - ctx.beginPath(); - ctx.moveTo(cX(1), cY(1)); - ctx.strokeStyle = 'lightgrey'; - ctx.lineTo(cX(0), cY(1)); - ctx.moveTo(cX(1), cY(1)); - ctx.lineTo(cX(1), cY(0)); - ctx.stroke(); - ctx.closePath(); - - ctx.beginPath(); - ctx.strokeStyle = "black"; - ctx.fillStyle = "black"; - ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI); - ctx.fill(); - ctx.stroke(); - ctx.closePath(); - - - // Draw the P0(0,0) point - ctx.beginPath(); - ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI); - ctx.fill(); - ctx.stroke(); - ctx.closePath(); - - - } else { - alert('You need Safari or Firefox 1.5+ to see this demo.'); - } -} - -function mouseDown(e) { - - var canvas = document.getElementById('bezier'); - - var x1 = cX(document.getElementById('x1').value); - var y1 = cY(document.getElementById('y1').value); - - var x = e.pageX - canvas.offsetLeft; - var y = e.pageY - canvas.offsetTop; - - var output = document.getElementById('output'); - output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")"; - - - if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) { - var output = document.getElementById('output'); - output.value = "P1!"; - dragSM = 1; - } - - var x2 = cX(document.getElementById('x2').value); - var y2 = cY(document.getElementById('y2').value); - - if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) { - var output = document.getElementById('output'); - output.value = "P2!"; - dragSM = 2; - } - - // If we are starting a drag - if (dragSM != 0) { - canvas.onmousemove = mouseMove; - } -} - -function mouseUp(e) { - - var output = document.getElementById('output'); - output.value = "Mouse up!"; - dragSM = 0; - canvas.onmousemove = null; -} - -function mouseMove(e) { - if (dragSM != 0) { - var canvas = document.getElementById('bezier'); - - var x = e.pageX - canvas.offsetLeft; - var y = e.pageY - canvas.offsetTop; - - var output = document.getElementById('output'); - output.value = "Drag!"; - - if (dragSM == 1) { - var x1 = document.getElementById('x1'); - var y1 = document.getElementById('y1'); - x1.value = reverseX(x); - x1.value = Math.round(x1.value * 10000) / 10000; - y1.value = reverseY(y); - y1.value = Math.round(y1.value * 10000) / 10000; - if (x1.value < 0) { x1.value = 0; } - if (x1.value > 1) { x1.value = 1; } - } else if (dragSM == 2) { - var x2 = document.getElementById('x2'); - var y2 = document.getElementById('y2'); - x2.value = reverseX(x); - x2.value = Math.round(x2.value * 10000) / 10000; - y2.value = reverseY(y); - y2.value = Math.round(y2.value * 10000) / 10000; - if (x2.value < 0) { x2.value = 0; } - if (x2.value > 1) { x2.value = 1; } - } - updateCanvas(); - } -} - -initCanvas(); -updateCanvas(); - </pre> -</div> - -<p>{{draft}}</p> - -<p>Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!</p> - -<p>{{EmbedLiveSample("Tool", 1000, 2000)}}</p> -</div> - -<p> </p> diff --git a/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 057a0273fa..0000000000 --- a/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Creación y activación de eventos (Event) -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - Guía - - JavaScript - - Sintetico - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.</p> - -<h2 id="Crear_eventos_personalizados">Crear eventos personalizados</h2> - -<p> Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Escucha para el evento. -elem.addEventListener('build', function (e) { ... }, false); - -// Disparar event. -elem.dispatchEvent(event);</pre> - -<p>El codigo de ejemplo de arriba usa el metodo <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a>. </p> - -<p>Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.</p> - -<h3 id="Adición_de_datos_personalizados_con_CustomEvent_()">Adición de datos personalizados con CustomEvent ()</h3> - -<p> Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.<br> - <span style="line-height: 1.5;">Por Ejemplo, </span>el evento se puede crear de la siguiente manera<span style="line-height: 1.5;">:</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p> Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (<span style="line-height: 19.0909080505371px;">event listener</span>):</p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="La_Forma_Antigua">La Forma Antigua</h3> - -<p> El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:</p> - -<pre class="brush: js">// Creamos el evento. -var event = document.createEvent('Event'); - -/* Definimos el nombre del evento que es 'build'.*/ -event.initEvent('build', true, true); - -// Asignamos el evento. -document.addEventListener('build', function (e) { - // e.target matches document from above -}, false); - -// target can be any Element or other EventTarget. -document.dispatchEvent(event); - -</pre> - -<h2 id="El_disparo_incorporado_eventos">El disparo incorporado eventos</h2> - -<p> Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: </p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - var cb = document.getElementById('checkbox'); - var canceled = !cb.dispatchEvent(event); - if (canceled) { - // A handler called preventDefault. - alert("canceled"); - } else { - // None of the handlers called preventDefault. - alert("not canceled"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidad con los Navegadores</h2> - -<h2 id="sect1"> </h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Chrome</th> - <th style="line-height: 16px;">Firefox (Gecko)</th> - <th style="line-height: 16px;">Internet Explorer</th> - <th style="line-height: 16px;">Opera</th> - <th style="line-height: 16px;">Safari (WebKit)</th> - </tr> - <tr> - <td><code>Event()</code> constructor</td> - <td>15</td> - <td>11</td> - <td>{{ CompatNo() }}</td> - <td>11.60</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Android</th> - <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> - <th style="line-height: 16px;">IE Phone</th> - <th style="line-height: 16px;">Opera Mobile</th> - <th style="line-height: 16px;">Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/es/orphaned/web/guide/events/event_handlers/index.html b/files/es/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 1c298b7826..0000000000 --- a/files/es/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Manejadores de eventos en el DOM -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<p><span class="seoSummary">La plataforma Web provee varias formas de recibir notificaciones de los eventos del <a href="/en-US/docs/Web/Events">DOM</a>. Dos de las formas más comunes son: la general {{domxref("EventTarget.addEventListener", "addEventListener()")}} y un conjunto específico de controladores de eventos específicos.</span> Esta página se enfoca en los detalles de cómo funcionan estos.</p> - -<h3 id="Registering_on-event_handlers">Registering <em>on-event</em> handlers</h3> - -<p>Los controladores <em><strong>on-event</strong></em> son un grupo de propiedades ofrecidas por los elementos del DOM para ayudar a manejar cómo los elementos reaccionan a los eventos. Los elementos pueden ser interactivos (por ejemplo: enlaces, botones, imagenes, formularios) or non-interactive (e.g. the base document). Los eventos pueden ser cuando se haga un click, detectar cuando se presione una tecla, enfocarse, entre otros. Los handlers on-event son comunmente denominados como el evento al cual deben reaccionar, como ser <code>onclick</code>, <code>onkeypress</code>, <code>onfocus</code>, etc.</p> - -<p>Pueden especificar un controlador de evento <code>on<...></code> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:</p> - -<ul> - <li>Usando el HTML {{Glossary("atributo")}} llamados <code>on<em>{eventtype}</em></code> en un elemento, por ejemplo:<br> - <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> - <li>O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:<br> - <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> -</ul> - -<p>Un controlador onevent</p> - -<p>Notese que cada objeto puede tener sólo un controlador <em>on-event</em> para un evento dado (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.</p> - -<p>Also note that <em>on-event</em> handlers are called automatically, not at the programmer's will (although you can, like <code>mybutton.onclick(myevent); ) </code>since they serve more as placeholders to which a real handler function can be <strong>assigned</strong>.</p> - -<h3 id="Non-element_objects">Non-element objects</h3> - -<p>Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:</p> - -<pre class="notranslate">xhr.onprogress = function() { ... }</pre> - -<h2 id="Details">Details</h2> - -<h3 id="The_value_of_HTML_on<...>_attributes_and_corresponding_JavaScript_properties">The value of HTML on<...> attributes and corresponding JavaScript properties</h3> - -<p>A handler registered via an <code>on<...></code> attribute will be available via the corresponding <code>on<...></code> property, but not the other way around:</p> - -<pre class="brush: html notranslate"><div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div> - -<script> -window.onload = function () { - var div = document.getElementById("a"); - console.log("Attribute reflected as a property: ", div.onclick.toString()); - // Prints: function onclick(event) { alert('old') } - div.onclick = function() { alert('new') }; - console.log("Changed property to: ", div.onclick.toString()); - // Prints: function () { alert('new') } - console.log("Attribute value is unchanged: ", div.getAttribute("onclick")); - // Prints: alert('old') -} -</script></pre> - -<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)</p> - -<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> - -<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> - -<ul> - <li><code>event</code> - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as string.</li> -</ul> - -<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">the this keyword documentation</a>.</p> - -<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> - -<p>TBD (non-capturing listener)</p> - -<h3 id="Terminology">Terminology</h3> - -<p>The term <strong>event handler</strong> may be used to refer to:</p> - -<ul> - <li>any function or object registered to be notified of events,</li> - <li>or, more specifically, to the mechanism of registering event listeners via <code>on...</code> attributes in HTML or properties in web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { /* ... */ }</code>.</li> -</ul> - -<p>When discussing the various methods of listening to events,</p> - -<ul> - <li><strong>event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},</li> - <li>whereas <strong>event handler</strong> refers to a function registered via <code>on...</code> attributes or properties.</li> -</ul> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<h3 id="Event_handler_changes_in_Firefox_9">Event handler changes in Firefox 9</h3> - -<p>In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.</p> - -<p>Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.</p> - -<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> - -<p>You can now detect the presence of an event handler property (that is, for example, <code>onload</code>), using the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> - -<pre class="brush: js notranslate">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> - -<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects; that means you can't, for example, change <code>Window.prototype.onload</code> anymore. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> diff --git a/files/es/orphaned/web/guide/events/index.html b/files/es/orphaned/web/guide/events/index.html deleted file mode 100644 index f9469eba26..0000000000 --- a/files/es/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> -<p>Everything you need to know about events will go under here. We're working on cleanup here now.</p> -<h2 id="Docs">Docs</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html deleted file mode 100644 index d6e7708621..0000000000 --- a/files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Explicación de los datos de orientación y movimiento -slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained -original_slug: Web/Guide/Events/Orientation_and_motion_data_explained ---- -<p>{{ Draft() }}</p> -<h2 id="Sumario">Sumario</h2> -<p>Cuando se utiliza la orientación y los eventos de movimiento, es importante entender cuáles son los significados de los valores en el navegador. En este artículo se proporciona información acerca de los sistemas de coordenadas en el juego y la forma de usarlos.</p> -<div class="warning"> - <p><strong>Atención:</strong> Actualmente, Firefox y Chrome no soporta la orientación de la misma forma. Ten cuidado con esto cuando sea imprementado en un navegador u otro.</p> -</div> -<h2 id="Acerca_de_los_marcos_de_coordenadas">Acerca de los marcos de coordenadas</h2> -<p>Un marco de coordenadas en un sistema en el que la orientacion de los tres ejers (X, Y y Z) se definen en referencia a un objeto. Hay dos marcos de coordenadas a considerar cuando se utiliza eventos de orientación y el movimiento:</p> -<h3 id="Marco_de_coordenadas_terrestres">Marco de coordenadas terrestres</h3> -<p>El marco de coordenadas de terrestres es el sistema de coordenadas fijado en el centro de la Tierra, es decir, los ejes están alineados sobre la base de la fuerza de la gravedad y la orientación norte magnético estándar. Utilizamos las letras mayúsculas ("X", "Y" y "Z") para describir los ejes del sistema de coordenadas terrestre.</p> -<ul> - <li>El eje <strong>X</strong> sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).</li> - <li>El eje <strong>Y</strong> sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.</li> - <li>El eje <strong>Z</strong> es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).</li> -</ul> -<p> </p> -<p><img alt="" src="http://upload.wikimedia.org/wikipedia/commons/f/f6/Cartesian_xyz.png" style="width: 200px; height: 153px;"></p> -<p> </p> -<h3 id="Marco_de_coordenadas_del_dispositivo">Marco de coordenadas del dispositivo</h3> -<p>El marco de coordenadas del dispositivo es el marco de la coordinación fijada en el centro del dispositivo. Utilizamos letras minúsculas ("x", "y" y "z") para describir los ejes de las coordenadas del del dispositivo</p> -<p><img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png" style=""></p> -<ul> - <li>El eje <strong>x</strong> está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.</li> - <li>El eje <strong>y</strong> está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.</li> - <li>El eje <strong>z</strong> es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.</li> -</ul> -<div class="note"> - <strong>Nota:</strong> En un teléfono o tableta, la orientación del dispositivo siempre se considera en relación con la orientación estándar de la pantalla, lo que es la orientación "retrato" en la mayoría de los dispositivos. En una computadora portátil, la orientación se considera en relación con el teclado. Si desea detectar cambios en la orientación del dispositivo con el fin de compensar, se puede utilizar el evento orientationChange.</div> -<h2 id="Sobre_la_rotación">Sobre la rotación</h2> -<p>La rotación se describe alrededor de cualquier eje dado en términos del número de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra, y se mide en grados.</p> -<h3 id="Alpha">Alpha</h3> -<p>Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:</p> -<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png" style=""></p> -<p>El ángulo alfa es de 0 °, cuando la parte superior del dispositivo se apunta directamente hacia el polo norte de la Tierra, y aumenta a medida que el dispositivo se gira hacia la izquierda.</p> -<h3 id="Beta">Beta</h3> -<p>Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:</p> -<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p> -<p>El ángulo beta es de 0 ° en la parte superior e inferior del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 180 ° como el dispositivo se inclina hacia adelante y disminuye hacia -180 ° como el dispositivo se inclina hacia atrás.</p> -<h3 id="Gamma">Gamma</h3> -<p>Rotación alrededor del eje Y - es decir, la inclinación del dispositivo hacia la izquierda o hacia la derecha - hace que el ángulo de giro gamma cambie:</p> -<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p> -<p>El ángulo gamma es 0 °, cuando los lados izquierdo y derecho del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 90 ° como el dispositivo se inclina hacia la derecha, y hacia -90 ° como el dispositivo se inclina hacia el izquierda.</p> diff --git a/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index 160d590380..0000000000 --- a/files/es/orphaned/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Validación de restricciones -slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation -tags: - - CSS - - Guía - - HTML5 - - NecesitaContenido - - Selectores -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: Web/Guide/HTML/HTML5/Constraint_validation ---- -<p>La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza.<a href="/es/docs/HTML/HTML5" title="en/HTML/HTML5"> HTML5</a> introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y <em>validación de restricciones</em> para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la <a href="/es/docs/HTML/HTML5/Formularios_en_HTML5#Validaci.C3.B3n_restringida" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">API de Validación de Restricciones</a> de HTML.</p> - -<div class="note"><strong>Nota:</strong> La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones <em>de lado del servidor</em>. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.</div> - -<h2 id="Restricciones_intrínsecas_y_básicas">Restricciones intrínsecas y básicas</h2> - -<p>En HTML5, las restricciones básicas son declaradas de dos formas:</p> - -<ul> - <li>Eligiendo el valor semánticamente más apropiado para el atributo {{ htmlattrxref("type", "input") }} del elemento {{ HTMLElement("input") }}, por ejemplo, elegir el tipo <span style="font-family: courier new;">email</span> creará automáticamente la restricción para verificar que el valor sea una dirección de correo electrónico válida.</li> - <li>Estableciendo valores a los atributos de validación, permitiendo que se describan restricciones básicas de manera simple, sin la necesidad de JavaScript.</li> -</ul> - -<h3 id="Tipos_de_captura_semánticos">Tipos de captura semánticos</h3> - -<p>Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tipo de input</th> - <th scope="col">Descripción</th> - <th scope="col">Incumplimiento asociado</th> - </tr> - </thead> - <tbody> - <tr> - <td><span style="font-family: courier new;"><input type="URL"></span></td> - <td>El valor debe ser una URL absoluta, es decir, una de las siguientes: - <ul> - <li>una URI válida (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> - <li>una IRI válida, sin un componente de query (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - </ul> - </td> - <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> - </tr> - <tr> - <td> <span style="font-family: courier new;"><input type="email"></span></td> - <td>El valor debe obedecer a la producción <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a>: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> donde: - <ul> - <li><code>atext</code> está definido en <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, y representa una letra US-ASCII (<span style="font-family: courier new;">A</span>-<span style="font-family: courier new;">Z</span> y <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), un dígito (<span style="font-family: courier new;">0</span>-<span style="font-family: courier new;">9</span>) o uno de los siguientes caracteres especiales: <span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~</span>,</li> - <li><code>ldh-str</code> está definido en <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, y representa letras US-ASCII, combinadas con dígitos y el símbolo <span style="font-family: courier new;">-</span> agrupados en palabras separadas por un punto (<span style="font-family: courier new;">.</span>).</li> - </ul> - - <div class="note"><strong>Nota:</strong> si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por <strong>tipo no coincidente</strong>.</div> - </td> - <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> - </tr> - </tbody> -</table> - -<p>Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. </p> - -<h3 id="Atributos_relacionados_con_validaciones">Atributos relacionados con validaciones</h3> - -<p>Los siguientes atributos son usados para describir restricciones básicas:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Atributo</th> - <th scope="col">Tipos de input que soportan el atributo</th> - <th scope="col">Valores posibles</th> - <th scope="col">Descripción</th> - <th scope="col">Incumplimiento asociado</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ htmlattrxref("pattern", "input") }}</td> - <td>text, search, url, tel, email, password</td> - <td>Una expresión regular de JavaScript (compilada con las banderas <code title="">global</code>, <code title="">ignoreCase</code>, y <code title="">multiline</code> de ECMAScript 5 <em>desabilitadas</em>)</td> - <td>El valor debe coincidir con el patrón.</td> - <td>Incumplimiento de restricción por <strong>incompatibilidad de patrones (Pattern mismatch)</strong></td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> - <td>range, number</td> - <td>Un número válido</td> - <td rowspan="3">El valor debe ser mayor o igual al de este atributo.</td> - <td rowspan="3">Incumplimiento de restricción por <strong>flujo insuficiente (Underflow)</strong></td> - </tr> - <tr> - <td>date, month, week</td> - <td>Una fecha válida</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Una fecha y hora válidos</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> - <td>range, number</td> - <td>Un número válido</td> - <td rowspan="3">El valor debe ser menor o igual al de este atributo</td> - <td rowspan="3">Incumplimiento de restricción por <strong>desborde (Overflow)</strong></td> - </tr> - <tr> - <td>date, month, week</td> - <td>Una fecha válida</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Una fecha y hora válidos</td> - </tr> - <tr> - <td>{{ htmlattrxref("required", "input") }}</td> - <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}</td> - <td><em>ninguno</em>, pues éste es un atributo de tipo Boolean: su presencia representa <em>true</em>, y su ausencia representa <em>false</em></td> - <td>Debe tener un valor (si se establece).</td> - <td>Incumplimiento de restricción por<strong> ausencia (Missing)</strong></td> - </tr> - <tr> - <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> - <td>date</td> - <td>Un número entero de días</td> - <td rowspan="5">A menos que se establezca el atributo con la literal <span style="font-family: courier new;">any</span>, el valor debe ser <strong>min</strong> + un enter múltiplo del valor de este atributo.</td> - <td rowspan="5">Incumplimiento de restricción por<strong> inconsistencia de paso (Step mismatch)</strong></td> - </tr> - <tr> - <td>month</td> - <td>Un número entero de meses</td> - </tr> - <tr> - <td>week</td> - <td>Un número entero de semanas</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>Un número entero de segundos</td> - </tr> - <tr> - <td>range, number</td> - <td>Un entero</td> - </tr> - <tr> - <td>{{ htmlattrxref("maxlength", "input") }}</td> - <td>text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}</td> - <td>Una longitud en enteros</td> - <td>El número de caracteres (puntos de código) no debe exceder el valor del atributo.</td> - <td>Incumplimiento de restricción por ser<strong> muy largo (Too long)</strong></td> - </tr> - </tbody> -</table> - -<h2 id="Proceso_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Proceso de validación de restricciones</span></h2> - -<p>La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:</p> - -<ul> - <li>Invocando a la función <code>checkValidity()</code> de una interfaz <a href="/es/docs/DOM" title="en/DOM">DOM</a> relacionada con formas (<code><a href="/es/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/es/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/es/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> o <code><a href="/es/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), la cual evalúa las restricciones para este elemento únicamente, permitiendo que un script obtenga esta información. (Esto lo hace comúnmente el agente usuario cuando determina cuál de las pseudo-clases <a href="/es/docs/Web/CSS" title="en/CSS">CSS</a>, {{ Cssxref(":valid") }} o {{ Cssxref(":invalid") }}, se aplicará.)</li> - <li>Invocando a la función <code>checkValidity()</code> en la interfaz <code><a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code>, llamada <em>validación estática de restricciones</em>.</li> - <li>Enviando el formulario en sí, llamado <em>validación interactiva de restricciones</em>.</li> -</ul> - -<div class="note"><strong>Nota: </strong> - -<ul> - <li>Si se establece el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, la validación interactiva de las restricciones no se aplica.</li> - <li>Invocando al método <code>send()</code> en la interfaz <a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> no invoca a la validación de restricciones. en otras palabras, este método envía los datos del formulario al servidor aunque no se satisfagan las restricciones.</li> -</ul> -</div> - -<h2 id="Restricciones_complejas_usando_la_API_de_Restricciones_de_HTML5"><span class="author-g-by4vjwmiwjiydpj7">Restricciones complejas usando la API de Restricciones de HTML5</span></h2> - -<p><span class="author-g-by4vjwmiwjiydpj7">Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.</span></p> - -<p><span class="author-g-by4vjwmiwjiydpj7">Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como <strong>onchange</strong>) para calcular si la restricción no se cumple, y entonces usar el método <code><em>field</em>.setCustomValidity()</code> para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.</span></p> - -<h3 id="Restricciones_que_combinan_varios_campos_Validación_de_código_postal">Restricciones que combinan varios campos: Validación de código postal</h3> - -<p>El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como <code>D-</code> en Alemania, <code>F-</code> en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.</p> - -<div class="note"> -<p><strong>Nota:</strong> Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.</p> -</div> - -<p><span style="line-height: 1.5;">Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:</span></p> - -<pre class="brush: html notranslate"><form> - <label for="ZIP">Código postal : </label> - <input type="text" id="ZIP"> - <label for="Country">País : </label> - <select id="Country"> - <option value="ch">Suiza</option> - <option value="fr">Francia</option> - <option value="de">Alemania</option> - <option value="nl">Países Bajos</option> - </select> - <input type="submit" value="Validar"> -</form></pre> - -<p>Esto mostrará el siguiente formulario: </p> - -<p><label>Código Postal : </label><input> <label>Country: </label><select><option value="ch">Suiza</option><option value="fr">Francia</option><option value="de">Alemania</option><option value="nl">Países Bajos</option></select></p> - -<p>Primero, escribimos una función que revisará las restricciones en sí:</p> - -<pre class="brush: js notranslate">function checkZIP() { - // Para cada país, se define el patrón para el código postal - var constraints = { - ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ], - fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ], - de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ], - nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$', - "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ] - }; - - // Se lee el ID del país - var country = document.getElementById("Country").value; - - // Se obtiene el campo del código postal - var ZIPField = document.getElementById("ZIP"); - - // Se crea el validador de la restricción - var constraint = new RegExp(constraints[country][0], ""); - console.log(constraint); - - - // ¡Se hace la revisión! - if (constraint.test(ZIPField.value)) { - // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo - ZIPField.setCustomValidity(""); - } - else { - // El código postal no cumple la restricción, usamos la API de Restricciones para - // dar un mensaje sobre el formato requerido para este país - ZIPField.setCustomValidity(constraints[country][1]); - } -} -</pre> - -<p>Entonces, enlazamos este código al evento <strong>onchange</strong> del elemento {{ HTMLElement("select") }} y al evento <strong>oninput</strong> del elemento {{ HTMLElement("input") }}:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>Puedes ver <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">aquí un ejemplo en vivo</a> de la validación de código postal.</p> - -<h3 id="Limitando_el_tamaño_de_un_archivo_antes_de_ser_subido">Limitando el tamaño de un archivo antes de ser subido</h3> - -<p>Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.</p> - -<p>Aquí está la parte de HTML:</p> - -<pre class="brush: html notranslate"><label for="FS">Selecciona un archivo menor a 75KB : </label> -<input type="file" id="FS"></pre> - -<p>Esto muestra lo siguiente:</p> - -<p><label>Seleciona un archivo menor a 75KB : </label> <input></p> - - - -<p>Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:</p> - -<pre class="brush: js notranslate">function checkFileSize() { - var FS = document.getElementById("FS"); - var files = FS.files; - - // Si hay (por lo menos) un archivo seleccionado - if (files.length > 0) { - if (files[0].size > 75 * 1024) { // Validar la restricción - FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB"); - return; - } - } - // No hay incumplimiento de la restricción - FS.setCustomValidity(""); -}</pre> - - - -<p>Finalmente, anclamos el método al evento requerido:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>Puedes ver <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">aquí un ejemplo en vivo</a> de la validación de tamaño de archivos.</p> - -<h2 id="Estilos_visuales_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Estilos visuales de validación de restricciones</span></h2> - -<p>Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.</p> - -<h3 id="Controlando_el_aspecto_de_los_elementos">Controlando el aspecto de los elementos</h3> - -<p>El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.</p> - -<h4 id="Pseudo-clases_required_y_optional">Pseudo-clases :required y :optional</h4> - -<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> y <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.</p> - -<h4 id="Pseudo-clase_-moz-placeholder">Pseudo-clase :-moz-placeholder</h4> - -<p>Véase <a href="/es/docs/Web/CSS/::placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">::placeholder</a> (experimental).</p> - -<h4 id="Pseudo-clases_valid_invalid">Pseudo-clases :valid :invalid</h4> - -<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> e <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.</p> - -<h4 id="Estilos_predeterminados">Estilos predeterminados</h4> - -<h3 id="Controlando_el_texto_de_incumplimiento_de_restricciones">Controlando el texto de incumplimiento de restricciones</h3> - -<h4 id="El_atributo_x-moz-errormessage">El atributo x-moz-errormessage</h4> - -<p>El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.</p> - -<div class="note"> -<p style="margin-left: 40px;">Nota: Esta extensión no es estándar.</p> -</div> - -<h4 id="element.setCustomValidity_de_la_API_de_Validación_de_Restricciones">element.setCustomValidity() de la API de Validación de Restricciones</h4> - -<p>El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.</p> - -<h4 id="Objeto_ValidityState_de_la_API_de_Validación_de_Restricciones"><span class="author-g-by4vjwmiwjiydpj7">Objeto ValidityState</span> de la API de Validación de Restricciones</h4> - -<p>La interfaz de DOM <code><a href="/es/docs/Web/API/ValidityState">ValidityState</a></code><a href="/es/docs/Web/API/ValidityState"> </a>representa los <em>estados de validez</em> en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.</p> - -<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> - -<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> - -<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> - -<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> - -<h2 id="Conclusión"><span class="author-g-by4vjwmiwjiydpj7">Conclusión</span></h2> diff --git a/files/es/orphaned/web/guide/html/html5/html5_parser/index.html b/files/es/orphaned/web/guide/html/html5/html5_parser/index.html deleted file mode 100644 index 5548e129ac..0000000000 --- a/files/es/orphaned/web/guide/html/html5/html5_parser/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Analizador de HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/HTML5_Parser -tags: - - HTML - - HTML5 - - para_revisar -translation_of: Web/Guide/HTML/HTML5/HTML5_Parser -original_slug: Web/Guide/HTML/HTML5/HTML5_Parser ---- -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">{{ gecko_minversion_header("2") }}{{ draft() }}</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Gecko 2 introduce un nuevo analizador basado en HTML 5.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El nuevo analizador presenta estas mejoras importantes:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El análisis se hace ahora en un tema aparte del hilo principal de la interfaz de usuario de Firefox, mejorando la capacidad de respuesta global del navegador.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Las llamadas a <code>innerHTML</code> son mucho más rápidas.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Se han corregido <a class="external" href="http://tinyurl.com/html-parser-bugs" title="http://tinyurl.com/html-parser-bugs">decenas de errores relacionados desde hace tiempo con el analizador</a>.</span></span></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La <a class="external" href="http://www.w3.org/TR/html5/" title="http://www.w3.org/TR/html5/">especificación de HTML 5</a> ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.</span></span></p> -<h2 id="Conductas_del_analizador_modificadas"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Conductas del analizador modificadas</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.</span></span></p> -<h3 id="Tokenización_del_ángulo_izquierdo_del_soporte_dentro_de_una_etiqueta"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Tokenización del ángulo izquierdo del soporte dentro de una etiqueta</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Teniendo en cuenta la cadena <code><foo<bar></code> , el nuevo analizador la lee como una etiqueta llamada <code>foo<bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, <code>foo</code> y <code>bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.</span></span></p> -<h3 id="Llamar_a_document.write_()_durante_el_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Llamar a document.write () durante el análisis</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Antes de HTML5, Gecko y WebKit permitían las llamadas a <a href="/en/DOM/document.write" title="en/DOM/document.write"><code>document.write()</code></a> <em>durante el análisis</em> para insertar contenido en la secuencia de origen.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento daba lugar inherentemente a <a class="external" href="http://en.wikipedia.org/wiki/Race_condition" title="http://en.wikipedia.org/wiki/Race_condition">condiciones de carrera</a>, puesto que el contenido se insertaba, </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">en la secuencia de origen, en</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"> un punto dependiente de los tiempos de ejecución.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En IE, este tipo de llamadas son ignoradas o implican una llamada a <a href="/en/DOM/document.open" title="en/DOM/document.open"><code>document.open()</code></a>, sustituyendo el documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En HTML5, <code>document.write()</code> sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos <code><a href="/En/HTML/Element/Script#attr_async" title="En/HTML/Element/Script#attr async">async</a></code> o <code><a href="/En/HTML/Element/Script#attr_defer" title="En/HTML/Element/Script#attr defer">defer</a></code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Con el analizador de HTML 5, las llamadas a <code>document.write()</code> en cualquier otro contexto o se ignoran o sustituyen el documento.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Algunos contextos en los que <em>no</em> debes llamar a <code>document.write()</code> incluyen:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">scripts creados con <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement ()</a></span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">controladores de eventos</span></span></li> - <li><a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setTimeout ()</span></span></a></li> - <li><a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setInterval ()</span></span></a></li> - <li><code><script async src="..."></code></li> - <li><code><script defer src="..."></code></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a <code>document.write()</code> .</span></span></p> -<h3 id="Falta_de_repetición_del_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Falta de repetición del análisis</span></span></h3> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, si el documento carecía de una etiqueta de cierre <code></title></code>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este comportamiento creaba una vulnerabilidad de seguridad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Con HTML 5, los analizadores ya no repiten análisis de ningún documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este cambio tiene las siguientes consecuencias para los desarrolladores web:</span></span></p> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si se omite la etiqueta de cierre para <title>, <style>, <textarea> o <XMP>, la página <em>fallará</em> el análisis.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">IE ya falla al analizar documentos si falta una etiqueta </ title>, así que si pruebas con IE, es probable que no tengas ese problema.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, los comentarios no cerrados a menudo se rompen en los navegadores existentes, por una razón u otra, así que es poco probable que tengas este problema en los sitios que se han probado en varios navegadores.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En un script alineado, con el fin de utilizar las cadenas literales <code></script></code> y <code><!--</code> , deberías evitar que se analicen literalmente, expresándolas como <code>\u003c/script></code> y <code>\u003c!--</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La práctica anterior de escapar de la cadena <code></script></code> rodeándola con los marcadores de comentario, aunque es compatible con HTML5, causa problemas en los casos en los que se omite el marcador de comentario (ver punto anterior).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes evitar estos problemas utilizando el código de carácter para el primer '<' en su lugar.</span></span></li> -</ul> -<h2 id="Mejora_del_rendimiento_con_el_análisis_especulativo"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Mejora del rendimiento con el análisis especulativo</span></span></h2> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza <em>el análisis especulativo</em>, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write ()</a> , escribas un <em>subárbol equilibrado</em> dentro de ese trozo de script.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada <code>document.write()</code>, siempre y cuando estén dentro de la misma etiqueta <code><script></code>.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, el siguiente código escribe un subárbol equilibrado:</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><script></span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("<div>");</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">document.write ("<p> Aquí va el contenido. </ p>");</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("</ div>");</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ script></span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- Aquí va el HTML sin script. --> -</span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68-goog-gtc-unit-69-goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" style=""><script>document.write("<div>");</script> -<p>El contenido va aquí.</p> -<script>document.write("</div>");</script> -</span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para obtener más información, consulta <a href="/en/HTML/HTML5/Optimizing_Your_Pages_for_Speculative_Parsing" title="en/HTML/HTML5/Optimizing Your Pages for Speculative Parsing">Optimizar tus páginas para el análisis especulativo</a></span></span></p> -<p>{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}</p> diff --git a/files/es/orphaned/web/guide/html/html5/index.html b/files/es/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index a85b952772..0000000000 --- a/files/es/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - API - - CSS3 - - Gráficos(2) - - HTML - - HTML5 - - Multimedia - - SVG - - conectividad - - graficos - - mejoras - - nuevo -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p style="line-height: 22px;"><span class="seoSummary"><strong>HTML5 </strong> <span style="line-height: 21px;">es la última versión de</span> <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span><span style="line-height: 21px;">El término representa dos conceptos diferentes:</span></p> - -<ul style="line-height: 22px;"> - <li><span class="seoSummary">Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.</span></li> - <li><span class="seoSummary">Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.</span> A este conjunto se le llama <em>HTML5 y amigos</em>, a menudo reducido a <em>HTML5</em> .</li> -</ul> - -<p style="line-height: 22px;"><span style="line-height: 21px;">Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función. </span></p> - -<ul style="line-height: 22px;"> - <li><em>Semántica</em>: Permite describir con mayor precisión <span id="docs-internal-guid-624d18e2-7fff-fe56-de5d-c9472725617e" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">cuál</span> es su contenido.</li> - <li><em>Conectividad</em>: Permite comunicarse con el servidor de formas nuevas e innovadoras.</li> - <li><em>Sin conexión y almacenamiento</em>: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.</li> - <li><em>Multimedia</em>: <span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Nos otorga un excelente soporte para utilizar contenido multimedia</span> como lo son audio y video nativamente.</li> - <li><em>Gráficos y efectos 2D/3D</em>: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.</li> - <li><em>Rendimiento e Integración</em>: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.</li> - <li><em>Acceso al dispositivo</em>: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.</li> - <li><em>CSS3</em>: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.</li> -</ul> - -<div class="cleared row topicpage-table" style="line-height: 22px;"> -<div class="section" style="width: 436px;"> -<h2 id="SEMÁNTICA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SEMÁNTICA</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Secciones y contenidos en HTML5</a></dt> - <dd>Un vistazo al nuevo esquema y secciones de un documento HTML5: <span style="line-height: 1.572;">{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.</span></dd> - <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Uso de audio y video en HTML5">Uso de audio y video en HTML5</a></dt> - <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.</dd> -</dl> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Formularios_en_HTML5" title="Forms in HTML5">Formularios en HTML5</a></dt> - <dd>Un mirada a la mejora de los formularios web en HTML5: La API de validación de restricción, varios atributos nuevos, nuevos valores para el<span style="line-height: 1.572;"> {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.</span></dd> - <dt><span style="line-height: 1.572;">Nuevos elementos semánticos</span></dt> - <dd>Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementos de HTML5 validos</a>. - <dl> - <dt></dt> - <dt>Mejora en {{HTMLElement("iframe")}}</dt> - <dd>Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y {{htmlattrxref("srcdoc", "iframe")}} los autores ahora pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.</dd> - <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> - <dd>Permite integrar directamente fórmulas matemáticas.</dd> - <dd></dd> - <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducción a HTML5</a></dt> - <dd><span id="result_box" lang="es"><span class="hps">En este artículo</span> <span class="hps">se explica cómo</span> <span class="hps">indicar al</span> <span class="hps">navegador</span> <span class="hps">que está utilizando</span> <span class="hps">HTML5</span> <span class="hps">en</span> <span class="hps">su diseño web</span> <span class="hps">o aplicación web</span><span>.</span></span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analizador de HTML5 compatible</a></dt> - <dd>El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.</dd> - </dl> - - <h2 id="CONECTIVIDAD" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CONECTIVIDAD</h2> - - <dl> - <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Eventos de servidor enviados</a></dt> - <dd>Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.</dd> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.</dd> - </dl> - - <h2 id="Sin_Conexión_Y_ALMACENAMIENTO" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sin Conexión Y ALMACENAMIENTO</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sin conexión: el caché de la aplicación</a></dt> - <dd>Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos con y sin conexión</a></dt> - <dd>Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Storage" title="DOM / Almacenamiento">WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)</a></dt> - <dd>Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Uso de archivos desde aplicaciones web</a></dt> - <dd>El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el<span style="line-height: 1.572;"> </span><span style="font-family: monospace; line-height: 1.572;">{{HTMLElement("input")}}</span><span style="line-height: 1.572;"> de </span><strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-type" style="line-height: 1.572;" title="HTML/Element/input#attr-type">tipo</a></strong><span style="line-height: 1.572;"> <em>file</em> </span>del elemento HTML <strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-multiple" style="line-height: 1.572;" title="HTML/Element/input#attr-multiple">múltiple</a>s </strong><span style="line-height: 1.572;">atributos. </span>También esta<span style="line-height: 1.572;"> </span><a href="/en-US/docs/DOM/FileReader" style="line-height: 1.572;" title="DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.572;">.</span></dd> - </dl> - - <h2 id="MULTIMEDIA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MULTIMEDIA</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Usando HTML5 de audio y video</a></dt> - <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. - <dl> - <dt></dt> - <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia directamente en el navegador, sin necesidad de un plugin o una aplicación externa.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt> - <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd> - <dt>Track and WebVTT</dt> - <dd>El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> <span style="line-height: 1.572;">es un formato de pista de texto.</span></dd> - </dl> - - <h2 id="3D_GRAFICOS_EFECTOS" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, GRAFICOS & EFECTOS</h2> - - <dl> - <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> - <dd>Conozca el nuevo elemento <span style="font-family: courier new,andale mono,monospace; line-height: normal;">{{HTMLElement("canvas")}}</span> y cómo dibujar gráficos y otros objetos en Firefox</dd> - <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de texto para elementos <code style="font-size: 14px;"><canvas></code> </a></dt> - <dd>El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .</dd> - <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><code style="font-size: 14px;"><canvas></code></a> HTML5 .</dd> - <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> - <dd>Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.</dd> - <dt></dt> - </dl> - </dd> - </dl> - </dd> -</dl> -</div> - -<div class="section" style="width: 435px;"> -<h2 id="RESULTADOS_e_INTEGRACIÓN" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">RESULTADOS e INTEGRACIÓN</h2> - -<dl> - <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.</dd> - <dt><code style="font-size: 14px;"><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Nivel 2</dt> - <dd>Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de<span style="line-height: 1.572;"> </span><a href="/en-US/docs/AJAX" style="line-height: 1.572;" title="AJAX">Ajax</a><span style="line-height: 1.572;">.</span></dd> -</dl> - -<dl> - <dt>Motores JIT compilación de JavaScript</dt> - <dd>La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML / contenido editable">El atributo contentEditable: transformar su sitio web en una wiki!</a></dt> - <dd>HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop / Drag_and_Drop">Arrastrar y soltar</a></dt> - <dd>La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas en Mozilla.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestión del foco en HTML</a></dt> - <dd>Los nuevos atributos HTML5 <code style="font-size: 14px;">activeElement</code> y <code style="font-size: 14px;">hasFocus</code> son soportados.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manejadores de protocolo basados en web</a></dt> - <dd>Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo <code style="font-size: 14px;">navigator.registerProtocolHandler()</code>.</dd> - <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code style="font-size: 14px;">requestAnimationFrame</code></a></dt> - <dd>Permite controlar la renderización de animaciones para obtener un óptimo rendimiento.</dd> - <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> - <dd>Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt> - <dd>Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos en línea y fuera de línea</a></dt> - <dd> - <dl style="margin: 0px 0px 1.286em; padding: 0px;"> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.</dd> - </dl> - </dd> -</dl> - -<h2 id="ACCESO_al_dispositivo" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ACCESO al dispositivo</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt> - <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM / Touch_events">Eventos táctiles</a></dt> - <dd>Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="El uso de geolocalización">El uso de geolocalización</a></dt> - <dd>Permite a los navegadores localizar la posición del usuario mediante geolocalización.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detección de la orientación del dispositivo</a></dt> - <dd>Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt> - <dd>Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.</dd> -</dl> - -<h2 id="CSS3_STYLING" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CSS3 STYLING</h2> - -<p><a href="/en-US/docs/CSS" title="CSS">CSS </a> <font>se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. </font><font>Esto se refiere a menudo como</font> <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, <span style="line-height: 21px;">aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.</span></p> - -<dl> - <dt>Nuevas características de diseño de fondo</dt> - <dd>Ahora es posible poner una sombra a un cuadro, con <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code style="font-size: 14px;">box-shadow</code></a> y <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS / Multiple_backgrounds">varios fondos</a> se pueden ajustar.</dd> -</dl> - -<dl> - <dt>Bordes mas "lujosos"</dt> - <dd>Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a <span style="line-height: 1.572;">longhand</span><span style="line-height: 1.572;">, </span>aunque los bordes redondeados son apoyados a través de propiedades <span style="line-height: 1.572;">{{cssxref("border-radius")}} .</span></dd> - <dt>Animación de su estilo</dt> - <dd>Utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS / Using_CSS_transitions">Transiciones CSS</a> para animar entre los diferentes estados o utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS / Using_CSS_animations">animaciones CSS</a> para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.</dd> - <dt>Tipografía mejorada</dt> - <dd>Los autores tienen un mejor control para usar la tipografía. Se puede controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow"><code style="font-size: 14px;">el texto </code></a>{{cssxref("text-overflow")}} y <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS / guiones">guiones</a> y también puede poner una<a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS / text-shadow"> sombra</a> o controlar con mayor precisión sus <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG / atributo / text-decoration">decoraciones</a> . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code style="font-size: 14px;">@font-face</code></a> .</dd> - <dt>Nuevos diseños de presentación</dt> - <dd>Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS / Using_CSS_multi-column_layouts">CSS diseño de varias columnas</a> , y el <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS / Flexbox">cuadro de distribución flexible de CSS</a> .</dd> -</dl> -</div> -</div> diff --git a/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index c0ad7e26db..0000000000 --- a/files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Introducción a HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><br> - <span lang="es-ES"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar.</span> <span lang="es-ES">Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.</span></p> -<p><span lang="es-ES">Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones.</span> <span lang="es-ES">Debido a esto, algunos navegadores no admiten aún determinadas características.</span> <span lang="es-ES">Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características.</span> <span lang="es-ES">Puedes encontrar una lista de las características de HTML5 que admite Gecko en la <a href="/es/HTML/HTML5" title="es/HTML/HTML5">página principal de HTML5</a>.</span></p> -<h2 id="El_tipo_de_documento_HTML5">El tipo de documento HTML5</h2> -<p><span lang="es-ES">El tipo de documento para HTML5 es muy sencillo.</span> <span lang="es-ES">Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:</span></p> -<pre lang="es-ES" style="margin-bottom: 0.5cm;"><!DOCTYPE html></pre> -<p lang="es-ES">Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.</p> -<p lang="es-ES">{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}</p> diff --git a/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html b/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html deleted file mode 100644 index f5f733a71d..0000000000 --- a/files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Introducción al HTML -slug: orphaned/Web/Guide/HTML/Introduction_alhtml_clone -tags: - - HTML -original_slug: Web/Guide/HTML/Introduction_alhtml_clone ---- -<p>Cuando miras una página web en el navegador, lo que ves a simple vista son palabras. Estas palabras normalmente tienen algunas características, como diferentes tamaños y colores. En algunos casos la página web puede mostrar imágenes o incluso vídeos. Otras veces, formularios donde puedes introducir o buscar información, o personalizar la apariencia de la página que estás viendo. La página también puede contener animaciones y contenidos que cambian mientras el resto de la página se mantiene sin cambios.</p> - -<p>Varias tecnologías (como <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/JavaScript/About_JavaScript" title="JavaScript/About_JavaScript">JavaScript</a>, <a href="/en-US/docs/Scripting_Plugins/Adobe_Flash" title="Scripting_Plugins/Adobe_Flash">Flash</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JSON" title="JSON">JSON</a>) pueden usarse para definir los elementos que componen una página web. Sin embargo, en el nivel más bajo, una página web se define usando <a href="/en-US/docs/HTML" title="HTML"><strong>HTML</strong></a> (<strong>HyperText Markup Language)</strong>. Sin HTML, no habría páginas web.</p> - -<p>Este artículo proporciona una introducción al HTML. Si alguna vez te has preguntado qué ocurre detrás de tu navegador web, este artículo es el mejor lugar para empezar a aprender.</p> - -<h2 id="Una_breve_historia_del_HTML">Una breve historia del HTML</h2> - -<p>A finales de la década de los 80s, <a href="http://www.w3.org/People/Berners-Lee/" title="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a> estuvo trabajando como físico en <a href="http://public.web.cern.ch/public/" title="http://public.web.cern.ch/public/">CERN</a> (las siglas inglesas de la Organización Europea para la Investigación Nuclear). Ideó un sistema para que los científicos pudieran compartir documentos a través de internet. Antes de su invención, las comunicaciones por Internet sólo permitían transmitir texto plano, empleando tecnologías como el email, <a href="http://en.wikipedia.org/wiki/Ftp" title="http://en.wikipedia.org/wiki/Ftp">FTP</a> (File Transfer Protocol), y <a href="http://en.wikipedia.org/wiki/Usenet" title="http://en.wikipedia.org/wiki/Usenet">Usenet</a>- tecnología en la que se basan los foros de internet. La invención del HTML permitió el uso de un modelo de contenido almacenado en un servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto formateado y visualización de imagenes).</p> - -<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2> - -<p>HTML es un <strong>lenguaje de etiquetas</strong>. Indica al navegador como tiene que mostrar el contenido. El HTML separa el "contenido" (palabras, imágenes, audio, video, etc.) de la "presentación" (la definición del tipo de contenido y las instrucciones de cómo esos contenidos tienen que mostrarse). El HTML emplea un conjunto de elementos predefinidos que permiten identificar los distintos tipos de elementos. Estos elementos contienen una o más etiquetas que contienen o expresan el contenido. Estas etiquetas suelen ir encapsuladas entre los símbolos <>, y las etiquetas de cierre (que indican el final de un determinado contenido) están precedidas por una barra /.</p> - -<p>Por ejemplo, el elemento párrafo consiste en una etiqueta de inicio como esta "<p>" y una de cierre "</p>". El siguiente ejemplo muestra un párrafo que está contenido dentro del elemento párrafo en HTML:</p> - -<div id="Spl1"> -<pre class="brush:html;"><p>Mi perro odia el pescado.</p></pre> -</div> - -<p>Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:</p> - -<p>{{ EmbedLiveSample("Spl1", 400, 50) }}</p> - -<p>El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.</p> - -<p>Los elementos que contienen contenidos, normalmente suelen contener también otros elementos. Por ejemplo, el elemento énfasis (etiqueta <em>) puede estar dentro del elemento párrafo:</p> - -<div id="Spl2"> -<pre class="brush:html;"><p>Mi perro <em>odia</em> el pescado.</p></pre> -</div> - -<p>Cuando se muestre se verá del siguiente modo:</p> - -<p>{{ EmbedLiveSample("Spl2", 400, 50) }}</p> - -<p>Algunos elementos no contienen otros elementos. Como es el caso de la etiqueta imagen ("<img>") que simplemente especifica el nombre del archivo que contiene la imagen como atributo:</p> - -<pre class="brush:html;"><img src="smileyface.jpg"></pre> - -<p>En ocasiones, suele ponerse una barra "/" al final de la etiqueta, justo antes del cierre de la misma ">" para indicar el final de la misma "/>". Aunque se trata de algo opcional en HTML, en <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).</p> - -<p>El resto de este artículo describe con un mayor detalle los conceptos descritos en esta sección. Además, si quieres ver HTML en acción, pásate por <a href="http://thimble.webmaker.org/en-US/projects/wrangler/edit" title="http://thimble.webmaker.org/en-US/projects/wrangler/edit">Mozilla Thimble</a>, que es un editor online interactivo que enseña cómo escribir HTML. Además, en el <a href="/en-US/docs/HTML/HTML_Elements" title="HTML/HTML_Elements">HTML Elements</a> podrás ver una lista de los elementos HTML disponibles, así como una descripción de los mismos y el uso de cada uno de ellos.</p> - -<h2 id="Elementos_—_los_bloques_básicos_de_construcción">Elementos — los bloques básicos de construcción</h2> - -<p>El HTML consiste en una serie de elementos. Los Elementos definen el significado <strong>semántico</strong> del contenido. Todos los Elementos están incluídos entre dos grandes etiquetas, que a su vez contienen otras etiquetas. Por ejemplo, el elemento "<p>" indica un párrafo; el elemento "<img>" indica una imagen. Mira la página <a href="/en-US/docs/HTML/Element" title="HTML/Element">HTML Elements</a> para ver una lista completa de todos los elementos.</p> - -<p>Algunos elementos tienen un significado muy preciso, como "esto es una imagen", "esto es un encabezado" o "esto es una lista ordenada". Otros elementos resultan menos específicos, como "esto es una sección de una página" o "esto es parte de un texto". Finalmente otros elementos son usados por razones técnicas, como "esto es la información identificativa de la página que no debe ser mostrada". De un modo y otro, todos los elementos del HTML tienen un determinado valor semántico.</p> - -<p>Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:</p> - -<pre class="brush:html;"><html> - <body> - - <p>Mi perro <em>odia</em> el pescado.</p> - - </body> -</html></pre> - -<p>Como puedes ver, los elementos <html> encierran el resto del documento, y el elemento <body> encierra el contenido de la página. Esta estructura crece con las ramas de un árbol, donde los elementos <body> y <p> son las ramas que crecen del tronco que es <html>. Esta estructura jerárquica es lo que se denomina <strong>DOM</strong>: siglas inglesas del Documento Objeto Modelo (<strong>Document Object Model)</strong>.</p> - -<h2 id="Etiquetas">Etiquetas</h2> - -<p>Los documentos HTML están escritos en texto plano. Pueden ser escritos mediante editores de texto capaces de guardar contenido de texto plano (aunque la mayor parte de los creadores de código HTML prefieren editores especializados que resaltan las partes de código propias de la sintaxis del HTML y muestran el DOM). Los nombres de las Etiquetas, pueden escribirse en mayúsculas o en minúsculas. Aunque, el <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> requiere de las minúsculas).</p> - -<p>El código HTML contenido entre los signos de menor que ("<") al comienzo y mayor que (">") al final, tienen un significado especial. Es lo que denominamos etiquetas. He aquí un ejemplo sencillo:</p> - -<pre class="brush: xml"><p>Esto es texto dentro de un párrafo.</p> -</pre> - -<p>En este ejemplo hay una etiqueta de comienzo y otra de cierre. Las etiquetas de cierre son las mismas que las etiquetas de comienzo sólo que contienen una barra justo después del signo menor que. Muchos elementos de HTML se escriben empleando las dos etiquetas de comienzo y final. Las etiquetas de comiezo y final de un elemento deben estar adecuadamente anidadas, esto significa que las etiquetas de cierre deben escribirse en el orden inverso al de las etiquetas de inicio. La regla del anidamiento de etiquetas tiene que cumplirse de forma escrupulosa para poder escribir <strong>código válido</strong>.</p> - -<p>Esto es un ejemplo de <em>código válido</em>:</p> - -<pre class="brush: xml"><em>Me <strong>refiero</strong> a eso</em>. -</pre> - -<p>Esto es un ejemplo de <em>código inválido</em>:</p> - -<pre class="brush: xml">Invalido: <em>Me <strong>refiero</em> a eso</strong>.</pre> - -<p>Observa que en el ejemplo válido, la etiqueta de cierre para el elemento anidado está situada antes de la etiqueta de cierre del elemento que la contenedor.</p> - -<div class="note"> -<p>Hasta la adopción de las reglas revisadas del HTML5, los navegadores no interpretaban los códigos no válidos del mismo modo y provocaban distintos resultados cuando se encontraban con estas partes de código. Los navegadores eran tolerantes con los autores de código Web, pero por desgracia no todos de la misma forma, llevando a situaciones impredecibles a la hora de interpretar códigos no válidos de HTML. Pero esos días han acabado tras la última evolución de los navegadores como Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 o Safari 5, a medida que han implementado las nuevas normas de interpretación de código HTML no válido. Aquí puede ver el resultado de un código invalido para el mismo arbol DOM <a class="external" href="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars" title="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars">en todos los navegadores modernos</a>.</p> -</div> - -<p>Algunos elementos no contienen texto o ningún otro elemento. Es lo que se denominan elementos vacíos y no necesitan etiquetas de cierre. Este es un ejemplo:</p> - -<pre class="brush: xml"><img src="smileyface.jpg"></pre> - -<p>Mucha gente marca los elementos vacíos usando una barra al final de la etiqueta, justo antes del simbolo mayor que (necesario en los códigos de XHTML).</p> - -<pre class="brush: xml"><img src="smileyface.jpg" /></pre> - -<p>En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.</p> - -<h2 id="Atributos">Atributos</h2> - -<p>La etiqueta de comienzo puede contener información adicional, tal y como puede verse en el siguiente ejemplo. Dicha información es lo que se conoce como <strong>atributos</strong>. Los atributos suelen consistir en dor partes:</p> - -<ul> - <li>Un atributo <strong>nombre </strong>(name).</li> - <li>Un atributo <strong>valor</strong> (value).</li> -</ul> - -<p>Algunos atributos sólo pueden tener un único valor. Son atributos <strong>Booleanos</strong> y pueden ser incluidos para especificar el nombre del atributo, o dejar su valor vacío. Así los siguientes tres ejemplos tienen el mismo significado:</p> - -<pre class="brush: xml"><input required="required"> - -<input required=""> - -<input required> -</pre> - -<p>Los valores de los atributos que constan de una sola palabra o un número se pueden escribir tal cual, pero en cuanto hay dos o más cadenas de caracteres en el valor, éstos deben escribirse entre comillas. Están permitidas tanto las comillas simples ('), como las comillas dobles (") aunque muchos desarrolladores prefieren utilizar siempre comillas simples para que el código sea menos ambiguo para la vista y para evitar errores. El siguiente es semejante error..:Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. El siguiente código sería un error:</p> - -<pre class="brush: xml"><p class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)</pre> - -<p>En este ejemplo suponemos que el valor del atributo es "foo bar" pero al no haber comillas en el código se interpreta como si se hubiera escrito así:</p> - -<pre class="brush: xml"><p class="foo" bar=""></pre> - -<h2 id="Nombre_de_caracteres_referenciados">Nombre de caracteres referenciados</h2> - -<p>Los<strong> Caraceteres Referenciados </strong> (a veces llamados<em> entidades) </em>son combinaciones de caracteres que sirven para mostrar en el navegador símbolos que tienen un significado especial en el código HTML. Por ejemplo, HTML interpreta que el símbolo menor que y mayor que son delimitadores de una etiqueta. Si quieres que estos simbolos sean mostrados en el contenido del texto, debemos usar los nombres de referencia de estos caracteres. Aquí están los cuatro caracteres referenciados más comunes, que no estaría de más que memorizases:</p> - -<ul> - <li><code>&gt;</code> representa el carater mayor que (<code>></code>)</li> - <li><code>&lt;</code> representa el caracter menor que (<code><</code>)</li> - <li><code>&amp;</code> representa el caracter ampersand (<code>&</code>)</li> - <li><code>&quot;</code> representa el caracter de comillas dobles (")</li> -</ul> - -<p>Hay <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html" title="http://www.w3.org/TR/html5/named-character-references.html#named-character-references">muchas más entidades</a>, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.</p> - -<h2 id="Tipo_de_documento_y_comentarios">Tipo de documento y comentarios</h2> - -<p>Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración <strong>doctype</strong> en la primera línea. En el HTML actual esto se escribe del siguiente modo:</p> - -<pre class="brush: xml"><!DOCTYPE html></pre> - -<p>El doctype tiene una historia larga y complicada, pero todo lo que necesitas saber ahora es que el doctype le dice al navegador que interprete el código HTML y CSS de acuerdo a los estándares web del <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode" title="Mozilla's Quirks Mode">peculiaridades</a>.)</p> - -<p>HTML tiene un mecanismo para poder introducir <strong>comentarios</strong> al código que no serán mostrados en la página cuando esta sea interpretada o leída por un navegador web. Esto suele emplearse para añadir explicaciones al código, o dejar notas para explicar a otras personas cómo trabaja el código de la página, o simplemente para dejar recordatorios para uno mismo. Los comentarios en HTML están contenidos entre los siguientes símbolos:</p> - -<pre class="brush: xml"><!-- Esto es un comentario de texto --></pre> - -<h2 id="Un_pequeño_documento_pero_completo">Un pequeño documento pero completo</h2> - -<p>Colocando todas estas explicaciones juntas, aquí os dejamos un pequeño ejemplo de un documento HTML completo. Puedes copiar este código en un editor de textos, guardarlo como <em>myfirstdoc.html</em> y cargarlo en un navegador. Asegurate de estar usando los códigos de caracteres UTF-8. Dado que este documento no utiliza estilos (CSS) su apariencia será muy plana, pero sólo se trata de un pequeño comienzo.</p> - -<pre class="brush: xml"><!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8" /> - <title>A tiny document</title> -</head> -<body> - <h1>Main heading in my document</h1> - <!-- Note that it is "h" + "1", not "h" + the letter "one" --> - <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p> -</body> -</html> -</pre> diff --git a/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index dcee261b54..0000000000 --- a/files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,410 +0,0 @@ ---- -title: Secciones y esquema de un documento HTML5 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<p>La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.</p> - -<div class="note"> -<p>A lo largo de este documento se empleará la palabra <strong>esquema</strong> en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos <strong>algoritmo de esquematizado</strong> al proceso de construir el esquema infiriéndolo del contenido.</p> -</div> - -<h2 id="Estructura_de_un_documento_HTML_4">Estructura de un documento HTML 4</h2> - -<p>La estructura de un documento, por ejemplo la estructura semántica de lo que está entre<code> <body></code> y <code></body></code> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.</p> - -<p>Entonces el siguiente marcado:</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml"><div class="seccion" id="zorro" > -<h1>El zorro</h1> -<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro. -... bla, bla, bla ... -<div class="subseccion" id="zorro-habitat" > -<h2>Hábitat</h2> -<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles. -...bla, bla, bla... -</div> -</div> -</pre> -</div> - -<p>genera el siguiente esquema:</p> - -<pre>1. El zorro - 1.1 Hábitat -</pre> - -<p>Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,</p> - -<pre class="brush:xml"><h1>El zorro</h1> -<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro. -... bla, bla, bla ... -<h2>Hábitat</h2> -<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles. -...bla, bla, bla... -<h2>Costrumbres</h2> -<h1>El oso</h1> -</pre> - -<p>genera el siguiente esquema:</p> - -<pre>1. El zorro - 1.1 Hábitat - 1.2 Costumbres -2. El oso -</pre> - -<h2 id="Problemas_resueltos_por_HTML5">Problemas resueltos por HTML5</h2> - -<p>La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:</p> - -<ol> - <li>El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos <strong>class</strong> hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para <a class="external" href="https://es.wikipedia.org/wiki/Tecnolog%C3%ADas_de_apoyo" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologías de apoyo</a>, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.</li> - <li>Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.</li> - <li>Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <code><h1>Mozart</h1><h2>El genio salzburgués</h2></code> crea el esquema <code>1. Mozart 1.1 El genio salzburgués</code>). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <code><hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup></code> crea el esquema <code>1. Mozart</code>).</li> - <li>En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.</li> - <li>Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.</li> -</ol> - -<p>De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.</p> - -<h2 id="El_algoritmo_de_esquematizado_de_HTML5">El algoritmo de esquematizado de HTML5</h2> - -<h3 id="Definiendo_secciones_en_HTML5">Definiendo secciones en HTML5</h3> - -<p>Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.</p> - -<div class="note"><strong>Nota: </strong>Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Definiendo cabeceras en HTML5</a>.</div> - -<p>Ejemplo:</p> - -<pre class="brush:xml"><section> - <h1>El pato</h1> - <section> - <h1>Introducción</h1> - <p>En esta sección, ampliaremos nuestro concepto del pato. - </section> - <section> - <h1>Hábitat</h1> - <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. - </section> - <aside> - <p>otros estudiosos del pato - </aside> -</section> -<footer> - <p>(c) 2010 The Example company -</footer></pre> - -<p>El bloque de HTML define dos secciones de alto nivel:</p> - -<pre><span style="color: red;"><section> - <h1>El pato</h1> - <section> - <h1>Introducción</h1> - <p>En esta sección, ampliaremos nuestro concepto del pato. - </section> - <section> - <h1>Hábitat</h1> - <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. - </section> - <aside> - <p>otros estudiosos del pato - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2010 The Example company -</footer></span></pre> - -<p>La primera sección tiene tres subsecciones:</p> - -<pre><section> - <h1>El pato</h1> - - <span style="color: red;"><section> - <h1>Introducción</h1> - <p>En esta sección, ampliaremos nuestro concepto del pato. - </section></span> - - <span style="color: green;"><section> - <h1>Hábitat</h1> - <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. - </section></span> - - <span style="color: blue;"><aside> - <p>Otros estudiosos del lobo - </aside></span> -</section> - -<footer> - <p>(c) 2010 The Example company -</footer></pre> - -<p>Esto genera la siguiente estructura:</p> - -<pre>1. El pato - 1.1 Introducción - 1.2 Hábitat - 1.3 Section (aside) -</pre> - -<h3 id="Definiendo_cabeceras_en_HTML5">Definiendo cabeceras en HTML5</h3> - -<p>Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.</p> - -<p>Los elementos de cabecera tienen un <em>rango</em> dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango <em>más alto</em>, y {{HTMLElement("h6")}} tiene el rango <em>más bajo</em>. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:</p> - -<pre class="brush:xml"><section> - <h1>La mosca</h1> - <p>El esta sección hablaremos de la mosca, una criatura adorable. - ... bla, bla, bla ... - <section> - <h2>Hábitat</h2> - <p>Únicamente se han divisado colonias de moscas en los montes de.... - ...bla, bla, bla ... - </section> -</section> -<section> - <h3>El mosquito</h3> - <p>A continuación, otra rareza a punto de extinguirse, el mosquito. - ...bla, bla, bla... -</section></pre> - -<p>Genera el siguiente esquema:</p> - -<pre>1. La mosca - 1.1 Hábitat -2. El mosquito</pre> - -<p>Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).</p> - -<h3 id="Seccionado_implícito">Seccionado implícito</h3> - -<p>Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado <em>seccionado implícito</em>.</p> - -<p>Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:</p> - -<pre class="brush:xml"><section> - <h1>El águila</h1> - <p> .... - - <h3 class="subsec-implicita">Hábitat</h3> - <p> ... -</section></pre> - -<p>Genera el siguiente esquema:</p> - -<pre><strong>1. El águila</strong> - <strong>1.1 Hábitat</strong> <em>(impícitamente definido mediante <h3>)</em> -</pre> - -<p>Si es del mismo rango que la cabecera anterior, cierra la sección previa (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: </p> - -<pre class="brush:xml"><section> - <h1>El águila</h1> - <p>... - <h1 class="secc-implicita">El buitre</h1> - <p>... -</section></pre> - -<p>genera el siguiente esquema: </p> - -<pre><strong>1. El águila</strong> -<strong>2. El buitre</strong> <em>(implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)</em> -</pre> - -<p>Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:</p> - -<pre class="brush:xml"><body> - <h1>Colores</h1> - <h2>Rojo</h2> - <p> ... - <section> - <h3>Amarillo</h3> - <p> ... - <h3>Verde</h3> - <p> ... - <h2>Sabores</h2> - <p>... - </section> -</body></pre> - -<p>generando el siguiente esquema:</p> - -<pre><strong>1. Colores - 1.1 Rojo</strong> <em>(implícitamente con <code><h2></code> )</em> - <strong>1.2 Amarillo</strong><em>(explícitamente con <code><section> </code>)</em> - <strong>1.3 Verde</strong> <em>(impícitamente con <code><h3></code>, cerrando el <code><h3></code> previo)</em> -<strong>2. Sabores</strong> <em>(implícitamente con <h2>, cerrando el <section> previo)</em> -</pre> - -<p>Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica</p> - -<ul> - <li>Usar <strong>etiquetas explícitas</strong> para abrir y cerrar secciones.</li> - <li> Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. </li> -</ul> - -<p>Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.</p> - -<p>Una <strong>excepción</strong> a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser <strong>reutilizadas</strong> en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.</p> - -<h3 id="Sobreescribiendo_seccionamiento_implícito">Sobreescribiendo seccionamiento implícito</h3> - -<p>A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:</p> - -<ul> - <li>Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural: - <pre class="brush:xml"><section> - <h1>La flauta mágica</h1> - <h2>Ópera en dos actos del genio salzburgués</h2> -</section></pre> - - <p>genera el siguiente esquema, que claramene <strong>no</strong> es el que se desea:</p> - - <pre>1. La flauta mágica - 1.1 Ópera en dos actos del genio salzburgués -</pre> - </li> - <li>El encabezado secundario puede ser usado por una lista de etiquetas: - <pre class="brush:xml"><section> - <h1>Secciones y esquema del documento</h1> - <h2>HTML, HTML5, secciones, esquema</h2> -</section></pre> - - <p>genera el siguiente esquema, que <strong>tampoco es</strong> el que se desea:</p> - - <pre>1. Secciones y esquema del documento - 1.1 HTML, HTML5, secciones, esquema</pre> - </li> -</ul> - -<p>Debido al seccionado implícito, <strong>esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras</strong> ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:</p> - -<pre class="brush:xml"><section> - <hgroup> - <h1>La flauta mágica</h1> - <h2>Ópera en dos actos del genio salzburgués</h2> - </hgroup> - ... algún contenido ... -</section> -</pre> - -<p>genera el siguiente esquema, que es el que se desea:</p> - -<pre>1. La flauta mágica</pre> - -<h3 id="Secciones_desacopladas"><a name="sectioning_root">Secciones desacopladas</a></h3> - -<p>Piensa por un momento en una sección <strong><em>A</em></strong> que contiene una subsección <strong><em>B</em></strong>. A veces es conveniente que <em><strong>B</strong></em> mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de<em><strong> A</strong></em>, dando lugar a esquemas más claros.</p> - -<p>Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.<br> - Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.</p> - -<p>Además, el elemento de partida para formar el esquema del documento es {{HTMLElement("body")}}, el cual por ser la raíz, se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.</p> - -<p>Ejemplo:</p> - -<pre class="brush: html"><section> - <h1>Bach</h1> - <section> - <h2>Introducción</h2> - <p>... - </section> - <section> - <h2>La Pasión según S. Mateo</h2> - <p> Bla, bla, bla ... - <blockquote> - <h1>Friedich Nietzsche - <p>“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios” - </blockquote> - </section> -</section></pre> - -<p>Este ejemplo resulta en el siguiente esquema:</p> - -<pre>1. Bach - 1.1 Introducción - 1.2 La Pasión según s. Mateo</pre> - -<p>Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.</p> - -<h3 id="Secciones_fuera_del_esquema">Secciones fuera del esquema</h3> - -<p>HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:</p> - -<ol> - <li>El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal, como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.</li> - <li>El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.</li> - <li>El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.</li> - <li>El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.</li> -</ol> - -<h2 id="Direcciones_y_tiempo_de_publicación_en_elementos_de_seccionado">Direcciones y tiempo de publicación en elementos de seccionado</h2> - -<p>El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.</p> - -<p>Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> - -<p>De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> - -<h2 id="Usando_elementos_HTML5_en_navegadores_no_HTML5">Usando elementos HTML5 en navegadores no HTML5</h2> - -<p>Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como <code>display:inline</code> por defecto:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.<br> - <br> - Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.</p> - -<pre class="brush:xml"><noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. -</noscript></pre> - -<p>Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. - </noscript> -<![endif]--></pre> - -<h2 id="Conclusión">Conclusión</h2> - -<p>Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.</p> diff --git a/files/es/orphaned/web/html/element/command/index.html b/files/es/orphaned/web/html/element/command/index.html deleted file mode 100644 index da926bfb8f..0000000000 --- a/files/es/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: <command> -slug: orphaned/Web/HTML/Element/command -tags: - - HTML - - Obsoleto -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Elemento/command ---- -<div>{{obsolete_header()}}</div> - -<div class="note"> -<p><span style="font-size: 14px; line-height: 21px;"><strong>Nota: </strong>El elemento <code>command</code> ha sido removido de </span>{{Gecko("24.0")}} en favor del elemento {{HTMLElement("menuitem")}} . Firefox nunca ha soportado este elemento <code>command , </code>y la implementación existente de la interface DOM {{domxref("HTMLCommandElement")}} ha sido removida de <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>.</p> -</div> - -<h2 id="Resumen_de_el_catalogo">Resumen de el catalogo</h2> - -<pre><command function="About live stream"></pre> - -<h3 class="brush: html" id="sect1"></h3> - -<h4 id="El_elemento_command_representa_un_comando_que_el_usuario_puede_invocar_.">El elemento <code>command </code>representa un comando que el usuario puede invocar .</h4> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> - <td>Contenido dinámico , contenido estático de texto, contenido de metadata .</td> - </tr> - <tr> - <th scope="row">Contenido permitido</th> - <td>Ninguno , es un {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Omisión de etiquetas</th> - <td>La etiqueta de inicio es obligatoria , pero como es un elemento vacío , el uso de una etiqueta de cierre está prohibido . </td> - </tr> - <tr> - <th scope="row">Elementos padre permitidos </th> - <td>Solamente {{HTMLElement("colgroup")}} ,aunque puede ser definido implícitamente ya que su etiqueta de inicio no es obligatoria .El {{HTMLElement("colgroup")}} no debe de tener un {{HTMLElement("span")}} como hijo .</td> - </tr> - <tr> - <th scope="row">Interface DOM </th> - <td>{{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos">Atributos</h2> - -<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> - -<ul> - <li><code>command</code> o <code>empty</code> el cual es el estado por default e indica que este es un comando normal.</li> - <li><code>checkbox</code> indica que el comando puede ser alternado usando un checkbox.</li> - <li><code>radio</code> indica que el comando puede ser alternado usando un radiobutton.</li> -</ul> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Indica si el comando es seleccionado . Debe de ser omitido al menos que el atributo <code>type </code>sea <code>checkbox </code>o <code>radio.</code></dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Indica que el comando no está disponible .</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Proporciona una imagen que representa el comando.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>El nombre del comando como se muestra al usuario .</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>Este atributo proporciona el nombre del grupo de comandos , con un atributo <code>type </code>de<code> tipo radio ,</code>que será alternado cuando el comando en sí mismo sea alternado . Este atributo debe de ser omitido al menos que el atributo <code>type </code>sea del tipo <code>radio .</code></dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Este atributo indica el tipo de comando . Este puede ser uno de los siguientes tres valores :</dd> -</dl> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>{{ HTMLRef }}</p> diff --git a/files/es/orphaned/web/html/element/element/index.html b/files/es/orphaned/web/html/element/element/index.html deleted file mode 100644 index ae980b7be1..0000000000 --- a/files/es/orphaned/web/html/element/element/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: <element> -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Elemento/element ---- -<div class="note"> -<p><strong>Nota:</strong> Este elemento ha sido borrado de la especificación. Mira <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">esto</a> para obtener más información desde el editor de la espeficicación.</p> -</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>El <strong>elemento <a href="/es/docs/Web/HTML">HTML</a> <code><element></code></strong> es utilizado para personalizar los elementos DOM.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="HTML/Categorias_de_contenido">Categorias de contenido</a></th> - <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Modelo_de_contenido_transparente">Contenido transparente</a>.</td> - </tr> - <tr> - <th scope="row">Contenido Permitido</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Etiquetas omitidas</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Elementos padre permitidos</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Interfaz DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos" name="Atributos">Atributos</h2> - -<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> - -<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> - -<p>El texto va aquí</p> - -<pre class="brush: html">Más texto va aquí. -</pre> - -<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> - -<p>El elemento <code><element></code> fue formulado en un borrador de la especificación de <a href="http://w3c.github.io/webcomponents/spec/custom/">elementos personalizados</a>, que se ha eliminado.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad dee navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver También" name="Ver También">Ver También</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/es/orphaned/web/html/element/isindex/index.html b/files/es/orphaned/web/html/element/isindex/index.html deleted file mode 100644 index a0b5d74166..0000000000 --- a/files/es/orphaned/web/html/element/isindex/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: <isindex> -slug: orphaned/Web/HTML/Element/isindex -tags: - - Deprecado - - Elemento - - HTML - - Referencia - - Web -translation_of: Web/HTML/Element/isindex -original_slug: Web/HTML/Element/isindex ---- -<div>{{Deprecated_header}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p><code><isindex> </code>es un elemento HTML obsoleto que posiciona un campo de texto en una página para buscar en el documento . <code><isindex></code> fue pensado por el W3C para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .</p> - -<p><<font face="Consolas, Liberation Mono, Courier, monospace">isindex> </font>fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. </p> - -<h2 id="Atributos">Atributos </h2> - -<p>Como todos los otros elementos HTML , este elemento acepta los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> - -<dl> - <dt>{{htmlattrdef("prompt")}}</dt> - <dd>Este atributo añade su valor como una ventana para un campo de texto.</dd> - <dt>{{htmlattrdef("action")}}</dt> - <dd>Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .</dd> -</dl> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: html"><head> - <isindex prompt="Search Document... " /> -</head></pre> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("form")}}</li> -</ul> - -<p>{{HTMLRef}}</p> diff --git a/files/es/orphaned/web/html/element/multicol/index.html b/files/es/orphaned/web/html/element/multicol/index.html deleted file mode 100644 index 9ebbd8cb22..0000000000 --- a/files/es/orphaned/web/html/element/multicol/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: <multicol> -slug: orphaned/Web/HTML/Element/multicol -tags: - - HTML -translation_of: Web/HTML/Element/multicol -original_slug: Web/HTML/Element/multicol ---- -<div>{{non-standard_header}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El elemento HTML <code><multicol> </code>fue un elemento experimental diseñado para permitir diseños multi columna . Nunca tuvo una recepción significante y no es implementado en alguno de los principales exploradores .</p> - -<div class="note"> -<p><strong>No usar esto ! </strong>Para implementar un diseño multi columna , debería de usar los elementos HTML regulares como {{HTMLElement("div")}} en conjunto con la característica de CSS <a href="/es/docs/Columnas_con_CSS-3">Column</a> ,</p> -</div> - -<p>Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <code><multicol> </code>fue asociado con un {{domxref("HTMLSpanElement")}}. Después fue arreglado y ahora esta asociado con un {{domxref("HTMLUnknownElement")}} como se solocita en la especificación .</p> - -<p> </p> diff --git a/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html b/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html deleted file mode 100644 index 54edf8c8f8..0000000000 --- a/files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Etiqueta Personalizada HTML5 -slug: orphaned/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 -original_slug: Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 ---- -<p>Una etiqueta personalizada sencilla, es crear una plantilla de elementos.</p> - -<p>Un sencillo ejemplo donde con poner la etiqueta <corazon> nos muetra un corazon en el documento:</p> - -<h2 id="corazon.js" name="corazon.js">corazon.js</h2> - -<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> - -<pre class="brush: js">function ini(){ -document.createElement('corazon');//creamos el elemento corazon -var corazon = document.getElementsByTagName('corazon');//llamamos todos los elemento corazon del documento - var i; - for (i = 0; i < corazon.length; i++) {//ejecuta acciones para esos elementos -//creamos estilos para nuetras etiquetas - corazon[i].style.backgroundImage= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACaElEQVR4nO2by7WCMBCGKYECyJgSLIESLCEnwT0l0IElWIIlWIIlsAxhkxLuXZh45YrKI+QF/zmznvn+TAYYj0myadOmTSMkMUl5VuQN0JIDrVooTmLHLhxoxRElPCtyjgk2nZdjgnlW5BxRcs/Lzi2wMwdaNUBLnhW56ZzdArIib4GdBTApgP0MiBtHlMzJKTFJBWIHAew2MOdPC+wsEDsYwlbgiF2HFtBfVHEaC95CcRphdu8BtPi4nwz+VMRk8H9RDymoxcf9mBMf0hGT4MWOXQzCP6IBWr7L2wAtZ576226QmKSD4DkmWACrl4D/dCocaLVkTgFMfh3OEpN07n0fHE+DiiNKrOQEVn80QE15G4XcOwEf9+rOL9H2/TkRu/bCq8eNNXgVUhgceEPj5fEsMUldFOIwZMcANX1dF2W3C4BWf3ff1uDzK+5doIaQ62LcdAEmeJXtr6MBWiZLvfEFETt2Wev911EnYuHXXs9DJsLiW5iPsfYOqNc+A27WP4B8ihaxa2J46xNUtFCc9IeQ82JcxGOTLNY5CG9Pi5D1XYPO16C6BmvqAvmyJLW4l3MendPvrMXWsRV6vyJXVyHmV2P59ccZ9btAjCZ8h388FeLbEsnRP5hGZMJ4+IhMmA4fgQnz4QM2wRx8gCaYhw/IhOXgAzBheXiPTbAH76EJ9uE9MsEdvAcmuIfXcmCCP/BaFk3wD17Lggn+wmstaIL/8FoLmBAOvJZBE8KD1zJgQrjwWjNMCB9ea4IJ8cBrjTAhPnitASbEC6/1wYT44bV6TFgPvBbHBHOgFQdazfpz06ZNmzbN0C97EM/d8hW+4gAAAABJRU5ErkJggg==')"; - corazon[i].style.position="relative"; - corazon[i].style.display="block"; - corazon[i].style.width="64px"; - corazon[i].style.height="64px"; - } -} -window.addEventListener('load',ini,false);//ejecuta la funcion ini al cargar el documento</pre> - -<p>Ahora solo llamamos a nuestro archivo corazon.js desde nuetro html y podremos usar libremente nuetra etiqueta <corazon> con la cual nos mostrara un corazon.</p> - -<h2 id="index.html" name="index.html">index.html</h2> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<p><!DOCTYPE html><br> - <html><br> - <head><br> - <meta charset="utf-8"><br> - <title>Mi Etiqueta</title><br> - <script src="corazon.js" type="text/javascript"></script><br> - </head><br> - <body><br> - <corazon></corazon><br> - </body><br> - </html></p> - -<p> </p> diff --git a/files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html b/files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html deleted file mode 100644 index a5d26e1fd9..0000000000 --- a/files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Tipos de elementos -slug: orphaned/Web/HTML/Elemento/Tipos_de_elementos -tags: - - HTML - - HTML:Elemento - - Todas_las_Categorías -original_slug: Web/HTML/Elemento/Tipos_de_elementos ---- -<p>Los elementos se pueden agrupan de varias manera, aquí ofrecenos las siguientes: formal, estructural y funcional.</p> - -<h2 id="Seg.C3.BAn_el_doctype" name="Seg.C3.BAn_el_doctype">Según el doctype</h2> - -<p>Todo documento HTML debe tener un doctype, en el doctype se indica la dtd que se aplica al documento. La dtd es un archivo que, entre otras cosas, indica qué elementos pueden usarse en el documento, o cuales son sus atributos.</p> - -<p>Los doctypes válidos en HTML 4.01 son tres:</p> - -<h3 id="Para_marcos" name="Para_marcos">Para marcos</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" - "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"> -</pre> - -<p>Con este doctype pueden usarse todos los elementos del html.</p> - -<h3 id="De_transici.C3.B3n" name="De_transici.C3.B3n">De transición</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" - "<a class="external" href="http://www.w3.org/TR/html4/loose.dtd" rel="freelink">http://www.w3.org/TR/html4/loose.dtd</a>"> -</pre> - -<p>Pueden usarse todos los elementos <strong>menos</strong> los especificos de marcos que son: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a></p> - -<h3 id="Estrictos" name="Estrictos">Estrictos</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" - "<a class="external" href="http://www.w3.org/TR/html4/strict.dtd" rel="freelink">http://www.w3.org/TR/html4/strict.dtd</a>"> -</pre> - -<p>Con este doctype pueden usarse todos los elementos <strong>menos</strong> los específicos de los marcos: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a> <a href="/es/docs/HTML/Elemento/menu">menu</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a> <a href="/es/docs/HTML/Elemento/u">u</a></p> - -<h2 id="Seg.C3.BAn_su_estructura" name="Seg.C3.BAn_su_estructura">Según su estructura</h2> - -<p>Se dividen en tres grupos: básicos, de cabecera y de cuerpo.</p> - -<h3 id="Los_elementos_b.C3.A1sicos" name="Los_elementos_b.C3.A1sicos">Los elementos básicos</h3> - -<p>Son los elemento que conforman la columna vertebral de un documento html:</p> - -<dl> - <dt>Para un documento normal</dt> - <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/body">body</a></dd> -</dl> - -<dl> - <dt>para uno de marcos</dt> - <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> <a href="/es/docs/HTML/Elemento/frame">frame</a></dd> -</dl> - -<h3 id="De_cabecera" name="De_cabecera">De cabecera</h3> - -<p>Los de cabecera contienen la información necesaria para el correcto funcionamiento del documento.</p> - -<dl> - <dt>Elementos de cabecera son</dt> - <dd> </dd> - <dd>El obligatorio: <a href="/es/docs/HTML/Elemento/title">title</a></dd> - <dd>Los opcionales: <a href="/es/docs/HTML/Elemento/base">base</a> <a href="/es/docs/HTML/Elemento/meta">meta</a> <a href="/es/docs/HTML/Elemento/link">link</a></dd> - <dd>Los mixtos: <a href="/es/docs/HTML/Elemento/style">style</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/object">object</a> y el transicional: <a href="/es/docs/HTML/Elemento/isindex">isindex</a>. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.</dd> -</dl> - -<h3 id="De_cuerpo" name="De_cuerpo">De cuerpo</h3> - -<p>Son los que estructuran el contenido del documento, pueden clasificarse en dos o tres grupos, los que forman parte del flujo del documento, estos son los elementos en bloque y los elementos en línea; y los que no forman parte directa del flujo.</p> - -<h4 id="En_bloque" name="En_bloque">En bloque</h4> - -<dl> - <dt>Elementos en bloque son</dt> - <dd> </dd> - <dd><a href="/es/docs/HTML/Elemento/p">p</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> <a href="/es/docs/HTML/Elemento/div">div</a> <a href="/es/docs/HTML/Elemento/address">address</a> <a href="/es/docs/HTML/Elemento/hr">hr</a> <a href="/es/docs/HTML/Elemento/blockquote">blockquote</a> <a href="/es/docs/HTML/Elemento/form">form</a> <a href="/es/docs/HTML/Elemento/table">table</a> <a href="/es/docs/HTML/Elemento/fieldset">fieldset</a> <a href="/es/docs/HTML/Elemento/pre">pre</a> <a href="/es/docs/HTML/Elemento/noscript">noscript</a> <a href="/es/docs/HTML/Elemento/noframes">noframes</a> Y los transicionales: <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a></dd> - <dd>Los elementos de encabezados: <a href="/es/docs/HTML/Elemento/h1">h1</a> <a href="/es/docs/HTML/Elemento/h2">h2</a> <a href="/es/docs/HTML/Elemento/h3">h3</a> <a href="/es/docs/HTML/Elemento/h4">h4</a> <a href="/es/docs/HTML/Elemento/h5">h5</a> <a href="/es/docs/HTML/Elemento/h6">h6</a></dd> - <dd>los elementos para listas: <a href="/es/docs/HTML/Elemento/ul">ul</a> y <a href="/es/docs/HTML/Elemento/ol">ol</a>. Y los transicionales: <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/menu">menu</a></dd> -</dl> - -<h4 id="En_l.C3.ADnea" name="En_l.C3.ADnea">En línea</h4> - -<dl> - <dt>Elementos en línea son</dt> - <dd> </dd> - <dd>Los elementos de frase: <a href="/es/docs/HTML/Elemento/abbr">abbr</a> <a href="/es/docs/HTML/Elemento/acronym">acronym</a> <a href="/es/docs/HTML/Elemento/cite">cite</a> <a href="/es/docs/HTML/Elemento/code">code</a> <a href="/es/docs/HTML/Elemento/em">em</a> <a href="/es/docs/HTML/Elemento/strong">strong</a> <a href="/es/docs/HTML/Elemento/dfn">dfn</a> <a href="/es/docs/HTML/Elemento/kbd">kbd</a> <a href="/es/docs/HTML/Elemento/samp">samp</a> <a href="/es/docs/HTML/Elemento/var">var</a></dd> - <dd>Los elementos de estilo de fuente: <a href="/es/docs/HTML/Elemento/b">b</a> <a href="/es/docs/HTML/Elemento/big">big</a> <a href="/es/docs/HTML/Elemento/i">i</a> <a href="/es/docs/HTML/Elemento/small">small</a> <a href="/es/docs/HTML/Elemento/tt">tt</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/u">u</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a></dd> - <dd>Los elementos especiales: <a href="/es/docs/HTML/Elemento/a">a</a> <a href="/es/docs/HTML/Elemento/bdo">bdo</a> <a href="/es/docs/HTML/Elemento/br">br</a> <a href="/es/docs/HTML/Elemento/img">img</a> <a href="/es/docs/HTML/Elemento/map">map</a> <a href="/es/docs/HTML/Elemento/object">object</a> <a href="/es/docs/HTML/Elemento/q">q</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/span">span</a> <a href="/es/docs/HTML/Elemento/sub">sub</a> <a href="/es/docs/HTML/Elemento/sup">sup</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/iframe">iframe</a></dd> - <dd>Los elementos de controles de formulario: <a href="/es/docs/HTML/Elemento/button">button</a> <a href="/es/docs/HTML/Elemento/input">input</a> <a href="/es/docs/HTML/Elemento/label">label</a> <a href="/es/docs/HTML/Elemento/select">select</a> <a href="/es/docs/HTML/Elemento/textarea">textarea</a></dd> -</dl> - -<h4 id="Ni_en_bloque_ni_en_l.C3.ADnea" name="Ni_en_bloque_ni_en_l.C3.ADnea">Ni en bloque ni en línea</h4> - -<p>Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.</p> - -<dl> - <dt>Elementos subordinados son</dt> - <dd> </dd> - <dd>Subordinados a table: <a href="/es/docs/HTML/Elemento/caption">caption</a> <a href="/es/docs/HTML/Elemento/tr">tr</a> <a href="/es/docs/HTML/Elemento/th">th</a> <a href="/es/docs/HTML/Elemento/td">td</a> <a href="/es/docs/HTML/Elemento/thead">thead</a> <a href="/es/docs/HTML/Elemento/tbody">tbody</a> <a href="/es/docs/HTML/Elemento/tfoot">tfoot</a> <a href="/es/docs/HTML/Elemento/col">col</a> <a href="/es/docs/HTML/Elemento/colgroup">colgroup</a></dd> - <dd>Subordinados de listas: <a href="/es/docs/HTML/Elemento/li">li</a> <a href="/es/docs/HTML/Elemento/dd">dd</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> Subordinados a select son: <a href="/es/docs/HTML/Elemento/optgroup">optgroup</a> <a href="/es/docs/HTML/Elemento/option">option</a></dd> - <dd>Por último, <a href="/es/docs/HTML/Elemento/area">area</a> subordinado a map. <a href="/es/docs/HTML/Elemento/param">param</a> subordinado a object. y <a href="/es/docs/HTML/Elemento/legend">legend</a> subordinado a fieldset.</dd> -</dl> - -<h4 id="En_bloque_y_en_l.C3.ADnea" name="En_bloque_y_en_l.C3.ADnea">En bloque y en línea</h4> - -<p>Los elementos <a href="/es/docs/HTML/Elemento/ins">ins</a> y <a href="/es/docs/HTML/Elemento/del">del</a> pueden ser elementos en línea o en bloque según convenga.</p> - -<h2 id="Seg.C3.BAn_su_funci.C3.B3n" name="Seg.C3.BAn_su_funci.C3.B3n">Según su función</h2> - - -<div class="note"> -<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p> - -<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>Cómo ayudar</a>.</p> -</div> diff --git a/files/es/orphaned/web/html/global_attributes/dropzone/index.html b/files/es/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 205236c73b..0000000000 --- a/files/es/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Atributos_Globales/dropzone ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p>El atributo global <strong>dropzone </strong>es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la <a href="/es/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a> . Pueden tener los siguientes valores :</p> - -<ul> - <li>copy , indica que el soltado creará una copia del elemento que fue arrastrado .</li> - <li>move , indica que el elemento que fue arrastrado será movido a su nueva localización .</li> - <li>link, indica que creara un link para el dato arrastrado.</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracterísitica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico </td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Cataracterística</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown}}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también </h2> - -<ul> - <li>Tos los atributos globales </li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index ed9861e62c..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - Arreglo - - JavaScript - - Property - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Array/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <strong><code>Array.prototype</code></strong> representa el prototipo del constructor {{jsxref("Array")}} y le permite agregar nuevas propiedades y métodos a todos los objetos Array.</p> - -<pre class="brush: js">// Si JavaScript no proporciona un método first() de forma nativa, -// agrega un nuevo método que devuelve el primer elemento de una matriz. - -if (!Array.prototype.first) { - Array.prototype.first = function() { - return this[0]; - } -} -</pre> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Las instancias {{jsxref("Array")}} heredan de <code>Array.prototype</code>. Al igual que con todos los constructores, puede cambiar el prototipo del constructor del objeto para realizar cambios en todas las instancias {{jsxref("Array")}} . Por ejemplo, puede agregar nuevos métodos y propiedades para extender todos los objetos <code>Array</code>. Esto se usa para {{Glossary("Polyfill", "polyfilling")}}, por ejemplo.</p> - -<p>Un hecho poco conocido: <code>Array.prototype</code> en sí es un {{jsxref("Array")}}:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Properties" name="Properties">Propiedades</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Especifica la función que crea el prototipo de un objeto.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Refleja el número de elementos en un array.</dd> - <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> - <dd>Un símbolo que contiene nombres de propiedades para excluir de un ámbito vinculante <code><a href="/es/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd> -</dl> - -<h2 id="Methods" name="Methods">Métodos</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Métodos de mutación</h3> - -<p>Estos métodos modifican el array:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> - <dd>Copia una secuencia de elementos dentro del array.</dd> - <dt>{{jsxref("Array.prototype.fill()")}}</dt> - <dd>Rellena todos los elementos de un array desde un índice de inicio hasta un índice de fin con un valor determinado.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Elimina el último elemento de un array y devuelve dicho elemento.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Invierte el orden de los elementos de un array — el primero será el último y el último será el primero.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Elimina el primer elemento de un array y devuelve dicho elemento.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Ordena los elementos de un array y devuelve el array.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Añade o elimina elementos de un array.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Añade uno o más elementos al principio del array y devuelve la nueva longitud del array.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Métodos de consulta</h3> - -<p>Estos métodos no modifican el array y devuelven alguna representación del array.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Devuelve un nuevo array compuesto por este array unido con otro(s) array(s) y/o valor(es).</dd> - <dt>{{jsxref("Array.prototype.includes()")}}</dt> - <dd>Determina si un array contiene cierto elemento, devolviendo <code>true</code> o <code>false</code> apropiadamente.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Devuelve el primer (menor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Une todos los elementos de un array en una cadena de texto.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Devuelve el último (mayor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Extrae una sección de un array y devuelve un nuevo array.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Devuelve el array literal que representa al propio array especificado; puedes usar este valor para crear un nuevo array. Reemplaza al método {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Devuelve una cadena de texto que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Devuelve una cadena de texto localizada que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toLocaleString()")}}.</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteración</h3> - -<p>Muchos métodos toman como argumentos funciones que son llamadas mientras se procesa el array. Cuando estos métodos son llamados, la longitud (<code style="font-style: normal;">length</code>) del array es muestreado, y cualquier elemento añadido por encima de esta longitud dentro de la función (<span style="font-family: consolas,monaco,andale mono,monospace;">callback</span>) no es visitado. Otros cambios sobre el array (establecer el valor o eliminar un elemento) podría afectar el resultado de la operación si el método visita el elemento después. Mientras que el comportamiento especifico de estos métodos en muchos casos es bien definido, no deberías delegar sobre eso con la finalidad de no confundir a otros que podrían leer tu código. Si debes modificar el array, copialo en un nuevo array en su lugar.</p> - -<dl> - <dt>{{jsxref("Array.prototype.entries()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Devuelve true si cada elemento en este array satisface la función de testeo proporcionada.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Crea un nuevo array con todos los elementos de este array para los cuales la función de filtrado proporcionada devuelve true.</dd> - <dt>{{jsxref("Array.prototype.find()")}}</dt> - <dd>Devuelve el elemento hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o <code>undefined</code> si no se halla ninguno.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> - <dd>Devuelve el índice hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o -1 si no se halla ninguno.</dd> -</dl> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Llama a una función para cada elemento del array.</dd> - <dt>{{jsxref("Array.prototype.keys()")}}</dt> - <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Crea un nuevo array con el resultado de llamar a la función proporcionada sobre cada elemento de este array.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Aplica una función que recibe un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un único valor.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Aplica una función que recibe un acumulador y cada valor del array (de derecha a izquierda) para reducirlo a un único valor.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Devuelve true si al menos un elemento en este array satisface la función de testeo proporcionada.</dd> - <dt>{{jsxref("Array.prototype.values()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos (no estándar)</h3> - -<p>Muchos métodos en el objeto Javascript Array son diseñados para ser generalmente llamados para todos los objetos que "parecen" Arrays. Es decir, pueden ser usados sobre cualquier objeto que tenga una propiedad longitud (<code style="font-style: normal;">length</code>), y puedan ser accedidos usando nombres de propiedades numéricos (como con la indexación <code><span style="font-family: consolas,monaco,andale mono,monospace;">array[5]</span></code>). Algunos métodos, tales como {{jsxref("Array.join", "join")}}, sólo leen la <code>longitud</code> y propiedades numéricas del objeto sobre el cual son llamados. Otros, como {{jsxref("Array.reverse", "reverse")}}, requieren que las propiedades numéricas del objeto y la <code>longitud</code> sean mutables; estos métodos, por tanto, no pueden ser llamados sobre objetos como {{jsxref("String")}}, los cuales no permiten que su longitud o propiedades numéricas sintetizadas sean establecidas.</p> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<p> </p> - -<table> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p>Se agregaron los métodos <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code>.</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES7')}}</td> - <td>Se agregó el método <code>includes()</code>.</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> - -<div>{{Compat("javascript.builtins.Array.prototype")}}</div> - -<div id="compat-mobile"> </div> - -<h2 id="See_also" name="See_also">Ver también</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index 8d48f1081a..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>clear()</strong></code> elimina todos los elementos de un objeto <code>Map.</code></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_el_método_clear">Usando el método <code>clear</code></h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set("bar", "baz"); -myMap.set(1, "foo"); - -myMap.size; // 2 -myMap.has("bar"); // true - -myMap.clear(); - -myMap.size; // 0 -myMap.has("bar") // false -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico.</td> - <td>38</td> - <td>{{CompatGeckoDesktop("19.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico.</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 805d003686..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>delete()</strong></code> elimina el elemento especificado de un objeto <code>Map.</code></p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="brush: js">myMap.delete(clave);</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt>clave</dt> - <dd>Requerido. La clave del elemento a eliminar del objeto <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Retorna <code>true</code> si el elemento existe en el objeto <code>Map</code> objecty fue eliminado, o <code>false</code> si el elemento no existe.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Usando_el_método_delete">Usando el método <code>delete</code></h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set("bar", "foo"); - -myMap.delete("bar"); // Retorna true. Eliminado con éxito. -myMap.has("bar"); // Retorna false. El elemento "bar" ya no está presente. -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>38</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index 9f63684690..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>entries()</strong></code> retorna un nuevo objeto <code><strong>Iterator</strong></code> que contiene los pares <code>[clave, valor]</code> para cada elemento en el objeto <code>Map</code> en orden de inserción.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_entries()">Usando <code>entries()</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("0", "foo"); -myMap.set(1, "bar"); -myMap.set({}, "baz"); - -var mapIter = myMap.entries(); - -console.log(mapIter.next().value); // ["0", "foo"] -console.log(mapIter.next().value); // [1, "bar"] -console.log(mapIter.next().value); // [Object, "baz"] -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("20") }}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Prestación</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico.</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("20")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index ef7a8abb08..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>forEach()</strong></code> ejecuta una función por cada par clave / valor en el objeto Map, en orden de inserción.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Función ejecutada en cada elemento.</dd> - <dt><code>thisArg</code></dt> - <dd>Valor a usar por la funcion <code>callback</code>.</dd> -</dl> - -<h3 id="Valor_de_Retorno">Valor de Retorno</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>El método <code>forEach</code> ejecuta la devolución de llamada (<code>callback</code>) proporcionada una vez para cada clave del mapa que realmente exista. No se invoca para las claves que se han eliminado. Sin embargo, se ejecuta para los valores que están presentes pero tienen el valor indefinido (<code>undefined</code>).</p> - -<p>La función (<code>callback</code>) es invocada con <strong>3 argumentos</strong>:</p> - -<ul> - <li><strong>valor del elemento</strong></li> - <li><strong>clave del elemento</strong></li> - <li><strong>El objeto utilizado</strong></li> -</ul> - -<p>Si se provee un parámetro <code>thisArg</code> al método <code>forEach</code>, pasará al <code>callback</code> cuando sea invocado, para ser utilizado como su valor <code>this</code>. De otra manera, el valor <code>undefined</code> pasará para ser usado como su valor <code>this</code>. El valor <code>this</code> finalmente observable por el <code>callback</code> se determina de acuerdo a <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this">las reglas usuales para determinar la visibilidad de <code>this</code> por una función</a>.</p> - -<p>Cada valor es usado una vez, excepto en este caso cuando es eliminado y agregado de nuevo antes de que el <code>forEach</code> haya terminado. <code>callback</code> no es invocado para valores eliminados antes de que sean usados. </p> - -<p>El método <code>forEach</code> ejecuta la función <code>callback</code> una vez para cada elemento en el objeto <code>Map</code>; No se retornan valores.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Imprimiendo_el_contenido_de_un_objeto_Map">Imprimiendo el contenido de un objeto <code>Map</code></h3> - -<p>El siguiente código imprime una línea por cada elemento en el objeto <code>Map</code>:</p> - -<pre class="brush:js">function logMapElements(value, key, map) { - console.log(`m[${key}] = ${value}`); -} -new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements); -// logs: -// "m[foo] = 3" -// "m[bar] = [object Object]" -// "m[baz] = undefined" -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición Inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Map.forEach")}}</p> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index e61bf94935..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -tags: - - JavaScript - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>get()</strong></code> devuelve un elemento específico de un objeto <code>Map</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> - -<p class="hidden">El código fuente de este ejemplo se escuentra en un repositorio de GitHub. Si quieres contribuir al projecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud de pull request.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>miMapa</em>.get(clave);</code></pre> - -<h3 id="Parametros">Parametros</h3> - -<dl> - <dt>clave</dt> - <dd>Requerido. La clave del elemento del objeto <code>Map</code> que queremos obtener.</dd> -</dl> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p>Devuelve el elemento asociado a la clave indicada o <code>undefined</code> si la clave no ha sido encontrada en el objeto <code>Map</code>.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_el_método_get">Usando el método <code>get</code></h3> - -<pre class="brush: js">var miMapa = new Map(); -miMapa.set('bar', 'foo'); - -miMapa.get('bar'); // Devuelve "foo". -miMapa.get('baz'); // Devuelve undefined. -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Map.get")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index 81253e3317..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>has()</strong></code> devuelve un booleano indicando si el elemento con la llave especificada existe o no.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><var>myMap</var>.has(<var>key</var>)</pre> - -<h3 id="Parameteros">Parameteros</h3> - -<dl> - <dt><code><var>key</var></code></dt> - <dd>La llave del elemento a probar si esta presente en el objeto <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p><code>true</code> si el elemento con la llave especificada existe en el objeto <code>Map</code>; de lo contrario <code>false</code>.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_has">Usando <code>has()</code></h3> - -<pre class="brush: js notranslate">let myMap = new Map() -myMap.set('bar', "foo") - -myMap.has('bar') // returns true -myMap.has('baz') // returns false -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Map.has")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 8fc502cf71..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript2015 - - JavaScript - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -<div>{{JSRef("Global_Objects", "Map")}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El objeto <strong><code>Map</code></strong> almacena pares clave/valor. Cualquier valor (tanto objetos como {{Glossary("Primitive", "valores primitivos")}}) pueden ser usados como clave o valor.</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox"><code>new Map([iterable]) -</code></pre> - -<h3 id="Parameters" name="Parameters">Parámetros</h3> - -<dl> - <dt><code>iterable</code></dt> - <dd>Iterable es un array o cualquier otro objeto <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> cuyos elementos son pares clave-valor (arrays de 2 elementos). Cada par clave-valor será agregado al nuevo Map.</dd> -</dl> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle <code>for..of</code> devolverá un array de <code>[clave, valor]</code> en cada iteración.</p> - -<p>Cabe destacar que un <strong>Map </strong>el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.</p> - -<h3 id="Igualdad_de_claves">Igualdad de claves</h3> - -<p>La igualdad de claves esta basada en el algoritmo "SameValueZero": <code>NaN</code> es considerado lo mismo que <code>NaN </code>(sin importar que <code>NaN !== NaN</code>) y todos los otros operadores son considerados iguales de acuerdo a la semantica del operador ===. En las primeras versiones de ECMAScript 6 <code>-0</code> y <code>+0</code> eran considarados distintos (even though <code>-0 === +0</code>), esto fue cambiado en posteriores versiones y ha sido implementado en Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p> - -<h3 id="Objetos_y_mapas_comparados">Objetos y mapas comparados</h3> - -<p>Los {{jsxref("Object", "Objetos")}} son similares a los <code>Maps</code> en cuanto a que ambos permiten establecer claves a valores, recuperar dichos valores, eliminar claves, y detectar si existe algo almacenado en una clave determinada. Por esto, los <code>Objects</code> han sido usados históricamente como <code>Maps</code>; no obstante, hay diferencias importantes entre <code>Objects</code> y <code>Maps</code> que hacen mejor usar un <code>Map</code> en la mayoría de casos.</p> - -<ul> - <li>Las claves de un <code>Object</code> son {{jsxref("String", "Strings")}} y {{jsxref("Symbol", "Symbols")}}, mientras que para un <code>Map</code> pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.</li> - <li>Puedes saber facilmente el tamaño de un <code>Map</code> usando la propiedad <code>size</code>, mientras que le número de propiedades en un <code>Object</code> tiene que ser deternminado manualmente.</li> - <li>Un <code>Map</code> es un <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un <code>Object</code> necesitamos obtener primero las claves de alguna forma para después iterar sobre el.</li> - <li>Un <code>Object</code> tiene prototipo, por lo que hay claves por defecto en tu mapa que pueden colisionar con tus claves si no eres cuidadoso. En el estandard ES5 esto se puede evitar usando <code>mapa = Object.create(null)</code>, pero esto raramente se hace.</li> -</ul> - -<h2 id="Properties" name="Properties">Propiedades</h2> - -<dl> - <dt><code>Map.length</code></dt> - <dd>El valor de la propiedad de longitud es 0</dd> - <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> - <dd>La función constructor que se usa para crear objetos derivados.</dd> - <dt>{{jsxref("Map.prototype")}}</dt> - <dd>Representa el prototipo para el constructor de Map. Permite añadir propiedades a todos los objetos <code>Map</code>.</dd> -</dl> - -<h2 id="Boolean_instances" name="Boolean_instances">Instancias de Map</h2> - -<p>Todas las instancias de Map heredan de {{jsxref("Map.prototype")}}.</p> - -<h3 id="Propiedades">Propiedades</h3> - -<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Propiedades')}}</p> - -<h3 id="Métodos">Métodos</h3> - -<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Métodos')}}</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Ejemplo_Usando_el_objeto_Map">Ejemplo: Usando el objeto Map</h3> - -<pre class="brush: js">var miMapa = new Map(); - -var claveObj = {}, - claveFunc = function () {}, - claveCadena = "una cadena"; - -// asignando valores -miMapa.set(claveCadena, "valor asociado con 'una cadena'"); -miMapa.set(claveObj, "valor asociado con claveObj"); -miMapa.set(claveFunc, "valor asociado with claveFunc"); - -miMapa.size; // 3 - -// obteniendo los valores -miMapa.get(claveCadena); // "valor asociado con 'una cadena'" -miMapa.get(claveObj); // "valor asociado con claveObj" -miMapa.get(claveFunc); // "valor asociado con claveFunc" - -miMapa.get("una cadena"); // ""valor asociado con 'una cadena'" - // porque claveCadena === 'una cadena' -miMapa.get({}); // undefined, porque claveObj !== {} -miMapa.get(function() {}) // undefined, porque claveFunc !== function () {} -</pre> - -<h3 id="Ejemplo_Usando_NaN_como_claves_de_Map">Ejemplo: Usando <code>NaN</code> como claves de Map</h3> - -<p><code>NaN</code> también puede ser usado como una clave. Aún cuando cada clave <code>NaN</code> no es igual a sí misma (<code>NaN !== NaN</code> es verdadera), el siguiente ejemplo funciona, porque las claves NaNs <code>NaN</code>s no son distinguibles unas de otras:</p> - -<pre class="brush: js">var miMapa = new Map(); -miMapa.set(NaN, "no es un número"); - -miMapa.get(NaN); // "no es un número" - -var otroNaN = Number("foo"); -miMapa.get(otroNaN); // "no es un número" -</pre> - -<h3 id="Ejemplo_Iterando_Map_con_for..of">Ejemplo: Iterando <code>Map</code> con <code>for..of</code></h3> - -<p>Los Map pueden ser iterados usando un bucle <code>for..of</code>:</p> - -<pre class="brush: js">var miMapa = new Map(); -miMapa.set(0, "cero"); -miMapa.set(1, "uno"); -for (var [clave, valor] of miMapa) { - alert(clave + " = " + valor); -} -// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno" - -for (var clave of miMapa.keys()) { - alert(clave); -} -// Mostrará 2 alertas; primero con "0" y segundo con "1" - -for (var valor of miMapa.values()) { - alert(valor); -} -// Mostrará 2 alertas; primero con "cero" y segundo con "uno" - -for (var [clave, valor] of miMapa.entries()) { - alert(clave + " = " + valor); -} -// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno" - -miMapa.forEach(function(valor, clave, miMapa) { - alert(clave + " = " + valor); -}) -// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno" -</pre> - -<h3 id="Iterando_Maps_usando_forEach()">Iterando <code>Maps</code> usando <code>forEach()</code></h3> - -<p>Los Map pueden ser iterados usando el método <code>forEach()</code>:</p> - -<pre><code>miMapa.forEach(function(valor, clave) { - console.log(clave + ' = ' + valor); -}); -// Mostrará 2 logs; el primero con "0 = cero" y el segundo con "1 = uno"</code></pre> - -<h3 id="Ejemplo_Relación_con_los_objetos_Array">Ejemplo: Relación con los objetos <code>Array</code></h3> - -<pre class="brush: js">var kvArray = [["clave1", "valor1"], ["clave2", "valor2"]]; - -// El constructor por defecto de Map para transforar un Array 2D (clave-valor) en un mapa -var miMapa = new Map(kvArray); - -miMapa.get("clave1"); // devuelve "valor1" - -// Usando la función Array.from para transformar el mapa a un Array 2D clave-valor. -console.log(Array.from(miMapa)); // Muestra exactamente el mismo Array que kvArray - -// O usando los iteradores de claves o valores y convirtiendo a array. -console.log(Array.from(miMapa.keys())); // Muestra ["clave1", "clave2"] -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> - -<p> </p> - -<div class="hidden"> -<p>La tabla de compatiblidad en esta página es generada desde datos estructurados. Si quieres contribuir a los datos, pro favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de pull request.</p> -</div> - -<p>{{Compat("javascript.builtins.Map")}}</p> - -<p> </p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html deleted file mode 100644 index 8301bf7867..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Map.prototype.keys() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys -original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -<div>{{JSRef}}</div> - -<p>El metodo <code><strong>keys()</strong></code> returna un nuevo objeto <code><strong>Iterator</strong></code> que contiene las llaves/keys por cada elemento en el objeto en orden de insercion.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_keys()">Usando <code>keys()</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("0", "foo"); -myMap.set(1, "bar"); -myMap.set({}, "baz"); - -var mapIter = myMap.keys(); - -console.log(mapIter.next().value); // "0" -console.log(mapIter.next().value); // 1 -console.log(mapIter.next().value); // Object -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{CompatGeckoDesktop("20")}}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("20") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index cd552b8f37..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -tags: - - ECMAScript6 - - JavaScript - - Mapa - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -<div>{{JSRef}}</div> - -<p>El método <strong>set()</strong> agrega un nuevo elemento al objeto Map con la llave y el valor especificado.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.set(llave, valor);</code></pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt>llave</dt> - <dd>Requerido. La llave del elemento a agregar al objeto Map.</dd> - <dt>valor</dt> - <dd>Requerido. El valor del elemento a agregar al objeto Map.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>El objeto Map.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_el_método_set">Usando el método set</h3> - -<pre class="brush: js">var miMapa = new Map(); - -// Agregar nuevos elementos al mapa -miMapa.set("bar", "foo"); -miMapa.set(1, "foobar"); - -// Actualizar un elemento en el mapa -miMapa.set("bar", "baz"); -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracterítica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>38</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracterítica</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> - -<ul> - <li>En versiones inferiores a Firefox 33 {{geckoRelease("33")}}, <code>Map.prototype.set</code> retorna <code>undefined</code> y no es encadenable. Esto se ha reparado ({{bug(1031632)}}). Este comportamiento también se encontró en Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li> -</ul> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index 4f3a1fa90d..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -<div>{{JSRef}}</div> - -<p>La propiedad evaluada <code><strong>size</strong></code> retorna el número de elementos en un objeto {{jsxref("Map")}}.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>El valor de <code>size</code> es un entero representando cuántas entradas tiene el objeto <code>Map</code>. No hay definida una función de evalador set para <code>size</code>; uted no puede cambiar esta propiedad.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_size">Usando <code>size</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("a", "alpha"); -myMap.set("b", "beta"); -myMap.set("g", "gamma"); - -myMap.size // 3 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observaciones</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibildad_entre_navegadores">Compatibildad entre navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("19") }}</td> - <td>{{ CompatIE("11") }}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("19")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2> - -<ul> - <li>Desde Gecko 13 {{geckoRelease("13")}} a Gecko 18 {{geckoRelease("18")}} la propiedad size era implementada como un método <strong><code>Map.prototype.size()</code></strong>, esto ha sido modificado a propiedad en versiones posteriores de acuerdo a la especficiación ECMAScript 6 ({{bug("807001")}}).</li> -</ul> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html b/files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html deleted file mode 100644 index 815a6e75f8..0000000000 --- a/files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.values() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -tags: - - ECMAScript 2015 - - Iterador - - JavaScript - - Map - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values -original_slug: Web/JavaScript/Reference/Global_Objects/Map/values ---- -<div>{{JSRef}}</div> - -<p>El método <code><strong>values()</strong></code> devuelve un nuevo objeto <strong><a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterador</a></strong> que contiene los valores para cada elemento en el objeto <code>Map</code> en el mismo orden de inserción.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre> - -<h3 id="Valor_devuelto">Valor devuelto</h3> - -<p>Un nuevo objeto iterador {{jsxref("Map")}}.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Utilizando_values()">Utilizando <code>values()</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set('0', 'foo'); -myMap.set(1, 'bar'); -myMap.set({}, 'baz'); - -var mapIter = myMap.values(); - -console.log(mapIter.next().value); // "foo" -console.log(mapIter.next().value); // "bar" -console.log(mapIter.next().value); // "baz"</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Map.values")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> -</ul> diff --git a/files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 63fef3fed0..0000000000 --- a/files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Operador Pipeline -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -tags: - - Encadenamiento - - Experimental - - JavaScript - - Operador - - Pipeline -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p>El operador experimental pipeline <code>|></code> (actualmente en su fase1) conduce el valor de una expresión dentro de una función. Esto permite la creación de llamadas de función en cadena de un modo más legible. El resultado es una simplificación sintáctica en la cual la llamada a una función con un único parámetro puede ser escrita del siguiente modo:</p> - -<pre class="brush: js">let url = "%21" |> decodeURI;</pre> - -<p>La llamada equivalente en sintaxis tradicional tiene este aspecto:</p> - -<pre class="brush: js">let url = decodeURI("%21"); -</pre> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>expression</em> |> <em>function</em> -</pre> - -<p>El valor especificado en la <code>expression</code> se pasa dentro de la <code>function</code> como su único parámetro.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Encadenando_llamadas_a_funciones">Encadenando llamadas a funciones</h3> - -<p>El operador pipeline puede mejorar la legibilidad cuando se encadenan varias funciones entre si.</p> - -<pre class="brush: js">const double = (n) => n * 2; -const increment = (n) => n + 1; - -// sin operador pipeline -double(increment(double(double(5)))); // 42 - -// con operador pipeline -5 |> double |> double |> increment |> double; // 42 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Borrador del operador Pipeline</a></td> - <td>Fase 1</td> - <td>Todavía no forma parte de la especificación ECMAScript</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div> - - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> - <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> -</ul> diff --git a/files/es/orphaned/web/reference/api/index.html b/files/es/orphaned/web/reference/api/index.html deleted file mode 100644 index 066b8c0f8c..0000000000 --- a/files/es/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Referencias para API Web -slug: orphaned/Web/Reference/API -tags: - - API - - Diseño Web - - Referencia - - Web -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -<p><span class="seoSummary">La Web ofrece una amplia variedad de APIs para ejecutar toda una variedad de tareas útiles. Éstas pueden ser accesadas mediante código JavaScript, y te permiten hacer cualquier cosa, desde realizar ajustes menores a cualquier {{domxref("window")}} ó {{domxref("element")}}, hasta generar efectos gráficos y de aúdio complejos usando APIs tales como <a href="/en-US/docs/Web/WebGL">WebGL</a> y <a href="/en-US/docs/Web_Audio_API">Web Audio</a>.</span></p> - -<p>Cada interfaz individual a lo largo de todas las APIs se encuentra listada en el <a href="/en-US/docs/Web/API">índice.</a></p> - -<p>También hay un <a href="/en-US/docs/Web/Reference/Events">listado de todos los eventos disponibles</a> en la referencia de eventos.</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/DOM">Modelo de Objetos del Documento (DOM)</a></dt> - <dd>El DOM es una API que permite acceder y modificar el documento actual. La misma permite manipular el {{domxref("Node")}} y {{domxref("Element")}} del documento. Tanto HTML como SVG la han extendido para manipular sus elementos específicos.</dd> - <dt>API de Dispositivos</dt> - <dd>Este conjunto de APIs permiten acceder a varias funciones de hardware disponibles para páginas Web y aplicaciones. Por ejemplo, <a href="/en-US/docs/WebAPI/Using_Light_Events">API de Sensor Luz Ambiental</a>, <a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">API de Estado de Batería</a>, <a href="/en-US/docs/Using_geolocation" title="Using_geolocation">API de Geolocalización</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">API de Bloqueo de Puntero</a>, <a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">API de Proximidad</a>, <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">API de Orientación de Dispositivo</a>, <a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">API de Orientación de Pantalla</a>, <a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">API de Vibración</a>.</dd> - <dt>API de Comunicación</dt> - <dd>Estas APIs le permiten a páginas Web y aplicaciones comunicarse con otras páginas o dispositivos. Por ejemplo, <a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">API de Información de Red</a>, <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Notificaciones Web</a>, <a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">API de Push Simple</a>.</dd> - <dt id="Data_management_APIs">API de gestión de datos</dt> - <dd>Los datos de los usuarios pueden ser almacenados y gestionados usando este conjunto de APIs. Por ejemplo, <a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a>, <a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> -</dl> - -<p>Además de estas APIs, que están disponibles para cualquier sitio Web o aplicación, existen otras APIs de Mozilla más poderosas que están disponibles para aplicaciones privilegiadas y certificadas.</p> - -<dl> - <dt>API Privilegiadas</dt> - <dd>Una aplicación privilegiada es una aplicación instalada que ha recibido derechos específicos por parte del usuario. Entre las APIs privilegiadas se encuentran: <a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/en-US/docs/WebAPI/Contacts" title="WebAPI/Contacts">API de Contactos</a>, <a href="/en-US/docs/WebAPI/Device_Storage_API" title="WebAPI/Device_Storage_API">API de Almacenamiento de Dispositivos</a>, <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">API de Navegador</a>,</dd> - <dt>API Certificadas</dt> - <dd>Una aplicación certificada es una aplicación de bajo nivel que ejecuta operaciones críticas sobre un sistema operativo como Firefox OS. Las aplicaciones menos privilegiadas interactúan con estas aplicaciones certificadas mediante <a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Actividades Web</a>. Entre las APIs Certificadas se incluyen:<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> API Bluetooth</a>, <a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API de Conexión Móvil</a>, <a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API de Estadísticas de Red</a>, <a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefonía</a>, <a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API de Información WíFi</a>, <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">API de Cámara</a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API de Administración de Energía</a>, <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">API de Ajustes</a>, <a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">API de Inactividad</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">API de Permisos</a>, <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de Hora/Reloj</a>.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Comunidad" id="Comunidad">Comunidad</h2> - -<p>Únete a la comunidad de API Web en nuestra lista de correos o grupo de noticias:</p> - -<ul> - <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">Como Lista de Correo</a></li> - <li><a href="news://news.mozilla.org/mozilla.dev.webapi">Como Grupo de Noticias</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Como Grupo Google</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">Como Feed de Noticias en la Wéb</a></li> -</ul> - -<p>También, asegúrate de unirte a la discusión en vivo en el canal <a href="irc://irc.mozilla.org/webapi">#webapi</a> de <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> - -<h2 class="Related_Topics" id="Temas_Relacionados">Temas Relacionados</h2> - -<p>Los siguientes temas podrían ser de interés:</p> - -<ul> - <li><a href="/en-US/docs/Web/API">Índice de todas las interfaces API Web</a></li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/es/orphaned/web/reference/index.html b/files/es/orphaned/web/reference/index.html deleted file mode 100644 index 01576b7243..0000000000 --- a/files/es/orphaned/web/reference/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Referencia de Tecnologías Web -slug: orphaned/Web/Reference -tags: - - Landing - - Reference - - Referencia - - Web -translation_of: Web/Reference -original_slug: Web/Reference ---- -<p>La Web abierta (<em>open Web)</em> se construye usando diversas tecnologías. A continuación encontrará enlaces a nuestro material de referencia para cada una de ellas.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Tecnologias_Web_Fundamentales">Tecnologias Web Fundamentales</h2> - -<h3 id="Basicas">Basicas</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Web/HTML">HTML</a></dt> - <dd>El Lenguaje de Marcado para Hipertextos (<em>HyperText Markup Language</em>) es usado para describir y definir el contenido de una página Web en un formato bien estructurado.</dd> - <dt><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></dt> - <dd>Las Hojas de Estilo en Cascada (<em>Cascading Style Sheets</em>) se usan para describir la apariencia del contenido Web.</dd> -</dl> - -<h3 id="Código">Código</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Web/JavaScript">JavaScript</a></dt> - <dd>JavaScript es el lenguaje de programación que se ejecuta en los navegadores, se usa para para construir avanzados sitios Web interactivos y aplicaciones para ejecución segura en el navegador.</dd> - <dt><a href="https://developer.mozilla.org/es/docs/Web/Reference/API">Web APIs</a></dt> - <dd>Material de referencia para cada una de las APIs que constituyen las poderosas posiblidades de programación del Web, incluyendo el <a href="https://developer.mozilla.org/es/docs/DOM">DOM</a> y todas las APIs e interfaces que puedes usar para desarrollar contenidos Web y aplicaciones. - <ul> - <li><a href="https://developer.mozilla.org/es/docs/Web/API" title="/en-US/docs/Web/API">Referencia a la interfaz API del WEB</a> - todas las interfaces, ordenandas alfabetícamente.</li> - <li>La página <a href="https://developer.mozilla.org/es/docs/WebAPI">WebAPI</a> lista APIs para acceso a dispositivos y otras APIs utiles para aplicaciones.</li> - </ul> - </dd> -</dl> - -<h3 id="Gráficos">Gráficos</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/SVG">SVG</a></dt> - <dd>Los Gráficos Vectoriales Escalables (Scalable Vector Graphics) le permiten describir imágenes como conjuntos de vectores (líneas) y formas para permitir su escalamiento continúo independientemente del tamaño con el que hayan sido dibujados.</dd> - <dt><a href="https://developer.mozilla.org/es/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> - <dd>WebGL trae gráficos 3D al Web al introducir una API que cumple de cerca al estándar OpenGL ES 2.0, y que puede usarse en los elemntos <a href="https://developer.mozilla.org/es/docs/Web/HTML/Elemento/canvas" title="Editorial review completed."><code><canvas></code></a> de HTML.</dd> -</dl> - -<h3 id="Otras">Otras</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/es/docs/Web/MathML">MathML</a></dt> - <dd>El Lenguaje de Marcado Matemático (<em>Mathematical Markup Language</em>) hace posible presentar ecuaciones complejas.</dd> -</dl> -</div> -</div> diff --git a/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html b/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html deleted file mode 100644 index 363238cb7c..0000000000 --- a/files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: SVG en Firefox 1.5 -slug: orphaned/Web/SVG/SVG_en_Firefox_1.5 -tags: - - SVG - - Todas_las_Categorías -original_slug: Web/SVG/SVG_en_Firefox_1.5 ---- -<p> -<a href="es/Firefox_1.5">Firefox 1.5</a> marca la publicación del primer navegador de Mozilla que soporta el formato de <a class="external" href="http://www.w3.org/Graphics/SVG/">gráficos vectoriales escalables (SVG)</a>. El camino de este proyecto ha sido largo, nos satisface poner a disposición de los desarrolladores esta tecnologia y estamos impacientes por ver sus frutos. </p><p>Firefox SVG es un subconjunto de <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). En este documento se puede encontrar una lista completa de los elementos que han sido implementados en Firefox 1.5. Además encontrará información sobre las limitaciones en su implementación. -</p><p>La peculiar implementación que hemos realizado puede dificultar el creación de contenidos, le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación. -</p><p>Mientras lee esto, usted puede preguntarse cuandos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia el <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">mapa de ruta actual</a> situa la publicación de Firefox con Gecko 1.9 en el primer trimestre de 2007. Sin embargo si usted desea comenzar a experimentar con las nuevas funcionalidades, tiene a su disposición en las <a class="external" href="http://www.mozilla.org/developer/#builds">nightly builds</a> las últimas evoluciones, y si lo desea puede consultar <a class="external" href="http://www.mozilla.org/projects/svg/status.html">la tabla actualizada</a> sobre la implementación de SVG en la versión de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo ☺. -</p><p><br> -</p> -<h2 id="Performance" name="Performance"> Performance </h2> -<p>Firefox usa el mismo motor de renderizado, <a class="external" href="http://cairographics.org/">cairo</a>, en todas las plataformas en las que navega. Por lo tanto sus características de interpretación serán similares. La Performance en linux es la más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER. -</p><p>En Windows el renderizado de SVG es bastante más rápido que en otras plataformas. -</p> -<h2 id="Coordinate_range" name="Coordinate_range"> Coordinate range </h2> -<p>Si tu contenido posee geometría con un gran rango de coordenadas, necesitarás tener cuidado con los problemas causados por el uso interno de cairo de una representación en punto fijo de 16.16 bit para sus cálculos. Cairo no clip primitives antes de la rasterización, por lo que las coordenadas finales tras la transformación que excedan el rango desde -32678 a 32677 causarán errores de renderizado y posiblemente un funcionamiento bastante lento. -</p> -<h2 id="Texto_en_Windows_98" name="Texto_en_Windows_98"> Texto en Windows 98 </h2> -<p>Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado del texto no funcionará en Windows 98. En realidad la cosa es aun peor, si aparece cualquier texto durante la visualización de contenidos SVG, todo el dibujo se parará. -</p> -<h2 id="Selecci.C3.B3n_de_fuente" name="Selecci.C3.B3n_de_fuente"> Selección de fuente </h2> -<p>Si usted está familiarizado con CSS probablemente sabrá que puede especificar fuentes alternativas para las propiedades 'font' por si los glifos de una fuente concreta no estén disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si esta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible. -</p> -<h2 id="Impresi.C3.B3n" name="Impresi.C3.B3n"> Impresión </h2> -<p>Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen. -</p><p>Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG. -</p> -<h2 id="Opacidad_de_grupo" name="Opacidad_de_grupo"> Opacidad de grupo </h2> -<p>La propiedad de opacidad de grupo "opacity" permite que los objetos contenedores SVG puedan ser tratados como capas semi-transparentes, y sea separado de propiedades "fill-opacity" y "stroke-opacity" La implementacion actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados. -</p><p>Actualmente la opacidad de grupo está implementado solo para <g> pero no para <text> o <svg> -</p> -<h2 id="Stroking_fonts" name="Stroking_fonts"> Stroking fonts </h2> -<p>On the MS-Windows and OS-X platforms, the stroke of the text will not exactly match the fill. The error is typically quite small, and can be covered by using a slightly thicker stroke. An example of this difference: -</p><p><br> -<img alt="Imagen:Text-fill-stroke.png"> -</p> -<h2 id=".3Cimage.3E" name=".3Cimage.3E"> <image> </h2> -<p><image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja. -</p><p>Todas las instancias de <image> tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, <use> en contenido <image> cuenta como otra copia en este caso. -</p><p>De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar de sobremanera el rendimiento en Firefox 1.5. -</p> -<h2 id="Eventos" name="Eventos"> Eventos </h2> -<p>Soportamos los atributos de SVG para eventos, a excepción de "onfocusin", "onfocusout", y "onactivate". -</p><p>Nuestro manejo del evento "onload" es actualmente no-estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo "onload" será llamado para cada elemento, un evento SVGLoad es llamado únicamente para el elemento <svg> raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código "onload". Dichos métodos son getBBox, getScreenCTM, etc. -</p><p>No damos soporte a los eventos para el teclado específicos de Adobe ("onkeydown", "onkeyup"). -</p> -<h2 id="Interoperabilidad" name="Interoperabilidad"> Interoperabilidad </h2> -<p>Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales, y son el resultado de una implementación más estricta en Firefox. En <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> Jonathan Watt's explica los problemas comunes. -</p> -<h2 id="Situaciones_del_uso" name="Situaciones_del_uso"> Situaciones del uso </h2> -<p>Firefox 1.5 maneja SVG como un documento entero, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes. -</p> -<h2 id="Animaci.C3.B3n" name="Animaci.C3.B3n"> Animación </h2> -<p>Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG. -</p> -<h2 id="Elementos.2C_estado_de_la_implementaci.C3.B3n" name="Elementos.2C_estado_de_la_implementaci.C3.B3n"> Elementos, estado de la implementación </h2> <table style="margin: 5px;"> <tbody><tr> <th><b>Elemento</b></th> <th><b>Notas</b></th> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Módulo Estructura</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> <td> <ul> <li>Implementado. </li><li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface. </li><li>SVGSVGElement <ul> <li> Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView </li> <li> Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.</td> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.</td> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> <td> <ul> <li>Implementado. </li><li>Only works for internal document references (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>). </li><li>Doesn't completely follow <svg:use> cascading rules (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>). </li><li>Doesn't deliver events to a SVGElementInstance tree (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> <td> <ul> <li>Implementado. </li><li>Only works for raster images (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> <td> <ul> <li>Implementado.</li> <li>SVGPathElement Interfaz <ul> <li> Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList </li> <li> Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength </li> </ul> </li> <li>SVGPathSegList Interface <ul> <li>Bindings no implementados: replaceItem()</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> <td> <ul> <li>SImplementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Módulo Texto</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> <td> <ul> <li>Implementado. </li><li>SVGTextElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> <li> Bindings not functional at <code>onload</code> time: getExtentOfChar </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> <td> <ul> <li>Implementado. </li><li>SVGTSpanElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Módulo Marker</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Módulo Color-Profile</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Módulo Gradientes</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Módulo Pattern</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Módulo Clip</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> <td> <ul> <li>Implementado. </li><li>Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Módulo Mask</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Módulo Filtro</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Módulo Cursor</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Módulo hiperenlace</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> <td> <ul> <li>Implementado en un binding XBL - object no es del tipo SVGAElement.</li> <li>Solo están implementados los atributos <code>xlink:href</code> y <code>xlink:show</code> </li> <li>Sobre el atributo <code>target</code> vea <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=300868">bug 300868</a></li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">Módulo visión</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Módulo Script</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Módulo Animación</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Módulo Fuentes</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Módulo Extensibilidad</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> <td> <ul> <li>Implementado, but not built. </li></ul> </td> </tr> </tbody></table> -{{ languages( { "en": "en/SVG_in_Firefox", "fr": "fr/SVG_dans_Firefox", "ja": "ja/SVG_in_Firefox", "pl": "pl/SVG_w_Firefoksie" } ) }} diff --git a/files/es/orphaned/xpinstall_api_reference/index.html b/files/es/orphaned/xpinstall_api_reference/index.html deleted file mode 100644 index c830baa658..0000000000 --- a/files/es/orphaned/xpinstall_api_reference/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: XPInstall API Reference -slug: orphaned/XPInstall_API_Reference -original_slug: XPInstall_API_Reference ---- -<p>@namespace url(<a class=" external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>); -</p><p>/* ----------Make toolbars Look ok on Classic---------- */ -</p> -<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox { -</li></ol> -<pre class="eval"> -moz-appearance: toolbox !important; - background-color: -moz-Dialog !important; - border-top: 2px solid !important; - -moz-border-top-colors: ThreeDShadow ThreeDHighlight !important; -</pre> -<p>} -</p> -<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox toolbar { -</li></ol> -<pre class="eval"> -moz-appearance: toolbar !important; - border-top: 2px solid !important; - -moz-border-top-colors: ThreeDShadow ThreeDHighlight !important; -</pre> -<p>} -</p> -<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar { -</li></ol> -<pre class="eval"> border: none !important; -</pre> -<p>} -</p> -<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar, -</li><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #PersonalToolbar { -</li></ol> -<pre class="eval"> -moz-opacity: 1 !important; -</pre> -<p>} -</p> -<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar, -</li><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar menubar, -</li><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #nav-bar { -</li></ol> -<pre class="eval"> -moz-appearance: toolbar !important; -</pre> -<p>} -</p> -<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar { -</li></ol> -<pre class="eval"> background: none !important; -</pre> -<p>} -</p> -<ol><li>main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox { -</li></ol> -<pre class="eval"> background-color: -moz-Dialog !important; -</pre> -<p>} -</p><p>/* ----------Fix Address Bar---------- */ -</p> -<ol><li>urlbar { -</li></ol> -<pre class="eval"> padding-left: 1px !important; -</pre> -<p>} -</p><p>/* code from kliu0x52 */ -</p> -<ol><li>urlbar:not(:-moz-system-metric(windows-default-theme)) { -</li></ol> -<pre class="eval"> -moz-appearance: TextField ! important; -</pre> -<p>} -</p> -<ol><li>urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) { -</li></ol> -<pre class="eval"> -moz-margin-start: 4px ! important; -</pre> -<p>} -</p> -<ol><li>urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) > #identity-box { -</li></ol> -<pre class="eval"> -moz-margin-start: 0px ! important; -</pre> -<p>} -</p> -<ol><li>urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) > #identity-box > hbox { -</li></ol> -<pre class="eval"> border-left-style: none ! important; - padding-left: 2px ! important; - -moz-border-radius: 0px ! important; -</pre> -<p>} -</p><p>.searchbar-textbox:not(:-moz-system-metric(windows-default-theme)) { -</p> -<pre class="eval"> -moz-appearance: TextField ! important; -</pre> -<p>} -/* end of code from kliu0x52 */ -</p><p>/* ----------Remove withe background from menubar---------- */ -</p> -<ol><li>toolbar-menubar { -</li></ol> -<pre class="eval"> background: none !important; -</pre> -<p>} -</p> -<ol><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #file-menu, -</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #edit-menu, -</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #view-menu, -</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #history-menu, -</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #bookmarksMenu, -</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #tools-menu, -</li><li>main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #helpMenu { -</li></ol> -<pre class="eval"> color: #ffffff !important; -</pre> -<p>} -</p><p>/* ----------Make bookmarks toolbar blue---------- */ -</p> -<ol><li>PersonalToolbar:-moz-system-metric(windows-default-theme) { -</li></ol> -<pre class="eval"> -moz-appearance: communications-toolbox !important; - padding: 2px 2px 3px 2px !important; -</pre> -<p>} -</p> -<ol><li>PersonalToolbar .toolbarbutton-text:-moz-system-metric(windows-default-theme) { -</li></ol> -<p>color: #fff !important; -margin-bottom: 1px !important; -} -</p><p>toolbarbutton.bookmark-item:-moz-system-metric(windows-default-theme) { -padding: 2px 6px !important; -</p> |