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 | |
| 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')
231 files changed, 2 insertions, 31259 deletions
diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index b51e749939..b33c7d6b85 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -13,18 +13,13 @@ /es/docs/Accesibilidad/Comunidad /es/docs/Web/Accessibility/Community /es/docs/Accesibilidad:Comunidad /es/docs/Web/Accessibility/Community /es/docs/Accessibility /es/docs/Web/Accessibility -/es/docs/Acerca_del_Modelo_de_Objetos_del_Documento /es/docs/conflicting/Web/API/Document_Object_Model /es/docs/Actualizar_aplicaciones_web_para_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Updating_web_applications /es/docs/Actualizar_extensiones_para_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Updating_extensions -/es/docs/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 /es/docs/orphaned/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 -/es/docs/Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla /es/docs/orphaned/Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla /es/docs/Applying_SVG_effects_to_HTML_content /es/docs/Web/SVG/Applying_SVG_effects_to_HTML_content /es/docs/ArrastrarSoltar /en-US/docs/Web/API/HTML_Drag_and_Drop_API /es/docs/ArrastrarSoltar/Arrastrar_y_soltar /es/docs/Web/API/HTML_Drag_and_Drop_API /es/docs/Añadir_lectores_de_canales_a_Firefox /es/docs/Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox -/es/docs/Añadir_motores_de_búsqueda_desde_páginas_web /es/docs/conflicting/Web/OpenSearch /es/docs/Bugs_importantes_solucionados_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed -/es/docs/Building_an_Extension /es/docs/conflicting/Mozilla/Add-ons /es/docs/CSS /es/docs/Web/CSS /es/docs/CSS/-moz-force-broken-image-icon /es/docs/Web/CSS/-moz-force-broken-image-icon /es/docs/CSS/::selection /es/docs/Web/CSS/::selection @@ -41,16 +36,8 @@ /es/docs/CSS/@import /es/docs/Web/CSS/@import /es/docs/CSS/@keyframes /es/docs/Web/CSS/@keyframes /es/docs/CSS/@media /es/docs/Web/CSS/@media -/es/docs/CSS/Comenzando_(tutorial_CSS) /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) -/es/docs/CSS/Como_iniciar /es/docs/orphaned/Web/CSS/Como_iniciar -/es/docs/CSS/Como_iniciar/Por_que_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/es/docs/CSS/Como_iniciar/Porqué_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/es/docs/CSS/Como_iniciar/Que_es_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22 /es/docs/CSS/Consultas_multimedia /es/docs/Web/CSS/Media_Queries/Using_media_queries -/es/docs/CSS/Getting_Started /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) -/es/docs/CSS/Introducción /es/docs/conflicting/Learn/CSS/First_steps /es/docs/CSS/Media_queries /es/docs/Web/CSS/Media_Queries/Using_media_queries -/es/docs/CSS/Primeros_pasos /es/docs/orphaned/Web/CSS/Primeros_pasos /es/docs/CSS/Pseudoelementos /es/docs/Web/CSS/Pseudo-elements /es/docs/CSS/Selectores_atributo /es/docs/Web/CSS/Attribute_selectors /es/docs/CSS/Transiciones_de_CSS /es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions @@ -66,7 +53,6 @@ /es/docs/CSS/animation-delay /es/docs/Web/CSS/animation-delay /es/docs/CSS/animation-direction /es/docs/Web/CSS/animation-direction /es/docs/CSS/animation-duration /es/docs/Web/CSS/animation-duration -/es/docs/CSS/auto /es/docs/conflicting/Web/CSS/width /es/docs/CSS/azimuth /es/docs/Web/CSS/azimuth /es/docs/CSS/background /es/docs/Web/CSS/background /es/docs/CSS/background-attachment /es/docs/Web/CSS/background-attachment @@ -129,7 +115,6 @@ /es/docs/CSS/min-height /es/docs/Web/CSS/min-height /es/docs/CSS/min-width /es/docs/Web/CSS/min-width /es/docs/CSS/none /es/docs/Web/CSS/float -/es/docs/CSS/normal /es/docs/conflicting/Web/CSS/font-variant /es/docs/CSS/number /es/docs/Web/CSS/number /es/docs/CSS/opacity /es/docs/Web/CSS/opacity /es/docs/CSS/overflow /es/docs/Web/CSS/overflow @@ -137,7 +122,6 @@ /es/docs/CSS/porcentaje /es/docs/Web/CSS/percentage /es/docs/CSS/position /es/docs/Web/CSS/position /es/docs/CSS/right /es/docs/Web/CSS/right -/es/docs/CSS/rtl /es/docs/orphaned/Web/CSS/rtl /es/docs/CSS/top /es/docs/Web/CSS/top /es/docs/CSS/transform /es/docs/Web/CSS/transform /es/docs/CSS/transform-origin /es/docs/Web/CSS/transform-origin @@ -151,7 +135,6 @@ /es/docs/CSS:Valor_calculado /es/docs/Web/CSS/computed_value /es/docs/CSS:Valor_inicial /es/docs/Web/CSS/initial_value /es/docs/CSS:after /es/docs/Web/CSS/::after -/es/docs/CSS:auto /es/docs/conflicting/Web/CSS/width /es/docs/CSS:azimuth /es/docs/Web/CSS/azimuth /es/docs/CSS:background /es/docs/Web/CSS/background /es/docs/CSS:background-attachment /es/docs/Web/CSS/background-attachment @@ -206,23 +189,16 @@ /es/docs/CSS:min-height /es/docs/Web/CSS/min-height /es/docs/CSS:min-width /es/docs/Web/CSS/min-width /es/docs/CSS:none /es/docs/Web/CSS/float -/es/docs/CSS:normal /es/docs/conflicting/Web/CSS/font-variant /es/docs/CSS:number /es/docs/Web/CSS/number /es/docs/CSS:position /es/docs/Web/CSS/position /es/docs/CSS:right /es/docs/Web/CSS/right -/es/docs/CSS:rtl /es/docs/orphaned/Web/CSS/rtl /es/docs/CSS:top /es/docs/Web/CSS/top /es/docs/CSS:vacío /es/docs/Web/CSS/:empty /es/docs/CSS:visibility /es/docs/Web/CSS/visibility /es/docs/CSS:width /es/docs/Web/CSS/width -/es/docs/CSS_dinámico /es/docs/orphaned/CSS_dinámico /es/docs/Cadenas_del_User_Agent_de_Gecko /es/docs/Web/HTTP/Headers/User-Agent/Firefox -/es/docs/Code_snippets /es/docs/orphaned/Code_snippets -/es/docs/Code_snippets/Pestañas_del_navegador /es/docs/orphaned/Code_snippets/Pestañas_del_navegador /es/docs/Columnas_con_CSS-3 /es/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts -/es/docs/Complementos_de_Firefox._Guia_del_desarrollador /es/docs/orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox /es/docs/Configurar_correctamente_los_tipos_MIME_del_servidor /es/docs/Learn/Server-side/Configuring_server_MIME_types -/es/docs/Control_de_la_corrección_ortográfica_en_formularios_HTML /es/docs/conflicting/Web/HTML/Global_attributes/spellcheck /es/docs/Core_JavaScript_1.5_Guide /es/docs/Web/JavaScript/Guide /es/docs/Core_JavaScript_1.5_Guide/Calling_Functions /es/docs/Web/JavaScript/Guide/Functions#Llamando_funciones /es/docs/Core_JavaScript_1.5_Guide/Defining_Functions /es/docs/Web/JavaScript/Guide/Functions @@ -240,23 +216,14 @@ /es/docs/Core_JavaScript_1.5_Reference/Objects/String/small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small /es/docs/Core_JavaScript_1.5_Reference:Objects:String:small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small /es/docs/Creacion_de_plugins_OpenSearch_para_Firefox /es/docs/Web/OpenSearch -/es/docs/Creación_de_Componentes_XPCOM/Interior_del_Componente /es/docs/orphaned/Creación_de_Componentes_XPCOM/Interior_del_Componente -/es/docs/Creación_de_Componentes_XPCOM/Prefacio /es/docs/orphaned/Creación_de_Componentes_XPCOM/Prefacio -/es/docs/Creación_de_Componentes_XPCOM:Interior_del_Componente /es/docs/orphaned/Creación_de_Componentes_XPCOM/Interior_del_Componente -/es/docs/Creación_de_Componentes_XPCOM:Prefacio /es/docs/orphaned/Creación_de_Componentes_XPCOM/Prefacio /es/docs/Creación_de_Componentes_XPCOM:Un_vistazo_de_XPCOM /es/docs/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM /es/docs/Creación_de_Componentes_XPCOM:Uso_de_Componentes_XPCOM /es/docs/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM /es/docs/Creando_Componentes_XPCOM /es/docs/Creación_de_Componentes_XPCOM /es/docs/Creando_un_skin_para_Firefox /es/docs/Creando_un_tema_para_Firefox /es/docs/Creando_un_skin_para_Firefox:UUID /es/docs/Creando_un_skin_para_Firefox/UUID /es/docs/Creando_un_skin_para_Firefox:_Como_empezar /es/docs/Creando_un_skin_para_Firefox/Como_empezar -/es/docs/Creando_una_extensión /es/docs/orphaned/Creando_una_extensión /es/docs/Crear_una_barra_lateral_en_Firefox /es/docs/Crear_un_panel_lateral_en_Firefox -/es/docs/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System /es/docs/orphaned/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System /es/docs/DHTML /es/docs/Glossary/DHTML -/es/docs/DHTML_Demostraciones_del_uso_de_DOM_Style /es/docs/orphaned/DHTML_Demostraciones_del_uso_de_DOM_Style -/es/docs/DOM /es/docs/conflicting/Web/API/Document_Object_Model_7d961b8030c6099ee907f4f4b5fe6b3d -/es/docs/DOM/Almacenamiento /es/docs/conflicting/Web/API/Web_Storage_API /es/docs/DOM/CSS /es/docs/Web/CSS /es/docs/DOM/CameraCapabilities /es/docs/Web/API/CameraCapabilities /es/docs/DOM/CameraCapabilities.effects /es/docs/Web/API/CameraCapabilities/effects @@ -268,7 +235,6 @@ /es/docs/DOM/CssRule.selectorText /es/docs/Web/API/CSSStyleRule/selectorText /es/docs/DOM/Document.styleSheets /es/docs/Web/API/Document/styleSheets /es/docs/DOM/Element.setAttribute /es/docs/Web/API/Element/setAttribute -/es/docs/DOM/Element.style /es/docs/orphaned/Web/API/ElementCSSInlineStyle/style /es/docs/DOM/HTMLAudioElement /es/docs/Web/API/HTMLAudioElement /es/docs/DOM/HTMLTableElement /es/docs/Web/API/HTMLTableElement /es/docs/DOM/Manipulando_el_historial_del_navegador /es/docs/Web/API/History_API @@ -374,7 +340,6 @@ /es/docs/DOM/window.onload /es/docs/Web/API/GlobalEventHandlers/onload /es/docs/DOM/window.onunload /es/docs/Web/API/WindowEventHandlers/onunload /es/docs/DOM/window.requestAnimationFrame /es/docs/Web/API/Window/requestAnimationFrame -/es/docs/DOM:Almacenamiento /es/docs/conflicting/Web/API/Web_Storage_API /es/docs/DOM:Selection:addRange /es/docs/Web/API/Selection/addRange /es/docs/DOM:Selection:anchorNode /es/docs/Web/API/Selection/anchorNode /es/docs/DOM:Selection:anchorOffset /es/docs/Web/API/Selection/anchorOffset @@ -439,14 +404,8 @@ /es/docs/DOM:window.fullScreen /es/docs/Web/API/Window/fullScreen /es/docs/DOM:window.getSelection /es/docs/Web/API/Window/getSelection /es/docs/DOM:window.navigator.registerProtocolHandler /es/docs/Web/API/Navigator/registerProtocolHandler -/es/docs/DOM_Inspector /es/docs/orphaned/Tools/Add-ons/DOM_Inspector -/es/docs/Desarrollando_Mozilla /es/docs/orphaned/Desarrollando_Mozilla -/es/docs/Desarrollo_Web /es/docs/conflicting/Web/Guide /es/docs/Detección_del_navegador_y_soporte_entre_ellos /es/docs/Detección_del_navegador_y_cobertura_a_múltiples_navegadores -/es/docs/Detectar_la_orientación_del_dispositivo /es/docs/orphaned/Detectar_la_orientación_del_dispositivo -/es/docs/Dibujando_Gráficos_con_Canvas /es/docs/orphaned/Dibujando_Gráficos_con_Canvas /es/docs/Dibujar_texto_usando_canvas /es/docs/Web/API/Canvas_API/Tutorial/Drawing_text -/es/docs/DragDrop /es/docs/conflicting/Web/API/HTML_Drag_and_Drop_API /es/docs/DragDrop/Drag_and_Drop /es/docs/Web/API/HTML_Drag_and_Drop_API /es/docs/DragDrop/Drag_and_Drop/drag_and_drop_archivo /es/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop /es/docs/DragDrop/Recommended_Drag_Types /es/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types @@ -494,12 +453,8 @@ /es/docs/EXSLT:str:split /es/docs/Web/EXSLT/str/split /es/docs/EXSLT:str:tokenize /es/docs/Web/EXSLT/str/tokenize /es/docs/Errores_notables_corregidos_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed -/es/docs/Estructura_de_directorios_de_código_fuente_de_Mozilla /es/docs/orphaned/Estructura_de_directorios_de_código_fuente_de_Mozilla -/es/docs/Etiquetas_audio_y_video_en_Firefox /es/docs/orphaned/Etiquetas_audio_y_video_en_Firefox /es/docs/Eventos_online_y_offline /es/docs/Web/API/NavigatorOnLine/Online_and_offline_events -/es/docs/Extensiones/Actualización_de_extensiones_para_Firefox_4 /es/docs/orphaned/Extensiones/Actualización_de_extensiones_para_Firefox_4 /es/docs/Extensión_Firebug_(externo) https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox -/es/docs/FAQ_Incrustando_Mozilla /es/docs/orphaned/FAQ_Incrustando_Mozilla /es/docs/FUEL:Annotations /es/docs/FUEL/Annotations /es/docs/FUEL:Application /es/docs/FUEL/Application /es/docs/FUEL:Bookmark /es/docs/FUEL/Bookmark @@ -525,13 +480,7 @@ /es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.1_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3.5 /es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.5_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3.5 /es/docs/Firefox_3_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3 -/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions /es/docs/orphaned/Firefox_addons_developer_guide/Introduction_to_Extensions -/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions-redirect-1 /es/docs/orphaned/Firefox_addons_developer_guide/Introduction_to_Extensions -/es/docs/Firefox_addons_developer_guide/Technologies_used_in_developing_extensions /es/docs/orphaned/Firefox_addons_developer_guide/Technologies_used_in_developing_extensions /es/docs/Firefox_en_Android /es/docs/Mozilla/Firefox_para_Android -/es/docs/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio /es/docs/orphaned/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio -/es/docs/Fragmentos_de_código /es/docs/orphaned/Fragmentos_de_código -/es/docs/Funciones /es/docs/orphaned/Funciones /es/docs/Games/Herramients /es/docs/Games/Tools /es/docs/Games/Herramients/asm.js /es/docs/Games/Tools/asm.js /es/docs/Games/Introduccion /es/docs/Games/Introduction @@ -553,7 +502,6 @@ /es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win /es/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation /es/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation /es/docs/Garantía_de_Calidad /es/docs/QA -/es/docs/Generación_de_GUIDs /es/docs/orphaned/Generación_de_GUIDs /es/docs/Gestión_del_foco_en_HTML /es/docs/Web/API/Document/hasFocus /es/docs/Glossary/AOM /es/docs/Glossary/Accessibility_tree /es/docs/Glossary/Algoritmo /es/docs/Glossary/Algorithm @@ -562,7 +510,6 @@ /es/docs/Glossary/Arreglos /es/docs/Glossary/array /es/docs/Glossary/Asíncrono /es/docs/Glossary/Asynchronous /es/docs/Glossary/Atributo /es/docs/Glossary/Attribute -/es/docs/Glossary/Atributo_global /es/docs/conflicting/Web/HTML/Global_attributes /es/docs/Glossary/CID /es/docs/Glossary/CIA /es/docs/Glossary/Cabecera_general /es/docs/Glossary/General_header /es/docs/Glossary/Caché /es/docs/Glossary/Cache @@ -574,7 +521,6 @@ /es/docs/Glossary/Constante /es/docs/Glossary/Constant /es/docs/Glossary/Criptoanálisis /es/docs/Glossary/Cryptanalysis /es/docs/Glossary/Criptografía /es/docs/Glossary/Cryptography -/es/docs/Glossary/DTD /es/docs/conflicting/Glossary/Doctype /es/docs/Glossary/Descifrado /es/docs/Glossary/Decryption /es/docs/Glossary/Encriptación /es/docs/Glossary/Encryption /es/docs/Glossary/Entidad /es/docs/Glossary/Entity @@ -614,7 +560,6 @@ /es/docs/Glossary/XForm /es/docs/Glossary/XForms /es/docs/Glossary/coercion /es/docs/Glossary/Type_coercion /es/docs/Glossary/conjunto_de_caracteres /es/docs/Glossary/character_set -/es/docs/Glossary/elemento /es/docs/orphaned/Glossary/elemento /es/docs/Glossary/miga-de-pan /es/docs/Glossary/Breadcrumb /es/docs/Glossary/propiedad /es/docs/Glossary/property /es/docs/Glossary/seguro /es/docs/Glossary/safe @@ -774,13 +719,9 @@ /es/docs/Guía_JavaScript_1.5:Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/Guía_JavaScript_1.5:Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/Guía_de_referencia_de_CSS /es/docs/Web/CSS/Reference -/es/docs/Guía_para_el_desarrollador_de_agregados_para_Firefox /es/docs/orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox -/es/docs/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones /es/docs/orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones -/es/docs/Guía_para_la_migración_a_catálogo /es/docs/orphaned/Guía_para_la_migración_a_catálogo /es/docs/HTML /es/docs/Web/HTML /es/docs/HTML/Block-level_elements /es/docs/Web/HTML/Block-level_elements /es/docs/HTML/Canvas /es/docs/Web/API/Canvas_API -/es/docs/HTML/Canvas/Drawing_graphics_with_canvas /es/docs/conflicting/Web/API/Canvas_API/Tutorial /es/docs/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida /es/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /es/docs/HTML/Element /es/docs/Web/HTML/Element /es/docs/HTML/Element/a /es/docs/Web/HTML/Element/a @@ -795,7 +736,6 @@ /es/docs/HTML/Elemento/Audio /es/docs/Web/HTML/Element/audio /es/docs/HTML/Elemento/Elementos_títulos /es/docs/Web/HTML/Element/Heading_Elements /es/docs/HTML/Elemento/Progreso /es/docs/Web/HTML/Element/progress -/es/docs/HTML/Elemento/Tipos_de_elementos /es/docs/orphaned/Web/HTML/Elemento/Tipos_de_elementos /es/docs/HTML/Elemento/a /es/docs/Web/HTML/Element/a /es/docs/HTML/Elemento/abbr /es/docs/Web/HTML/Element/abbr /es/docs/HTML/Elemento/acronym /es/docs/Web/HTML/Element/acronym @@ -820,7 +760,6 @@ /es/docs/HTML/Elemento/code /es/docs/Web/HTML/Element/code /es/docs/HTML/Elemento/col /es/docs/Web/HTML/Element/col /es/docs/HTML/Elemento/colgroup /es/docs/Web/HTML/Element/colgroup -/es/docs/HTML/Elemento/datalist /es/docs/orphaned/HTML/Elemento/datalist /es/docs/HTML/Elemento/dd /es/docs/Web/HTML/Element/dd /es/docs/HTML/Elemento/del /es/docs/Web/HTML/Element/del /es/docs/HTML/Elemento/dfn /es/docs/Web/HTML/Element/dfn @@ -835,7 +774,6 @@ /es/docs/HTML/Elemento/figure /es/docs/Web/HTML/Element/figure /es/docs/HTML/Elemento/font /es/docs/Web/HTML/Element/font /es/docs/HTML/Elemento/footer /es/docs/Web/HTML/Element/footer -/es/docs/HTML/Elemento/form /es/docs/orphaned/HTML/Elemento/form /es/docs/HTML/Elemento/frame /es/docs/Web/HTML/Element/frame /es/docs/HTML/Elemento/frameset /es/docs/Web/HTML/Element/frameset /es/docs/HTML/Elemento/h1 /es/docs/Web/HTML/Element/Heading_Elements @@ -874,7 +812,6 @@ /es/docs/HTML/Elemento/q /es/docs/Web/HTML/Element/q /es/docs/HTML/Elemento/s /es/docs/Web/HTML/Element/s /es/docs/HTML/Elemento/samp /es/docs/Web/HTML/Element/samp -/es/docs/HTML/Elemento/section /es/docs/orphaned/HTML/Elemento/section /es/docs/HTML/Elemento/small /es/docs/Web/HTML/Element/small /es/docs/HTML/Elemento/source /es/docs/Web/HTML/Element/source /es/docs/HTML/Elemento/span /es/docs/Web/HTML/Element/span @@ -890,21 +827,11 @@ /es/docs/HTML/Elemento/ul /es/docs/Web/HTML/Element/ul /es/docs/HTML/Elemento/var /es/docs/Web/HTML/Element/var /es/docs/HTML/Elemento/video /es/docs/Web/HTML/Element/video -/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/conflicting/Web/Media/Formats -/es/docs/HTML/HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5 /es/docs/HTML/HTML5/Forms_in_HTML5 /es/docs/Learn/Forms -/es/docs/HTML/HTML5/Formularios_en_HTML5 /es/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/es/docs/HTML/HTML5/HTML5_Parser /es/docs/orphaned/Web/Guide/HTML/HTML5/HTML5_Parser -/es/docs/HTML/HTML5/HTML5_lista_elementos /es/docs/conflicting/Web/HTML/Element -/es/docs/HTML/HTML5/Introducción_a_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/es/docs/HTML/HTML5/Validacion_de_restricciones /es/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation -/es/docs/HTML/La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started /es/docs/HTML:Canvas /es/docs/Web/API/Canvas_API /es/docs/HTML:Element /es/docs/Web/HTML/Element /es/docs/HTML:Element:a /es/docs/Web/HTML/Element/a /es/docs/HTML:Elemento /es/docs/Web/HTML/Element -/es/docs/HTML:Elemento:Tipos_de_elementos /es/docs/orphaned/Web/HTML/Elemento/Tipos_de_elementos /es/docs/HTML:Elemento:a /es/docs/Web/HTML/Element/a /es/docs/HTML:Elemento:abbr /es/docs/Web/HTML/Element/abbr /es/docs/HTML:Elemento:acronym /es/docs/Web/HTML/Element/acronym @@ -978,20 +905,13 @@ /es/docs/HTML:Elemento:u /es/docs/Web/HTML/Element/u /es/docs/HTML:Elemento:ul /es/docs/Web/HTML/Element/ul /es/docs/HTML:Elemento:var /es/docs/Web/HTML/Element/var -/es/docs/HTML:La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started -/es/docs/Herramientas /es/docs/orphaned/Herramientas /es/docs/Herramientas_API /es/docs/API_del_Toolkit /es/docs/How_to_create_a_DOM_tree /es/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree /es/docs/Html_Validator_(externo) https://addons.mozilla.org/firefox/249/ -/es/docs/Incrustando_Mozilla/Comunidad /es/docs/orphaned/Incrustando_Mozilla/Comunidad -/es/docs/IndexedDB /es/docs/conflicting/Web/API/IndexedDB_API /es/docs/IndexedDB-840092-dup /es/docs/Web/API/IndexedDB_API -/es/docs/IndexedDB-840092-dup/Conceptos_Basicos_Detras_De_IndexedDB /es/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /es/docs/IndexedDB-840092-dup/Usando_IndexedDB /es/docs/Web/API/IndexedDB_API/Using_IndexedDB -/es/docs/Instalación_de_motores_de_búsqueda_desde_páginas_web /es/docs/orphaned/Instalación_de_motores_de_búsqueda_desde_páginas_web /es/docs/Instalar_el_manifest /es/docs/Manifiesto_de_instalación /es/docs/Install_Manifests /es/docs/Manifiesto_de_instalación -/es/docs/Introducción_a_JavaScript_orientado_a_objetos /es/docs/conflicting/Learn/JavaScript/Objects /es/docs/Introducción_a_XML /es/docs/Web/XML/XML_introduction /es/docs/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /es/docs/JavaScript /es/docs/Web/JavaScript @@ -1083,7 +1003,6 @@ /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/JavaScript/Guide/Trabajando_con_objectos /es/docs/Web/JavaScript/Guide/Working_with_Objects /es/docs/JavaScript/Guide/Valores,_variables_y_literales /es/docs/Web/JavaScript/Guide/Grammar_and_types -/es/docs/JavaScript/Introducción_a_JavaScript_orientado_a_objetos /es/docs/conflicting/Learn/JavaScript/Objects /es/docs/JavaScript/Novedades_en_JavaScript /es/docs/Web/JavaScript/Novedades_en_JavaScript /es/docs/JavaScript/Novedades_en_JavaScript/1.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5 /es/docs/JavaScript/Novedades_en_JavaScript/1.6 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6 @@ -1137,7 +1056,6 @@ /es/docs/JavaScript/Referencia/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Reference/Global_Objects/Function/apply /es/docs/JavaScript/Referencia/Objetos_globales/Function/arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments /es/docs/JavaScript/Referencia/Objetos_globales/Function/call /es/docs/Web/JavaScript/Reference/Global_Objects/Function/call -/es/docs/JavaScript/Referencia/Objetos_globales/Function/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /es/docs/JavaScript/Referencia/Objetos_globales/JSON /es/docs/Web/JavaScript/Reference/Global_Objects/JSON /es/docs/JavaScript/Referencia/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify /es/docs/JavaScript/Referencia/Objetos_globales/Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math @@ -1149,7 +1067,6 @@ /es/docs/JavaScript/Referencia/Objetos_globales/Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number /es/docs/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY /es/docs/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY -/es/docs/JavaScript/Referencia/Objetos_globales/Number/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /es/docs/JavaScript/Referencia/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString /es/docs/JavaScript/Referencia/Objetos_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object /es/docs/JavaScript/Referencia/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor @@ -1177,7 +1094,6 @@ /es/docs/JavaScript/Referencia/Objetos_globales/String/length /es/docs/Web/JavaScript/Reference/Global_Objects/String/length /es/docs/JavaScript/Referencia/Objetos_globales/String/link /es/docs/Web/JavaScript/Reference/Global_Objects/String/link /es/docs/JavaScript/Referencia/Objetos_globales/String/match /es/docs/Web/JavaScript/Reference/Global_Objects/String/match -/es/docs/JavaScript/Referencia/Objetos_globales/String/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /es/docs/JavaScript/Referencia/Objetos_globales/String/replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace /es/docs/JavaScript/Referencia/Objetos_globales/String/search /es/docs/Web/JavaScript/Reference/Global_Objects/String/search /es/docs/JavaScript/Referencia/Objetos_globales/String/slice /es/docs/Web/JavaScript/Reference/Global_Objects/String/slice @@ -1197,7 +1113,6 @@ /es/docs/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Reference/Global_Objects /es/docs/JavaScript/Referencia/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments /es/docs/JavaScript/Referencia/Operadores /es/docs/Web/JavaScript/Reference/Operators -/es/docs/JavaScript/Referencia/Operadores/Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators /es/docs/JavaScript/Referencia/Operadores/Especiales /es/docs/Web/JavaScript/Reference/Operators /es/docs/JavaScript/Referencia/Operadores/Especiales/function /es/docs/Web/JavaScript/Reference/Operators/function /es/docs/JavaScript/Referencia/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof @@ -1207,7 +1122,6 @@ /es/docs/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Reference/Operators /es/docs/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Reference/Operators/this /es/docs/JavaScript/Referencia/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence -/es/docs/JavaScript/Referencia/Operadores/String /es/docs/conflicting/Web/JavaScript/Reference/Operators /es/docs/JavaScript/Referencia/Operadores/function /es/docs/Web/JavaScript/Reference/Operators/function /es/docs/JavaScript/Referencia/Operadores/get /es/docs/Web/JavaScript/Reference/Functions/get /es/docs/JavaScript/Referencia/Operadores/in /es/docs/Web/JavaScript/Reference/Operators/in @@ -1217,7 +1131,6 @@ /es/docs/JavaScript/Referencia/Operadores/typeof /es/docs/Web/JavaScript/Reference/Operators/typeof /es/docs/JavaScript/Referencia/Operadores/void /es/docs/Web/JavaScript/Reference/Operators/void /es/docs/JavaScript/Referencia/Operadores/void_ /es/docs/Web/JavaScript/Reference/Operators/void -/es/docs/JavaScript/Referencia/Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /es/docs/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects /es/docs/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity /es/docs/JavaScript/Referencia/Propiedades_globales/NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN @@ -1289,13 +1202,11 @@ /es/docs/Learn/Common_questions/Que_software_necesito /es/docs/Learn/Common_questions/What_software_do_I_need /es/docs/Learn/Common_questions/Qué_es_una_URL /es/docs/Learn/Common_questions/What_is_a_URL /es/docs/Learn/Common_questions/diseños_web_comunes /es/docs/Learn/Common_questions/Common_web_layouts -/es/docs/Learn/Como_Contribuir /es/docs/orphaned/Learn/How_to_contribute /es/docs/Learn/Desarrollo_web_Front-end /es/docs/Learn/Front-end_web_developer /es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web /es/docs/Learn/Getting_started_with_the_web/How_the_Web_works /es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico /es/docs/Learn/Getting_started_with_the_web/Installing_basic_software /es/docs/Learn/Getting_started_with_the_web/La_web_y_los_estandares_web /es/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards /es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos /es/docs/Learn/Getting_started_with_the_web/Dealing_with_files -/es/docs/Learn/HTML/Forms /es/docs/conflicting/Learn/Forms /es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/Forms/How_to_structure_a_web_form /es/docs/Learn/HTML/Forms/My_first_HTML_form /es/docs/Learn/Forms/Your_first_form /es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_controls /es/docs/Learn/Forms/Property_compatibility_table_for_form_controls @@ -1351,13 +1262,9 @@ /es/docs/Learn/Server-side/Primeros_pasos/Web_frameworks /es/docs/Learn/Server-side/First_steps/Web_frameworks /es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web /es/docs/Learn/Server-side/First_steps/Website_security /es/docs/Learn/Using_Github_pages /es/docs/Learn/Common_questions/Using_Github_pages -/es/docs/Learn/codificacion-scripting /es/docs/conflicting/Learn /es/docs/Localización /es/docs/Glossary/Localization -/es/docs/Localizar_con_Narro /es/docs/orphaned/Localizar_con_Narro /es/docs/Lugares:Guía_para_migración_con_lugares /es/docs/Lugares/Guía_para_migración_con_lugares /es/docs/MDN/Comenzando /es/docs/MDN/Contribute/Getting_started -/es/docs/MDN/Comunidad /es/docs/orphaned/MDN/Community -/es/docs/MDN/Contribute/Community /es/docs/orphaned/MDN/Community/Working_in_community /es/docs/MDN/Contribute/Content /es/docs/MDN/Guidelines /es/docs/MDN/Contribute/Content/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide /es/docs/MDN/Contribute/Guidelines /es/docs/MDN/Guidelines @@ -1365,17 +1272,6 @@ /es/docs/MDN/Contribute/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Conventions_definitions /es/docs/MDN/Contribute/Guidelines/Project:Guía_de_estilo /es/docs/MDN/Guidelines/Writing_style_guide /es/docs/MDN/Contribute/Herramientas /es/docs/MDN/Tools -/es/docs/MDN/Contribute/Herramientas/Page_regeneration /es/docs/orphaned/MDN/Tools/Page_regeneration -/es/docs/MDN/Contribute/Herramientas/Template_editing /es/docs/orphaned/MDN/Tools/Template_editing -/es/docs/MDN/Contribute/Howto/Crear_cuenta_MDN /es/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/es/docs/MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad /es/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template -/es/docs/MDN/Contribute/Howto/Etiquetas_paginas_javascript /es/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -/es/docs/MDN/Contribute/Howto/Remover_Macros_Experimentales /es/docs/orphaned/MDN/Contribute/Howto/Remove_Experimental_Macros -/es/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /es/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -/es/docs/MDN/Contribute/Howto/Usar_barras_laterales_de_navegación /es/docs/orphaned/MDN/Contribute/Howto/Use_navigation_sidebars -/es/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /es/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -/es/docs/MDN/Contribute/Howto/revision_editorial /es/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/es/docs/MDN/Contribute/Howto/revision_tecnica /es/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review /es/docs/MDN/Contribute/Procesos /es/docs/MDN/Contribute/Processes /es/docs/MDN/Contribute/Structures /es/docs/MDN/Structures /es/docs/MDN/Contribute/Structures/Ejemplos_ejecutables /es/docs/MDN/Structures/Live_samples @@ -1383,22 +1279,16 @@ /es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros /es/docs/MDN/Structures/Macros/Commonly-used_macros /es/docs/MDN/Contribute/Structures/Macros/Otras /es/docs/MDN/Structures/Macros/Other /es/docs/MDN/Contribute/Structures/Tablas_de_compatibilidad /es/docs/MDN/Structures/Compatibility_tables -/es/docs/MDN/Contribute/Tareas /es/docs/conflicting/MDN/Contribute/Getting_started /es/docs/MDN/Enviar_feedback_sobre_MDN /es/docs/MDN/Contribute/Feedback /es/docs/MDN/Guidelines/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide /es/docs/MDN/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Conventions_definitions /es/docs/MDN/Guidelines/Project:Guía_de_estilo /es/docs/MDN/Guidelines/Writing_style_guide /es/docs/MDN/Kuma /es/docs/MDN/Yari -/es/docs/MDN/Kuma/Contributing /es/docs/conflicting/MDN/Yari_13d770b50d5ab9ce747962b2552e0eef -/es/docs/MDN/Kuma/Contributing/Getting_started /es/docs/conflicting/MDN/Yari /es/docs/MDN/Kuma/Introduction_to_KumaScript /es/docs/MDN/Tools/KumaScript /es/docs/MDN/Structures/Ejemplos_ejecutables /es/docs/MDN/Structures/Live_samples /es/docs/MDN/Structures/Macros/Otras /es/docs/MDN/Structures/Macros/Other /es/docs/MDN/Structures/Tablas_de_compatibilidad /es/docs/MDN/Structures/Compatibility_tables /es/docs/MDN/Tools/Introduction_to_KumaScript /es/docs/MDN/Tools/KumaScript -/es/docs/MDN/Tools/Page_regeneration /es/docs/orphaned/MDN/Tools/Page_regeneration -/es/docs/MDN/Tools/Template_editing /es/docs/orphaned/MDN/Tools/Template_editing -/es/docs/MDN/User_guide /es/docs/conflicting/MDN/Tools /es/docs/MDN_en_diez /es/docs/MDN/At_ten /es/docs/Manipular_video_por_medio_de_canvas /es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas /es/docs/MathML /es/docs/Web/MathML @@ -1406,36 +1296,21 @@ /es/docs/Mejoras_DOM_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/DOM_improvements /es/docs/Mejoras_SVG_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/SVG_improvements /es/docs/Mejoras_XUL_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 -/es/docs/Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla /es/docs/orphaned/Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla -/es/docs/Modo_casi_estándar_de_Gecko /es/docs/orphaned/Modo_casi_estándar_de_Gecko /es/docs/Monitoring_downloads /es/docs/Vigilar_descargas /es/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension -/es/docs/Mozilla/Add-ons/WebExtensions/Depuración /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Debugging -/es/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -/es/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension /es/docs/Mozilla/Add-ons/WebExtensions/Prerequisitos /es/docs/Mozilla/Add-ons/WebExtensions/Prerequisites -/es/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ /es/docs/Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions /es/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions /es/docs/Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Tutorial /es/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action -/es/docs/Módulos_JavaScript /es/docs/orphaned/Módulos_JavaScript /es/docs/Novedades_en_JavaScript_1.6 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6 /es/docs/Novedades_en_JavaScript_1.7 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.7 /es/docs/Novedades_en_JavaScript_1.8 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8 /es/docs/Novedades_en_Javascript_1.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5 -/es/docs/Participando_en_el_proyecto_Mozilla /es/docs/orphaned/Participar_en_el_proyecto_Mozilla -/es/docs/Participar_en_el_proyecto_Mozilla /es/docs/orphaned/Participar_en_el_proyecto_Mozilla /es/docs/Plantillas_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Templates -/es/docs/Poniendo_al_día_extensiones_para_Firefox_3 /es/docs/orphaned/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 /es/docs/Portada /es/docs/Web /es/docs/Preguntas_frecuentes_sobre_CSS /es/docs/Learn/CSS/Howto/CSS_FAQ -/es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla /es/docs/orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla -/es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación /es/docs/orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación -/es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla:Introducción_a_Gecko_e_inscrustación /es/docs/orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación -/es/docs/Principios_básicos_de_los_servicios_Web /es/docs/orphaned/Principios_básicos_de_los_servicios_Web /es/docs/Quirks_Mode_and_Standards_Mode /es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode -/es/docs/Recursos_en_modo_desconectado_en_Firefox /es/docs/orphaned/Recursos_en_modo_desconectado_en_Firefox /es/docs/Referencia_CSS /es/docs/Web/CSS/Reference /es/docs/Referencia_CSS/Extensiones_CSS_Mozilla /es/docs/Web/CSS/Mozilla_Extensions /es/docs/Referencia_CSS/Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions @@ -1443,13 +1318,10 @@ /es/docs/Referencia_DOM_de_Gecko /es/docs/Web/API/Document_Object_Model /es/docs/Referencia_DOM_de_Gecko/Cómo_espacioenblanco /es/docs/Web/API/Document_Object_Model/Whitespace /es/docs/Referencia_DOM_de_Gecko/Ejemplos /es/docs/Web/API/Document_Object_Model/Examples -/es/docs/Referencia_DOM_de_Gecko/Eventos /es/docs/orphaned/Web/API/Document_Object_Model/Events /es/docs/Referencia_DOM_de_Gecko/Introducción /es/docs/Web/API/Document_Object_Model/Introduction /es/docs/Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores /es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors -/es/docs/Referencia_DOM_de_Gecko/Prefacio /es/docs/conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14 /es/docs/Referencia_DOM_de_Gecko:Ejemplos /es/docs/Web/API/Document_Object_Model/Examples /es/docs/Referencia_DOM_de_Gecko:Introducción /es/docs/Web/API/Document_Object_Model/Introduction -/es/docs/Referencia_DOM_de_Gecko:Prefacio /es/docs/conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14 /es/docs/Referencia_de_JavaScript_1.5 /es/docs/Web/JavaScript/Reference /es/docs/Referencia_de_JavaScript_1.5/Acerca_de /es/docs/Web/JavaScript/Reference/About /es/docs/Referencia_de_JavaScript_1.5/Características_Desaprobadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features @@ -1489,7 +1361,6 @@ /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Reference/Global_Objects/Function/apply /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/call /es/docs/Web/JavaScript/Reference/Global_Objects/Function/call -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON /es/docs/Web/JavaScript/Reference/Global_Objects/JSON /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math @@ -1501,7 +1372,6 @@ /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor @@ -1529,7 +1399,6 @@ /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/length /es/docs/Web/JavaScript/Reference/Global_Objects/String/length /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/link /es/docs/Web/JavaScript/Reference/Global_Objects/String/link /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/match /es/docs/Web/JavaScript/Reference/Global_Objects/String/match -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/search /es/docs/Web/JavaScript/Reference/Global_Objects/String/search /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/slice /es/docs/Web/JavaScript/Reference/Global_Objects/String/slice @@ -1547,7 +1416,6 @@ /es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales /es/docs/Web/JavaScript/Reference/Global_Objects /es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments /es/docs/Referencia_de_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Reference/Operators -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators /es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales /es/docs/Web/JavaScript/Reference/Operators /es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/function /es/docs/Web/JavaScript/Reference/Operators/function /es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof @@ -1557,13 +1425,11 @@ /es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Reference/Operators /es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Reference/Operators/this /es/docs/Referencia_de_JavaScript_1.5/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence -/es/docs/Referencia_de_JavaScript_1.5/Operadores/String /es/docs/conflicting/Web/JavaScript/Reference/Operators /es/docs/Referencia_de_JavaScript_1.5/Operadores/function /es/docs/Web/JavaScript/Reference/Operators/function /es/docs/Referencia_de_JavaScript_1.5/Operadores/get /es/docs/Web/JavaScript/Reference/Functions/get /es/docs/Referencia_de_JavaScript_1.5/Operadores/in /es/docs/Web/JavaScript/Reference/Operators/in /es/docs/Referencia_de_JavaScript_1.5/Operadores/new /es/docs/Web/JavaScript/Reference/Operators/new /es/docs/Referencia_de_JavaScript_1.5/Operadores/this /es/docs/Web/JavaScript/Reference/Operators/this -/es/docs/Referencia_de_JavaScript_1.5/Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects /es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity /es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN @@ -1619,10 +1485,8 @@ /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:parse /es/docs/Web/JavaScript/Reference/Global_Objects/Date/parse /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Error /es/docs/Web/JavaScript/Reference/Global_Objects/Error /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function:prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:toString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:toString /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toString @@ -1646,7 +1510,6 @@ /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:length /es/docs/Web/JavaScript/Reference/Global_Objects/String/length /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:link /es/docs/Web/JavaScript/Reference/Global_Objects/String/link /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:match /es/docs/Web/JavaScript/Reference/Global_Objects/String/match -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:search /es/docs/Web/JavaScript/Reference/Global_Objects/String/search /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:slice /es/docs/Web/JavaScript/Reference/Global_Objects/String/slice @@ -1663,15 +1526,12 @@ /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:valueOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf /es/docs/Referencia_de_JavaScript_1.5:Objetos_globlales:Function:arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments /es/docs/Referencia_de_JavaScript_1.5:Operadores /es/docs/Web/JavaScript/Reference/Operators -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators /es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:function /es/docs/Web/JavaScript/Reference/Operators/function /es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof /es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:typeof /es/docs/Web/JavaScript/Reference/Operators/typeof /es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:void /es/docs/Web/JavaScript/Reference/Operators/void /es/docs/Referencia_de_JavaScript_1.5:Operadores:Miembros /es/docs/Web/JavaScript/Reference/Operators/Property_Accessors /es/docs/Referencia_de_JavaScript_1.5:Operadores:Operadores_especiales:Operador_this /es/docs/Web/JavaScript/Reference/Operators/this -/es/docs/Referencia_de_JavaScript_1.5:Operadores:String /es/docs/conflicting/Web/JavaScript/Reference/Operators -/es/docs/Referencia_de_JavaScript_1.5:Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects /es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity /es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN @@ -1691,20 +1551,13 @@ /es/docs/Referencia_de_JavaScript_1.5:Sentencias:try...catch /es/docs/Web/JavaScript/Reference/Statements/try...catch /es/docs/Referencia_de_JavaScript_1.5:Sentencias:var /es/docs/Web/JavaScript/Reference/Statements/var /es/docs/Referencia_de_JavaScript_1.5:Sentencias:while /es/docs/Web/JavaScript/Reference/Statements/while -/es/docs/Referencia_de_XUL /es/docs/orphaned/Referencia_de_XUL /es/docs/SVG /es/docs/Web/SVG -/es/docs/SVG/SVG_en_Firefox_1.5 /es/docs/orphaned/Web/SVG/SVG_en_Firefox_1.5 /es/docs/SVG/Tutorial /es/docs/Web/SVG/Tutorial /es/docs/SVG/Tutorial/Getting_Started /es/docs/Web/SVG/Tutorial/Getting_Started -/es/docs/SVG:SVG_en_Firefox_1.5 /es/docs/orphaned/Web/SVG/SVG_en_Firefox_1.5 /es/docs/SVG_In_HTML_Introduction /es/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction /es/docs/SVG_en_Firefox /es/docs/Web/SVG/SVG_1.1_Support_in_Firefox /es/docs/Screening_duplicate_bugs /es/docs/QA/Screening_duplicate_bugs -/es/docs/Secciones_y_contornos_de_un_documento_HTML5 /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -/es/docs/Secciones_y_esquema_de_un_documento_HTML_5 /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -/es/docs/Sections_and_Outlines_of_an_HTML5_document /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /es/docs/Seguridad_en_Firefox_2 /es/docs/Mozilla/Firefox/Releases/2/Security_changes -/es/docs/Selección_de_modo_en_Mozilla /es/docs/orphaned/Selección_de_modo_en_Mozilla /es/docs/Server-sent_events /es/docs/Web/API/Server-sent_events /es/docs/Server-sent_events/utilizando_server_sent_events_sse /es/docs/Web/API/Server-sent_events/Using_server-sent_events /es/docs/Social_API-redirect-1 /es/docs/Social_API @@ -1712,10 +1565,7 @@ /es/docs/Social_API/Glossary-redirect-1 /es/docs/Social_API/Glossary /es/docs/Social_API/Glossary-redirect-2 /es/docs/Social_API/Glossary /es/docs/Social_API/Guide-redirect-1 /es/docs/Social_API/Guide -/es/docs/Storage /es/docs/orphaned/Storage -/es/docs/Tipo_MIME_incorrecto_en_archivos_CSS /es/docs/conflicting/Web/HTTP/Basics_of_HTTP/MIME_types /es/docs/Tools/Accesos_directos /es/docs/Tools/Keyboard_shortcuts -/es/docs/Tools/Add-ons /es/docs/orphaned/Tools/Add-ons /es/docs/Tools/Debugger/How_to/Uso_de_un_mapa_fuente /es/docs/Tools/Debugger/How_to/Use_a_source_map /es/docs/Tools/Desempeño /es/docs/Tools/Performance /es/docs/Tools/Desempeño/UI_Tour /es/docs/Tools/Performance/UI_Tour @@ -1728,41 +1578,24 @@ /es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel /es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model /es/docs/Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores /es/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors /es/docs/Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina /es/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page -/es/docs/Tools/Profiler /es/docs/conflicting/Tools/Performance -/es/docs/Tools/Remote_Debugging/Debugging_over_a_network /es/docs/conflicting/Tools/about:debugging /es/docs/Tools/Remote_Debugging/Firefox_para_Android /es/docs/Tools/Remote_Debugging/Firefox_for_Android /es/docs/Tools/Responsive_Design_View /es/docs/Tools/Responsive_Design_Mode /es/docs/Tools/Tomar_capturas_de_pantalla /es/docs/Tools/Taking_screenshots /es/docs/Tools/Web_Console/Iniciando_la_Consola_Web /es/docs/Tools/Web_Console/UI_Tour /es/docs/Tools/Web_Console/La_línea_de_comandos_del_intérprete /es/docs/Tools/Web_Console/The_command_line_interpreter -/es/docs/Traducir_las_descripciones_de_las_extensiones /es/docs/orphaned/Traducir_las_descripciones_de_las_extensiones -/es/docs/Traducir_una_extensión /es/docs/orphaned/Traducir_una_extensión /es/docs/Transformando_XML_con_XSLT /es/docs/Web/XSLT/Transforming_XML_with_XSLT /es/docs/Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM /es/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -/es/docs/Usando_archivos_desde_aplicaciones_web /es/docs/orphaned/Usando_archivos_desde_aplicaciones_web -/es/docs/Usando_audio_y_video_con_HTML5 /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/es/docs/Usando_audio_y_video_en_Firefox /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /es/docs/Usando_módulos_de_código_JavaScript /es/docs/JavaScript_code_modules/Using -/es/docs/Usar_XPInstall_para_instalar_plugins /es/docs/orphaned/Usar_XPInstall_para_instalar_plugins -/es/docs/Usar_audio_y_vídeo_en_Firefox /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/es/docs/Usar_código_de_Mozilla_en_otros_proyectos /es/docs/orphaned/Usar_código_de_Mozilla_en_otros_proyectos /es/docs/Usar_gradientes /es/docs/Web/CSS/CSS_Images/Using_CSS_gradients /es/docs/Usar_la_Geolocalización /es/docs/Web/API/Geolocation_API -/es/docs/Usar_web_workers /es/docs/orphaned/Usar_web_workers /es/docs/Using_files_from_web_applications /es/docs/Web/API/File/Using_files_from_web_applications /es/docs/Using_geolocation /es/docs/Web/API/Geolocation_API /es/docs/Using_the_W3C_DOM_Level_1_Core /es/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core /es/docs/Uso_de_URL_como_valor_de_la_propiedad_cursor /es/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -/es/docs/Uso_del_núcleo_del_nivel_1_del_DOM /es/docs/orphaned/Uso_del_núcleo_del_nivel_1_del_DOM -/es/docs/Vigilando_complementos /es/docs/orphaned/Vigilar_plugins /es/docs/Vigilando_descargas /es/docs/Vigilar_descargas -/es/docs/Vigilando_plugins /es/docs/orphaned/Vigilar_plugins -/es/docs/Vigilar_plugins /es/docs/orphaned/Vigilar_plugins /es/docs/Web/API/API_de_almacenamiento_web /es/docs/Web/API/Web_Storage_API /es/docs/Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web /es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API /es/docs/Web/API/API_del_portapapeles /es/docs/Web/API/Clipboard_API -/es/docs/Web/API/AbstractWorker /es/docs/orphaned/Web/API/AbstractWorker -/es/docs/Web/API/Ambient_Light_Events /es/docs/orphaned/Web/API/Ambient_Light_Events /es/docs/Web/API/Animation/Animación /es/docs/Web/API/Animation/Animation /es/docs/Web/API/Animation/terminado /es/docs/Web/API/Animation/finished /es/docs/Web/API/Animation/tiempoActual /es/docs/Web/API/Animation/currentTime @@ -1777,39 +1610,25 @@ /es/docs/Web/API/BatteryManager.onchargingchange /es/docs/Web/API/BatteryManager/onchargingchange /es/docs/Web/API/BatteryManager.onlevelchange /es/docs/Web/API/BatteryManager/onlevelchange /es/docs/Web/API/Blob.Blob /es/docs/Web/API/Blob/Blob -/es/docs/Web/API/Body /es/docs/orphaned/Web/API/Body -/es/docs/Web/API/Body/formData /es/docs/orphaned/Web/API/Body/formData -/es/docs/Web/API/Body/json /es/docs/orphaned/Web/API/Body/json /es/docs/Web/API/CSSStyleSheet.insertRule /es/docs/Web/API/CSSStyleSheet/insertRule /es/docs/Web/API/CameraCapabilities.maxExposureCompensation /es/docs/Web/API/CameraCapabilities/maxExposureCompensation /es/docs/Web/API/CameraCapabilities.maxFocusAreas /es/docs/Web/API/CameraCapabilities/maxFocusAreas /es/docs/Web/API/Canvas_API/Tutorial/Compositing/Ejemplo /es/docs/Web/API/Canvas_API/Tutorial/Compositing/Example -/es/docs/Web/API/ChildNode /es/docs/orphaned/Web/API/ChildNode -/es/docs/Web/API/ChildNode/after /es/docs/orphaned/Web/API/ChildNode/after -/es/docs/Web/API/ChildNode/before /es/docs/orphaned/Web/API/ChildNode/before -/es/docs/Web/API/ChildNode/remove /es/docs/orphaned/Web/API/ChildNode/remove -/es/docs/Web/API/ChildNode/replaceWith /es/docs/orphaned/Web/API/ChildNode/replaceWith /es/docs/Web/API/Console/tabla /es/docs/Web/API/Console/table /es/docs/Web/API/Constraint_validation/invalid_event /es/docs/Web/API/HTMLInputElement/invalid_event /es/docs/Web/API/Coordinates /es/docs/Web/API/GeolocationCoordinates /es/docs/Web/API/Coordinates/latitude /es/docs/Web/API/GeolocationCoordinates/latitude /es/docs/Web/API/DOMString/Cadenas_binarias /es/docs/Web/API/DOMString/Binary -/es/docs/Web/API/Detecting_device_orientation /es/docs/orphaned/Web/API/Detecting_device_orientation /es/docs/Web/API/Document/abrir /es/docs/Web/API/Document/open /es/docs/Web/API/Document/async /es/docs/Web/API/XMLDocument/async /es/docs/Web/API/Document/crearAtributo /es/docs/Web/API/Document/createAttribute /es/docs/Web/API/DocumentOrShadowRoot/getSelection /es/docs/Web/API/Document/getSelection /es/docs/Web/API/DocumentOrShadowRoot/pointerLockElement /es/docs/Web/API/Document/pointerLockElement /es/docs/Web/API/DocumentOrShadowRoot/styleSheets /es/docs/Web/API/Document/styleSheets -/es/docs/Web/API/Document_Object_Model/Events /es/docs/orphaned/Web/API/Document_Object_Model/Events /es/docs/Web/API/Element/accessKey /es/docs/Web/API/HTMLElement/accessKey -/es/docs/Web/API/Element/currentStyle /es/docs/orphaned/Web/API/Element/currentStyle -/es/docs/Web/API/Element/name /es/docs/conflicting/Web/API /es/docs/Web/API/Element/ongotpointercapture /es/docs/Web/API/GlobalEventHandlers/ongotpointercapture /es/docs/Web/API/Element/onlostpointercapture /es/docs/Web/API/GlobalEventHandlers/onlostpointercapture /es/docs/Web/API/Element/onwheel /es/docs/Web/API/GlobalEventHandlers/onwheel -/es/docs/Web/API/Element/runtimeStyle /es/docs/orphaned/Web/API/Element/runtimeStyle -/es/docs/Web/API/ElementCSSInlineStyle/style /es/docs/orphaned/Web/API/ElementCSSInlineStyle/style /es/docs/Web/API/ElementosHTMLparaVideo /es/docs/Web/API/HTMLVideoElement /es/docs/Web/API/Event/createEvent /es/docs/Web/API/Document/createEvent /es/docs/Web/API/Fetch_API/Conceptos_basicos /es/docs/Web/API/Fetch_API/Basic_concepts @@ -1819,39 +1638,22 @@ /es/docs/Web/API/Geolocation.getCurrentPosition /es/docs/Web/API/Geolocation/getCurrentPosition /es/docs/Web/API/Geolocation.watchPosition /es/docs/Web/API/Geolocation/watchPosition /es/docs/Web/API/GlobalEventHandlers/onunload /es/docs/Web/API/WindowEventHandlers/onunload -/es/docs/Web/API/HTMLElement/dataset /es/docs/orphaned/Web/API/HTMLOrForeignElement/dataset /es/docs/Web/API/HTMLElement/focus /es/docs/Web/API/HTMLOrForeignElement/focus /es/docs/Web/API/HTMLElement/invalid_event /es/docs/Web/API/HTMLInputElement/invalid_event -/es/docs/Web/API/HTMLElement/style /es/docs/orphaned/Web/API/ElementCSSInlineStyle/style -/es/docs/Web/API/HTMLOrForeignElement/dataset /es/docs/orphaned/Web/API/HTMLOrForeignElement/dataset /es/docs/Web/API/IDBObjectStore.add /es/docs/Web/API/IDBObjectStore/add -/es/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /es/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -/es/docs/Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB /es/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /es/docs/Web/API/IndexedDB_API/Usando_IndexedDB /es/docs/Web/API/IndexedDB_API/Using_IndexedDB /es/docs/Web/API/Navigator.getUserMedia /es/docs/Web/API/Navigator/getUserMedia -/es/docs/Web/API/NavigatorGeolocation /es/docs/conflicting/Web/API/Geolocation /es/docs/Web/API/NavigatorGeolocation/geolocation /es/docs/Web/API/Navigator/geolocation /es/docs/Web/API/NavigatorOnLine/Eventos_online_y_offline /es/docs/Web/API/NavigatorOnLine/Online_and_offline_events /es/docs/Web/API/Node.nextSibling /es/docs/Web/API/Node/nextSibling /es/docs/Web/API/Node/elementoPadre /es/docs/Web/API/Node/parentElement /es/docs/Web/API/Node/insertarAntes /es/docs/Web/API/Node/insertBefore -/es/docs/Web/API/Node/namespaceURI /es/docs/conflicting/Web/API/Element/namespaceURI -/es/docs/Web/API/Node/nodoPrincipal /es/docs/conflicting/Web/API/Node -/es/docs/Web/API/NonDocumentTypeChildNode /es/docs/conflicting/Web/API/Element /es/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling /es/docs/Web/API/Element/nextElementSibling /es/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling /es/docs/Web/API/Element/previousElementSibling /es/docs/Web/API/Notifications_API/Usando_la_API_de_Notificaciones /es/docs/Web/API/Notifications_API/Using_the_Notifications_API -/es/docs/Web/API/ParentNode /es/docs/orphaned/Web/API/ParentNode -/es/docs/Web/API/ParentNode/append /es/docs/orphaned/Web/API/ParentNode/append /es/docs/Web/API/ParentNode/childElementCount /es/docs/Web/API/Element/childElementCount -/es/docs/Web/API/ParentNode/children /es/docs/orphaned/Web/API/ParentNode/children -/es/docs/Web/API/ParentNode/firstElementChild /es/docs/orphaned/Web/API/ParentNode/firstElementChild -/es/docs/Web/API/ParentNode/lastElementChild /es/docs/orphaned/Web/API/ParentNode/lastElementChild /es/docs/Web/API/Position /es/docs/Web/API/GeolocationPosition -/es/docs/Web/API/Push_API/Using_the_Push_API /es/docs/conflicting/Web/API/Push_API -/es/docs/Web/API/RandomSource /es/docs/conflicting/Web/API/Crypto/getRandomValues /es/docs/Web/API/RandomSource/Obtenervaloresaleatorios /es/docs/Web/API/Crypto/getRandomValues -/es/docs/Web/API/Storage/LocalStorage /es/docs/conflicting/Web/API/Window/localStorage /es/docs/Web/API/SubtleCrypto/encrypt /es/docs/Web/HTTP/Headers/Digest /es/docs/Web/API/WebGL_API/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Getting_started_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL @@ -1859,18 +1661,14 @@ /es/docs/Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_server /es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers -/es/docs/Web/API/Web_Crypto_API/Checking_authenticity_with_password /es/docs/orphaned/Web/API/Web_Crypto_API/Checking_authenticity_with_password /es/docs/Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API /es/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API /es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /es/docs/Web/API/Window.navigator /es/docs/Web/API/Window/navigator /es/docs/Web/API/Window.onbeforeunload /es/docs/Web/API/WindowEventHandlers/onbeforeunload /es/docs/Web/API/Window.setTimeout /es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout -/es/docs/Web/API/Window/URL /es/docs/conflicting/Web/API/URL -/es/docs/Web/API/WindowBase64 /es/docs/conflicting/Web/API/WindowOrWorkerGlobalScope /es/docs/Web/API/WindowBase64.atob /es/docs/Web/API/WindowOrWorkerGlobalScope/atob /es/docs/Web/API/WindowBase64/Base64_codificando_y_decodificando /es/docs/Glossary/Base64 /es/docs/Web/API/WindowBase64/atob /es/docs/Web/API/WindowOrWorkerGlobalScope/atob -/es/docs/Web/API/WindowTimers /es/docs/conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a /es/docs/Web/API/WindowTimers/clearInterval /es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /es/docs/Web/API/WindowTimers/clearTimeout /es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /es/docs/Web/API/WindowTimers/setInterval /es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval @@ -1896,7 +1694,6 @@ /es/docs/Web/CSS/-moz-box-flex /es/docs/Web/CSS/box-flex /es/docs/Web/CSS/-moz-box-ordinal-group /es/docs/Web/CSS/box-ordinal-group /es/docs/Web/CSS/-moz-box-pack /es/docs/Web/CSS/box-pack -/es/docs/Web/CSS/-moz-cell /es/docs/conflicting/Web/CSS/cursor /es/docs/Web/CSS/-moz-font-language-override /es/docs/Web/CSS/font-language-override /es/docs/Web/CSS/-moz-user-modify /es/docs/Web/CSS/user-modify /es/docs/Web/CSS/-webkit-mask /es/docs/Web/CSS/mask @@ -1905,20 +1702,13 @@ /es/docs/Web/CSS/-webkit-mask-origin /es/docs/Web/CSS/mask-origin /es/docs/Web/CSS/-webkit-mask-position /es/docs/Web/CSS/mask-position /es/docs/Web/CSS/-webkit-mask-repeat /es/docs/Web/CSS/mask-repeat -/es/docs/Web/CSS/:-moz-placeholder /es/docs/conflicting/Web/CSS/:placeholder-shown /es/docs/Web/CSS/:-moz-ui-invalid /es/docs/Web/CSS/:user-invalid -/es/docs/Web/CSS/:-moz-ui-valid /es/docs/orphaned/Web/CSS/:-moz-ui-valid -/es/docs/Web/CSS/:-ms-input-placeholder /es/docs/conflicting/Web/CSS/:placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891 /es/docs/Web/CSS/:-webkit-autofill /es/docs/Web/CSS/:autofill -/es/docs/Web/CSS/::-moz-placeholder /es/docs/conflicting/Web/CSS/::placeholder /es/docs/Web/CSS/::-webkit-file-upload-button /es/docs/Web/CSS/::file-selector-button -/es/docs/Web/CSS/::-webkit-input-placeholder /es/docs/conflicting/Web/CSS/::placeholder_70bda352bb504ebdd6cd3362879e2479 /es/docs/Web/CSS/:any /es/docs/Web/CSS/:is /es/docs/Web/CSS/:not() /es/docs/Web/CSS/:not /es/docs/Web/CSS/@media/altura /es/docs/Web/CSS/@media/height /es/docs/Web/CSS/@media/resolución /es/docs/Web/CSS/@media/resolution -/es/docs/Web/CSS/@viewport/height /es/docs/conflicting/Web/CSS/@viewport -/es/docs/Web/CSS/@viewport/width /es/docs/conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 /es/docs/Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS /es/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Using_CSS_animations /es/docs/Web/CSS/CSS_Background_and_Borders /es/docs/Web/CSS/CSS_Backgrounds_and_Borders @@ -1928,8 +1718,6 @@ /es/docs/Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color /es/docs/Web/CSS/CSS_Colors/Color_picker_tool /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web /es/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS /es/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /es/docs/Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas /es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout /es/docs/Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout /es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout /es/docs/Web/CSS/CSS_Logical_Properties/Dimensionamiento /es/docs/Web/CSS/CSS_Logical_Properties/Sizing @@ -1948,31 +1736,15 @@ /es/docs/Web/CSS/Child_selectors /es/docs/Web/CSS/Child_combinator /es/docs/Web/CSS/Columnas_CSS /es/docs/Web/CSS/CSS_Columns /es/docs/Web/CSS/Comentarios /es/docs/Web/CSS/Comments -/es/docs/Web/CSS/Comenzando_(tutorial_CSS) /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) -/es/docs/Web/CSS/Como_iniciar /es/docs/orphaned/Web/CSS/Como_iniciar -/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/es/docs/Web/CSS/Como_iniciar/Porqué_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works -/es/docs/Web/CSS/Como_iniciar/Que_es_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22 /es/docs/Web/CSS/Consultas_multimedia /es/docs/Web/CSS/Media_Queries/Using_media_queries /es/docs/Web/CSS/Descendant_selectors /es/docs/Web/CSS/Descendant_combinator /es/docs/Web/CSS/Elemento_reemplazo /es/docs/Web/CSS/Replaced_element /es/docs/Web/CSS/Especificidad /es/docs/Web/CSS/Specificity -/es/docs/Web/CSS/Getting_Started /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) /es/docs/Web/CSS/Gradiente /es/docs/Web/CSS/gradient /es/docs/Web/CSS/Herramientas /es/docs/Web/CSS/Tools -/es/docs/Web/CSS/Herramientas/Cubic_Bezier_Generator /es/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator -/es/docs/Web/CSS/Introducción /es/docs/conflicting/Learn/CSS/First_steps -/es/docs/Web/CSS/Introducción/Boxes /es/docs/conflicting/Learn/CSS/Building_blocks -/es/docs/Web/CSS/Introducción/Cascading_and_inheritance /es/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/es/docs/Web/CSS/Introducción/Color /es/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units /es/docs/Web/CSS/Introducción/Content /es/docs/Learn/CSS/Howto/Generated_content -/es/docs/Web/CSS/Introducción/How_CSS_works /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_194e34e451d4ace023d98021c00b3cfd -/es/docs/Web/CSS/Introducción/Layout /es/docs/conflicting/Learn/CSS/CSS_layout -/es/docs/Web/CSS/Introducción/Los:estilos_de_texto /es/docs/conflicting/Learn/CSS/Styling_text/Fundamentals /es/docs/Web/CSS/Introducción/Media /es/docs/Web/Progressive_web_apps/Responsive/Media_types -/es/docs/Web/CSS/Introducción/Selectors /es/docs/conflicting/Learn/CSS/Building_blocks/Selectors /es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS /es/docs/Learn/CSS/Howto/CSS_FAQ -/es/docs/Web/CSS/Primeros_pasos /es/docs/orphaned/Web/CSS/Primeros_pasos /es/docs/Web/CSS/Pseudoelementos /es/docs/Web/CSS/Pseudo-elements /es/docs/Web/CSS/Referencia_CSS /es/docs/Web/CSS/Reference /es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla /es/docs/Web/CSS/Mozilla_Extensions @@ -1986,7 +1758,6 @@ /es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/General_sibling_combinator /es/docs/Web/CSS/Sintaxis_definición_de_valor /es/docs/Web/CSS/Value_definition_syntax /es/docs/Web/CSS/Texto_CSS /es/docs/Web/CSS/CSS_Text -/es/docs/Web/CSS/Tools/Cubic_Bezier_Generator /es/docs/orphaned/Web/CSS/Tools/Cubic_Bezier_Generator /es/docs/Web/CSS/Transiciones_de_CSS /es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions /es/docs/Web/CSS/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Using_CSS_animations /es/docs/Web/CSS/Using_CSS_transforms /es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms @@ -1997,7 +1768,6 @@ /es/docs/Web/CSS/animacion-iteracion-cuenta /es/docs/Web/CSS/animation-iteration-count /es/docs/Web/CSS/animacion-nombre /es/docs/Web/CSS/animation-name /es/docs/Web/CSS/attr /es/docs/Web/CSS/attr() -/es/docs/Web/CSS/auto /es/docs/conflicting/Web/CSS/width /es/docs/Web/CSS/before /es/docs/Web/CSS/::before /es/docs/Web/CSS/calc /es/docs/Web/CSS/calc() /es/docs/Web/CSS/capacidad_de_animacion_de_propiedades_CSS /es/docs/Web/CSS @@ -2010,19 +1780,13 @@ /es/docs/Web/CSS/grid-column-gap /es/docs/Web/CSS/column-gap /es/docs/Web/CSS/grid-gap /es/docs/Web/CSS/gap /es/docs/Web/CSS/kerning /en-US/docs/Web/CSS/font-kerning -/es/docs/Web/CSS/linear-gradient /es/docs/orphaned/Web/CSS/linear-gradient() -/es/docs/Web/CSS/linear-gradient() /es/docs/orphaned/Web/CSS/linear-gradient() /es/docs/Web/CSS/min /es/docs/Web/CSS/min() /es/docs/Web/CSS/minmax /es/docs/Web/CSS/minmax() /es/docs/Web/CSS/none /es/docs/Web/CSS/float -/es/docs/Web/CSS/normal /es/docs/conflicting/Web/CSS/font-variant /es/docs/Web/CSS/padding_paspartu /es/docs/Web/CSS/padding /es/docs/Web/CSS/porcentaje /es/docs/Web/CSS/percentage -/es/docs/Web/CSS/radial-gradient /es/docs/orphaned/Web/CSS/radial-gradient() -/es/docs/Web/CSS/radial-gradient() /es/docs/orphaned/Web/CSS/radial-gradient() /es/docs/Web/CSS/repeat /es/docs/Web/CSS/repeat() /es/docs/Web/CSS/resolución /es/docs/Web/CSS/resolution -/es/docs/Web/CSS/rtl /es/docs/orphaned/Web/CSS/rtl /es/docs/Web/CSS/transform-function/rotate /es/docs/Web/CSS/transform-function/rotate() /es/docs/Web/CSS/transform-function/rotate3d /es/docs/Web/CSS/transform-function/rotate3d() /es/docs/Web/CSS/transform-function/scale /es/docs/Web/CSS/transform-function/scale() @@ -2054,20 +1818,9 @@ /es/docs/Web/Events/wheel /es/docs/Web/API/Element/wheel_event /es/docs/Web/Guide/AJAX/Comunidad /es/docs/Web/Guide/AJAX/Community /es/docs/Web/Guide/AJAX/Primeros_Pasos /es/docs/Web/Guide/AJAX/Getting_Started -/es/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained /es/docs/orphaned/Web/Guide/Events/Orientation_and_motion_data_explained /es/docs/Web/Guide/API/Vibration /es/docs/Web/API/Vibration_API /es/docs/Web/Guide/CSS /es/docs/Learn/CSS -/es/docs/Web/Guide/CSS/Cajas_flexibles /es/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /es/docs/Web/Guide/CSS/probando_media_queries /es/docs/Web/CSS/Media_Queries/Testing_media_queries -/es/docs/Web/Guide/DOM /es/docs/conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 -/es/docs/Web/Guide/DOM/Events /es/docs/orphaned/Web/Guide/Events -/es/docs/Web/Guide/DOM/Events/Creacion_y_Activación_Eventos /es/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events -/es/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained /es/docs/orphaned/Web/Guide/Events/Orientation_and_motion_data_explained -/es/docs/Web/Guide/DOM/Events/eventos_controlador /es/docs/orphaned/Web/Guide/Events/Event_handlers -/es/docs/Web/Guide/Events /es/docs/orphaned/Web/Guide/Events -/es/docs/Web/Guide/Events/Creating_and_triggering_events /es/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events -/es/docs/Web/Guide/Events/Event_handlers /es/docs/orphaned/Web/Guide/Events/Event_handlers -/es/docs/Web/Guide/Events/Orientation_and_motion_data_explained /es/docs/orphaned/Web/Guide/Events/Orientation_and_motion_data_explained /es/docs/Web/Guide/HTML /es/docs/Learn/HTML /es/docs/Web/Guide/HTML/Canvas_tutorial /es/docs/Web/API/Canvas_API/Tutorial /es/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /es/docs/Web/API/Canvas_API/Tutorial/Advanced_animations @@ -2078,18 +1831,11 @@ /es/docs/Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility /es/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility /es/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas /es/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas /es/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas /es/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas -/es/docs/Web/Guide/HTML/Forms /es/docs/conflicting/Learn/Forms /es/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/Forms/How_to_structure_a_web_form /es/docs/Web/Guide/HTML/Forms/My_first_HTML_form /es/docs/Learn/Forms/Your_first_form /es/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/Forms/Sending_and_retrieving_form_data /es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms /es/docs/Learn/Forms/Styling_web_forms -/es/docs/Web/Guide/HTML/HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5 -/es/docs/Web/Guide/HTML/HTML5/Constraint_validation /es/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation -/es/docs/Web/Guide/HTML/HTML5/HTML5_Parser /es/docs/orphaned/Web/Guide/HTML/HTML5/HTML5_Parser -/es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /es/docs/Web/Guide/HTML/Introduction_alhtml /es/docs/Learn/HTML/Introduction_to_HTML -/es/docs/Web/Guide/HTML/Introduction_alhtml_clone /es/docs/orphaned/Web/Guide/HTML/Introduction_alhtml_clone -/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /es/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /es/docs/Web/Guide/HTML/categorias_de_contenido /es/docs/Web/Guide/HTML/Content_categories /es/docs/Web/Guide/Movil /es/docs/Web/Guide/Mobile /es/docs/Web/Guide/Performance/Usando_web_workers /es/docs/Web/API/Web_Workers_API/Using_web_workers @@ -2109,7 +1855,6 @@ /es/docs/Web/HTML/Atributos_Globales/data-* /es/docs/Web/HTML/Global_attributes/data-* /es/docs/Web/HTML/Atributos_Globales/dir /es/docs/Web/HTML/Global_attributes/dir /es/docs/Web/HTML/Atributos_Globales/draggable /es/docs/Web/HTML/Global_attributes/draggable -/es/docs/Web/HTML/Atributos_Globales/dropzone /es/docs/orphaned/Web/HTML/Global_attributes/dropzone /es/docs/Web/HTML/Atributos_Globales/hidden /es/docs/Web/HTML/Global_attributes/hidden /es/docs/Web/HTML/Atributos_Globales/id /es/docs/Web/HTML/Global_attributes/id /es/docs/Web/HTML/Atributos_Globales/is /es/docs/Web/HTML/Global_attributes/is @@ -2128,17 +1873,12 @@ /es/docs/Web/HTML/Atributos_de_configuracion_CORS /es/docs/Web/HTML/Attributes/crossorigin /es/docs/Web/HTML/Canvas /es/docs/Web/API/Canvas_API /es/docs/Web/HTML/Canvas/A_basic_ray-caster /es/docs/Web/API/Canvas_API/A_basic_ray-caster -/es/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas /es/docs/conflicting/Web/API/Canvas_API/Tutorial /es/docs/Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida /es/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages -/es/docs/Web/HTML/Element/isindex /es/docs/orphaned/Web/HTML/Element/isindex -/es/docs/Web/HTML/Element/multicol /es/docs/orphaned/Web/HTML/Element/multicol /es/docs/Web/HTML/Elemento /es/docs/Web/HTML/Element /es/docs/Web/HTML/Elemento/Audio2 /es/docs/Web/HTML/Element/audio /es/docs/Web/HTML/Elemento/Elementos_títulos /es/docs/Web/HTML/Element/Heading_Elements -/es/docs/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 /es/docs/orphaned/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 /es/docs/Web/HTML/Elemento/Progreso /es/docs/Web/HTML/Element/progress /es/docs/Web/HTML/Elemento/Shadow /es/docs/Web/HTML/Element/shadow -/es/docs/Web/HTML/Elemento/Tipos_de_elementos /es/docs/orphaned/Web/HTML/Elemento/Tipos_de_elementos /es/docs/Web/HTML/Elemento/a /es/docs/Web/HTML/Element/a /es/docs/Web/HTML/Elemento/abbr /es/docs/Web/HTML/Element/abbr /es/docs/Web/HTML/Elemento/acronym /es/docs/Web/HTML/Element/acronym @@ -2167,7 +1907,6 @@ /es/docs/Web/HTML/Elemento/code /es/docs/Web/HTML/Element/code /es/docs/Web/HTML/Elemento/col /es/docs/Web/HTML/Element/col /es/docs/Web/HTML/Elemento/colgroup /es/docs/Web/HTML/Element/colgroup -/es/docs/Web/HTML/Elemento/command /es/docs/orphaned/Web/HTML/Element/command /es/docs/Web/HTML/Elemento/content /es/docs/Web/HTML/Element/content /es/docs/Web/HTML/Elemento/data /es/docs/Web/HTML/Element/data /es/docs/Web/HTML/Elemento/datalist /es/docs/Web/HTML/Element/datalist @@ -2180,7 +1919,6 @@ /es/docs/Web/HTML/Elemento/div /es/docs/Web/HTML/Element/div /es/docs/Web/HTML/Elemento/dl /es/docs/Web/HTML/Element/dl /es/docs/Web/HTML/Elemento/dt /es/docs/Web/HTML/Element/dt -/es/docs/Web/HTML/Elemento/element /es/docs/orphaned/Web/HTML/Element/element /es/docs/Web/HTML/Elemento/em /es/docs/Web/HTML/Element/em /es/docs/Web/HTML/Elemento/embed /es/docs/Web/HTML/Element/embed /es/docs/Web/HTML/Elemento/etiqueta /es/docs/Web/HTML/Element/label @@ -2219,7 +1957,6 @@ /es/docs/Web/HTML/Elemento/input/range /es/docs/Web/HTML/Element/input/range /es/docs/Web/HTML/Elemento/input/text /es/docs/Web/HTML/Element/input/text /es/docs/Web/HTML/Elemento/ins /es/docs/Web/HTML/Element/ins -/es/docs/Web/HTML/Elemento/isindex /es/docs/orphaned/Web/HTML/Element/isindex /es/docs/Web/HTML/Elemento/kbd /es/docs/Web/HTML/Element/kbd /es/docs/Web/HTML/Elemento/keygen /es/docs/Web/HTML/Element/keygen /es/docs/Web/HTML/Elemento/label /es/docs/Web/HTML/Element/label @@ -2232,7 +1969,6 @@ /es/docs/Web/HTML/Elemento/marquee /es/docs/Web/HTML/Element/marquee /es/docs/Web/HTML/Elemento/menu /es/docs/Web/HTML/Element/menu /es/docs/Web/HTML/Elemento/meta /es/docs/Web/HTML/Element/meta -/es/docs/Web/HTML/Elemento/multicol /es/docs/orphaned/Web/HTML/Element/multicol /es/docs/Web/HTML/Elemento/nav /es/docs/Web/HTML/Element/nav /es/docs/Web/HTML/Elemento/nobr /es/docs/Web/HTML/Element/nobr /es/docs/Web/HTML/Elemento/noframes /es/docs/Web/HTML/Element/noframes @@ -2280,16 +2016,13 @@ /es/docs/Web/HTML/Elemento/wbr /es/docs/Web/HTML/Element/wbr /es/docs/Web/HTML/Elemento/xmp /es/docs/Web/HTML/Element/xmp /es/docs/Web/HTML/Elementos_en_línea /es/docs/Web/HTML/Inline_elements -/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/conflicting/Web/Media/Formats /es/docs/Web/HTML/Gestión_del_foco_en_HTML /es/docs/Web/API/Document/hasFocus /es/docs/Web/HTML/Imagen_con_CORS_habilitado /es/docs/Web/HTML/CORS_enabled_image -/es/docs/Web/HTML/La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started /es/docs/Web/HTML/Microdatos /es/docs/Web/HTML/Microdata /es/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /es/docs/Glossary/speculative_parsing /es/docs/Web/HTML/Referencia /es/docs/Web/HTML/Reference /es/docs/Web/HTML/Tipos_de_enlaces /es/docs/Web/HTML/Link_types /es/docs/Web/HTML/Transision_adaptativa_DASH /es/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video -/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /es/docs/Web/HTML/anipular_video_por_medio_de_canvas /es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas /es/docs/Web/HTML/microformatos /es/docs/Web/HTML/microformats /es/docs/Web/HTML/Índice /es/docs/Web/HTML/Index @@ -2406,7 +2139,6 @@ /es/docs/Web/JavaScript/Guide/Valores,_variables_y_literales /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/Web/JavaScript/Guide/colecciones_indexadas /es/docs/Web/JavaScript/Guide/Indexed_collections /es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos /es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/es/docs/Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos /es/docs/conflicting/Learn/JavaScript/Objects /es/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/JavaScript/New_in_JavaScript /es/docs/Web/JavaScript/Novedades_en_JavaScript /es/docs/Web/JavaScript/Primeros_Pasos /es/docs/Learn/Getting_started_with_the_web/JavaScript_basics @@ -2414,22 +2146,9 @@ /es/docs/Web/JavaScript/Reference/Errors/Indicador_regexp_no-val /es/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag /es/docs/Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos /es/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params /es/docs/Web/JavaScript/Reference/Errors/caracter_ilegal /es/docs/Web/JavaScript/Reference/Errors/Illegal_character -/es/docs/Web/JavaScript/Reference/Global_Objects/Map /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/clear /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/delete /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/entries /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/get /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/has /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/keys /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/set /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/size /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -/es/docs/Web/JavaScript/Reference/Global_Objects/Map/values /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/values /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set -/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RangeError -/es/docs/Web/JavaScript/Reference/Operators/Pipeline_operator /es/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator /es/docs/Web/JavaScript/Referencia /es/docs/Web/JavaScript/Reference /es/docs/Web/JavaScript/Referencia/Acerca_de /es/docs/Web/JavaScript/Reference/About /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features @@ -2497,7 +2216,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map /es/docs/Web/JavaScript/Reference/Global_Objects/Array/map /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/of /es/docs/Web/JavaScript/Reference/Global_Objects/Array/of /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/pop /es/docs/Web/JavaScript/Reference/Global_Objects/Array/pop -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/prototype /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push /es/docs/Web/JavaScript/Reference/Global_Objects/Array/push /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight @@ -2515,7 +2233,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer /es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/@@species /es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species /es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/byteLength /es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength -/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toSource @@ -2534,7 +2251,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getUTCHours /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCHours /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now /es/docs/Web/JavaScript/Reference/Global_Objects/Date/now /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Reference/Global_Objects/Date/parse -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/setFullYear /es/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/setMonth /es/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toDateString /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString @@ -2550,7 +2266,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/lineNumber /es/docs/Web/JavaScript/Reference/Global_Objects/Error/lineNumber /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/message /es/docs/Web/JavaScript/Reference/Global_Objects/Error/message /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/name /es/docs/Web/JavaScript/Reference/Global_Objects/Error/name -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Error /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Error/toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Error/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/EvalError /es/docs/Web/JavaScript/Reference/Global_Objects/EvalError @@ -2565,7 +2280,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/displayName /es/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/length /es/docs/Web/JavaScript/Reference/Global_Objects/Function/length /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/name /es/docs/Web/JavaScript/Reference/Global_Objects/Function/name -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Function/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Generador /es/docs/Web/JavaScript/Reference/Global_Objects/Generator @@ -2582,18 +2296,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON /es/docs/Web/JavaScript/Reference/Global_Objects/JSON /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/parse /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/clear /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/delete /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/entries /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/forEach /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/get /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/has /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/keys /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/set /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/size /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/values /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/values /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LN10 @@ -2647,7 +2349,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/isSafeInteger /es/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/parseFloat /es/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toFixed /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toPrecision /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision @@ -2681,7 +2382,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/preventExtensions /es/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/propertyIsEnumerable /es/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto /es/docs/Web/JavaScript/Reference/Global_Objects/Object/proto -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/seal /es/docs/Web/JavaScript/Reference/Global_Objects/Object/seal /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/setPrototypeOf /es/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString @@ -2696,7 +2396,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/all /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/catch /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/finally /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/race /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/race /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/reject /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/resolve /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve @@ -2748,7 +2447,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/matchAll /es/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/normalize /es/docs/Web/JavaScript/Reference/Global_Objects/String/normalize /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/padStart /es/docs/Web/JavaScript/Reference/Global_Objects/String/padStart -/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/raw /es/docs/Web/JavaScript/Reference/Global_Objects/String/raw /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/repeat /es/docs/Web/JavaScript/Reference/Global_Objects/String/repeat /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace @@ -2775,7 +2473,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol/hasInstance /es/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance /es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol/iterator /es/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator /es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError /es/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError -/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError /es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray /es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray /es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer /es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer /es/docs/Web/JavaScript/Referencia/Objetos_globales/URIError /es/docs/Web/JavaScript/Reference/Global_Objects/URIError @@ -2785,7 +2482,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/delete /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/delete /es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/get /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/get /es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/has /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/has -/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap /es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/set /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/set /es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakSet /es/docs/Web/JavaScript/Reference/Global_Objects/WeakSet /es/docs/Web/JavaScript/Referencia/Objetos_globales/WebAssembly /es/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly @@ -2807,12 +2503,8 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Reference/Global_Objects /es/docs/Web/JavaScript/Referencia/Operadores /es/docs/Web/JavaScript/Reference/Operators /es/docs/Web/JavaScript/Referencia/Operadores/Adición /es/docs/Web/JavaScript/Reference/Operators/Addition -/es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators /es/docs/Web/JavaScript/Referencia/Operadores/Asignacion /es/docs/Web/JavaScript/Reference/Operators/Assignment -/es/docs/Web/JavaScript/Referencia/Operadores/Assignment_Operators /es/docs/conflicting/Web/JavaScript/Reference/Operators_d3958587a3d3dd644852ad397eb5951b -/es/docs/Web/JavaScript/Referencia/Operadores/Bitwise_Operators /es/docs/conflicting/Web/JavaScript/Reference/Operators_5c44e7d07c463ff1a5a63654f4bda87b /es/docs/Web/JavaScript/Referencia/Operadores/Comparacion /es/docs/Web/JavaScript/Reference/Operators/Equality -/es/docs/Web/JavaScript/Referencia/Operadores/Comparison_Operators /es/docs/conflicting/Web/JavaScript/Reference/Operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8 /es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator /es/docs/Web/JavaScript/Reference/Operators/Conditional_Operator /es/docs/Web/JavaScript/Referencia/Operadores/Decremento /es/docs/Web/JavaScript/Reference/Operators/Decrement /es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment /es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment @@ -2824,14 +2516,10 @@ /es/docs/Web/JavaScript/Referencia/Operadores/Miembros /es/docs/Web/JavaScript/Reference/Operators/Property_Accessors /es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Reference/Operators /es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Reference/Operators/this -/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_lógicos /es/docs/conflicting/Web/JavaScript/Reference/Operators_e72d8790e25513408a18a5826660f704 /es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence -/es/docs/Web/JavaScript/Referencia/Operadores/Pipeline_operator /es/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator /es/docs/Web/JavaScript/Referencia/Operadores/Resto /es/docs/Web/JavaScript/Reference/Operators/Remainder /es/docs/Web/JavaScript/Referencia/Operadores/Sintaxis_Spread /es/docs/Web/JavaScript/Reference/Operators/Spread_syntax -/es/docs/Web/JavaScript/Referencia/Operadores/Spread_operator /es/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax /es/docs/Web/JavaScript/Referencia/Operadores/Strict_equality /es/docs/Web/JavaScript/Reference/Operators/Strict_equality -/es/docs/Web/JavaScript/Referencia/Operadores/String /es/docs/conflicting/Web/JavaScript/Reference/Operators /es/docs/Web/JavaScript/Referencia/Operadores/Sustracción /es/docs/Web/JavaScript/Reference/Operators/Subtraction /es/docs/Web/JavaScript/Referencia/Operadores/async_function /es/docs/Web/JavaScript/Reference/Operators/async_function /es/docs/Web/JavaScript/Referencia/Operadores/await /es/docs/Web/JavaScript/Reference/Operators/await @@ -2851,7 +2539,6 @@ /es/docs/Web/JavaScript/Referencia/Operadores/void /es/docs/Web/JavaScript/Reference/Operators/void /es/docs/Web/JavaScript/Referencia/Operadores/yield /es/docs/Web/JavaScript/Reference/Operators/yield /es/docs/Web/JavaScript/Referencia/Operadores/yield* /es/docs/Web/JavaScript/Reference/Operators/yield* -/es/docs/Web/JavaScript/Referencia/Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar /es/docs/Web/JavaScript/Referencia/Properties_Index /es/docs/Web/JavaScript/Reference /es/docs/Web/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects /es/docs/Web/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity @@ -2865,7 +2552,6 @@ /es/docs/Web/JavaScript/Referencia/Sentencias/const /es/docs/Web/JavaScript/Reference/Statements/const /es/docs/Web/JavaScript/Referencia/Sentencias/continue /es/docs/Web/JavaScript/Reference/Statements/continue /es/docs/Web/JavaScript/Referencia/Sentencias/debugger /es/docs/Web/JavaScript/Reference/Statements/debugger -/es/docs/Web/JavaScript/Referencia/Sentencias/default /es/docs/conflicting/Web/JavaScript/Reference/Statements/switch /es/docs/Web/JavaScript/Referencia/Sentencias/do...while /es/docs/Web/JavaScript/Reference/Statements/do...while /es/docs/Web/JavaScript/Referencia/Sentencias/export /es/docs/Web/JavaScript/Reference/Statements/export /es/docs/Web/JavaScript/Referencia/Sentencias/for /es/docs/Web/JavaScript/Reference/Statements/for @@ -2896,9 +2582,6 @@ /es/docs/Web/MathML/Elemento/math /es/docs/Web/MathML/Element/math /es/docs/Web/Performance/mejorando_rendimienot_inicial /es/docs/Web/Performance/Optimizing_startup_performance /es/docs/Web/Progressive_web_apps/Developer_guide/Instalar /es/docs/Web/Progressive_web_apps/Developer_guide/Installing -/es/docs/Web/Progressive_web_apps/Ventajas /es/docs/conflicting/Web/Progressive_web_apps/Introduction -/es/docs/Web/Reference /es/docs/orphaned/Web/Reference -/es/docs/Web/Reference/API /es/docs/orphaned/Web/Reference/API /es/docs/Web/Reference/Events /es/docs/Web/Events /es/docs/Web/Reference/Events/DOMContentLoaded /es/docs/Web/API/Window/DOMContentLoaded_event /es/docs/Web/Reference/Events/DOMSubtreeModified /es/docs/Web/Events/DOMSubtreeModified @@ -2923,18 +2606,13 @@ /es/docs/Web/Reference/Events/transitionend /es/docs/Web/API/HTMLElement/transitionend_event /es/docs/Web/Reference/Events/wheel /es/docs/Web/API/Element/wheel_event /es/docs/Web/SVG/Element/glifo /es/docs/Web/SVG/Element/glyph -/es/docs/Web/SVG/SVG_en_Firefox_1.5 /es/docs/orphaned/Web/SVG/SVG_en_Firefox_1.5 /es/docs/Web/SVG/Tutorial/Introducción /es/docs/Web/SVG/Tutorial/Introduction -/es/docs/Web/Security/CSP /es/docs/conflicting/Web/HTTP/CSP -/es/docs/Web/Security/CSP/CSP_policy_directives /es/docs/conflicting/Web/HTTP/Headers/Content-Security-Policy -/es/docs/Web/Security/CSP/Introducing_Content_Security_Policy /es/docs/conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 /es/docs/Web/Security/Same-origin_politica /es/docs/Web/Security/Same-origin_policy /es/docs/Web/Security/Securing_your_site/desactivar_autocompletado_formulario /es/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion /es/docs/Web/Tutoriales /es/docs/Web/Tutorials /es/docs/Web/WebGL /es/docs/Web/API/WebGL_API /es/docs/Web/WebGL/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /es/docs/Web/WebGL/Getting_started_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/es/docs/Web/Web_Components/Custom_Elements /es/docs/conflicting/Web/Web_Components/Using_custom_elements /es/docs/Web/XML/Introducción_a_XML /es/docs/Web/XML/XML_introduction /es/docs/Web/XPath/Ejes /es/docs/Web/XPath/Axes /es/docs/Web/XPath/Ejes/ancestor /es/docs/Web/XPath/Axes/ancestor @@ -2978,25 +2656,20 @@ /es/docs/Web/XSLT/otherwise /es/docs/Web/XSLT/Element/otherwise /es/docs/Web/XSLT/when /es/docs/Web/XSLT/Element/when /es/docs/Web/XSLT/with-param /es/docs/Web/XSLT/Element/with-param -/es/docs/WebAPI /es/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 /es/docs/WebAPI/Estado_de_Bateria /es/docs/Web/API/Battery_Status_API /es/docs/WebAPI/Pointer_Lock /es/docs/Web/API/Pointer_Lock_API /es/docs/WebAPI/Using_geolocation /es/docs/Web/API/Geolocation_API /es/docs/WebGL /es/docs/Web/API/WebGL_API /es/docs/WebGL/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -/es/docs/WebRTC /es/docs/conflicting/Web/API/WebRTC_API /es/docs/WebRTC/Introduction /es/docs/Web/API/WebRTC_API/Session_lifetime /es/docs/WebRTC/MediaStream_API /es/docs/Web/API/Media_Streams_API /es/docs/WebRTC/Peer-to-peer_communications_with_WebRTC /es/docs/Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC /es/docs/WebRTC/Taking_webcam_photos /es/docs/Web/API/WebRTC_API/Taking_still_photos -/es/docs/WebSockets /es/docs/conflicting/Web/API/WebSockets_API /es/docs/WebSockets-840092-dup /es/docs/Web/API/WebSockets_API /es/docs/WebSockets-840092-dup/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_server /es/docs/WebSockets-840092-dup/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers /es/docs/WebSockets-840092-dup/Writing_WebSocket_client_applications /es/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications /es/docs/Web_Audio_API /es/docs/Web/API/Web_Audio_API -/es/docs/Web_Development/Mobile /es/docs/conflicting/Web/Guide/Mobile -/es/docs/Web_Development/Mobile/Diseño_responsivo /es/docs/conflicting/Web/Progressive_web_apps /es/docs/XForms:Soporte_en_Mozilla /es/docs/XForms/Soporte_en_Mozilla /es/docs/XHTML /es/docs/Glossary/XHTML /es/docs/XMLHttpRequest /es/docs/Web/API/XMLHttpRequest @@ -3004,7 +2677,6 @@ /es/docs/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /es/docs/XMLHttpRequest/abort /es/docs/Web/API/XMLHttpRequest/abort /es/docs/XMLHttpRequest/onreadystatechange /es/docs/Web/API/XMLHttpRequest/onreadystatechange -/es/docs/XPInstall_API_Reference /es/docs/orphaned/XPInstall_API_Reference /es/docs/XPath /es/docs/Web/XPath /es/docs/XPath/Ejes /es/docs/Web/XPath/Axes /es/docs/XPath/Ejes/ancestor /es/docs/Web/XPath/Axes/ancestor @@ -3097,8 +2769,9 @@ /es/docs/en /en-US/ /es/docs/firefox_Web_Developer_(externo) https://addons.mozilla.org/firefox/60/ /es/docs/lugares /es/docs/Catálogo -/es/docs/nsDirectoryService /es/docs/orphaned/nsDirectoryService /es/docs/nsISupports:AddRef /es/docs/nsISupports/AddRef /es/docs/nsISupports:QueryInterface /es/docs/nsISupports/QueryInterface /es/docs/nsISupports:Release /es/docs/nsISupports/Release /es/docs/video /es/docs/Web/HTML/Element/video + + diff --git a/files/es/conflicting/glossary/doctype/index.html b/files/es/conflicting/glossary/doctype/index.html deleted file mode 100644 index f0f6e18715..0000000000 --- a/files/es/conflicting/glossary/doctype/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: DTD -slug: conflicting/Glossary/Doctype -translation_of: Glossary/Doctype -translation_of_original: Glossary/DTD -original_slug: Glossary/DTD ---- -<p>{{page("/en-US/docs/Glossary/Doctype")}}</p> diff --git a/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index d927df50e1..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Cascada y herencia -slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance -original_slug: Web/CSS/Introducción/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la cuarta sección </span> <span class="alt-edited hps">del</span> <span class="hps">tutorial</span><span> <span class="hps">CSS</span> <span class="hps">Primeros pasos</span>;</span> <span class="hps">que</span> <span class="hps">describe cómo</span> <span class="hps">interactúan</span> <span class="hps">las hojas de estilo</span> <span class="hps">en cascada,</span> <span class="hps">y</span> <span class="hps">cómo los elementos</span> <span class="hps">heredan</span> <span class="hps">el estilo</span> <span class="hps">de sus padres.</span> <span class="alt-edited hps">Usted agrega</span> <span class="hps">a</span> <span class="hps">la hoja de estilos</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">utilizando la herencia</span> <span class="alt-edited hps">para alterar</span> <span class="hps">el estilo de</span> <span class="alt-edited hps">muchas partes del</span> <span class="hps">documento</span> <span class="hps">en un solo paso</span><span>.</span></span></p> - -<h2 class="clearLeft" id="Información_Cascada_y_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>:</span> <span class="hps">Cascada</span> <span class="hps">y</span> <span class="hps">herencia</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">El estilo</span> <span class="hps">final para</span> <span class="hps">un elemento</span> <span class="hps">se puede especificar en</span> <span class="hps">muchos lugares</span> <span class="hps">diferentes</span><span>, que pueden interactuar</span> <span class="hps">de una manera compleja</span><span>.</span> <span class="hps">Esta interacción</span> <span class="hps">compleja</span> <span class="hps">hace</span> <span class="alt-edited hps">el CSS</span> <span class="alt-edited hps">poderoso</span><span>,</span> <span class="alt-edited hps">pero puede también</span> <span class="hps">hacer que sea</span> <span class="hps">confuso y difícil</span> <span class="hps">de depurar.</span></span></p> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">Tres</span> <span class="alt-edited hps">principales fuentes de</span> <span class="hps">información de estilo</span> <span class="alt-edited hps">forman</span> <span class="hps">una <em>cascada</em></span><span>.</span> <span class="alt-edited hps">Estas son:</span></span></p> - -<ul> - <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">por defecto del navegador</span> <span class="hps">para</span> <span class="alt-edited hps">del lenguaje de marcado</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">especificados</span> <span class="hps">por un usuario</span> <span class="hps">que está leyendo</span> <span class="hps">el documento</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">estilos</span> <span class="hps">relacionados en </span><span class="hps">el documento</span> <span class="hps">por su autor</span><span>.</span> <span class="hps">Estos pueden</span> <span class="hps">ser especificados</span> <span class="hps">en tres lugares</span><span>:</span></span> - <ul> - <li><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">un archivo externo</span><span>:</span> <span class="hps">este tutorial</span> <span class="alt-edited hps">aborda</span> <span class="hps">principalmente</span> <span class="hps">este</span> <span class="hps">método para definir</span> <span class="hps">los estilos.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">En una definición</span> <span class="hps">al principio</span> <span class="hps">del documento</span><span>: utilice</span> <span class="alt-edited hps">este método únicamente</span> <span class="hps">para los estilos</span> <span class="hps">que se utilizan sólo</span> <span class="hps">en esa página</span> <span class="hps">.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">En un</span> <span class="hps">elemento específico</span> <span class="hps">en el cuerpo</span> <span class="hps">del documento</span><span>:</span> <span class="hps">este</span> <span class="hps">es el método menos</span> <span class="alt-edited hps">fácil de mantener</span><span>,</span> <span class="hps">pero puede ser utilizado</span> <span class="alt-edited hps">para la probar.</span></span></li> - </ul> - </li> -</ul> - -<p><span id="result_box" lang="es"><span class="hps">El estilo del</span> <span class="hps">usuario modifica</span> <span class="hps">el estilo</span> <span class="hps">por defecto del navegador</span><span>.</span> <span class="alt-edited hps">El estilo</span> <span class="hps">del autor del documento</span> <span class="alt-edited hps">a continuación</span> <span class="hps">modifica</span> <span class="hps">el estilo</span> <span class="hps">un poco más.</span> <span class="hps">En este tutorial,</span> <span class="hps">usted es el autor</span> <span class="hps">del documento</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">y</span> <span class="hps">solo trabaja</span> <span class="hps">con</span> <span class="hps">hojas de estilo</span> <span class="hps">del autor</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Cuando lea este</span> <span class="hps">documento en un navegador</span><span>,</span> <span class="hps">parte del estilo</span> <span class="alt-edited hps">que ves</span> <span class="alt-edited hps">proviene</span> <span class="alt-edited hps">por defecto</span> <span class="hps">de su</span> <span class="alt-edited hps">navegador de</span> <span class="hps">HTML</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="hps">estilo</span> <span class="hps">podría venir de</span> <span class="alt-edited hps">los ajustes </span></span><span id="result_box" lang="es"><span class="hps">personalizados </span></span><span id="result_box" lang="es"><span class="alt-edited hps">del navegador</span> <span class="hps">o</span> <span class="alt-edited hps">de un archivo</span> <span class="alt-edited hps">de definición de estilo</span> <span class="hps">personalizado.</span> <span class="hps">En Firefox</span><span>, la configuración</span> <span class="hps">se puede personalizar en</span> <span class="alt-edited hps">cuadro de diálogo Preferencias</span><span>, o puede</span> <span class="hps">especificar</span> <span class="hps">estilos</span> <span class="hps">en un archivo</span> </span><span id="result_box" lang="es"><span class="alt-edited hps">denominado</span> </span><span id="result_box" lang="es"><em><code><span class="hps">user Content.css,</span></code></em> <span class="alt-edited hps">archivado </span><span class="hps">en su perfil de</span> <span class="hps">navegador.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="alt-edited hps">estilo</span> <span class="hps">proviene de</span> <span class="hps">las hojas de estilo</span> <span class="hps">vinculadas al</span> <span class="hps">documento</span> <span class="hps">por el servidor</span></span> wiki.</p> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Al abrir su</span> <span class="hps">documento de muestra</span> <span class="hps">en el navegador,</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="alt-edited hps">son</span> <span class="alt-edited hps">más relevante que</span> <span class="hps">el</span> <span class="hps">resto del texto</span><span>.</span> <span class="alt-edited hps">Esto viene del</span> <span class="hps">estilo por defecto</span> <span class="hps">del navegador</span> <span class="hps">para HTML</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">son rojos.</span> <span class="alt-edited hps">Esto viene</span> <span class="alt-edited hps">de la</span> <span class="hps">propia hoja de estilos</span> <span class="alt-edited hps">de ejemplo.</span></span></p> - -<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">también</span> <span class="hps">heredan</span> <span class="hps">gran parte del estilo del elemento </span></span>{{ HTMLElement("p") }}<span lang="es"><span class="hps">,</span> <span class="alt-edited hps">porque ellos son</span> <span class="hps">sus</span> <span class="hps">hijos.</span> <span class="hps">De la misma manera</span><span>,</span> <span class="alt-edited hps">los</span> elementos </span>{{ HTMLElement("p") }}<span lang="es"> <span class="alt-edited hps">heredan</span> <span class="hps">gran parte del estilo</span> <span class="hps">del</span> <span class="hps">elemento</span></span>{{ HTMLElement("body") }}<span lang="es"><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="alt-edited hps">en cascada</span><span class="alt-edited">, las hojas de estilo</span> <span class="hps">del autor</span> <span class="hps">tienen</span> <span class="alt-edited hps">prioridad, </span> <span class="alt-edited hps">ante las hojas de estilo</span> <span class="hps">del lector</span><span>, </span> <span class="hps">por defecto</span> <span class="hps">de tu navegador</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="hps">heredados</span><span>,</span> <span class="hps">el estilo propio de</span> <span class="hps">un nodo</span> <span class="hps">hijo tiene</span> <span class="hps">prioridad sobre</span> <span class="alt-edited hps">estilo</span> <span class="hps">heredado de</span> <span class="hps">su</span> <span class="hps">padre</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Estas no son las</span> <span class="hps">únicas prioridades</span> <span class="hps">que se aplican</span><span>.</span> <span class="alt-edited hps">En una página posterior</span><span class="alt-edited hps"> de este</span> <span class="hps">tutorial se explica</span> <span class="alt-edited hps">mas detalladamente</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">El CSS</span> <span class="hps">también proporciona</span> <span class="hps">una forma para que</span> <span class="hps">el lector</span> <span class="alt-edited hps">pueda anular</span> <span class="hps">el estilo</span> <span class="hps">del autor del documento</span><span>,</span> <span class="hps">mediante el uso de</span> <span class="hps">la palabra clave</span><span>! </span></span><code>!important</code>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Esto significa</span> <span class="hps">que, como</span> <span class="hps">autor del documento</span><span>,</span> <span class="hps">no siempre se puede</span> <span class="hps">predecir con exactitud</span> <span class="hps">lo que sus lectores</span> <span class="hps">van a ver.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">quieres conocer</span> <span class="hps">todos los detalles de</span></span> cascada y herencia mira <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Asignando propiedad de valores, cascada, y herencia</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="alt-edited hps">las</span> <span class="hps">especificaciones</span> d<span class="alt-edited hps">el CSS</span><span>.</span></span></p> -</div> - -<h2 id="Acción_El_uso_de_la_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción</span><span>: El uso de</span> <span class="hps">la herencia</span></span> </h2> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="alt-edited hps"> CSS</span> <span class="alt-edited hps">de ejemplo.</span></span></li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">Agrega</span> <span class="hps">esta línea</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span> <span class="hps">Realmente no</span> <span class="hps">importa si</span> <span class="hps">usted la agrega</span> <span class="hps">por encima o por</span> <span class="hps">debajo de la línea</span> <span class="hps">que está</span><span>.</span> <span class="alt-edited hps">Sin embargo, añadirla</span> <span class="hps">en la parte superior</span> <span class="hps">es más</span> <span class="hps">lógico, porque</span> <span class="hps">en el documento </span><span class="alt-edited hps">el</span> elemento </span>{{ HTMLElement("p") }}<span lang="es"> es el <span class="alt-edited hps">elemento</span> <span class="hps">padre</span> <span class="atn hps">del elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span>:</span></span> - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>Ahora actualice el navegador para ver el efecto <span id="result_box" lang="es"><span class="hps">en su</span> <span class="hps">documento de muestra.</span></span> El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} <span id="result_box" lang="es"><span class="hps">han heredado</span> <span class="hps">el estilo</span> <span class="hps">subrayado</span> <span class="hps">de su elemento padre </span></span>{{ HTMLElement("p") }}.<br> - - <p><span id="result_box" lang="es"><span class="hps">Pero</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">siguen siendo</span> <span class="hps">rojo.</span> <span class="hps">El color rojo</span> <span class="hps">es</span> <span class="hps">su estilo</span><span> </span><span class="hps">propio</span><span>,</span> <span class="hps">por lo que tiene</span> <span class="hps">prioridad sobre</span> <span class="hps">el color azul</span> <span class="hps">de su elemento</span> <span class="hps">padre</span> </span>{{ HTMLElement("p") }}<span lang="es"> <span>.</span></span></p> - </li> -</ol> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> -</table> - -<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> - <caption>Antes</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <caption>Después</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Problema</span></span></div> -<span id="result_box" lang="es"><span class="hps">Cambie su</span> hoja de <span class="hps">estilo</span> <span class="hps">de manera que</span> <span class="alt-edited hps">aparecen subrayados</span> <span class="hps">sólo las letras</span> <span class="hps">rojas</span><span>:</span></span> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver una solución al desafío.</a></div> - -<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}<span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps">hoja de estilo</span> <span class="hps">de ejemplo especifica</span> <span class="hps">estilos</span> <span class="hps">para las etiquetas</span> <span class="atn hps"><</span><span>p</span><span>></span> <span class="hps">y</span> <span class="hps"><strong</span><span>></span><span>, cambiando el</span> <span class="hps">estilo de</span> <span class="hps">los elementos correspondientes</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe cómo especificar</span> <span class="hps">el estilo</span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">de manera más selectiva</a></span>.</p> diff --git a/files/es/conflicting/learn/css/building_blocks/index.html b/files/es/conflicting/learn/css/building_blocks/index.html deleted file mode 100644 index 6c07d85ec3..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Boxes -slug: conflicting/Learn/CSS/Building_blocks -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes -original_slug: Web/CSS/Introducción/Boxes ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ; <span id="result_box" lang="es"><span class="hps alt-edited">se describen</span> <span class="hps">cómo se puede</span> <span class="hps">usar CSS para</span> <span class="hps">controlar el espacio</span> <span class="hps">que un elemento</span> <span class="hps">ocupa</span> <span class="hps">cuando se muestra</span><span>.</span> <span class="hps">En</span> <span class="hps">su</span> <span class="hps">documento de ejemplo</span><span>, se cambia el</span> <span class="hps">espacio</span> <span class="hps alt-edited">y se agregan</span> <span class="hps">reglas</span> <span class="hps">decorativos.</span></span></p> - -<h2 class="clearLeft" id="Información_Cajas"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Cajas</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">el navegador muestra</span> <span class="hps">un elemento</span><span>, el elemento</span> <span class="hps alt-edited">ocupa un espacio</span><span>.</span> <span class="hps">Hay</span> <span class="hps">cuatro partes en</span> <span class="hps">el espacio</span> <span class="hps">que ocupa</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En el centro,</span> <span class="hps">existe</span> <span class="hps">el espacio que el</span> <span class="hps">elemento</span> <span class="hps">necesita para mostrar</span> <span class="hps">su contenido.</span> <span class="hps">Alrededor de</span> <span class="hps">eso, no hay</span> <span class="hps">relleno.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">de est, hay</span> <span class="hps alt-edited">un borde</span><span>.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">esto, hay</span> <span class="hps">un margen</span> <span class="hps">que separa</span> <span class="hps alt-edited">este elemento</span> <span class="hps">de otros elementos</span><span>.</span></span></p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">gris pálido</span> <span class="hps">muestra</span> <span class="hps">partes del</span> <span class="hps">diseño.</span></span></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">relleno, el borde</span> <span class="hps">y</span> <span class="hps alt-edited">el margen</span> <span class="hps">pueden tener diferentes tamaños</span> <span class="hps">en la parte superior</span><span class="alt-edited">, derecha, inferior</span> <span class="hps">e izquierda del</span> <span class="hps">elemento</span><span>.</span> <span class="hps alt-edited">Alguno o</span> <span class="hps">todos estos tamaños</span> <span class="hps">pueden</span> <span class="hps">ser cero</span><span>.</span></span></p> - -<h3 id="Coloreando">Coloreando</h3> - -<p><span id="result_box" lang="es"><span class="hps">El relleno es</span> <span class="hps">siempre</span> <span class="hps">el mismo color que</span> <span class="hps">el elemento del fondo</span><span>.</span> <span class="hps">Así que</span> <span class="hps">cuando se establece el</span> <span class="hps">color de fondo</span><span>, se ve el</span> <span class="hps">color aplicado</span> <span class="hps">al elemento</span> <span class="hps">en sí y su</span> <span class="hps">relleno.</span> <span class="hps">El margen es</span> <span class="hps">siempre</span> <span class="hps">transparente.</span></span></p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">El elemento tiene</span> <span class="hps">un fondo verde</span> <span class="hps">.</span></span></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Borders">Borders</h3> - -<p><span id="result_box" lang="es"><span class="hps">Puede utilizar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">para decorar</span> <span class="hps">elementos con</span> <span class="hps">líneas o cuadros</span><span>.</span><br> - <br> - <span class="hps">Para especificar</span> <span class="hps">la misma</span> <span class="hps">frontera</span> <span class="hps">todo</span> <span class="hps">alrededor de un elemento</span><span>, utilice la </span><span class="hps">propiedad</span></span><span lang="es"><span> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"border</span><span>")}</span><span>}</span> <span class="hps">.</span> <span class="hps">Especifique</span> <span class="hps">el ancho</span> <span class="hps">(por lo general</span> <span class="hps">en píxeles</span> <span class="hps">para la visualización</span> <span class="hps">en una pantalla</span><span>)</span><span>, el estilo</span><span>, y el color</span><span>.</span><br> - <br> - <span class="hps">Los estilos son</span><span>:</span></span></p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">También puede establecer</span> <span class="hps">el estilo a </span></span><em><strong><code>none</code> </strong>(</em><span lang="es"><em> </em><span class="hps">ninguno) o</span> </span><strong><em><code>hidden</code> </em></strong><span lang="es"><span class="hps alt-edited">(oculto), </span> <span class="hps">para eliminar</span> <span class="hps">explícitamente</span> <span class="hps">la frontera <code>(</code></span></span><code><em><strong>border </strong></em>)</code><span lang="es"><span>,</span> <span class="hps">o</span> <span class="hps">establecer el color</span> como <span class="hps">transparente</span> <span class="hps">para hacer</span> <span class="hps">la frontera</span> <span class="hps">invisible</span> <span class="hps">sin cambiar</span> <span class="hps">el diseño.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para especificar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">de uno en uno</span> por separado<span>, utilice las propiedades</span><span>:</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-top</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-right</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-bottom</span><span>")}</span> <span class="hps atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-left</span><span>")}</span><span>}</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">especificar</span> <span class="hps alt-edited">un borde</span> <span class="hps"> solo en un lado</span><span>,</span> <span class="hps">o</span> <span class="hps">diferentes</span> <span class="hps alt-edited">los bordes</span> <span class="hps">en diferentes lados</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">establece el</span> <span class="hps">color de fondo y</span> <span class="hps">el borde superior</span> <span class="hps">de los elementos de</span> <span class="hps">la etiqueta <code><strong><em>h3</em></strong></code></span><span>:</span></span></p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* mid green */ - background-color: #efe; /* pale green */ - color: #050; /* dark green */ - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">las imágenes</span> sean <span class="hps">fáciles de ver</span><span>, dándoles</span> <span class="hps">un borde</span> <span class="hps">gris medio</span> a <span class="hps">todo</span><span>:</span></span></p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td>Image:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Márgenes_y_relleno"><span id="result_box" lang="es"><span class="hps">Márgenes y</span> <span class="hps">relleno</span></span></h3> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Use</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps">las posiciones de</span> <span class="hps">los elementos</span> <span class="hps atn">'</span><span>y crear</span> <span class="hps">el espacio</span> <span class="hps">que les rodea.</span><br> - <br> - <span class="hps">Utilice la propiedad </span></span><span lang="es"><span class="hps"> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>margin<span lang="es"><span>")}</span><span>}</span> <span class="hps">o</span> la <span class="hps">propiedad </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>padding<span lang="es"><span>")}</span><span>}</span> <span class="hps">para establecer</span> <span class="hps">los</span> <span class="hps">márgenes y el </span><span class="hps"> relleno</span> con sus <span class="hps">anchuras</span> <span class="hps">respectivamente.</span><br> - <br> - <span class="hps">Si especifica</span> <span class="hps">una</span> <span class="hps">anchura,</span> <span class="hps">que se aplica</span> <span class="hps">en todo el</span> <span class="hps">elemento</span> <span class="hps">(arriba</span><span>, derecha,</span> <span class="hps">abajo y de izquierda</span><span>)</span><span>.</span><br> - <br> - <span class="hps">Si especifica</span> <span class="hps">dos anchos</span><span>,</span> <span class="hps">la</span> <span class="hps">primera se aplica</span> <span class="hps">a la</span> <span class="hps">parte superior e inferior</span><span>,</span> <span class="hps">la segunda a la</span> <span class="hps">derecha y la izquierda</span><span>.</span><br> - <br> - <span class="hps">Puede especificar</span> <span class="hps">los cuatro</span> <span class="hps">anchos</span> <span class="hps">en el orden</span><span>:</span> <span class="hps">arriba, derecha</span><span>,</span> <span class="hps">abajo, de izquierda</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">delimita</span> <span class="hps">párrafos con</span> <span class="hps">la </span></span><code><em><strong> class</strong></em></code> <code>remark</code><span lang="es"><span>, dándoles</span> <span class="hps">un borde rojo</span> <span class="hps">a su alrededor.</span><br> - <br> - <span class="hps">El </span></span><code><strong><em>padding </em></strong></code>(relleno)<code><strong><em> </em></strong></code><span lang="es"><span class="hps">separa </span></span><span lang="es"><span class="hps">un poco </span></span><span lang="es"><span class="hps">todo</span> <span class="hps"> el borde</span> <span class="hps">del texto</span> <span class="hps">.</span></span><br> - <br> - <span id="result_box" lang="es"><span class="hps">A</span> <span class="hps">la izquierda una </span> <span class="hps alt-edited">sangría</span> <span class="hps alt-edited">desde el margen</span> <span class="hps">del</span> <span class="hps">párrafo con respecto al</span> <span class="hps">resto del texto <code><em><strong>(</strong></em></code></span></span><code><em><strong>margin-left</strong></em></code><span lang="es"><span><code><em><strong> )</strong></em></code>:</span></span></p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td> - <p><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">A continuación</span> <span class="hps">es un párrafo</span> <span class="hps">normal.</span></span></p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui con la clase remark.</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">Cuando se utiliza</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps alt-edited">la manera en</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">se disponen</span><span>,</span> <span class="hps">sus</span> <span class="hps">reglas de estilo</span> <span class="hps">interactúan</span> <span class="hps alt-edited">con los estilos</span> <span class="hps">de tu navegador</span> <span class="hps alt-edited">por defecto</span> <span class="hps alt-edited">y pueden ser</span> <span class="hps alt-edited">muy complejas.</span><br> - <br> - <span class="hps">Los distintos navegadores</span> <span class="hps">ponen</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">de manera diferente</span><span>.</span> <span class="hps">Los</span> <span class="hps alt-edited">resultados pueden</span> <span class="hps">ser similar</span> <span class="hps alt-edited">,hasta que nuestro</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps">cambia las cosas</span><span>.</span> <span class="hps">A veces esto</span> <span class="hps">puede hacer que sus</span> <span class="hps">hojas de estilo</span> <span class="hps alt-edited">den</span> <span class="hps">resultados sorprendentes.</span><br> - <br> - <span class="hps">Para</span> <span class="hps">obtener</span> <span class="hps">el resultado deseado</span><span>, es posible que</span> <span class="hps">tenga que cambiar</span> <span class="hps alt-edited">el marcado</span> <span class="hps">de su</span> <span class="hps">documento.</span> <span class="hps">La</span> <span class="hps">página siguiente de</span> <span class="hps">este tutorial</span> <span class="hps">tiene más</span> <span class="hps">información al respecto.</span><br> - <br> - <span class="hps">Para obtener información</span> <span class="hps">detallada acerca</span> <span class="hps">de relleno</span><span>, márgenes</span> <span class="hps">y bordes</span><span>, consulte</span> <span class="hps">la página de referencia</span> <span class="hps">Modelo de caja</span><span>.</span></span></p> -</div> - -<h2 id="Acción_Agregar_bordes"><span id="result_box" lang="es"><span class="hps">Acción</span><span>:</span> <span class="hps">Agregar bordes</span></span></h2> - -<p>Edite su archivo CSS , <strong><em>style2.css</em></strong>. <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">esta regla</span> <span class="hps">para dibujar una línea</span> <span class="hps">a través de la</span> <span class="hps">página</span> <span class="hps">sobre cada</span> <span class="hps alt-edited">encabezado</span><span>:</span></span></p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Si usted tomó</span> <span class="hps alt-edited">el cambio </span><span class="hps alt-edited">en la última página</span><span>,</span> <span class="hps alt-edited">modificara la regla</span> <span class="hps">que ha creado,</span> <span class="hps">de lo contrario</span> <span class="hps alt-edited">agregar la</span> <span class="hps alt-edited">nueva regla</span> <span class="hps alt-edited">para añadir espacio</span> <span class="hps">debajo de cada</span> <span class="hps alt-edited">ítem de la lista</span><span>:</span></span></p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">Actualice el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">El reto</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">una regla a</span> <span class="hps">la hoja de estilos</span><span>, para que</span> <span class="hps alt-edited">aparesca un amplio</span> <span class="hps alt-edited">borde</span> <span class="hps">alrededor de los</span> <span class="hps alt-edited">la lista de océanos, en</span> <span class="hps">un color</span> <span class="hps">que le recuerda</span> <span class="hps">al mar</span><span>, algo</span> <span class="hps">como esto:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p><span id="result_box" lang="es"><span class="hps atn">(</span><span>No es necesario</span> <span class="hps alt-edited">que coincida con</span> <span class="hps">el ancho</span> <span class="hps">y el color</span> <span class="hps">que se ve aquí</span> <span class="hps">exactamente</span><span>.</span><span>)</span></span></p> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Ver una solución a este desafío.</a></p> - -<h2 id="What_next">What next?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}<span id="result_box" lang="es"><span class="hps">Al especificar</span> <span class="hps">márgenes y el relleno</span><span>, se</span> <span class="hps">modificó el</span> <span class="hps">diseño del documento</span><span>.</span> <span class="hps">En la página siguiente</span> <span class="hps">se cambia</span> el </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layout</a><span id="result_box" lang="es"><span class="hps"> de su</span> <span class="hps">documento</span> <span class="hps">de otra manera.</span></span></p> diff --git a/files/es/conflicting/learn/css/building_blocks/selectors/index.html b/files/es/conflicting/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index 0bbf89b28d..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: Selectores -slug: conflicting/Learn/CSS/Building_blocks/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Web/CSS/Introducción/Selectors ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la sección</span> <span class="hps">quinta</span> <span class="hps">del</span> </span><span id="result_box" lang="es"><span class="hps">tutoria</span></span><span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ;</span><span id="result_box" lang="es"><span class="hps">En él se explica</span> <span class="hps">cómo se puede aplicar</span> <span class="hps">estilos</span> <span class="hps">de forma selectiva</span><span>,</span> <span class="hps">y cómo</span> <span class="hps">los diferentes tipos de</span> <span class="hps">selectores</span> <span class="hps">tener diferentes</span> <span class="hps">prioridades.</span> <span class="hps">Agregar algunos</span> <span class="hps">atributos a</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">en su</span> <span class="hps">documento de muestra</span><span>,</span> <span class="hps">y</span> <span class="hps">utiliza estos</span> <span class="hps">atributos en</span> <span class="hps">su hoja de estilos</span> <span class="hps">de muestra.</span></span></p> - -<h2 class="clearLeft" id="Información_Selectores"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Selectores</span></span></h2> - -<p><br> - <span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene su propia terminología</span> <span class="hps">para describir el</span> <span class="hps">lenguaje CSS</span><span>.</span> <span class="hps">Anteriormente</span> <span class="hps">en este tutorial,</span> <span class="hps">que ha creado</span> <span class="hps">una línea en</span> <span class="hps">su hoja de estilos</span> <span class="hps alt-edited">como esta:</span></span></p> - -<pre class="brush: css">strong { - color: red; -} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">En la terminología de</span> <span class="hps">CSS</span><span>,</span> <span class="hps">toda</span> <span class="hps">esta línea</span> <span class="hps">es una </span></span><em><code><strong>rule </strong></code>(</em><span id="result_box" lang="es"><span class="hps">regla).</span> <span class="hps">Esta regla</span> <span class="hps">comienza con</span> </span><strong><em><code>strong</code></em></strong><span lang="es"><span>, que es un</span> <span class="hps">selector.</span> <span class="hps alt-edited">Permite seleccionar</span> <span class="hps">qué elementos</span> <span class="hps">en el DOM</span> <span class="hps">se aplica la regla</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">interior de las</span> <span class="hps">llaves</span> <span class="hps">es la declaración</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps"> L</span><span class="hps alt-edited">a palabra clave es </span></span><span id="result_box" lang="es"><code><em><span class="hps">color</span></em></code>, que </span><span id="result_box" lang="es"><span class="hps alt-edited">es</span> <span class="hps">una propiedad,</span> <span class="hps">y el <code><em>rojo </em></code>es</span> <span class="hps">el valor.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">El punto y coma</span> <span class="hps">después de el</span> <span class="hps">par</span> <span class="hps">propiedad</span><span class="atn">-</span><span>valor</span> <span class="hps">separa los posibles </span><span class="hps">otros pares de </span> <span class="hps">propiedad</span><span>-valor en</span> una <span class="hps">misma declaración.</span></span></p> - -<p> <span id="result_box" lang="es"><span class="hps">Este tutorial</span> <span class="hps">se refiere a</span> <span class="hps">un selector</span> <span class="hps">como</span> </span><em><strong><code>strong</code> </strong></em><span lang="es"><span class="hps">como un</span> <span class="hps">selector de etiquetas</span><span>.</span> <span class="hps">La</span> <span class="hps">especificación</span> <span class="hps">CSS</span> <span class="hps">se refiere a él como</span> <span class="hps">un selector de</span> <span class="hps">tipo <code><strong>(</strong></code></span></span><code><strong> type selector)</strong></code><span lang="es"><span>.</span></span></p> -</div> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">En esta página</span> <span class="hps">del tutorial</span> <span class="hps alt-edited">se explica</span> <span class="hps">más acerca de los</span> <span class="hps">selectores</span> <span class="hps">que se pueden utilizar</span> <span class="hps">en</span> <span class="hps">las reglas CSS</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Además de añadir </span></span><span id="result_box" lang="es"><span class="hps">nombres a las e</span></span><span id="result_box" lang="es"><span class="hps">tiquetas</span> <span>, puede usar </span><span class="hps alt-edited">valores en los atributos</span> de <span class="hps">los selectores</span><span>.</span> <span class="hps">Esto permite que sus</span> <span class="hps">reglas sean</span> <span class="hps">más específicas.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Dos</span> <span class="hps">atributos tienen</span> <span class="hps">un estatus especial</span> <span class="hps">para</span> <span class="hps">CSS</span><span>.</span> <span class="hps">Son</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> <code>e </code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> - -<h3 id="Class_Selectores_de_clase">Class: <span id="result_box" lang="es"><span class="hps">Selectores de clase</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Utilice el</span> <span class="hps">atributo</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> para <span id="result_box" lang="es"><span class="hps">asignarle a </span></span><span id="result_box" lang="es"><span class="hps">un elemento</span> un nombre de clase<code><strong><em> (class)</em></strong></code></span>. <span id="result_box" lang="es"><span class="hps">Depende de</span><span class="hps">l</span><span class="hps"> nombre que elijas</span> como <span class="hps"><code><strong><em>class</em></strong></code>.</span></span> <span id="result_box" lang="es"><span class="hps">Múltiples</span> <span class="hps">elementos en un documento</span> <span class="hps">pueden tener el mismo</span> <span class="hps">valor de la clase</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba</span> <span class="hps atn">un punto (.</span><span>)</span> <span class="hps">antes del </span><span class="hps">nombre de la clase</span>,<span class="hps"> cuando</span> <span class="hps">se utiliza como </span><span class="hps">un selector.</span></span></p> - -<h3 id="Selectores_ID"><span id="result_box" lang="es"><span class="hps alt-edited">Selectores ID</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Utilice el atributo</span> <span class="hps">id en</span> <span class="hps">un elemento</span> <span class="hps">para asignar un</span> <span class="hps alt-edited">identificación para</span> ese <span class="hps">elemento</span><span>.</span> <span class="hps">Depende de</span> usted el <span class="hps">nombre que elija</span> <span class="hps">para el ID</span><span>.</span> <span class="hps">El nombre de</span> <span class="hps">ID</span> <span class="hps">debe ser único</span> <span class="hps">en el documento.</span></span><br> - </p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba un</span> <span class="hps alt-edited">símbolo de almohadilla</span> <span class="hps atn">(</span><span class="alt-edited">#)</span> <span class="hps alt-edited">ante el</span> <span class="hps alt-edited">ID cuando</span> <span class="hps alt-edited">se utiliza esto en</span> <span class="hps">un selector.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Esta etiqueta</span> <span class="hps">HTML</span> <span class="hps">tiene un</span> <span class="hps alt-edited">atributo <code>class</code></span><code> </code><span class="hps">y un atributo</span> <span class="hps"><code>id</code>:</span></span></p> - -<pre class="brush: html"><p class="key" id="principal"> -</pre> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">valor de <code><em><strong>id </strong></em></code>es</span><span class="alt-edited">, <strong>principal</strong>,</span> <span class="hps">debe ser único</span> <span class="hps">en el documento;</span> <span class="hps">pero</span> <span class="hps">otras</span> <span class="hps">etiquetas del documento</span> <span class="hps">puede tener el mismo</span> <span class="hps alt-edited">nombre de la <strong><em><code>class</code></em></strong></span><span>,</span> <span class="hps alt-edited">Key.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">CSS</span><span>,</span> <span class="hps">esta regla</span> <span class="hps">hace que todos</span> <span class="hps">los elementos con la <code><em>class</em></code></span><code><em> </em></code><span class="hps"><code><em><strong>key </strong></em></code>sean verdes</span> <span>.</span> <span class="hps atn">(</span><span>Puede ser que no</span> <span class="hps">todos los sean</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps">()</span><span>}</span> <span class="hps">"p"</span><span>}</span> <span class="hps">elementos.</span><span>)</span></span></p> - -<pre class="brush: css">.key { - color: green; -} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">el </span></span><span id="result_box" lang="es"><span class="hps">único </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">elemento</span> </span><span id="result_box" lang="es"> <span class="hps alt-edited">de id </span></span><span id="result_box" lang="es"><code><strong><em><span class="hps alt-edited">principal</span></em></strong></code> este en <span class="hps">negrita:</span></span></p> - -<pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Si más de una</span> <span class="hps">regla se aplica a</span> <span class="hps">un elemento</span> <span class="hps">y especifica</span> <span class="hps">la misma propiedad,</span> <span class="hps alt-edited">entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da prioridad</span> <span class="hps">a la regla que</span> <span class="hps">tiene el</span> <span class="hps">selector más específico</span><span>.</span> <span class="hps">Un selector</span> <code><em><strong><span class="hps">ID</span> </strong></em></code><span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector de <em><strong><code>class</code></strong></em></span><span>,</span> <span class="hps">que a su vez</span> <span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector (<strong>tag</strong>) de etiquetas</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">También se pueden combinar</span> <span class="hps">selectores</span><span>, haciendo un</span> <span class="hps">selector más específico</span><span>.</span></span><br> - <br> - Por ejemplo, el selector <strong><em><code>.key</code></em></strong> selecciona <span id="result_box" lang="es"><span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <code><em><strong><span class="hps">key</span> </strong></em></code>como <span class="hps alt-edited">nombre de clase (<strong><em><code>class</code></em></strong></span></span>). El selector <code><em><strong>p</strong></em>.key</code> <span id="result_box" lang="es"><span class="hps">selecciona</span> <span class="hps">sólo el elemento</span></span> {{ HTMLElement("p") }} que tiene de nombre <em><strong><code>key</code></strong></em>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Usted no esta </span><span class="hps">limitado a los dos</span> <span class="hps">atributos especiales</span><span>, </span></span><em><strong><code>class</code> </strong></em><span lang="es"><span class="hps">e <em><code><strong>id</strong></code></em></span><span>.</span> Se p<span class="hps">uede especificar</span> <span class="hps">otros atributos</span> <span class="hps">mediante corchetes</span><span>.</span> <span class="hps">Por ejemplo</span><span>, el selector</span> <span class="hps atn">[</span></span><strong><em><code>type='button'</code></em></strong><span lang="es"><span>] selecciona</span> <span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <span class="hps">un atributo de tipo</span> <span class="hps">con el </span> <span class="hps">valor </span></span><strong><em><code>button</code></em></strong><span lang="es"><span>.</span></span></p> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">la hoja de estilo</span> <span class="hps">tiene reglas</span> <span class="hps">en conflicto</span> <span class="hps">y son</span> <span class="hps">igualmente específicas</span><span>, entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da</span> <span class="hps">prioridad a</span> <span class="hps alt-edited">la regla que</span> <span class="hps alt-edited">está</span> <span class="hps alt-edited">después en</span> <span class="hps">la hoja de estilos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">usted tiene un problema</span> <span class="hps alt-edited">con las reglas</span> <span class="hps">en conflicto,</span> <span class="hps alt-edited">trate de resolverlo</span> <span class="hps">haciendo</span> <span class="hps">una de las</span> <span class="hps">normas más específicas</span><span>, para que</span> <span class="hps alt-edited">tenga </span><span class="hps">prioridad.</span> <span class="hps">Si usted no puede</span> <span class="hps">hacer esto</span><span>, trate de mover</span> <span class="hps">una de las reglas</span> mas <span class="hps alt-edited">cerca del</span> <span class="hps">final de</span> <span class="hps">la hoja de estilos</span> <span class="hps">para que tenga</span> la <span class="hps">prioridad.</span></span></p> - -<h3 id="Las_pseudo-clases_de_los_selectores"><span class="short_text" id="result_box" lang="es"><span class="hps atn">Las pseudo-</span><span>clases de</span> los <span class="hps">selectores </span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">pseudo-clase </span></span> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a><span lang="es"> <span class="hps alt-edited">es en CSS</span> <span class="hps">una palabra clave</span> <span class="hps">añadida a</span> <span class="hps">los selectores,</span> <span class="hps">que especifica</span> <span class="hps">un estado especial</span> <span class="hps">del elemento</span> <span class="hps">a seleccionar.</span> <span class="hps">Por ejemplo</span> <span class="hps atn">{</span><span class="atn">{</span><span>Css</span> <span class="hps">Href</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>: hover</span><span>")}</span><span>}</span> <span class="hps">aplicará</span> <span class="hps">un estilo</span> <span class="hps">cuando el</span> <span class="hps">usuario se desplaza sobre</span> <span class="hps">el elemento especificado</span> <span class="hps alt-edited">mediante el selector</span></span>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Las </span></span><code>Pseudo-classes</code><span lang="es"><span>,</span> <span class="hps">junto con</span> <span class="hps">los <code>pseudo-elements</code></span><span>,</span> <span class="hps">permiten aplicar</span> <span class="hps">un estilo</span> <span class="hps">a un elemento</span> <span class="hps">no sólo</span> <span class="hps">en relación con</span> <span class="hps">el contenido</span> <span class="hps">de</span> <span class="hps">la estructura del documento</span><span>,</span> <span class="hps">sino también en relación</span> <span class="hps">a los factores externos</span><span>, como</span> <span class="hps">la historia del</span> <span class="hps atn">navegador </span><span>por ejemplo:</span><span class="hps atn"> (</span><span class="atn">{</span><span class="atn">{</span><span>href</span> <span class="hps">css</span> <span class="hps atn">(</span><span class="hps atn">"</span><span class="hps">: visited</span> <span class="hps">")}</span><span>}</span><span>, )</span><span>,</span> <span class="hps">el estado de</span> <span class="hps">su contenido</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>ref</span> <span class="hps">css</span> <span class="hps atn">(</span><span>"</span><span>: </span></span>:checked"<span lang="es"><span class="hps">)}</span><span>} en</span> <span class="hps">algunos</span> <span class="hps">elementos de formulario</span><span>)</span><span>,</span> <span class="hps">o</span> <span class="hps">la posición del</span> <span class="hps">ratón</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps">("</span></span>:hover<span lang="es"> <span class="hps">")}</span><span>}</span> <span class="hps">que le permite saber</span> <span class="hps">si</span> <span class="hps">el ratón está sobre</span> <span class="hps">un elemento o</span> <span class="hps">no).</span> <span class="hps">Para ver</span> <span class="hps">una lista completa de</span> <span class="hps">selectores</span><span>,</span> <span class="hps">visite</span> <span class="hps">especificación</span> <span class="hps">CSS3</span> <span class="hps">Selectores</span> <span class="hps">de trabajo </span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> - -<div class="tuto_example"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Sintaxis</span></span></div> - -<pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> - -<h4 id="Listado_de_pseudo-classes">Listado de pseudo-classes:</h4> - -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":last-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> - -<h2 id="Información_Los_selectores_basados_en_relaciones_(relationships)"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Los selectores</span> <span class="hps">basados en relaciones </span></span>(relationships)</h2> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">El CSS</span> <span class="hps">tiene algunas</span> <span class="hps">formas de seleccionar</span> <span class="hps">elementos en función de</span> <span class="hps">las</span> <span class="hps">relaciones entre los elementos</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">hacer</span> <span class="hps">selectores</span> <span class="hps alt-edited">que sean más específicos</span><span>.</span></span></p> - -<table id="relselectors"> - <caption><span class="short_text" id="result_box" lang="es"><span class="hps">Selectores</span> <span class="hps">comunes</span> <span class="hps alt-edited">basados en relaciones</span></span></caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>Selector</strong></td> - <td><strong>Selects</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un descendiente de</span> <span class="hps">un elemento</span> <span class="hps atn">A (</span><span>que</span> <span class="hps">es:</span> <span class="hps alt-edited">un hijo o</span> <span class="hps alt-edited">un hijo</span> <span class="hps alt-edited">de un hijo</span> <span class="hps">etc.</span><span>)</span></span></td> - </tr> - <tr> - <td><code>A > E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un hijo de</span> <span class="hps">un elemento A</span></span></td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es el primer</span> <span class="hps">hijo de su padre</span></span></td> - </tr> - <tr> - <td><code>B + E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es</span> <span class="hps">el siguiente hermano</span> <span class="hps">de un elemento</span> <span class="hps">B</span> <span class="hps">(es decir</span><span>:</span> <span class="hps">el</span> <span class="hps">próximo hijo</span> <span class="hps">del mismo</span> <span class="hps">padre)</span></span></td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede combinarlas para</span> <span class="hps">expresar relaciones</span> <span class="hps">complejas</span><span>.</span><br> - <br> - <span class="hps">También puede utilizar</span> <span class="hps">el símbolo</span> <span class="hps">asterisco </span></span><span lang="es"> <span class="hps">(*</span><span>)</span> <span class="hps alt-edited">para significar</span> <span class="hps atn">"</span><span>cualquier elemento</span><span>"</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Una tabla HTML</span> <span class="hps">tiene</span> <span class="hps">un atributo <strong><em><code>id</code></em></strong></span><span>,</span> <span class="hps">pero sus</span> <span class="hps">filas y</span> <span class="hps alt-edited">las celdas</span> <span class="hps">no tienen</span> <span class="hps">identificadores individuales</span><span>:</span></span></p> - -<pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Estas</span> <span class="hps">reglas hacen</span> <span class="hps">que la primera celda de</span> <span class="hps">cada fila</span> sea en <span class="hps">negrita,</span> <span class="hps">y</span> <span class="hps">la segunda celda</span> de <span class="hps">cada fila</span> en la familia de fuente <span class="hps"> monoespaciado</span><span>.</span> <span class="hps alt-edited">Esto</span> <span class="hps alt-edited">sólo afecta a</span> <span class="hps">una</span> <span class="hps alt-edited">tabla concreta</span> <span class="hps alt-edited">del documento:</span></span></p> - -<pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} - #data-table-1 td:first-child + td {font-family: monospace;} -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table style="width: 18em; margin-right: 2em;"> - <tbody> - <tr> - <td><strong>Prefix</strong></td> - <td><code>0001</code></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">La manera mas </span><span class="hps">habitual es hacer</span><span class="hps alt-edited"> que un</span> <span class="hps alt-edited">selector sea más específico</span><span>, entonces</span> aumentara <span class="hps">su prioridad.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Si utiliza</span> <span class="hps">estas técnicas</span><span>, se evita</span> <span class="hps">la necesidad de especificar</span> <span class="hps">la</span></span> <strong><em><code>class</code> </em></strong><span id="result_box" lang="es"><span class="hps">o</span> <span class="hps">atributos <strong><em><code>ID</code></em></strong></span></span><strong><em><code> </code></em></strong><span id="result_box" lang="es"><span class="hps alt-edited">en muchas</span> <span class="hps">etiquetas</span> <span class="hps alt-edited">del documento.</span> <span class="hps">En su lugar</span><span>, CSS</span> <span class="hps">hace este trabajo.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En grandes</span> <span class="hps">diseños</span> <span class="hps">donde la velocidad es</span> <span class="hps">importante</span><span>,</span> <span class="hps">usted puede hacer sus</span> <span class="hps">hojas de estilo</span> <span class="hps">más eficiente</span> <span class="hps">evitando</span> <span class="hps">reglas complejas</span> <span class="hps">que dependen de</span> <span class="hps">relaciones entre los elementos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para más ejemplos</span> <span class="hps">sobre</span> <span class="hps">las tablas</span><span>,</span> <span class="hps">ver</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">la página</span> <span class="hps">CSS Reference</span><span>.</span></span></p> -</div> - -<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps">y duplicar</span> <span class="hps">el</span> <span class="hps">párrafo</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">A continuación, agregue los atibutos </span></span> <strong>id</strong> y <strong>class</strong> <span id="result_box" lang="es"><span class="hps">a</span> <span class="hps">la primera copia</span><span>,</span> <span class="hps">y</span> <span class="hps">un atributopara</span> <span class="hps">la segunda copia</span> <span class="hps">como se muestra</span> <span class="hps">a continuación.</span> <span class="hps">Alternativamente</span><span>, copie</span> <span class="hps">y pegue el</span> <span class="hps">archivo entero</span> <span class="hps">de nuevo</span><span>:</span></span> - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p id="first"> - <strong class="carrot">C</strong>ascading - <strong class="spinach">S</strong>tyle - <strong class="spinach">S</strong>heets - </p> - <p id="second"> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplazar todo el contenido</span> <span class="hps">con</span><span>:</span></span> - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps">actualizar el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p><span id="result_box" lang="es"><span class="hps alt-edited">Puede intentar</span> <span class="hps">reordenar las</span> <span class="hps">líneas</span> <span class="hps">en el archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">de mostrar</span> <span class="hps alt-edited">de que el orden</span> <span class="hps alt-edited">no efecta.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">selectores de <code>class</code></span></span><strong><em><code>.carrot</code></em></strong> and <em><strong><code>.spinach</code></strong></em> <span id="result_box" lang="es"><span class="hps">tienen prioridad sobre</span> <span class="hps">el selector de etiquetas</span></span> <em><strong><code>strong</code></strong></em>.</p> - - <p>El <strong><code><em>ID </em></code></strong>selector<code> #<em>first</em></code><em> </em><span id="result_box" lang="es"><span class="hps">tiene prioridad sobre</span> <span class="hps">los</span> <span class="hps">selectores de clase</span> <span class="hps">y</span> <span class="hps">etiqueta</span><span>.</span></span></p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Desafíos</span></span></div> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Sin cambiar</span> <span class="hps">su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps alt-edited">agregue una sola</span> <span class="hps">regla para</span> <span class="hps">su archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">que mantenga</span> <span class="hps">todas las letras</span> <span class="hps">iniciales que</span> <span class="hps">mismo color que</span> <span class="hps">están ahora,</span> <span class="hps">pero</span> <span class="hps alt-edited">hace que</span> <span class="hps">todo el</span> <span class="hps">otro texto</span> <span class="hps">en el segundo párrafo</span> <span class="hps alt-edited">sea azul</span><span>:</span></span> - - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Ahora cambie</span> <span class="hps">la regla</span> <span class="hps">que acaba de agregar</span> <span class="hps atn">(</span><span>sin cambiar nada más</span><span>)</span><span>,</span> <span class="hps">para hacer</span> <span class="hps alt-edited">que el primer párrafo</span> <span class="hps alt-edited">sea azul</span> <span class="hps">también</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> -</ol> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> - -<ol> - <li><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">Cree un</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span> - - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplace todo el contenido</span> <span class="hps">con</span><span>:</span></span> - <pre class="brush: css">a.homepage:link, a.homepage:visited { - padding: 1px 10px 1px 10px; - color: #fff; - background: #555; - border-radius: 3px; - border: 1px outset rgba(50,50,50,.5); - font-family: georgia, serif; - font-size: 14px; - font-style: italic; - text-decoration: none; -} - -a.homepage:hover, a.homepage:focus, a.homepage:active { - background-color: #666; -} -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el resultado</span> <span class="hps atn">(</span><span>poner</span> <span class="hps">el ratón sobre el</span> <span class="hps">siguiente enlace para ver</span> <span class="hps">el efecto</span><span>)</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span class="hidden"> </span><span class="hidden"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> - -<h2 id="Acción_Uso_de_selectores_basados_en_las_relaciones_y_pseudo-clases"><span id="result_box" lang="es"><span class="hps">Acción</span><span>: Uso de</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Con</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span> <span class="hps">puede crear</span> <span class="hps">algoritmos </span></span><span id="result_box" lang="es"><span class="hps">complejos</span></span><span id="result_box" lang="es"> en <span class="hps alt-edited">cascada</span> <span class="hps">.</span> <span class="hps">Esto es una técnica</span> <span class="hps">común que se utiliza</span><span>, por ejemplo,</span> <span class="hps">con el fin de</span> <span class="hps">crear menús</span> <span class="hps">desplegables</span> <span class="hps">en </span></span><span id="result_box" lang="es"><span class="hps">puro</span> </span><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">(es decir</span> <span class="hps">sólo</span> <span class="hps">CSS,</span> <span class="hps">sin necesidad de utilizar</span></span> <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). <span id="result_box" lang="es"><span class="hps">La esencia</span> <span class="hps">de esta técnica es</span> <span class="hps">la creación de</span> <span class="hps">una regla como</span> <span class="hps">la siguiente</span><span>:</span></span></p> - -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Aplicararemos a</span> <span class="hps">una estructura de</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span></p> - -<pre class="brush: html"><div class="menu-bar"> - <ul> - <li> - <a href="example.html">Menu</a> - <ul> - <li> - <a href="example.html">Link</a> - </li> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - </ul> - </li> - </ul> -</div> -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Vea nuestro</span> <span class="hps">ejemplo completo</span></span><a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> <span id="result_box" lang="es"><span class="hps">para una posible</span> referencia<span>.</span></span></p> - -<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps alt-edited">de muestra</span> <span class="hps">está empezando a parecer</span> <span class="hps alt-edited">densa</span> <span class="hps alt-edited">y complicada.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe</span> <span class="hps">maneras de hacer</span> <span class="hps">CSS</span> <span class="hps">más fácil de leer</span><span>.</span> </span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 79b7ac23cb..0000000000 --- a/files/es/conflicting/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,365 +0,0 @@ ---- -title: Color -slug: conflicting/Learn/CSS/Building_blocks/Values_and_units -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color -original_slug: Web/CSS/Introducción/Color ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p><a class="button previousPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" rel="prev" style="margin: 0px 20px 20px 0px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: normal; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: left; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; white-space: normal; background-color: rgb(234, 239, 242);" title="Los estilos de texto"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SECCIÓN ANTERIOR: </span></font></font><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">LOS ESTILOS DE TEXTO</span></font></font></a></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección octava de la </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">tutorial; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se explica cómo puede especificar el color en CSS. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su hoja de estilos de muestra, se introduce colores de fondo.</span></font></font></p> - -<h2 class="clearLeft" id="Información_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Información: Color</span></font></font></h2> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 2 soporta 17 colores con nombre absoluto. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Algunos de los nombres puede que no sea el esperado:</span></font></font></p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>primaries</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>secondaries</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<div class="tuto_details"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Detalles</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Su navegador puede soportar muchos más colores con nombre, como:</span></font></font></p> -</div> - -<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> -</table> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para detalles de esta lista ampliada, consulte: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; 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; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">SVG palabras clave de color</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">módulo de colores </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 3 . </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.</span></font></font></p> -</div> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">dígitos </span></font></font><em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">hexadecimales</span></font></font></em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> entre los rangos 0 - 9, a - f. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Las letras a - f representan los valores de 10 a 15:</span></font></font></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p><br> - <span style="color: rgb(77, 78, 83); 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; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:</span></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: rgb(77, 78, 83); 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; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.</span></p> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:</span></font></font></p> -</div> - -<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con el rojo puro:</span></td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(201, 215, 241);">Para que sea más pálido, añadir un poco de verde y azul:</span></td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para hacerlo más naranja, añadir un poco de verde adicional:</span></td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para oscurecer, reducir todos sus componentes:</span></td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para reducir su saturación, hacer que sus componentes más iguales:</span></td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Si usted los pone exactamente iguales, se obtiene gris:</span></td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: rgb(77, 78, 83); 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; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para un tono pastel como el azul pálido:</span></p> - -<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con blanco puro:</span></td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); 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: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Reducir los otros componentes un poco:</span></td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.</span></font></font></p> - -<p><span style="color: rgb(77, 78, 83); 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; display: inline !important; float: none; background-color: rgb(244, 244, 244);">Por ejemplo, este es de color granate (rojo oscuro)</span>dark red:</p> -</div> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">RGB</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (128, 0, 0)</span></font></font></code></pre> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para más detalles sobre cómo especificar los colores, ver: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; 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; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; 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; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sistema CSS2 Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> -</div> - -<h3 id="Propiedades_de_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 200; font-family: 'Open Sans', sans-serif; line-height: 24px; font-size: 1.71428571428571rem; letter-spacing: -0.5px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Propiedades de Color</span></font></font></h3> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ya ha utilizado </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la propiedad</span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el texto.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede utilizar <code>la</code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><code> </code></span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para cambiar fondos elementos.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los Fondos (</span></font></font><span style="color: rgb(77, 78, 83); 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; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Backgrounds </span>) <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se pueden establecer en </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">transparent</span></code><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"> (transparentes) </span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">para eliminar explícitamente cualquier color, revelando fondo del elemento padre.</span></font></font></p> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">ejemplos de</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas de este tutorial utilizan este fondo de color amarillo pálido:</span></font></font></p> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # fffff4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> - -<div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas utilizan este gris pálido:</span></font></font></p> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # F4F4F4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> -</div> -</div> - -<p> </p> - -<h2 id="Acción_El_uso_de_códigos_de_color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Acción: El uso de códigos de color</span></font></font></h2> - -<ol style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style-type: decimal; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Edite su archivo CSS.</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.)</span></font></font> - <pre class="brush:css;highlight:[13] language-css"><code class="language-css"><span class="token comment">/*** CSS Tutorial: Color page ***/</span> - -<span class="token comment">/* page font */</span> -<span class="token selector">body </span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 16px <span class="token string">"Comic Sans MS"</span>, cursive<span class="token punctuation">;</span><span class="token punctuation">}</span> - -<span class="token comment">/* paragraphs */</span> -<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><span class="token punctuation">}</span> -<span class="token selector">#first </span><span class="token punctuation">{</span><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><span class="token punctuation">}</span> - -<span class="token comment">/* initial letters */</span> -<span class="token selector">strong </span><span class="token punctuation">{</span> - <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> - <span class="token property">background-color</span><span class="token punctuation">:</span> #ddf<span class="token punctuation">;</span> - <span class="token property">font</span><span class="token punctuation">:</span> 200% serif<span class="token punctuation">;</span> - <span class="token punctuation">}</span> - -<span class="token selector">.carrot </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span> -<span class="token selector">.spinach </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 19px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 38px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 57px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 76px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 95px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 114px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 133px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 152px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 171px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 190px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 209px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 228px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 247px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 266px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 285px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 304px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 323px; background: 0px 0px;"> </div> - - <div class="line-highlight" style=""> </div> - </li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Guarde el archivo y actualizar el navegador para ver el resultado.</span></font></font></li> -</ol> - -<table> - <tbody> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"> - <table style="margin: 0px 0px 24px; padding: 0px; border-width: 1px 0px 0px 1px; border-style: solid; border-color: rgb(224, 224, 220); border-collapse: collapse; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"> - <tbody> - <tr style="margin: 0px; padding: 0px; border: 0px;"> - <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: italic; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> - </tr> - <tr style="margin: 0px; padding: 0px; border: 0px;"> - <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desafío</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)</span></font></font></p> -<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> -</div> - -<h2 id="¿Y_ahora_qué" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">¿Y ahora qué?</span></font></font></h2> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"><a class="button nextPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" rel="next" style="margin: 20px 0px 0px 20px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: 400; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: right; background-color: rgb(234, 239, 242);" title="Contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SIGUIENTE SECCIÓN: </span></font></font><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CONTENT</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title="/ En-US / docs / Web / guía / CSS / Getting_Started / contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> explica cómo se puede hacer excepciones a esta estricta separación.</span></font></font></p> diff --git a/files/es/conflicting/learn/css/css_layout/index.html b/files/es/conflicting/learn/css/css_layout/index.html deleted file mode 100644 index 86364b84fa..0000000000 --- a/files/es/conflicting/learn/css/css_layout/index.html +++ /dev/null @@ -1,385 +0,0 @@ ---- -title: Layout -slug: conflicting/Learn/CSS/CSS_layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/CSS/Introducción/Layout ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.</p> - -<h2 class="clearLeft" id="Informacion_Layout">Informacion: Layout</h2> - -<p>Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.</p> - -<p>Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.</p> - -<p>Esta página describe algunas técnicas sencillas que puedes probar.</p> - -<h3 id="Estructura_del_documento">Estructura del documento</h3> - -<p>Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.</p> - -<p>El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.</p> - -<p>Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.</p> - -<p>Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:</p> -</div> - -<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> -<div id="numbered"> - <p>Lorem ipsum</p> - <p>Dolor sit</p> - <p>Amet consectetuer</p> - <p>Magna aliquam</p> - <p>Autem veleum</p> -</div> -</pre> - -<p>Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:</p> - -<pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - -<p> El resultado se ve así: </p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Unidades_de_tamaño">Unidades de tamaño</h3> - -<p>Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.</p> - -<p>Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.</p> - -<p>El borde de la derecha tiene su tamaño especificado en ems.</p> - -<p>En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:</p> -</div> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="">RESIZE ME PLEASE</div> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<p>Más detalles</p> - -<p>Para otros dispositivos, otras unidades de longitud son apropiadas.</p> - -<p>Hay más información sobre esto en una página posterior de este tutorial.</p> - -<p>Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.</p> -</div> -</div> - -<h3 id="Diseño_del_texto">Diseño del texto</h3> - -<p>Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:</p> - -<p>{{Cssxref ('text-align')}}</p> - -<p><br> - Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar<br> - {{Cssxref ('texto-sangría')}}<br> - Indente el contenido en una cantidad que especifique.</p> - -<p>Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>Para centrar los títulos:</p> -</div> - -<pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - -<p>Resultado:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> -</table> - -<p>En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.</p> -</div> - -<h3 id="Floats">Floats</h3> - -<p>La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.</p> - -<p>El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.</p> - -<p>Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:</p> -</div> - -<pre class="brush:css">ul, #numbered {float: left;} -h3 {clear: left;} -</pre> -</div> - -<p>El resultado sería:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)</p> - -<h3 id="Posicionamiento">Posicionamiento</h3> - -<p>Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.</p> - -<p>Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.</p> - -<p>relativo</p> - -<p><br> - La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.<br> - fijo<br> - La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.<br> - absoluto<br> - La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.<br> - estático<br> - El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.</p> - -<p>Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:</p> -</div> - -<pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - -<p>En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:</p> - -<pre class="brush:css">#parent-div { - position: relative; - font: bold 200% sans-serif; -} - -#forward, #back { - position: absolute; - margin:0px; /* no hay margenes alrededor del elemento */ - top: 0px; /* distancia desde la parte superior */ - left: 0px; /* distancia desde la izquierda */ -} - -#forward { - color: blue; -} - -#back { - color: red; -} -</pre> - -<p>El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:</p> - -<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> -</div> - -<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<p>Más detalles</p> - -<p>La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.</p> - -<p>Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.</p> -</div> -</div> - -<h2 id="Action_Specifying_layout">Action: Specifying layout</h2> - -<ol> - <li>Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.</li> - <li>En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Cambios</p> - -<p>Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.</p> -</div> - -<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - -<p>Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:</p> - -<table style="border: 2px solid #cccccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> - </tr> - </tbody> -</table> - -<p>Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.</p> - -<p>Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.</p> - -<p>Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:</p> - -<div style="position: relative; width: 29.5em; height: 18em;"> -<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - -<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> -<ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> -</ul> -</div> - -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - -<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> -<p><strong>1: </strong>Lorem ipsum</p> - -<p><strong>2: </strong>Dolor sit</p> - -<p><strong>3: </strong>Amet consectetuer</p> - -<p><strong>4: </strong>Magna aliquam</p> - -<p><strong>5: </strong>Autem veleum</p> -</div> - -<p style=""> </p> - -<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> -</div> -</div> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> See a solution to this challenge.</a></p> - -<h2 id="What_next">What next?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.</p> diff --git a/files/es/conflicting/learn/css/first_steps/how_css_works/index.html b/files/es/conflicting/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 831a835c72..0000000000 --- a/files/es/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Por que usar CSS -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/CSS/Como_iniciar/Por_que_usar_CSS ---- -<p> </p> -<p>Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.</p> -<p>Esta es la segunda sección del <a href="/es/CSS/Introducción" title="../../../../es/CSS/Introducci%C3%B3n">tutorial</a>.</p> -<p>Sección anterior: <a href="/es/CSS/Como_iniciar/Que_es_CSS" title="es/CSS/Como_iniciar/Que_es_CSS">Que es CSS</a><br> - Sección siguiente: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works">How CSS works</a></p> -<h2 id="Información_¿Por_qué_usar_CSS">Información: ¿Por qué usar CSS?</h2> -<p>CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como <em>estilos. </em>Si mantienes los estilos separados del contenido puedes:</p> -<ul> - <li>Evitar duplicación</li> - <li>Hacer el mantenimiento más simple</li> - <li>Usar el mismo contenido con diferentes estilos para diferentes propositos.</li> -</ul> -<table> - <caption> - Ejemplo</caption> - <tbody> - <tr> - <td> - <p>Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.</p> - <p>Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.</p> - </td> - </tr> - </tbody> -</table> -<p>En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).</p> -<table> - <caption> - Más detalles</caption> - <tbody> - <tr> - <td> - <p>Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.</p> - <p>Por ejemplo en HTML puedes usar una etiqueta <code><b> </code>para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <code><body></code>.</p> - <p>Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.</p> - </td> - </tr> - </tbody> -</table> -<h2 id="Acción_Creando_una_hoja_de_estilos">Acción: Creando una hoja de estilos</h2> -<ol> - <li>Crea un archivo de texto en el mismo directorio anterior. Este archivo será tu hoja de estilos. Nombrala como: <code>style1.css</code></li> - <li>En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:</li> - <li> - <div> - <pre class="eval">strong {color: red;} -</pre> - </div> - </li> -</ol> -<h3 id="Enlazando_tu_documento_a_tu_hoja_de_estillos">Enlazando tu documento a tu hoja de estillos</h3> -<ol> - <li>Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:</li> - <li> - <div> - <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>Sample document</title> - <strong><link rel="stylesheet" type="text/css" href="style1.css"></strong> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </div> - </li> - <li>Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: - <table> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> -<table> - <caption> - Reto</caption> - <tbody> - <tr> - <td>En adición al rojo, CSS permite algunos otros nombres de colores. - <p>Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.</p> - </td> - </tr> - </tbody> -</table> -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Why_use_CSS_colors" title="en/CSS/Getting Started/Challenge solutions#Why use CSS colors">See a solution for the challenge.</a> Ver la solución al reto.</p> -<h2 id="¿Qué_sigue">¿Qué sigue?</h2> -<p>Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de <a href="/Talk:en/CSS/Getting_Started/Why_use_CSS%3f" title="Talk:en/CSS/Getting_Started/Why_use_CSS%3f">Discusión</a>.</p> -<p>Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como funciona CSS</a>.</p> -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}</p> diff --git a/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html b/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html deleted file mode 100644 index 6db03d40c8..0000000000 --- a/files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Cómo funciona el CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_194e34e451d4ace023d98021c00b3cfd -tags: - - CSS - - 'CSS:' - - CSS:Empezando - - Diseño - - Guía - - Inicio - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works -original_slug: Web/CSS/Introducción/How_CSS_works ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="alt-edited hps">tercera parte del</span> </span><span class="seoSummary">tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">Empezando CSS</a> </span><span id="result_box" lang="es"><span class="hps">explica cómo funciona</span> <span class="hps">el CSS</span> <span class="hps">en el navegador y</span> la finalidad<span class="hps"> del</span> <span class="atn hps">Modelo de Objeto de Documento (</span><span>DOM</span><span>)</span><span>.</span> <span class="hps">Usted también aprenderá</span> <span class="hps">cómo analizar</span> <span class="hps">el documento de</span> <span class="hps">muestra.</span></span></p> - -<h2 class="clearLeft" id="Información_Cómo_funciona_CSS"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>: Cómo funciona</span> <span class="hps">CSS</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Cuando un</span> <span class="hps">navegador muestra</span> <span class="hps">un documento, debe</span><span class="alt-edited hps"> combinar</span> <span class="hps">el contenido del documento</span> <span class="hps">con la </span><span class="hps">información </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">de </span></span><span id="result_box" lang="es"><span class="hps">su</span></span><span id="result_box" lang="es"><span class="hps"> estilo</span><span>.</span> Se <span class="hps">procesa</span> <span class="hps">el documento en</span> <span class="hps">dos</span> <span class="hps">etapas</span><span>:</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">El navegador</span> <span class="hps">convierte el</span> <span class="hps">lenguaje de marcado (</span></span><code><strong><em>markup</em></strong></code>)<span lang="es"> <span class="hps">y</span> <span class="alt-edited hps">el</span> <span class="hps">CSS</span> <span class="hps">en el <em><span class="seoSummary"><a href="en-US/docs/DOM" title="en-US/docs/DOM">DOM</a></span></em></span><span class="seoSummary"><strong> </strong></span><span class="hps">(Document Object</span> <span class="hps">Model)</span><span>.</span> <span class="hps">El DOM</span> <span class="hps">representa el documento</span> <span class="hps">en la memoria del</span> <span class="hps">ordenador.</span></span> <span id="result_box" lang="es"><span class="hps">Combina</span> <span class="hps">el contenido del documento</span> <span class="hps">con su estilo</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">El navegador muestra</span> <span class="hps">el contenido de la</span> <span class="hps">DOM</span><span>.</span></span></li> -</ol> - -<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">lenguaje de marcado</span> <span class="hps">utiliza <em>elementos</em></span><em> </em><span class="hps">para definir</span> <span class="hps">la estructura del documento</span><span>.</span> <span class="hps">Usted marca</span> <span class="hps">un elemento</span> <span class="hps">utilizando</span> <span class="hps"><em>etiquetas</em>,</span> <span class="hps">que son cadenas</span> <span class="hps">que comienzan con</span> <span class="hps">'<'</span> <span class="hps">y termina con</span> <span class="hps">'>'</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">elementos</span> <span class="hps">tienen un par de</span> <span class="hps">etiquetas,</span> <span class="hps">una etiqueta de inicio</span> <span class="hps">y</span> <span class="hps">una etiqueta de cierre</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta de inicio</span><span>, coloque</span> <span class="hps">el nombre del elemento</span> <span class="hps">entre</span> <span class="hps">'<'</span> <span class="atn hps">y '</span><span>>'</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta final</span><span>, coloque un</span> <span class="hps">'/'</span> <span class="atn hps">después de '</span><span><' y</span> <span class="hps">antes del</span> <span class="hps">nombre del elemento.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Dependiendo del</span> <span class="hps">lenguaje de marcado</span><span>,</span> <span class="hps">algunos</span> <span class="hps">elementos tienen</span> <span class="hps">sólo</span> <span class="hps">una etiqueta de inicio</span><span>,</span> <span class="hps">o</span> <span class="hps">una sola etiqueta</span> <span class="hps">donde el</span> <span class="hps">'/'</span> viene <span class="hps">después del</span> <span class="hps">nombre del elemento.</span> <span class="hps">Un elemento</span> <span class="hps">también</span> <span class="hps">puede ser un contenedor </span><span class="hps">e incluir</span> <span class="hps">otros elementos</span> <span class="hps">entre</span> <span class="hps">su</span> <span class="hps">etiqueta de inicio</span> <span class="hps">y la etiqueta de cierre</span><span>.</span> <span class="alt-edited hps">Sólo recuerda</span> <span class="hps">cerrar</span> <span class="hps">siempre</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">dentro del contenedor.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">DOM</span> <span class="hps">tiene una estructura</span> <span class="hps">en forma de árbol</span><span>.</span> <span class="hps">Cada elemento</span><span>,</span> <span class="hps">atributo</span> <span class="hps">y</span> <span class="hps">extensión de texto</span> <span class="hps">en el</span> <span class="hps">lenguaje de marcado</span> <span class="hps">se convierte en un</span> <span class="hps"><em>nodo </em>de la</span> <span class="hps">estructura de árbol.</span> <span class="hps">Los nodos</span> <span class="hps">se definen por su</span> <span class="hps">relación con otros</span> <span class="hps">nodos DOM</span><span>.</span> <span class="hps">Algunos elementos</span> <span class="hps">son</span> <span class="hps">los padres de los</span> <span class="hps">nodos secundarios</span><span>,</span> <span class="hps">y</span> <span class="hps">los nodos secundarios</span> <span class="hps">tienen hermanos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Comprender el</span> <span class="hps">DOM</span> <span class="hps">le ayuda a diseñar</span><span>, depurar</span> <span class="hps">y mantener su</span> <span class="hps">CSS</span><span>,</span> <span class="hps">porque el</span> <span class="hps">DOM</span> <span class="hps">es donde su</span> <span class="hps">CSS y</span> <span class="hps">el contenido del documento</span> <span class="hps">se reúnen</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> -<span id="result_box" lang="es"><span class="hps">En</span> <span class="alt-edited hps">el</span> <span class="hps">documento de ejemplo</span><span>,</span> <span class="alt-edited hps">las</span> <span class="hps">etiqueta <p></span> <span class="hps">y su</span> <span class="hps">etiqueta de cierre</span> <span class="atn hps"><</span><span>/</span> <span class="hps">p></span> <span class="hps">crean un contenedor</span><span>:</span></span> - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="Ejemplo_en_vivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Ejemplo</span> en <span class="hps">vivo</span></span></h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">DOM</span><span>, el nodo</span> <span class="hps">correspondiente P</span> <span class="hps">es</span> <span class="hps">uno de los padres</span><span>.</span> <span class="hps">Sus</span> <span class="hps">hijos</span> <span class="hps">son los nodos</span> <code><em><strong>STRONG </strong></em></code><span class="alt-edited hps">y</span> <span class="hps">los</span> <span class="hps">nodos de texto</span><span>.</span> <span class="hps">Los nodos</span> <code><em><strong>STRONG </strong></em></code></span><span lang="es"><span class="alt-edited hps">son en sí mismos</span> <span class="hps">padres</span><span>,</span> <span class="hps">con</span> <span class="hps">los nodos de texto</span> <span class="hps">como</span> <span class="hps">sus hijos</span><span>:</span></span></p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="Acción_Analizando_un_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción:</span> <span class="hps">Analizando un</span> <span class="hps">DOM</span></span></h2> - -<h3 id="El_uso_del_Inspector_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">El uso del Inspector</span> <span class="hps">DOM</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Para analizar un</span> <span class="hps">DOM</span><span>,</span> <span class="hps">se necesita un software</span> <span class="hps">especial.</span> <span class="hps">Usted puede usar</span> el </span><span id="result_box" lang="es"><span class="alt-edited hps">complemento de </span> </span><span id="result_box" lang="es"><span class="hps">Mozilla </span></span><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) <span id="result_box" lang="es"><span class="hps">para analizar un</span> <span class="hps">DOM</span><span>.</span> <span class="hps">Usted sólo tendrá que</span> <span class="hps">instalar el</span> <span class="atn hps">complemento (</span><span>ver</span> <span class="hps">más detalles abajo)</span><span>.</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Utilice</span> <span class="hps">el navegador</span> <span class="hps">Mozilla</span> <span class="hps">para abrir</span> <span class="hps">el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Desde la barra de</span> <span class="hps">menú de su </span><span class="hps">navegador</span><span>, selecciona</span> <strong><span class="hps">Herramientas></span> <span class="hps">Inspector DOM</span></strong><span>,</span> <span class="hps">o <strong>Herramientas</strong></span><strong><span>></span> <span class="hps">Desarrollo Web></span> <span class="hps">Inspector DOM</span></strong><span>.</span></span> - <div class="tuto_details"> - <div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> - - <p><span id="result_box" lang="es"><span class="hps">Si el navegador</span> <span class="hps">Mozilla</span> <span class="hps">no tiene</span> <span class="hps">Domi</span><span>, puede</span><a href="https://addons.mozilla.org/en-US/firefox/addon/6622/"> instalarlo del sitio de complementos</a> <span class="hps">y reiniciar el</span> <span class="hps">navegador.</span> <span class="hps">Luego regrese</span> <span class="hps">a este</span> <span class="hps">tutorial.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Si no</span> <span class="hps">desea instalar</span> <span class="hps">Domi</span> <span class="hps">(o</span> <span class="hps">estás usando</span> <span class="hps">un navegador que no</span> <span class="hps">Mozilla)</span><span>, puede utilizar</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles,</span> <span class="hps">como se describe en</span> <span class="hps">la siguiente sección.</span> <span class="hps">O bien, puede</span> <span class="hps">omitir esta sección</span> <span class="hps">e ir directamente a</span> <span class="hps">la página siguiente.</span> <span class="hps">Saltarse</span> <span class="hps">esta sección</span> <span class="hps">no interfiere con</span> <span class="hps">el resto del</span> <span class="hps">tutorial.</span></span></p> - </div> - </li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <span class="hps">Domi</span><span>, expanda</span> <span class="hps">los nodos</span> <span class="hps">de su</span> <span class="hps">documento</span> <span class="hps">haciendo clic en</span> <span class="hps">las flechas</span><span>.</span></span> - <p><span id="result_box" lang="es"><strong><span class="hps">Nota</span><span>:</span></strong> <span class="alt-edited hps">El espaciado</span> <span class="alt-edited hps">de su archivo</span> <span class="hps">HTML</span> <span class="alt-edited hps">puede ocasionar</span> <span class="alt-edited hps">que Domi</span> <span class="alt-edited hps">muestre</span> <span class="hps">algunos nodos</span> <span class="hps">de texto vacíos</span><span class="alt-edited">, que se pueden</span> <span class="hps">pasar por alto.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Parte</span> <span class="hps">del resultado</span> <span class="hps">podría tener este aspecto</span><span>, según</span> <span class="alt-edited hps">qué nodos</span> <span class="alt-edited hps">has</span> <span class="alt-edited hps">expandido</span><span>:</span></span></p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p><span id="result_box" lang="es"><span class="alt-edited hps">Cuando selecciona</span> <span class="alt-edited hps">cualquiera de los nodos</span><span>, puede usar</span> <span class="hps">panel de la derecha</span> <span class="hps">de</span> <strong><span class="alt-edited hps"> DOMi </span></strong><span class="hps">para averiguar</span> <span class="hps">más cosas sobre él.</span> <span class="hps">Por ejemplo</span><span>, cuando se selecciona</span> <span class="hps">un nodo de texto</span><span>,</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span class="hps">muestra</span> <span class="hps">el texto en el</span> <span class="hps">panel de la derecha</span><span>.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Cuando se selecciona</span> <span class="alt-edited hps">un elemento nodo</span></span>, <span id="result_box" lang="es"><strong><span class="alt-edited hps">DOMi </span></strong><span class="hps">analiza y</span> <span class="hps">ofrece</span> <span class="hps">una enorme cantidad de</span> <span class="hps">información en su</span> <span class="hps">panel de la derecha</span><span>.</span></span> <span id="result_box" lang="es"><span class="alt-edited hps">La información de estilo</span> <span class="hps">es sólo</span> <span class="alt-edited hps">una parte de la información</span> <span class="hps">que proporciona.</span></span></p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Problema</div> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span>, haga clic</span> <span class="hps">en un nodo</span> </span><code><small>STRONG</small></code>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Utilice</span> el <span class="hps">panel de la derecha</span> <span class="hps">de</span> <span class="alt-edited hps">Domi</span> <span class="hps">para encontrar </span><span class="alt-edited hps">el </span></span><span id="result_box" lang="es"><span class="hps"> nodo de </span></span><span id="result_box" lang="es"><span class="alt-edited hps">color</span><span class="hps"> rojo</span><span>,</span> <span class="hps">y donde</span> <span class="hps">su apariencia </span><span class="hps">es</span> <span class="hps">más relevante que</span> <span class="hps">el texto normal</span><span>.</span></span></p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Ocultar solución</a></div> -<a href="#tutochallenge" title="Ver la posible solución para el problema">Ver la solución para el problema.</a></div> - -<h3 id="Utilizando_Web_X-Ray_Goggles"><span class="short_text" id="result_box" lang="es"><span class="hps">Utilizando</span> <span class="hps">Web</span> <span class="hps">X</span><span class="atn">-</span><span>Ray</span> <span class="hps">Goggles</span></span></h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a><span id="result_box" lang="es"><span class="hps">muestra</span> <span class="hps">menos información que</span> <strong><code><span class="hps">DOM</span> </code></strong><span class="hps">Inspector</span><span>, pero</span> <span class="hps">es</span> <span class="hps">más fácil de</span> <span class="hps">instalar y utilizar.</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Ir</span> <span class="hps">a la página principal</span> <span class="hps">de</span> <span class="hps">la </span></span> <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> - <li><span id="result_box" lang="es"><span class="hps">Arrastre el</span> <span class="hps">enlace</span> <span class="hps">bookmarklet</span> <span class="hps">en esa</span> <span class="hps">página a</span> <span class="hps">tu barra de herramientas</span> <span class="hps">del navegador</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Abra el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">Active</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles</span> <span class="hps">haciendo clic en el</span> <span class="hps">bookmarklet</span> <span class="hps">en</span> <span class="hps">la barra de herramientas</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Mueva el</span> <span class="alt-edited hps">puntero del ratón</span> <span class="alt-edited hps">por encima de su</span> <span class="alt-edited hps">documento para comprobar</span> <span class="hps">los</span> <span class="hps">elementos en el documento</span><span>.</span></span></li> -</ol> - -<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}<span id="result_box" lang="es"><span class="alt-edited hps">Si tomaste</span> <span class="alt-edited hps">el reto</span><span class="alt-edited">, usted vera</span> <span class="hps">que</span> <span class="hps">la información de estilo</span> <span class="hps">interactúa</span> en </span><span id="result_box" lang="es"><span class="hps">más de un lugar, </span></span><span id="result_box" lang="es"><span class="hps">para crear el estilo</span> <span class="hps">final de </span><span class="hps">un elemento.</span> <span class="hps">La <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">siguiente página</a></span> <span class="hps">explica</span> <span class="hps">más acerca de estas</span> <span class="hps">interacciones.</span></span></p> diff --git a/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html b/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html deleted file mode 100644 index a46c22f85e..0000000000 --- a/files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Que es CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22 -tags: - - para_revisar -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/CSS/Como_iniciar/Que_es_CSS ---- -<p>En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.</p> - -<p>Esta es la primera sección del tutorial <a href="/es/CSS/Introducción" title="es/CSS/Introducción">Como iniciar</a>.<br> - Siguiente sección: <a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting Started/Why use CSS">Por qué usar CSS</a></p> - -<h2 id="Información_¿Qué_es_CSS">Información: ¿Qué es CSS?</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), traducido literalmente al español, como <em>Hojas de estilo en cascada</em>, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.</p> - -<p>Un <em>documento (document)</em> es una colección de información que está estructurada utilizando un <em>lenguaje de formato (markup language)</em>.</p> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Ejemplos</caption> - <tbody> - <tr> - <td> - <ul> - <li>Una página web como la que estás leyendo, es un documento.<br> - La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).</li> - </ul> - - <ul> - <li>Un cuadro de diálogo en una aplicación Mozilla es un documento.<br> - Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p>En este tutorial, los cuadros con titulo <strong>Más detalles</strong>, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Más detalles</caption> - <tbody> - <tr> - <td> - <p>Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.</p> - - <p>Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.</p> - - <p>Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:</p> - - <table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en/HTML" title="en/HTML">HTML</a></td> - <td>para páginas web</td> - </tr> - <tr> - <td><a href="/en/XML" title="en/XML">XML</a></td> - <td>para documentos estrucurados, en general</td> - </tr> - <tr> - <td><a href="/en/SVG" title="en/SVG">SVG</a></td> - <td>para gráficas</td> - </tr> - <tr> - <td><a href="/en/XUL" title="en/XUL">XUL</a></td> - <td>para interfaces de usuario de Mozilla</td> - </tr> - </tbody> - </table> - - <p>En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.</p> - </td> - </tr> - </tbody> -</table> - -<p><em>Presentar</em> un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Más detalles</caption> - <tbody> - <tr> - <td>CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un <em>agente de usuarios</em> (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador. - <p>Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definiciones</a> (en ingles) en la especificación CSS.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Acción_Crear_un_documento">Acción: Crear un documento</h2> - -<ol> - <li>Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. - <ol> - <li>Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre <code>doc1.html</code> - - <div style="width: 40em;"> - <pre class="deki-transform"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; - charset=iso-8859-1"> - <title>Sample document</title> - </head> - - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - <strong>B</strong>heets - </p> - </body> -</html> -</pre> - </div> - </li> - </ol> - </li> - <li>En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. - <p>Debe observar un texto con las letras iniciales en negrita, así:</p> - - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.</p> - </li> -</ol> - -<h2 id="¿Qué_sigue">¿Qué sigue?</h2> - -<p>Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de <a href="/Talk:en/CSS/Getting_Started/What_is_CSS%3f" title="Talk:en/CSS/Getting_Started/What_is_CSS?">Discusiones</a>.</p> - -<p>El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: <strong><a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting_Started/Why_use_CSS?">¿Por qué utilizar CSS?</a></strong></p> - -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}</p> diff --git a/files/es/conflicting/learn/css/first_steps/index.html b/files/es/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index ffcef61e68..0000000000 --- a/files/es/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Introducción -slug: conflicting/Learn/CSS/First_steps -tags: - - CSS - - CSS:Introducción - - para_revisar -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/CSS/Introducción ---- -<h2 id="Presentación"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Presentación</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Está dividido en dos partes.</span></span></p> - -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.</span></span></li> -</ul> - -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.</span></span></li> -</ul> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El tutorial se basa 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> .</span></span></p> - -<h3 id="¿Quién_debe_usar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">¿Quién debe usar este tutorial?</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.</span></span></p> - -<h3 id="¿Qué_se_necesita_antes_de_empezar"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">¿Qué se necesita antes de empezar?</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También debes saber cómo utilizarlos de forma básica.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El otro software de Mozilla al que hace referencia este tutorial incluye:</span></span></p> - -<ul> - <li><a href="/en/DOM_Inspector" title="en/Dom inspector"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Inspector DOM</span></span></a></li> -</ul> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.</span></span></p> - -<h3 id="Cómo_utilizar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cómo utilizar este tutorial</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para utilizar este tutorial, lee las páginas con atención y en orden.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En cada página, utiliza la sección de <em>Información</em> para entender cómo funciona CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usa la sección <em>Acción</em> para tratar de usar CSS en tu propio equipo.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para controlar que has comprendido los contenidos, acepta el reto al final de cada página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título <em>Más detalles.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.</span></span></p> - -<h2 id="Parte_I_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte I del tutorial </span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una guía paso a paso básica para CSS.</span></span></p> - -<ol> - <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS" title="es/docs/Web/CSS/Como iniciar/Que es CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Qué es CSS</span></span></a></strong></li> - <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS" title="es/docs/Web/CSS/Como iniciar/Por que usar CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por qué usar CSS</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo funciona CSS</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting Started/Cascading and inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cascada y herencia</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Selectores</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting Started/Readable CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">CSS legibles </span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting Started/Text styles"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Estilos de texto</span></span></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"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Contenido</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting Started/Lists"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Listas</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting Started/Boxes"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Cajas</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting Started/Layout"><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diseño</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Tablas</span></span></a></strong></li> - <li><strong><a href="/es/docs/Web/CSS/Introducción/Media" title="es/docs/Web/CSS/Introducción/Media"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Multimedia</span></span></a></strong></li> -</ol> - -<h2 id="Parte_II_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte II del tutorial</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.</span></span></p> - -<ol> - <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting Started/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">JavaScript</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting Started/XBL bindings"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Enlaces XBL</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting Started/XUL user interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Interfaces de usuario XUL</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting Started/SVG graphics"><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Gráficos SVG</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting Started/XML data"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Datos XML</span></span></a></strong></li> -</ol> - -<p>{{ languages( { "en": "en/CSS/Getting_Started", "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/conflicting/learn/css/styling_text/fundamentals/index.html b/files/es/conflicting/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index 19c967bb6c..0000000000 --- a/files/es/conflicting/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Los estilos de texto -slug: conflicting/Learn/CSS/Styling_text/Fundamentals -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles -original_slug: Web/CSS/Introducción/Los:estilos_de_texto ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección séptima del</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> tutorial</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">da más ejemplos de estilos de texto.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.</span></font></font></p> - -<h2 class="clearLeft" id="Los_estilos_de_texto_Información"><span id="result_box" lang="es"><span class="hps">Los estilos de texto</span><span>: Información</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene varias propiedades</span> <span class="hps">de</span> </span><span id="result_box" lang="es"><span class="hps">estilo</span><span> de </span></span><span id="result_box" lang="es"><span class="hps">texto</span> <span>.</span></span></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hay una propiedad abreviada conveniente, </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la fuente</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:</span></font></font></p> - -<ul style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; color: rgb(77, 78, 83); 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; background-color: rgb(255, 255, 255);"> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Negrita, cursiva, y small-caps (versalita)</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tamaño</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La altura de la línea</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tipo de letra</span></font></font></li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token selector" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">p </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">{ </span></font></font></span><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">fuente </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cursiva 75% / 125% </span></font></font><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">"Comic Sans MS"</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , cursive </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">; </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">}</span></font></font></span></code></pre> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">establece</span> varias <span class="hps">propiedades de la fuente</span><span class="alt-edited">, poniendo</span> <span class="hps">todos los párrafos</span> <span class="hps">en</span></span> italic.</p> - -<p><span id="result_box" lang="es"><span class="hps">El tamaño de fuente</span> <span class="hps">se establece en</span> <span class="hps">tres cuartas partes del</span> <span class="hps">tamaño</span> </span><span id="result_box" lang="es"><span class="hps">en </span><span class="hps">cada</span></span><span id="result_box" lang="es"> </span><span id="result_box" lang="es"><span class="hps">párrafo</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">del elemento padre</span><span>,</span> <span class="hps">y</span> <span class="hps alt-edited">el</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">se establece en</span> <span class="hps">125</span><span class="atn">% (</span><span>un poco más</span> <span class="hps">separados</span> <span class="hps">de lo normal)</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tipo de letra</span> <span class="hps">se establece en</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">pero si</span> <span class="hps">este tipo de letra</span> <span class="hps">no está disponible,</span> <span class="hps">el navegador</span> <span class="hps">utilizará</span> <span class="hps alt-edited">por</span> <span class="hps">defecto</span> <span class="hps">tipografía</span> <span class="hps">cursiva</span> <span class="hps">(</span></span>hand-written<span lang="es"><span>)</span><span>.</span></span></p> - -<p><span lang="es"><span class="hps">La</span> <span class="hps">regla tiene</span> <span class="hps alt-edited">el efecto colateral</span> <span class="hps alt-edited">de desactivar</span> <span class="hps alt-edited">las</span> <span class="hps alt-edited">versalitas</span> <span class="hps">y</span> <span class="hps alt-edited">negritas</span> <span class="hps atn">(</span><span>estableciendo su valor </span><span class="hps alt-edited">en normal)</span><span>:</span></span></p> -</div> - -<h3 id="Tipos_de_fuentes"><span id="result_box" lang="es"><span class="hps alt-edited">Tipos de fuentes</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">No se puede predecir</span> <span class="hps">qué</span> tipografías </span><span id="result_box" lang="es"><span class="hps alt-edited">tienen</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">los lectores de</span> nuestro <span class="hps">documento</span> <span>.</span> <span class="hps">Así que</span> <span class="hps alt-edited">cuando se especifica</span> <span class="hps alt-edited">llos tipos de fuentes </span><span class="hps alt-edited">de las </span><span class="hps alt-edited">letra</span><span>s</span><span>, es</span> <span class="hps">buena</span> <span class="hps alt-edited">idea darle</span> <span class="hps alt-edited">una lista alternativa</span> <span class="hps">en orden de preferencia</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Finalice la</span> <span class="hps">lista</span> <span class="hps">con uno de los</span> <span class="hps alt-edited">las tipografías</span> por defecto<span class="hps alt-edited">:</span> </span><code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> - -<p><span lang="es"><span class="hps">Si el</span> <span class="hps">tipo de letra</span> <span class="hps alt-edited">no es compatible con</span> <span class="hps alt-edited">alguna de los caracteres</span> <span class="hps alt-edited">del documento</span><span>, el navegador</span> <span class="hps alt-edited">puede sustituirlos por</span> <span class="hps alt-edited">una tipografía</span> <span class="hps">diferente.</span> <span class="hps">Por ejemplo, el</span> <span class="hps">documento puede contener</span> <span class="hps">caracteres especiales que</span> </span><span style="color: rgb(77, 78, 83); 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; display: inline !important; float: none; background-color: rgb(255, 255, 255);">el tipo de letra no admite.</span><span lang="es"> <span class="hps">Si</span> <span class="hps">el navegador puede</span> <span class="hps">encontrar otro</span> <span class="hps alt-edited">tipografía que</span> <span class="hps">tiene esos</span> <span class="hps">caracteres</span><span>,</span> <span class="hps alt-edited">entonces usará</span> <span class="hps">otro</span> <span class="hps alt-edited">tipo de fuente</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tipo de letra por sí misma, utilizar el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-family</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> - -<h3 id="Los_tamaños_de_la_fuente"><span id="result_box" lang="es"><span title="Font sizes - -">Los tamaños de la fuente</span></span></h3> - -<p><span id="result_box" lang="es"><span title="Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can. -">Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.</span></span></p> - -<p><span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">Puede utilizar algunos valores incorporados para tamaños de fuentes, </span></span><code>like</code> <code>small</code>, <code>medium</code> and <code>large</code> (<span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">pequeñas, medianas y grandes)</span></span> . <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">También puede utilizar valores relativos al tamaño de fuente del elemento padre, </span></span>l<code>ike</code><code>: smaller, larger, 150% or 1.5em</code>. ( <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">más pequeño, más grande, 150% o 1.5em.)</span></span>. <span id="result_box" lang="es"><span title='An "em" is equivalent to the width of the letter "m" (for the font size of the parent element);'>Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); </span><span title="thus 1.5em is one-and-a-half times the size of the font of the parent element. -">así 1.5em es una vez y media el tamaño de la fuente del elemento padre.</span></span></p> - -<p><span id="result_box" lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer.">Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora.</span></span><span lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer."> Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tamaño de fuente por su cuenta, utilice el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-size</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> - -<h3 id="Altura_de_línea">Altura de línea</h3> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">El</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">especifica el</span> <span class="hps">espacio entre líneas</span><span>.</span> <span class="hps">Si el documento tiene</span> <span class="hps">párrafos largos</span> <span class="hps">con</span> <span class="hps">muchas líneas</span><span>,</span> <span class="hps">una separación</span> <span class="hps">más grande de lo</span> <span class="hps">normal,</span> <span class="hps">hace que sea</span> <span class="hps">más fácil de leer</span><span>, especialmente si el</span> <span class="hps">tamaño de la letra</span> <span class="hps">es pequeña</span><span>.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar una altura de línea por su cuenta, utilice <code>la </code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">propiedad </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">line-height</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> .</span></font></font></p> - -<h3 id="Decoración">Decoración</h3> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">La</span> <span class="hps">propiedad independiente </span></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">text-decoration</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><span lang="es"><span class="hps">puede</span> <span class="hps">especificar otros</span> <span class="hps">estilos,</span> <span class="hps">como el</span> <span class="hps">subrayado o</span> <span class="hps">tachado</span><span>.</span> <span class="hps">Usted</span> <span class="hps alt-edited">puede establecerlo en</span> <span class="hps">ninguno</span> ( </span><code>none</code> ) <span lang="es"> <span class="hps alt-edited">para eliminar</span> <span class="hps alt-edited">expresamente</span> <span class="hps">cualquier</span> <span class="hps">decoración.</span></span></p> - -<h3 id="Otras_propiedades">Otras propiedades</h3> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar cursiva por su cuenta, use </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-style</span></font></font></code></a><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : italic;</span></font></font></code><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar audaz por su cuenta, use </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-weight</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : bold;</span></font></font></code><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar los pequeños capitales en su propio, el uso </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-variant</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : small-caps;</span></font></font></code></p> - -<p>Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como <code>normal</code> <code>o inherit</code>.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mas detalles</div> - -<p><span id="result_box" lang="es"><span class="hps">Puede especificar</span> <span class="hps">estilos de texto</span> <span class="hps alt-edited">de diversas</span> <span class="hps alt-edited">maneras.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Por ejemplo</span><span>,</span> <span class="hps">algunas de las</span> <span class="hps">propiedades mencionadas</span> <span class="hps">aquí</span> <span class="hps">tienen</span> <span class="hps">otros valores</span> <span class="hps">que se pueden utilizar</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">compleja</span><span>,</span> <span class="hps alt-edited">evite utilizar</span> <span class="hps alt-edited">la propiedad </span></span><code>font</code> <code>shorthand</code><span lang="es"><span class="hps">,</span> <span class="hps">debido a sus</span> <span class="hps">efectos secundarios</span> <span class="hps">(resetean </span><span class="hps">otras propiedades</span> <span class="hps">individuales</span><span>)</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Para obtener mas detalles de</span> <span class="hps">las propiedades</span> <span class="hps">que se relacionan con</span> <span class="hps">las fuentes, </span></span><span lang="es"><span class="hps">ver</span></span><span lang="es"><span class="hps"> las </span><span class="hps">especificación</span>es <span class="hps">CSS</span></span><span lang="es"> </span><span id="result_box" lang="es"><span class="hps">, </span></span><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a><span lang="es"><span class="hps">,</span><span>.</span> <span class="hps alt-edited">Si desea más detalles sobre</span> <span class="hps">la decoración de</span> <span class="hps">texto,</span> <span class="hps">ver</span> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text </a><span lang="es"><span class="hps">.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(244, 244, 244);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">@ font-face</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para especificar una fuente en línea. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.</span></font></font></p> -</div> - -<h2 id="Acción_Especificaciónes_de_las_fuentes"><span id="result_box" lang="es"><span>Acción:</span> <span class="hps">Especificaciónes de</span> <span class="hps">las fuentes</span></span></h2> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para un simple documento, puede establecer la fuente del </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title="El HTML <body> representa el contenido de un documento HTML. Sólo hay un elemento <body> en un documento."><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">elemento </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><body></span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> y el resto del documento hereda la configuración.</span></font></font></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">CSS</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Agregue</span> <span class="hps">la siguiente regla</span> <span class="hps">para cambiar</span> <span class="hps">el tipo de letra</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">parte superior del archivo</span> <span class="hps">CSS</span> <span class="hps">es</span> <span class="hps alt-edited">el lugar lógico</span> <span class="hps alt-edited">para esto</span><span>, pero no tiene</span> <span class="hps alt-edited">los mismos efectos</span> <span class="hps">donde</span> <span class="hps alt-edited">usted lo ponga</span><span>:</span></span> - <pre class="eval language-html"><code class="language-html">body {font: 16px "Comic Sans MS", cursive;}</code></pre> - - <div class="line-number" style="top: 0px;"> </div> - </li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Añada</span> <span class="hps">un comentario</span> <span class="hps alt-edited">que explique</span> <span class="hps">la regla, y</span> <span class="hps alt-edited">agregue un espacio en blanco</span> <span class="hps alt-edited">para que coincida con</span> <span class="hps">su diseño</span> <span class="hps">preferido</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Guarde el archivo y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el efecto</span><span>.</span> <span class="hps">Si su sistema tiene</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">u otra</span> <span class="hps">fuente cursiva</span> <span class="hps">que no</span> <span class="hps">soporta </span></span>italic<span lang="es"><span class="hps">,</span> <span class="hps">su navegador</span> eligira <span class="hps">un</span> <span class="hps">tipo de letra</span> <span class="hps">diferente para </span></span><span lang="es"><span class="hps alt-edited">la</span> <span class="hps alt-edited">primera línea</span></span><span lang="es"><span class="hps"> del</span> <span class="hps">texto en </span></span>italic<span lang="es"><span class="hps alt-edited">:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desde la barra de menú de su navegador, elija </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Tamaño del texto> Aumentar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (o </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Zoom> Acercar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ). </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.</span></font></font></li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Desafío</div> - -<p><span id="result_box" lang="es"><span class="hps">Sin modificar nada más</span><span>,</span> <span class="hps">hacer</span> <span class="hps">las seis</span> <span class="hps">letras iniciales</span> <span class="hps">dos veces el tamaño</span> <span class="hps">de</span> <span class="hps">letra serif</span> <span class="hps">por defecto del navegador</span><span>:</span></span></p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add the following style declaration to the <code>strong</code> rule:</p> - -<pre class="brush: css"> font: 200% serif; -</pre> -If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> - -<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El documento muestra ya utiliza varios colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: 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; background-color: rgb(255, 255, 255);" title="/ En-US / docs / Web / guía / CSS / Getting_Started / Color"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> enumera los nombres de los colores estándar y se explica cómo se puede especificar otros </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">.</span></font></font></strong></p> - -<p> </p> diff --git a/files/es/conflicting/learn/forms/index.html b/files/es/conflicting/learn/forms/index.html deleted file mode 100644 index 03824f9932..0000000000 --- a/files/es/conflicting/learn/forms/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Formularios HTML -slug: conflicting/Learn/Forms -tags: - - Featured - - Forms - - Formulario(2) - - Guide - - Guía - - HTML - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -<p><span class="seoSummary">Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML. </span>El formulario HTML es una herramienta cuya finalidad es interactuar con el usuario; sin embargo, debido a razones históricas y técnicas, no siempre resulta obvio como explotar su enorme potencial. En esta guía, cubriremos todos los aspectos de los formularios HTML, desde su estructura hasta su estilo, desde la manipulación de sus datos hasta los <em>widgets</em> personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!</p> - -<h2 id="Artículos">Artículos</h2> - -<ol> - <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mi primer formulario HTML</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Cómo estructurar un formulario HTML</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Los <em>widgets</em> nativos de formulario</span></a></li> - <li>CSS para formularios HTML - <ol> - <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Aplicando estilos a formularios HTML</span></a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avanzados para formularios HTML</a></li> - <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad de propiedades para <em>widgets</em> de formulario</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando y recibiendo datos</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validación de los datos del formulario</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Cómo crear un <em>widget</em> de formulario personalizado</a></li> - <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando formularios mediante JavaScript</a> - <ol> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Usando el objeto FormData</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formularios HTML en navegadores antiguos</a></li> -</ol> - -<h2 id="Documentación_HTML">Documentación HTML</h2> - -<h3 id="HTML_Elements">HTML Elements</h3> - -<table> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Interfaz DOM relacionada</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td style="vertical-align: top;">{{HTMLElement("button")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> - <td style="vertical-align: top;">El elemento <code>button</code> representa un boton clickeable.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> - <td style="vertical-align: top;">El elemento <span style="font-family: courier new;">datalist</span> element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> - <td style="vertical-align: top;">El <span style="font-family: courier new;">fieldset</span> se usa para agrupar distintos elementos dentro de un formulario.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("form")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> - <td style="vertical-align: top;">El elemento <code>form </code>representa una seccion del documento html que contiene elementos interactivos a traves de los cuales se le permite al usuario enviar informacion hacia un servidor web.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("input")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> - <td style="vertical-align: top;">El elemento <code>input</code> es usado para crear controles interactivos para los formularios.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> - <td style="vertical-align: top;">El elemento <code>keygen</code> existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario HTML.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("label")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> - <td style="vertical-align: top;">El <code>label</code> determina un título para un item de la interfaz del usuario.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> - <td style="vertical-align: top;">El elemento <code>legend</code> representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> - <td style="vertical-align: top;">EL elemento <code>meter</code> representa un valor escalar dentro de un rango conocido, o un valor fraccional.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> - <td style="vertical-align: top;"> - <p>El elemento <code>optgroup</code> crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .</p> - </td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("option")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> - <td style="vertical-align: top;">El elemento<em> </em><code>option<em> </em></code>es usado para crear un control de opcion que representa un item dentro de alguno de los elementos {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} o {{ HTMLElement("datalist") }} .</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("output")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> - <td style="vertical-align: top;">El elemento <code>output</code> representa un resultado de un calculo.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> - <td style="vertical-align: top;">El elemento <code>progress</code> es usado para mostrar el progreso de la realización de una tarea.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("select")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> - <td style="vertical-align: top;">El elemento <code>select</code> representa el control que presenta un menu de opciones.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> - <td style="vertical-align: top;">EL elemento <code>textarea</code> representa un campo multi-linea de edicion de text plano.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Nota:</strong> Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.</p> -</div> - -<h3 id="HTML_Attributes">HTML Attributes</h3> - -<table class="standard-table"> - <thead> - <tr> - <th>Nombre del atributo</th> - <th>Elementos</th> - <th>Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>accept</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Lista de tipos que acepta el servidor, típicamente un tipo de fichero.</td> - </tr> - <tr> - <td style="white-space: nowrap;">accept-charset</td> - <td>{{ HTMLElement("form") }}</td> - <td>Lista de <em>charsets </em>(conjuntos de caracteres) aceptados.</td> - </tr> - <tr> - <td>action</td> - <td>{{ HTMLElement("form") }}</td> - <td>La URI del programa con el que procesar la información enviada a mediante el formulario.</td> - </tr> - <tr> - <td>autocomplete</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Indica si los controles en este formulario serán o no autocompletados por el navegador</td> - </tr> - <tr> - <td>autofocus</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>El elemento debería poseer el foco automáticamente tras cargar la página.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>challenge</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Una cadena de comprobación que es enviada junto con la clave pública.</td> - </tr> - <tr> - <td>checked</td> - <td>{{ HTMLElement("input") }}</td> - <td>Indica si el elemento debe estar seleccionado (checked) tras cargar la página.</td> - </tr> - <tr> - <td>cols</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Define el número de columnas en un elemento de tipo textarea.</td> - </tr> - <tr> - <td>data</td> - <td>{{ HTMLElement("object") }}</td> - <td>Especifica la URL del recurso.</td> - </tr> - <tr> - <td>dirname</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td> </td> - </tr> - <tr> - <td>disabled</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indica si el usuario puede o no interactuar con el elemento.</td> - </tr> - <tr> - <td>enctype</td> - <td>{{ HTMLElement("form") }}</td> - <td>Define el tipo de contenido del formulario cuando el método de envío es POST.</td> - </tr> - <tr> - <td>for</td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td> - <p>Establece una asociación con otros elementos</p> - </td> - </tr> - <tr> - <td>form</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indica el elemento <strong>form</strong> que contiene este elemento.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>high</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the lower bound of the upper range.</td> - </tr> - <tr> - <td>keytype</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Especifica el tipo de clave generada.</td> - </tr> - <tr> - <td>list</td> - <td>{{ HTMLElement("input") }}</td> - <td>Determina una lista de opciones predefinidas para sugerir al usuario.</td> - </tr> - <tr> - <td>low</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the upper bound of the lower range.</td> - </tr> - <tr> - <td>max</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Indica el máximo valor permitido.</td> - </tr> - <tr> - <td>maxlength</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Define el máximo número de caracteres permitidos en el elemento.</td> - </tr> - <tr> - <td>method</td> - <td>{{ HTMLElement("form") }}</td> - <td> - <p>Define qué método HTTP se usará al enviar el formulario. puede ser <strong>GET</strong> (por defecto) o <strong>POST</strong></p> - </td> - </tr> - <tr> - <td>min</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>Indica el mínimo valor permitido.</td> - </tr> - <tr> - <td>multiple</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.</td> - </tr> - <tr> - <td>name</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.</td> - </tr> - <tr> - <td>novalidate</td> - <td>{{ HTMLElement("form") }}</td> - <td>Indica que el formulario no debería validarse al momento de ser enviado.</td> - </tr> - <tr> - <td>optimum</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indica el valor numérico óptimo.</td> - </tr> - <tr> - <td>pattern</td> - <td>{{ HTMLElement("input") }}</td> - <td>Establece la expresión regular con la que validar el valor del elemento.</td> - </tr> - <tr> - <td>placeholder</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.</td> - </tr> - <tr> - <td>readonly</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Indica si el elemento se puede o no editar.</td> - </tr> - <tr> - <td>required</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.</td> - </tr> - <tr> - <td>rows</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of rows in a textarea.</td> - </tr> - <tr> - <td>selected</td> - <td>{{ HTMLElement("option") }}</td> - <td>En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto</td> - </tr> - <tr> - <td>size</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Defina la anchura del elemento (en píxeles). Si el elemento es de tipo <strong>text</strong> o <strong>password</strong> el ancho se referirá al número de caracteres.</td> - </tr> - <tr> - <td>src</td> - <td>{{ HTMLElement("img") }}</td> - <td>El URL del recurso</td> - </tr> - <tr> - <td>step</td> - <td>{{ HTMLElement("input") }}</td> - <td>Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.</td> - </tr> - <tr> - <td>target</td> - <td>{{ HTMLElement("form") }}</td> - <td> </td> - </tr> - <tr> - <td>type</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> - <td>Determina el tipo del elemento.</td> - </tr> - <tr> - <td>usemap</td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td>value</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Establece el valor actual del elemento.</td> - </tr> - <tr> - <td>wrap</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Cuando un texto tiene una longitud mayor que el ancho del elemento sobre el que se muestra, determina si el elemento debe simular saltos de línea para que todo el texto quede visible en el elemento.</td> - </tr> - </tbody> -</table> - -<h3 id="Referencia_a_la_normativa">Referencia a la normativa</h3> - -<ul> - <li><a href="http://www.w3.org/html/wg/drafts/html/master/forms.html#forms" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML 5.1 Specification (Forms)</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> -</ul> diff --git a/files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html b/files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index e6cd3db57d..0000000000 --- a/files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: La importancia de comentar correctamente -slug: conflicting/Learn/HTML/Introduction_to_HTML/Getting_started -tags: - - HTML - - Todas_las_Categorías - - XHTML - - XML -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments -translation_of_original: Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting -original_slug: Web/HTML/La_importancia_de_comentar_correctamente ---- -<p> </p> -<p><br> - Cuando escribimos HTML en <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">modo estándar</a>, los comentarios mal formados pueden romper las páginas, causando que los contenidos del documento sean parcial o totalmente comentados. Al escribir XHTML o XML, los comentarios incorrectos darán lugar a que sus documentos no puedan ser mostrados.</p> -<h3 id="HTML_4.01" name="HTML_4.01">HTML 4.01</h3> -<p> - <i> - De la <a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación del W3C HTML 4.01 Sección 3.2.4 - Comentarios</a>:</i> -</p> -<blockquote> - No se permite espacio en blanco entre el delimitador de apertura de declaración de etiqueta ("<!") y el delimitador de apertura de comentario ("--"), pero sí se permite entre el delimitador de cierre de comentario ("--" y el delimitador de cierre de declaración de etiqueta (">"). Un error común es incluir una cadena de guiones ("---") dentro de un comentario. Los autores deberían evitar *poner dos o más guiones adyacentes dentro de un comentario.</blockquote> -<h4 id="Ejemplos" name="Ejemplos">Ejemplos</h4> -<p>Los siguientes son comentarios válidos en HTML.</p> -<pre class="eval"><!-- comentario html válido --> -<!-- comentario html válido -- > -</pre> -<p>El siguiente no es un comentario válido en HTML.</p> -<pre class="eval"><!-- comentario html -- no válido --> -</pre> -<h3 id="XML" name="XML">XML</h3> -<p> - <i> - De la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación del W3C XML 1.0 Sección 2.5 - Comentarios</a>:</i> -</p> -<blockquote> - {{ mediawiki.external('Definición: Los comentarios pueden aparecer en cualquier lugar de un documento fuera de otras marcas; Adicionalmente pueden aparecer en lugares permitidos por la gramática. No son parte de los datos de caracter de un documento; un procesador de XML puede, pero no tiene que, hacer posible que la aplicación recupere el texto de comentarios.') }} Por compatibilidad, la cadena "--" (doble guión) no debe ocurrir dentro de comentarios. - <pre>[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->' -</pre> -</blockquote> -<p>Según lo descrito en la gramática de XML sobre comentarios, un comentario tiene la siguiente forma:</p> -<pre class="eval"><!-- cualquier letra o signo, menos guiones seguidos --> -</pre> -<h4 id="Ejemplos_2" name="Ejemplos_2">Ejemplos</h4> -<p>El siguiente es un comentario válido en XML y XHTML.</p> -<pre class="eval"><!-- comentario xml/xhtml válido --> -</pre> -<p>Los siguientes son comentarios no válidos en XML y XHTML.</p> -<pre class="eval"><!-- comentario xml -- no válido --> -<!-- comentario xml no válido ---> -<!-- comentario xml no válido -- > -</pre> -<h3 id="Otras_lecturas" name="Otras_lecturas">Otras lecturas</h3> -<ul> - <li><a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación HTML 4.01: 3.2.4 - Comentarios</a></li> - <li><a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación XML: 2.5 - Comentarios</a></li> - <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=144432">Bugzilla bug 144432</a></li> - <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=102127">Bugzilla bug 102127</a></li> -</ul> -<div class="originaldocinfo"> - <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - <ul> - <li>Last Updated Date: May 19th, 2003</li> - <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> - </ul> -</div> -<p> </p> diff --git a/files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 5598eb90bd..0000000000 --- a/files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: Usando audio y video con HTML5 -slug: conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -tags: - - Flash - - Ogg - - applet - - busqueda - - errores - - especificacion - - gestion - - opciones - - reproduccion - - reserva -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video -original_slug: Web/HTML/Usando_audio_y_video_con_HTML5 ---- -<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.</p> - -<h2 id="Insertando_contenido_multimedia">Insertando contenido multimedia</h2> - -<p>Insertar contenido multimedia en tus documentos HTML es muy sencillo:</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.</p> - -<p>Este es un ejemplo para insertar <em>audio</em> en tu documento HTML</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -<p>Tu navegador no implementa el elemento audio.</p> -</audio></pre> -</div> - -<p>El atributo <code>src</code> puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -<p>Tu navegador no implementa el elemento audio</p> -</audio></pre> -</div> - -<p>Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:</p> - -<ul> - <li><code>controls</code> : muestra los controles estándar de HTML5 para audio en una página web.</li> - <li><code>autoplay</code> : hace que el audio se reproduzca automáticamente.</li> - <li><code>loop</code> : hace que el audio se repita automáticamente.</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>El atributo <code>preload</code> es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:</p> - -<ul> - <li><code>"none"</code> no almacena temporalmente el archivo</li> - <li><code>"auto"</code> almacena temporalmente el archivo multimedia</li> - <li><code>"metadata"</code> almacena temporalmente sólo los metadatos del archivo</li> -</ul> - -<p>Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} <span id="result_box" lang="es"><span class="hps">con el fin de</span> <span class="hps">proporcionar vídeo</span> <span class="hps">o</span> <span class="hps">audio</span> <span class="hps">codificados en formatos</span> <span class="hps">diferentes</span> <span class="hps">para</span> <span class="hps">diferentes navegadores</span></span>. Por ejemplo:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4" type="video/mp4"> - Tu navegador no implementa el elemento <code>video</code>. -</video> -</pre> - -<p>Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia admitidos por los elementos audio y video</a> en los diferentes navegadores.</p> - -<p>También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.</p> - -<p>Si el atributo <code>type</code> no está especificado, el tipo de contenido multimedia se obtiene del servidor <span id="result_box" lang="es"><span class="hps">y</span> se <span class="hps">comprueba para</span> <span class="hps">ver</span> <span class="hps">si el navegador</span> <span class="hps">lo puede manejar</span></span>; si no puede ser mostrado, se comprueba el siguiente <code>source</code> , si ninguno de los elementos <code>source</code> especificados pueden ser usados, un evento de <code>error</code> es enviado al elemento <code>video</code>. Si el atributo <code>type</code> está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente <code>source</code> se comprueba una vez.</p> - -<p>Mira <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">los eventos del contenido multimedia</a> para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia sportados por los elementos audio y video</a>.</p> - -<h2 id="Controlando_la_reproducción_multimedia">Controlando la reproducción multimedia</h2> - -<p>Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usada para implementar los elementos multimedia.</p> - -<p>Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.</p> - -<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> -<div> - <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button> - <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button> - <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button> - <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button> -</div> -</pre> - -<h2 id="Deteniendo_la_descarga_de_contenido_multimedia">Deteniendo la descarga de contenido multimedia</h2> - -<p>Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado <span id="result_box" lang="es"><span class="hps">a través de</span> <span class="hps">la recolección de basura</span></span>.</p> - -<p>Aquí un truco para detener la descarga de una sola vez:</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src = ""; -</pre> - -<p>Estableciendo una cadena vacía al atributo <code>src</code> del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.</p> - -<h2 id="Buscando_a_través_de_los_medios" style="margin: 0px 0px 0.8em; padding: 0px;">Buscando a través de los medios</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Los elementos de los medios proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. </font>Esto se hace estableciendo el valor de la propiedad <code style="font-size: 14px;">horaActual</code> en el elemento; ver <a class="new" href="https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement" title="/ Es / docs / Web / API / HTMLMediaElement"><code style="font-size: 14px;">HTMLMediaElement</code></a> para más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.</p> - -<p><span style="line-height: 1.5em;">Usted puede utilizar el elemento </span><code style="font-size: 14px;">seekable</code><span style="line-height: 1.5em;"> propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve un objeto </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/API/TimeRanges" style="line-height: 1.5em;" title="/ Es / docs / Web / API / TimeRanges"><code style="font-size: 14px;">TimeRanges</code></a><span style="line-height: 1.5em;"> que enumera los rangos de veces que se puede tratar de:</span></p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // Returns the starting time (in seconds) -mediaElement.seekable.end(); // Returns the ending time (in seconds) -mediaElement.currentTime = 122; // Seek to 122 seconds -mediaElement.played.end(); // Returns the number of seconds the browser has played -</pre> - -<h2 id="Especificación_del_rango_de_reproducción" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Especificación del rango de reproducción</font></h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Al especificar el URI de los medios de comunicación para un elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> o <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , puede incluir opcionalmente información adicional para especificar la parte de los medios a reproducir. Para ello, añada una almohadilla ("#"), seguida de la descripción del fragmento de medios.</p> - -<p><span style="line-height: 1.5em;">Un intervalo de tiempo se especifica mediante la sintaxis:</span></p> - -<pre>#t=[starttime][,endtime]</pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Algunos ejemplos:</p> - -<dl> -</dl> - -<dl> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 10,20</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 10.5</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 02:00:00</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de dos horas.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 60</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.</dd> -</dl> - -<div class="geckoVersionNote" style=""> -<p>{{ gecko_callout_heading("9.0") }}</p> -<font><font>La porción rango de reproducción del elemento de la especificación URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). </font><font>En este momento, esta es la única parte de la </font></font><a class="external" href="http://www.w3.org/TR/media-frags/" style="padding-right: 16px; line-height: 21px;" title="http://www.w3.org/TR/media-frags/"><font>especificación de los medios de comunicación Fragmentos URI</font></a><font><font>implementado por el Gecko, y sólo se puede utilizar cuando se especifica la fuente para los elementos de los medios de comunicación, y no en la barra de direcciones.</font></font> - -<p> </p> -</div> - -<h2 id="Opciones_de_reserva" style="margin: 0px 0px 0.8em; padding: 0px;">Opciones de reserva</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de comunicación son procesados por los navegadores que no admitan medios de HTML5. Usted puede tomar ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.</p> - -<p><span style="line-height: 1.5em;">Esta sección proporciona dos opciones de reserva para video. </span><font>En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.</font></p> - -<h3 id="Utilización_de_Flash" style="margin: 0px 0px 0.8em; padding: 0px;">Utilización de Flash</h3> - -<p><span style="line-height: 1.5em;">Puede usar Flash para reproducir una película formato Flash si el </span><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video" style="line-height: 1.5em;"><code style="font-size: 14px;"><video></code></a><span style="line-height: 1.5em;"> no se admite elemento</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p><font>Tenga en cuenta que no se debe incluir </font><code style="font-size: 14px;">classid</code><font> en el </font><code style="font-size: 14px;">objeto</code><font> tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.</font></p> - -<p> </p> - -<p> </p> - -<p> </p> - -<h3 id="Reproducción_de_vídeos_Ogg_utilizando_un_applet_de_Java" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Reproducción de vídeos Ogg utilizando un applet de Java</font></h3> - -<p><span style="line-height: 1.5em;">Hay un applet de Java llamada </span><a class="external" href="http://maikmerten.livejournal.com/2256.html" style="line-height: 1.5em; padding-right: 16px; background-color: transparent;" title="http://maikmerten.livejournal.com/2256.html">Cortado</a><span style="line-height: 1.5em;"> que se puede utilizar como reserva para reproducir vídeos Ogg en los navegadores que no tienen soporte para Java, pero no es compatible con vídeo HTML5</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el </font><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/p"><code style="font-size: 14px;"><font><p></font></code></a><font> elemento superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado incorrectamente informarán al usuario de que es necesario instalar un plugin para ver el contenido en la página.</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<div style="line-height: 22px;"><span class="geckoMinVerMethod indicatorInHeadline minVer">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</span> - -<h1 id="Gestión_de_errores" style="margin: 0px 0px 0.8em; padding: 0px; font-size: 1.857em;">Gestión de errores</h1> -</div> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado para que coincida con la última versión de la especificación HTML5. En lugar de que el <code style="font-size: 14px;">error sea</code> enviado al elemento en sí, ahora se entrega a los elementos "hijos" <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> correspondientes a las fuentes que resultan en el error.</p> - -<p><span style="line-height: 1.5em;">Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este HTML</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video> -<source id="mp4_src" - src="video.mp4" - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> -</source> -<source id="3gp_src" - src="video.3gp" - type='video/3gpp; codecs="mp4v.20.8, samr"'> -</source> -<source id="ogg_src" - src="video.ogv" - type='video/ogg; codecs="theora, vorbis"'> -</source> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> elementos con el ID "mp4_src" y "3gp_src" recibirán <code style="font-size: 14px;">error</code> eventos antes de cargar el recurso Ogg. Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con éxito, las fuentes restantes no se trataron en absoluto.</p> - -<h3 id="Detectar_si_las_fuentes_no_han_cargado" style="margin: 0px 0px 0.8em; padding: 0px;">Detectar si las fuentes no han cargado</h3> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><code>Para detectar qué todos los elementos </code><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> no han podido cargarse, se debe comprobar el valor de la propiedad <code style="font-size: 14px;">NetworkState</code> qué poseen todos los elementos de tipo multimedia. Si el valor es <code style="font-size: 14px;">HTMLMediaElement.NETWORK_NO_SOURCE</code>, se sabrá que las fuentes no se cargaron correctamente.</p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.</p> - -<h3 id="Mostrando_contenido_fallback_cuando_la_fuente_no_puede_ser_cargada">Mostrando contenido <em>fallback</em> cuando la fuente no puede ser cargada</h3> - -<p>Otra forma de mostrar el contenido <em>fallback</em> de un vídeo cuando ninguna de sus fuentes pudieron ser cargadas, es añadir un manejador de excepciones o errores en el último elemento {{ HTMLElement("source") }}. Así usted podrá reemplazar el vídeo con el contenido <em>fallback</em>:</p> - -<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">controls</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>source</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>App de b&uaacute;squeda din&aacute;mica en Firefox OS<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Clic en la im&aacute;gen para reproducir un v&iacute;deo demo de la app de b&uaacute;squeda din&aacute;mica<<span class="tag token"><span class="tag token"><span class="punctuation token">/</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> v <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector<span class="punctuation token">(</span></span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - sources <span class="operator token">=</span> v<span class="punctuation token">.</span><span class="function token">querySelectorAll<span class="punctuation token">(</span></span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - lastsource <span class="operator token">=</span> sources<span class="punctuation token">[</span>sources<span class="punctuation token">.</span>length<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -lastsource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'error'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> v<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span> - v<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">replaceChild<span class="punctuation token">(</span></span>d<span class="punctuation token">,</span> v<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="sect1" style="margin: 0px 0px 0.8em; padding: 0px;"> </h2> - -<h2 id="Véase_también" style="margin: 0px 0px 0.8em; padding: 0px;">Véase también</h2> - -<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;"> - <li>Los elementos relacionados con los medios HTML: <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> ;</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Manipulating_video_using_canvas" title="Vídeo Manipular con tela">Vídeo Manipular con canvas</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Introducing_the_Audio_API_Extension" title="Presentación de la extensión de API Audio">Presentación de la extensión de API Audio</a></li> - <li><code style="font-size: 14px;"><a class="external" href="http://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMHTMLMediaElement" style="padding-right: 16px; background-color: transparent;">nsIDOMHTMLMediaElement</a></code></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Formatos de los medios admitidos por los elementos de audio y vídeo">Formatos de los medios admitidos por los elementos de audio y vídeo</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" style="padding-right: 16px; background-color: transparent;" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" style="padding-right: 16px; background-color: transparent;" title="http://popcornjs.org/">Popcorn.js - Media Framework HTML5</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" style="padding-right: 16px; background-color: transparent;" title="http://www.html5video.org/kaltura-html5/">Kaltura Solución videoteca</a> , una biblioteca de JavaScript (mwEmbed) que soporta un retorno sin problemas con HTML5, VLC Player, Java Cortado y OMTK Vorbis reproductor de Flash. (Es utilizado por Wikimedia)</li> - <li><a class="external" href="http://omtk.org/flash/index.html" style="padding-right: 16px; background-color: transparent;" title="http://omtk.org/flash/index.html">OMTK - flash</a> , una biblioteca de Flash que implementa un decodificador Vorbis</li> - <li><a class="external" href="http://www.projekktor.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.projekktor.com">Projekktor jugador</a> , un contenedor de JavaScript para audio vídeo-tags con fallback flash, de código abierto, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" style="padding-right: 16px; background-color: transparent;" title="http://www.theora.org/cortado/">Applet Cortado</a> , una solución de reproducción de audio / vídeo en Java que mantiene Xiph.org</li> - <li><a class="external" href="http://videojs.com/" style="padding-right: 16px; background-color: transparent;" title="Video.js HTML5 Video Player">Video.JS</a> , un reproductor de vídeo HTML5 de código abierto y un marco.</li> - <li><a class="external" href="http://mediaelementjs.com/" style="padding-right: 16px; background-color: transparent;" title="http://mediaelementjs.com/">MediaElement.js</a> - marco audio / video HTML5 de código abierto con una cuña de Flash personalizada que imitan API multimedia HTML5 para exploradores más antiguos.</li> - <li><a class="external" href="http://www.hdwebplayer.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.hdwebplayer.com">FLV Player</a> - HTML5 reserva soporte del reproductor de vídeo</li> -</ul> - -<p><span style="line-height: inherit;">{{ HTML5ArticleTOC() }}</span></p> diff --git a/files/es/conflicting/learn/index.html b/files/es/conflicting/learn/index.html deleted file mode 100644 index 066950ce62..0000000000 --- a/files/es/conflicting/learn/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Codificación-Scripting -slug: conflicting/Learn -tags: - - Codificación - - Principiante - - Scripting -translation_of: Learn -translation_of_original: Learn/Coding-Scripting -original_slug: Learn/codificacion-scripting ---- -<p>REDIRIGE <a href="/es/docs/Learn">Aprende</a></p> diff --git a/files/es/conflicting/learn/javascript/objects/index.html b/files/es/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index ae0f3827d1..0000000000 --- a/files/es/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -title: Introducción a JavaScript orientado a objetos -slug: conflicting/Learn/JavaScript/Objects -tags: - - Constructor - - Herencia - - JavaScript - - Objetos - - Orientado a objetos - - POO - - espacio de nombres -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -original_slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos ---- -<p>{{jsSidebar("Introductory")}}</p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>JavaScript</strong> dispone de fuertes capacidades de programación orientada a objetos, a pesar de que han tenido lugar algunos debates respecto a las diferencias de sus capacidades en comparación con otros lenguajes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este artículo comienza con una Introducción a la programación orientada a objetos, luego examina el modelo de objetos de JavaScript, y finalmente, muestra los conceptos de programación orientada a objetos en JavaScript.</span></span></p> - -<h2 id="JavaScript_Review" name="JavaScript_Review"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Revisión de JavaScript</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no te sientes seguro acerca de los conceptos de JavaScript tales como variables, tipos, funciones y el ámbito de aplicación, puedes leer sobre estos temas en: <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A re-introduction to JavaScript">Una nueva introducción a JavaScript</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También puedes consultar la <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Guía de JavaScript 1.5</a>.</span></span></p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Programación orientada a objetos</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados en el mundo real.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza diversas técnicas de paradigmas previamente establecidas, incluyendo la <strong>modularidad</strong>, <strong>polimorfismo</strong> y <strong>encapsulamiento</strong>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hoy en día, muchos lenguajes de programación (como Java, JavaScript, C#, C++, Python, PHP, Ruby y Objective-C) soportan programación orientada a objetos (POO).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos puede considerarse como el diseño de software a través de un conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para la computadora.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">POO pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Gracias a su fuerte énfasis en la modularidad, el código orientado a objetos está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> - -<h2 id="Terminology" name="Terminology"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Terminología</span></span></h2> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Clase</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Define las características del Objeto.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Objeto</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una instancia de una Clase.</span></span></dd> - <dt><span style="line-height: 1.5;">Propiedad</span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una característica del Objeto, como el color.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Método</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una capacidad del Objeto, como caminar.</span></span></dd> -</dl> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Constructor</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Es un método llamado en el momento de la creación de instancias.</span></span></dd> - <dt><span style="line-height: 1.5;">Herencia</span></dt> - <dd><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase puede heredar características de otra Clase.</span></span></dd> -</dl> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Encapsulamiento</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Polimorfismo</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diferentes Clases podrían definir el mismo método o propiedad.</span></span></dd> -</dl> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para una descripción más extensa de programación orientada a objetos, consulta <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" title="http://es.wikipedia.org/wiki/Programación_orientada_a_objetos">Programación orientada a objetos</a> en Wikipedia.</span></span></p> - -<h2 id="Programación_basada_en_prototipos"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación basada en prototipos</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación basada en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación <a href="https://en.wikipedia.org/wiki/Self_%28programming_language%29">Self</a> desarrollado por David Ungar y Randall Smith.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sin embargo, el estilo de programación sin clases se ha hecho cada vez más popular y ha sido adoptado para lenguajes de programación como JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los componentes Morphic) y varios otros. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación orientada a objetos de JavaScript </span></span></h2> - -<h3 id="Core_Objects" name="Core_Objects"><span style="font-size: 1.714285714285714rem;">Namespace</span></h3> - -<p>Un <strong>espacio de nombres</strong> es un contenedor que permite asociar toda la funcionalidad de un determinado objeto con un nombre único. En JavaScript un espacio de nombres es un objeto que permite a métodos, propiedades y objetos asociarse. La idea de crear espacios de nombres en JavaScript es simple: Crear un único objeto global para las variables, métodos, funciones convirtiendolos en propiedades de ese objeto. El uso de los namespace permite minimizar el conflicto de nombres con otros objetos haciéndolos únicos dentro de nuestra aplicación.</p> - -<div>Un <strong>espacio de nombres</strong> es un objeto: </div> - -<div><br> -<span style="line-height: 1.5;">Vamos a crear un objeto global llamado MIAPLICACION</span></div> - -<div> </div> - -<pre class="brush: js">// namespace global - -var MIAPLICACION = MIAPLICACION || {};</pre> - -<div> </div> - -<div class="note"> -<p><strong>Nota:</strong> Para continuar con las mejores prácticas vamos a utilizar mayúsculas para los namespace.</p> -</div> - -<div> -<div>En el código de ejemplo anterior comprobamos si MIAPLICACION ya se encuentra definida. Si es así utilizamos el objeto global MIAPLICACION que existe; si este no existe creamos un objeto vacío llamado MIAPLICACION que encapsulará métodos, funciones, variables y otros objetos que vayamos a crear.</div> - -<div> </div> - -<div>También podemos crear <strong>Sub-espacios de nombres</strong>:</div> - -<div> </div> - -<pre class="brush: js">// Sub-namespace - -MIAPLICACION.event = {} ;</pre> -</div> - -<div>A continuación se muestra el código para la creación de un <strong>espacio de nombre</strong> y cómo agregar variables, funciones y métodos:</div> - -<div> </div> - -<pre class="brush: js">// Creación del contenedor llamado MIAPLICACION.metodoComun de método y propiedades comunes. -MIAPLICACION.metodoComun = { - regExParaNombre: "", // define regex para la validación del nombre - regExParaTelefono: "", // define regex para validación del teléfono - validaNombre: function(nombre){ - // Hace algo con el nombre que usted ingresa a la variable reExParaNombre - // usando "this.regExParaNombre" - }, - - validaNroTelefono: function (numTelefono){ - // Hace algo con el número de teléfono - } -} - -// Objeto junto a la declaración del método -MIAPLICACION.event = { - addListener: function(el, type, fn){ - // código de relleno - }, - removeListener: function(el, type, fn){ - // código de relleno - }, - getEvent: function(e) { - // código de relleno - } - - // Puedes agregar otras propiedades y métodos -} - -// Sintaxis de utilización del método addListener: -MIAPLICACION.event.addListener("turel", "tipo", callback); - - -</pre> - -<div> -<h3 id="Core_Objects" name="Core_Objects" style="line-height: 24px;"><span style="font-size: 1.714285714285714rem;">Objetos básicos</span></h3> -</div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método <code>random()</code>.</span></span></p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="brush: js" dir="ltr">alert (Math.random ());</span></span> -</pre> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> este y todos los demás ejemplos suponen que una función llamada <code>alert</code> (como el que se incluye en los navegadores web) se define de forma global.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La función <code>alert</code> no es realmente parte de JavaScript.</span></span></div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core JavaScript 1.5 Reference/Global Objects">Core JavaScript 1.5 Reference:Global Objects</a> para obtener una lista de los objetos básicos en JavaScript.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto en JavaScript es una instancia del objeto <code>Object</code>, por lo tanto, hereda todas sus propiedades y métodos.</span></span></p> - -<h3 id="Custom_Objects" name="Custom_Objects"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Objetos personalizados</span></span></h3> - -<h4 id="The_Class" name="The_Class"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La clase</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En su lugar, JavaScript utiliza funciones como clases.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Definir una clase es tan fácil como definir una función.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo siguiente se define una nueva clase llamada <strong>Persona</strong>.</span></span></p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">function Persona() { }</span></span> -</pre> - -<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29"><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El objeto (ejemplo de clase)</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para crear un nuevo ejemplo de un objeto <em><code>obj</code></em> utilizamos la declaración <code>new <em>obj</em></code> , asignando el resultado (que es de tipo <em><code>obj</code></em> ) a una variable para tener acceso más tarde.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define una clase llamada <code>Persona</code> y creamos dos instancias ( <code>persona1</code> y <code>persona2</code> ).</span></span></p> - -<pre class="brush: js">function Persona() { -} - -var persona1 = new Persona(); -var persona2 = new Persona();</pre> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por favor, consulta también <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="en/JavaScript/Reference/Global Objects/Object/create">Object.create</a> para ver un método nuevo y alternativo de creación de ejemplos.</span></span></div> - -<h4 id="The_Constructor" name="The_Constructor"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor es llamado en el momento de la creación de la instancia (el momento en que se crea la instancia del objeto).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El constructor es un método de la clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En JavaScript, la función sirve como el constructor del objeto, por lo tanto, no hay necesidad de definir explícitamente un método constructor.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada acción declarada en la clase es ejecutada en el momento de la creación de la instancia.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso. Más adelante describiremos como agregar </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">métodos a clase y sus definiciones ya que se realiza utilizando una sintaxis diferente.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo, el constructor de la clase <code>Persona</code> muestra un alerta que dice (<strong>Una instancia de persona)</strong> cuando se crea la instancia de la clase <code>Persona</code>.</span></span></p> - -<pre class="brush: js">function Persona() { - alert('Una instancia de Persona'); -} - -var persona1 = new Persona(); -var persona2 = new Persona();</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29"><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La propiedad (atributo del objeto)</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades deben establecerse a la propiedad prototipo de la clase (función), para que la herencia funcione correctamente.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada <strong><code>this</code></strong> , que se refiere al objeto actual.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82-goog-gtc-unit-83"><span class="goog-gtc-from-human goog-gtc-translatable">El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis: <strong>NombreDeLaInstancia<code>.Propiedad</code></strong>. Es la misma sintaxis utilizada por C++, Java y algunos lenguajes más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84-goog-gtc-unit-85"><span class="goog-gtc-from-human goog-gtc-translatable">(Desde dentro de la clase la sintaxis es <strong><code>this.</code><code>Propiedad</code></strong> que se utiliza para obtener o establecer el valor de la propiedad).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la propiedad <font face="Courier New, Andale Mono, monospace"><strong>primerNombre </strong></font>de la clase <code>Persona</code> y la definimos en la creación de la instancia.</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; - alert('Una instancia de Persona'); -} - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); - -// Muestra el primer nombre de persona1 -alert ('persona1 es ' + persona1.primerNombre); // muestra "persona1 es Alicia" -alert ('persona2 es ' + persona2.primerNombre); // muestra "persona2 es Sebastian"</pre> - -<h4 id="The_methods" name="The_methods"><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Llamar a un método es similar a acceder a una propiedad, pero se agrega <code>()</code> al final del nombre del método, posiblemente con argumentos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define y utiliza el método diHola<code>()</code> para la clase <code>Persona</code>.</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -Persona.prototype.diHola = function() { - alert ('Hola, Soy ' + this.primerNombre); -}; - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); - -// Llamadas al método diHola de la clase Persona. -persona1.diHola(); // muestra "Hola, Soy Alicia" -persona2.diHola(); // muestra "Hola, Soy Sebastian"</pre> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En JavaScript los métodos son objetos como lo es una función normal y se vinculan a un objeto como lo hace una propiedad, lo que significa que se pueden invocar desde "fuera de su contexto".</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Considera el siguiente código de ejemplo:</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -Persona.prototype.diHola = function() { - alert ("Hola, Soy " + this.primerNombre); -}; - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); -var funcionSaludar = persona1.diHola; - -persona1.diHola(); // muestra "Hola, Soy Alicia" -persona2.diHola(); // muestra "Hola, Soy Sebastian" -funcionSaludar(); // muestra "Hola, Soy undefined (ó da un error con el - // TypeError en modo estricto - -alert(funcionSaludar === persona1.diHola); // muestra true (verdadero) -alert(funcionSaludar === Persona.prototype.diHola); // muestra true (verdadero) -funcionSaludar.call(persona1); // muestra "Hola, Soy Alicia"</pre> - -<div>En el ejemplo se muestran todas las referencias que tenemos de la función <strong>diHola</strong> — una de ellas es <strong>persona1, </strong>otra en <strong>Persona.prototype</strong>, en la variable <strong>funcionSaludar</strong>, etc. — todas se refieren a la misma función. El valor durante una llamada a la función depende de como realizamos esa llamada. <span style="line-height: 1.5;">En el común de los casos cuando la llamamos desde una expresión donde tenemos a la función desde la propiedad del objeto — <strong>persona1.diHola()</strong>.</span><span style="line-height: 1.5;">— Se establece en el objeto que tenemos en la función (persona1), razón por la cual <strong>persona1.diHola()</strong> utiliza el nombre "Alicia" y <strong>persona2.diHola()</strong> utiliza el nombre "Sebastian". </span><span style="line-height: 1.5;">Pero si realizamos la llamada de otra manera, se establecerá de forma diferente: Llamándola desde una variable —<strong>funcionSaludar()</strong> — Este </span><span style="line-height: 1.5;">establece </span><span style="line-height: 1.5;">al objeto global (windows, en los navegadores). </span><span style="line-height: 1.5;">Desde este objeto (probablemente) no tiene a la propiedad <strong>primerNombre</strong>, por lo que finalizará con "Hola, Soy indefinido". </span><span style="line-height: 1.5;">(El cual se incluye en modo </span>de código suelto, sino sería diferente [un error] en modo estricto, pero para evitar confusiones ahora no vamos a entra en detalles.) O podemos establecerla de forma explicita utilizando Function.call (ó Function.apply), como se muestra al final del ejemplo <strong>funcionSaludar.call(persona1)</strong>.</div> - -<div> </div> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-133"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta más información al respecto en <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/JavaScript/Reference/Global Objects/Function/call">Function.call</a> y <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></span></span></div> - -<h4 id="Inheritance" name="Inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-134"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Herencia</span></span></h4> - -<div>La herencia es una manera de crear una clase como una versión especializada de una o más clases (JavaScript sólo permite herencia simple). La clase especializada comúnmente se llama hija o secundaria, y la otra clase se le llama padre o primaria. En JavaScript la herencia se logra mediante la asignación de una instancia de la clase primaria a la clase secundaria, y luego se hace la especialización. </div> - -<div> </div> - -<div class="note"> -<p>JavaScript no detecta la clase hija prototype.constructor (vea las propiedades del <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>) así que debemos decírselo de forma manual.</p> -</div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-140" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la clase <strong><code>Estudiante</code></strong> como una clase secundaria de <strong><code>Persona</code></strong> .</span></span><span style="line-height: 1.5;"> </span><span class="goog-gtc-unit" id="goog-gtc-unit-141" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Luego redefinimos el método <strong>diHola<code>()</code></strong> y agregamos el método <strong>diAdios<code>()</code></strong>.</span></span></p> - -<pre class="brush: js">// Definimos el constructor Persona -function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -// Agregamos un par de métodos a Persona.prototype -Persona.prototype.caminar = function() { - alert("Estoy caminando!"); -}; -Persona.prototype.diHola = function(){ - alert("Hola, Soy" + this.primerNombre); -}; - -// Definimos el constructor Estudiante -function Estudiante(primerNombre, asignatura) { - // Llamamos al constructor padre, nos aseguramos (utilizando Function#call) que "this" se - // ha establecido correctamente durante la llamada - Persona.call(this, primerNombre); - - //Inicializamos las propiedades específicas de Estudiante - this.asignatura = asignatura; -}; - -// Creamos el objeto Estudiante.prototype que hereda desde Persona.prototype -// Nota: Un error común es utilizar "new Persona()" para crear Estudiante.prototype -// Esto es incorrecto por varias razones, y no menos importante que no le estamos pasando nada -// a Persona desde el argumento "primerNombre". El lugar correcto para llamar a Persona -// es arriba, donde llamamos a Estudiante. -Estudiante.prototype = Object.create(Persona.prototype); // Vea las siguientes notas - -// Establecer la propiedad "constructor" para referencias a Estudiante -Estudiante.prototype.constructor = Estudiante; - -// Reemplazar el método "diHola" -Estudiante.prototype.diHola = function(){ - alert("Hola, Soy " + this.primerNombre + ". Estoy estudiando " + this.asignatura + "."); -}; - -// Agregamos el método "diAdios" -Estudiante.prototype.diAdios = function() { - alert("¡ Adios !"); -}; - -// Ejemplos de uso -var estudiante1 = new Estudiante("Carolina", "Física Aplicada"); -estudiante1.diHola(); // muestra "Hola, Soy Carolina. Estoy estudianto Física Aplicada." -estudiante1.caminar(); // muestra "Estoy caminando!" -estudiante1.diAdios(); // muestra "¡ Adios !" - -// Comprobamos que las instancias funcionan correctamente -alert(estudiante1 instanceof Persona); // devuelve true -alert(estudiante1 instanceof Estudiante); // devuelve true -</pre> - -<p>Con respecto a la línea <strong>Estudiante.prototype = Object.create(Persona.prototype); </strong>: Sobre los motores antiguos de JavaScript sin <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a>, se puede utilizar un "polyfill" (aka "shim", vea el enlace del artículo), o se puede utilizar una función que obtiene el mismo resultado, como por ejemplo:</p> - -<pre class="brush: js">function crearObjeto(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// uso: -Estudiante.prototype = crearObjeto(Persona.prototype); </pre> - -<div class="note"> -<p>Ver <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a> para conocer más sobre lo que hace, y complementar con los motores antiguos.</p> -</div> - -<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Encapsulación</span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-172"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo anterior, <code>Estudiante</code> no tiene que saber cómo se aplica el método <code>caminar()</code> de la clase <code>Persona</code>, pero, sin embargo, puede utilizar ese método. La clase <code>Estudiante</code> no tiene que definir explícitamente ese método, a menos que queramos cambiarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-173"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se denomina <strong>la encapsulación</strong>, por medio de la cual cada clase hereda los métodos de su elemento primario y sólo tiene que definir las cosas que desea cambiar.</span></span></p> - -<h4 id="Abstraction" name="Abstraction"><span class="goog-gtc-unit" id="goog-gtc-unit-174"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-175"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un mecanismo que permite modelar la parte actual del problema de trabajo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-176"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se puede lograr por herencia (especialización) o por composición.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-177"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript logra la especialización por herencia y por composición al permitir que las instancias de clases sean los valores de los atributos de otros objetos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-178"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La clase Function de JavaScript hereda de la clase de Object (esto demuestra la especialización del modelo) y la propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composición)</span></span></p> - -<p> </p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-179"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">v</span></span>ar foo = function() {}; -alert( 'foo es una Función: ' + (foo instanceof Function) ); -alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) ); -</pre> - -<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Polimorfismo</span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-183"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Al igual que todos los métodos y propiedades están definidas dentro de la propiedad prototipo, las diferentes clases pueden definir métodos con el mismo nombre. Los métodos están en el ámbito de la clase en que están definidos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-184"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto sólo es verdadero cuando las dos clases no tienen una relación primario-secundario (cuando uno no hereda del otro en una cadena de herencia).</span></span></p> - -<h2 id="Notes" name="Notes"><span class="goog-gtc-unit" id="goog-gtc-unit-185"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Notas</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-186"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las técnicas presentadas en este artículo para aplicar la programación orientada a objetos no son las únicas que se pueden utilizar en JavaScript, que es muy flexible en términos de cómo se puede realizar la programación orientada a objetos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-187"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Del mismo modo, las técnicas presentadas aquí no utilizan ninguna modificación o hack de lenguaje ni imitan las implementaciones de teorías de objetos de otros lenguajes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-188"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hay otras técnicas que hacen incluso programación orientado a objetos más avanzada en JavaScript, pero que están fuera del alcance de este artículo introductorio.</span></span></p> - -<h2 id="References" name="References"><span class="goog-gtc-unit" id="goog-gtc-unit-189"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Referencias</span></span></h2> - -<ol> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-190-goog-gtc-unit-191-goog-gtc-unit-192"><span class="goog-gtc-from-human goog-gtc-translatable">Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-193-goog-gtc-unit-194-goog-gtc-unit-195"><span class="goog-gtc-from-human goog-gtc-translatable">Wikipedia. "Programación orientada a objetos", <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" rel="freelink">http://es.wikipedia.org/wiki/Program...tada_a_objetos</a>.</span></span></li> - <li><a href="http://davidwalsh.name/javascript-objects">Descripción general de POO en JavaScript</a> por Kyle Simpson.</li> -</ol> diff --git a/files/es/conflicting/mdn/contribute/getting_started/index.html b/files/es/conflicting/mdn/contribute/getting_started/index.html deleted file mode 100644 index 71bd6b4624..0000000000 --- a/files/es/conflicting/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Cosas para hacer en MDN -slug: conflicting/MDN/Contribute/Getting_started -translation_of: MDN/Contribute/Getting_started -translation_of_original: MDN/Contribute/Tasks -original_slug: MDN/Contribute/Tareas ---- -<div>{{MDNSidebar}}</div><p>¿Estás buscando formas de ayudar a mejorar MDN? Hay muchas formas de ayudar: desde corregir errores tipográficos hasta escribir nuevo contenido, o incluso ayudar a desarrollar la plataforma <a href="/en-US/docs/Project:MDN/Kuma">Kuma</a> en la que se construye el sitio web. La <a href="/en-US/docs/Project:MDN/Contributing">guía para el contribuyente de MDN</a> cubre todas las formas en las que puedes ayudar y cómo hacerlo. Más abajo, encontrarás listas de tareas más específicas que faltan hacer.</p> -<p>Hay un montón de cosas que puedes hacer para ayudar en MDN. Tenemos una guía para las tareas que puedes llevar a cabo como parte de nuestro artículo <a href="/en-US/docs/MDN/Getting_started#Possible_task_types">Comenzando en MDN</a>. Entre las posibles formas de ayudar se encuentran:</p> -<ul> - <li><a href="/es/docs/MDN/Contribute/revisi%C3%B3n_art%C3%ADtulos">Revisar el contenido para mayor precisión</a> (técnica o editorial)</li> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Actualizar etiquetas en las páginas</a> para mejorar los resultados de búsqueda y generación de la lista de contenidos</li> - <li><a href="/en-US/docs/MDN/User_guide/Writing#Adding_a_new_page">Escribir nuevos artículos</a></li> - <li><a href="/en-US/docs/MDN/User_guide/Writing#Editing_an_existing_page">Actualizar articulos existentes</a> con nueva información, o corregir errores en la información existente</li> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">Convertir los ejemplos existentes para usarlos en el sistema de muestra en vivo</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">Agregar nuevos códigos de muestra en vivo para que la gente pueda ver el código en acción</a></li> - <li><a href="/en-US/docs/Project:MDN/Kuma/Contributing">Ayudar a desarrollar la plataforma Kuma en la que se ejecuta MDN </a></li> -</ul> -<p>Para más ideas acerca de cosas en las que puedes colaborar con MDN, vé nuestras <a href="/en-US/docs/MDN/Contribute/Howto">Guías de cómo hacerlo</a>. Puedes encontrar listas de páginas categorizadasque necesitan de tu ayuda en nuestra sección de <a href="/en-US/docs/MDN/Doc_status/Overview">Estado de la Documentación</a>.</p> diff --git a/files/es/conflicting/mdn/tools/index.html b/files/es/conflicting/mdn/tools/index.html deleted file mode 100644 index 98db2920e8..0000000000 --- a/files/es/conflicting/mdn/tools/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: MDN user guide -slug: conflicting/MDN/Tools -tags: - - Documentation - - Landing - - MDN - - NeedsTranslation - - TopicStub -translation_of: MDN/Tools -translation_of_original: MDN/User_guide -original_slug: MDN/User_guide ---- -<div>{{MDNSidebar}}</div><p>The Mozilla Developer Network site is an advanced system for finding, reading, and contributing to documentation and sample code for Web developers (as well as for Firefox and Firefox OS developers). The MDN user guide provides articles detailing how to use MDN to find the documentation you need, and, if you wish, how to help make the material better, more expansive, and more complete.</p> -<p>{{SubpagesWithSummaries}}</p> diff --git a/files/es/conflicting/mdn/yari/index.html b/files/es/conflicting/mdn/yari/index.html deleted file mode 100644 index 9517a30f30..0000000000 --- a/files/es/conflicting/mdn/yari/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Primeros pasos -slug: conflicting/MDN/Yari -translation_of: MDN/Kuma -translation_of_original: MDN/Kuma/Contributing/Getting_started -original_slug: MDN/Kuma/Contributing/Getting_started ---- -<div>{{MDNSidebar}}</div><p>Por favor, consulte los <a href="https://github.com/mozilla/kuma/blob/master/docs/installation-vagrant.rst" title="https://github.com/mozilla/kuma/blob/master/docs/installation-vagrant.rst">Documentos de Instalacion de Kuma en GitHub</a> hasta que podamos redactar una mejor guía de "Primeros pasos".</p> -<h2 id="Solución_de_problemas">Solución de problemas</h2> -<p>A veces las cosas se ponen mal y la configuración de la prueba Kuma en el equipo deja de funcionar correctamente. Aquí ofrecemos algunas sugerencias sobre qué hacer para tratar de conseguir que funcione de nuevo.</p> -<h3 id="Reprovision">Reprovision</h3> -<p>La primera cosa a intentar es destruir y reconstruir su máquina virtual Kuma. Abra una terminal, pasar a la <code>kuma</code> directorio del proyecto y ejecute el siguiente comando:</p> -<pre>vagrant destroy && vagrant provision</pre> -<p>Si desea mantener la base de datos que ya tiene, asegúrese de hacer una copia de seguridad y restaurar después de reaprovisionamiento.</p> -<h3 id="Vuelva_a_descargar_la_imagen_de_la_VM">Vuelva a descargar la imagen de la VM</h3> -<p>Si le preocupa que la imagen de VM es mala o no está actualizada, puede forzar el vagrant para descargar una nueva mediante el comando siguiente::</p> -<pre>vagrant box remove kuma-ubuntu</pre> diff --git a/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html b/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html deleted file mode 100644 index 71308c4e77..0000000000 --- a/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Contribuir a Kuma -slug: conflicting/MDN/Yari_13d770b50d5ab9ce747962b2552e0eef -translation_of: MDN/Kuma -translation_of_original: MDN/Kuma/Contributing -original_slug: MDN/Kuma/Contributing ---- -<div>{{MDNSidebar}}</div><p>Si desea contribuir al proyecto de Kuma para ayudarnos a construir una gran plataforma wiki y para hacer que el sitio de Mozilla Developer Network aun mejor, los documentos aquí deberían ayudarle a unirse en el esfuerzo.</p> -<div class="row topicpage-table"> - <div class="section"> - <h2 class="Documentation" id="Documentation" name="Documentation">Contribuir a Kuma</h2> - <dl> - <dt> - <a href="/en-US/docs/Project:MDN/Kuma/Contributing/Getting_started" title="/en-US/docs/Project:About">Cómo empezar con Kuma</a></dt> - <dd> - Cómo bifurcar Kuma desde Github y configurar el entorno de desarrollo.</dd> - <dt> - <a href="/en-US/docs/Project:MDN/Kuma/Contributing/Help_wanted" title="/en-US/docs/Project:MDN/Kuma/Contributing/Help_wanted">Se busca ayuda</a></dt> - <dd> - Tenemos un montón de fallos registrados en Kuma. Este artículo se enumeran algunos, nos encantaría ver colaboradores que ayudan con.</dd> - </dl> - <h2 class="Tools" id="Tools" name="Tools">Herramientas y tareas</h2> - <dl> - <dt> - <a href="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&remaction=run&namedcmd=mdn-backlog&sharer_id=416309&list_id=6206936" title="https://bugzilla.mozilla.org/buglist.cgi?cmdtype=dorem&remaction=run&namedcmd=mdn-backlog&sharer_id=416309&list_id=6206936">Errores</a></dt> - <dd> - Una lista de errores Kuma; siéntase libre de mirar a través de ellos y encontrar algo que te gustaría para arreglar. Este enlace le exige que inicie sesión en Bugzilla.</dd> - <dt> - <a href="https://bugzilla.mozilla.org/form.mdn" title="https://bugzilla.mozilla.org/enter_bug.cgi?product=Mozilla%20Developer%20Network">Notificar un error</a></dt> - <dd> - Si usted ha tenido un problema con Kuma, o tiene alguna idea para una manera de hacerlo mejor; usted puede presentar un error</dd> - <dt> - <a href="/en-US/docs/Project:MDN/Kuma/Changelog" title="/en-US/docs/Project:MDN/Kuma/Changelog">Cambio de registro</a></dt> - <dd> - Una lista de reciente de modificaciones impulsadas; este es un gran lugar para buscar, para ver lo que ha pasado recientemente.</dd> - </dl> - <p> </p> - </div> - <div class="section"> - <h2 class="Community" id="Community" name="Community">MDN comunidad de desarrolladores</h2> - <p><span class="hidden"> </span>Si desea hablar con nuestros desarrolladores, o incluso mejor, para ayudar a construir y mejorar la plataforma de Kuma, !únase a nuestra comunidad de desarrolladores!</p> - <ul> - <li>Únase a la conversación en el IRC: <a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">#mdndev</a></li> - <li>Lea el foro de desarrolladores MDN: {{DiscussionList("dev-mdn", "mozilla.dev.mdn")}}</li> - </ul> - <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> - </div> -</div> -<p><span class="alllinks"><a href="/en-US/docs/tag/MDC_Project" title="MDN project pages">Ver todos ...</a></span></p> -<div id="cke_pastebin" style="position: absolute; top: 672px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> - </div> diff --git a/files/es/conflicting/mozilla/add-ons/index.html b/files/es/conflicting/mozilla/add-ons/index.html deleted file mode 100644 index 43ecbe517c..0000000000 --- a/files/es/conflicting/mozilla/add-ons/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Construyendo una extensión -slug: conflicting/Mozilla/Add-ons -translation_of: Mozilla/Add-ons -translation_of_original: Building_an_Extension -original_slug: Building_an_Extension ---- -<h2 id="Introducción">Introducción</h2> - -<p>Este tutorial te guiará a través de los pasos requeridos para desarrollar una <a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">extensión</a> muy básica - una que agrega un panel con una barra de estado con el texto "Hola, Mundo!" al navegador de Firefox.</p> - -<div class="note"><strong>Nota:</strong> La extensión creada por este tutorial no funcionará en versiones de Firefox que no contengan una barra de estado estática (esto es, Firefox 4 en adelante). Puedes encontrar un tutorial más actualizado en <a href="/en-US/docs/XUL_School/The_Essentials_of_an_Extension" title="The Essentials of an Extension">The Essentials of an Extension</a> de la <a href="/en-US/docs/XUL_School" title="XUL School Tutorial">XUL School</a>.</div> - -<p>Desde Firefox 4 (y otras aplicaciones basadas en Mozilla 2) existen dos tipos de extensiones:</p> - -<ul> - <li>Las extensiones tradicionales, clásicas o XUL son más poderosas, pero más complicadas de construir y requieren un reinicio para su instalación.</li> - <li>Extensiones sin reinicio, o <a href="/en-US/docs/Extensions/Bootstrapped_extensions" title="/en-US/docs/Extensions/Bootstrapped_extensions">bootstrapped extensions</a> que no requieren un reinicio para instalarse pero son más limitadas que las extensiones tradicionales. El <a class="link-https" href="https://addons.mozilla.org/en-US/developers/tools/builder">Add-on SDK y el Add-on Builder</a> pueden ser usados para construir fácilmente extensiones sin reinicio.</li> -</ul> - -<p>Este artículo explica como construir una extensión tradicional para Firefox. Para información sobre bootstrapped extensions o sin reinicio, mira <a href="/en-US/docs/Extensions/Bootstrapped_extensions" title="/en-US/docs/Extensions/Bootstrapped_extensions">Bootstrapped extensions</a>.</p> - -<p>Para un tutorial sobre construcción de extensiones para Thunderbird, mira <a href="/en-US/docs/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="/en-US/docs/Building_a_Thunderbird_extension">Construyendo una extensión para Thunderbird.</a></p> - -<h2 id="Inicio_Rápido">Inicio Rápido</h2> - -<p>Una extensión <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hola Mundo</a> similar que puedes generar con el Extension Wizard es explicado línea por línea en <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">otro tutorial desde la MozillaZine Knowledge Base (Base de Conocimiento MozillaZine)</a>.</p> - -<h2 id="Configurando_un_Ambiente_de_Desarrollo">Configurando un Ambiente de Desarrollo</h2> - -<p>Las extensiones son empaquetadas y distribuidas en archivos ZIP o <a href="/en-US/docs/Bundles" title="/en-US/docs/Bundles">Bundles</a>, con la extensión de archivos <code>XPI</code>.</p> - -<p><code>Un ejemplo del contenido dentro de un archivo XPI típico </code>:</p> - -<pre class="eval">my_extension.xpi: //<code>Igual a una carpeta llamada</code> <strong style="font-weight: bold;">my_extension</strong><strong>/</strong> - <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install Manifests">/install.rdf </a> //<code>Información general sobre tu extensión</code> - /<a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">chrome.manifest</a> //Registra tu contenido con el motor <a href="/en-US/docs/Chrome_Registration" title="https://developer.mozilla.org/en-US/docs/chrome_registration">Chrome</a> - /chrome/ - /chrome/content/ //Contenido de tu extensión, por ejemplo, archivos XUL and JavaScript - /<a href="/en-US/docs/Window_icons" title="/en-US/docs/Window_icons">chrome/icons/default/*</a> //Iconos por defecto de tu extensión - /chrome/locale/* //Construyendo una Extensión# <a href="/en-US/docs/Building_an_Extension#Localization" title="https://developer.mozilla.org/en-US/docs/Building_an_Extension#Localization">Localización</a> - <a href="#Defaults_Files">/defaults/preferences/*.js</a> //Construyendo una Extensión# <a href="/en-US/docs/Building_an_Extension#Defaults_Files" title="https://developer.mozilla.org/en-US/docs/Building_an_Extension#Defaults_Files">Archivos por defecto</a> - /plugins/* -<a href="#XPCOM_Components"> /components/*</a> - <a href="#Application_Command_Line">/components/cmdline.js</a></pre> - -<p>Desearemos construir una estructura de archivos similar a la anterior para nuestro tutorial, así que comencemos creando una carpeta para tu extensión en algún lugar de tu disco duro (por ejemplo, <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/</code>). Dentro de la nueva carpeta para la extensión, crea otra carpeta llamada <code>chrome</code>, y dentro de la carpeta <code>chrome</code>, crea una carpeta llamada <code>content</code>.</p> - -<p>Dentro del directorio <strong>raíz</strong> de la carpeta de tu extensión, crea dos archivos de texto nuevos, llamados <code>chrome.manifest<span style="font-family: verdana,tahoma,sans-serif;"> </span></code>e <code>install.rdf</code>. En el directorio <strong>chrome/content</strong>, crea un nuevo archivo de texto vacío llamado <code>sample.xul</code>.</p> - -<p>Deberías concluir con esta estructura de directorio:</p> - -<ul> - <li>install.rdf</li> - <li>chrome.manifest</li> - <li>chrome\ - <ul> - <li>content\ - <ul> - <li>sample.xul</li> - </ul> - </li> - </ul> - </li> -</ul> - -<p><span class="comment"><pre> #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf </pre></span> Por favor lee la información adicional sobre configuración de un ambiente de desarrollo en el artículo <a href="/en-US/docs/Setting_up_extension_development_environment" title="/en-US/docs/Setting_up_extension_development_environment">Configurando un ambiente de desarrollo</a>.</p> - -<p>{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named <code>icon.png</code>, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an <code>iconURL</code> entry.") }}</p> - -<h2 id="Crear_el_Manifiesto_de_Instalación">Crear el Manifiesto de Instalación</h2> - -<p>Abre el archivo llamado <code><a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">install.rdf</a></code> que creaste en el tope de la jerarquía de carpetas de tu extensión y agrega dentro lo siguiente:</p> - -<pre class="brush: xml language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>RDF</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/02/22-rdf-syntax-ns#<span class="punctuation token">"</span></span> - <span class="attr-name token"><span class="namespace token">xmlns:</span>em</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/2004/em-rdf#<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>Description</span> <span class="attr-name token">about</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>urn:mozilla:install-manifest<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>id</span><span class="punctuation token">></span></span>sample@example.net<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>id</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>version</span><span class="punctuation token">></span></span>1.0<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>version</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>type</span><span class="punctuation token">></span></span>2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>type</span><span class="punctuation token">></span></span> - - <span class="comment token"><!-- Target Application this extension can install into, - with minimum and maximum supported versions. --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>targetApplication</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>Description</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>id</span><span class="punctuation token">></span></span>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>id</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>minVersion</span><span class="punctuation token">></span></span>1.5<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>minVersion</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>maxVersion</span><span class="punctuation token">></span></span>4.0.*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>maxVersion</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>Description</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>targetApplication</span><span class="punctuation token">></span></span> - - <span class="comment token"><!-- Front End MetaData --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>name</span><span class="punctuation token">></span></span>sample<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>name</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>description</span><span class="punctuation token">></span></span>A test extension<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>description</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>creator</span><span class="punctuation token">></span></span>Your Name Here<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>creator</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">em:</span>homepageURL</span><span class="punctuation token">></span></span>http://www.example.com/<span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">em:</span>homepageURL</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>Description</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>RDF</span><span class="punctuation token">></span></span></code></pre> - -<ul> - <li><code><strong><span class="link-mailto linkification-ext">sample@example.net</span></strong></code> – el ID de la extensión. Este es un valor con el que identificas tu extensión en formato de direccón de correo electrónico (nota que no debería ser <em>tu</em> email). Hazlo único. También podrías usar un GUID. NOTA: Este parámetro DEBE estar en formato de dirección de correo electrónico, aunque NO tiene que ser una dirección válida. (<code><span class="link-mailto">example@example.example</span></code>)</li> - <li>Especifica <code><em:type>2</em:type></code> – el 2 declara que está instalando una extensión. Si fueras a instalar un tema (theme) sería 4 (mira <a href="/en-US/docs/Install_Manifests#type" title="/en-US/docs/Install_Manifests#type">Install Manifests#type</a> para otros tipos de códigos).</li> - <li><code><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></code> – ID de la aplicación Firefox.</li> - <li><code><strong>1.5</strong></code> – el número exacto de la versión más antigua de Firefox para la cual estableces que esta extensión funcionará. Nunca uses un * en minVersion; es muy seguro que no hagas lo que esperas.</li> - <li><code><strong>4.0.*</strong></code> – la versión máxima de Firefox para la cual dices que esta extensión funcionará. En este caso, "4.0.*" indica que la extensión funciona con Firefox 4.0 y cualquier entrega 4.0.x subsecuente. Este número necesita ser menor o igual a la <a class="external" href="http://wiki.mozilla.org/Releases" title="http://wiki.mozilla.org/Releases">versión anunciada de Firefox</a>. Por defecto, Firefox 10 y posteriores no fuerzan una restricción contra <code>maxVersion</code> (aunque comenzando en Firefox 11, valores muy antiguos de <code>maxVersion</code> son todavía forzados). Puedes forzan a la aplicación a hacerlo usando <code><em:strictCompatibility></code>.</li> -</ul> - -<div class="note"><strong>Nota:</strong> si obtienes un mensajes que <code>install.rdf</code> está mal formado, es útil cargarlo en Firefox usando el comando Archivo->Abrir Archivo que reportará los errores XML para ti.</div> - -<p>Las extensiones diseñadas para funcionar con Firefox 2.0.0.x como la última deben configurar la máxima versión a "2.0.0.*". Las extensiones diseñadas para funcionar con Firefox 1.5.0.x como la última deben configurar la máxima versión a "1.5.0.*"</p> - -<p>Mira <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">Manifiestos de Instalación</a> para una lista completa de las propiedades requeridas y opcionales.</p> - -<p>Guarda el archivo.</p> - -<h2 id="Extendiendo_el_Navegador_con_XUL">Extendiendo el Navegador con XUL</h2> - -<p>La interfaz de usuario de Firefox está escrita en XUL y JavaScript. <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a> es una grática XML que provee widgets de interfaz como botones, menús, barras de herramientas, árboles, etc. Las acciones de los usuarios están ligadas a funcionalidad usando JavaScript.</p> - -<p>Para extender el navegador, modificamos partes de la interfaz de usuario del navegador, agregando o modificando widgets. Agreramos widgets insertando nuevos elementos XUL DOM en la ventana del navegador y los modificamos usando script y vinchulando manejadores de eventos.</p> - -<p>El navegador es implementado en un archivo XUL llamado <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> contiene <code>content/browser/browser.xul</code>). En browser.xul podemos encontrar la barra de estado, que se parece a algo como esto:</p> - -<pre class="eval language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>toolbarpalette</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>BrowserToolbarPalette<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - ... <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>toolbarbutton</span><span class="punctuation token">></span></span>s ... -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>toolbarpalette</span><span class="punctuation token">></span></span></code></pre> - -<p><code><statusbar id="status-bar"></code> es un "punto de fusión" para un XUL Overlay.</p> - -<h3 id="XUL_Overlays">XUL Overlays</h3> - -<p><a href="/en-US/docs/XUL_Overlays" title="/en-US/docs/XUL_Overlays">Los XUL Overlays</a> son una forma de enlazar en tiempo de ejecución otros widgets de la interfaz de usuario a un documento XUL. Un XUL Overlay es un archivo .xul que especifíca fragmentos XUL a insertar en puntos de fusión específicos dentro de un documento "maestro". Estos fragmentos pueden especificar la inserción, eliminación o modificación de widgets.</p> - -<p><strong>Ejemplo de un Documento XUL Overlay</strong></p> - -<pre class="eval language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0"?></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>overlay</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sample<span class="punctuation token">"</span></span> - <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>toolbarpalette</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>BrowserToolbarPalette<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>toolbarbutton</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>my-button<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Hello, World<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>toolbarpalette</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>overlay</span><span class="punctuation token">></span></span></code></pre> - -<p>La <code><</code>toolbarpalette<code>></code> llamada<code><strong> </strong></code><strong>BrowserToolbarPalette </strong> especifica el "punto de fusión" que queremos enlazar dentro de la ventana del navegador.</p> - -<p>El hijo <code><</code>toolbarbutton<code>></code> es un nuevo widget que queremos insertar dentro de un punto de fusión.</p> - -<p>Copia el código de ejemplo anterior y guardalo en tu archivo llamado <code><strong>sample.xul</strong></code> dentro de la carpeta <code>chrome/content</code> que has creado.</p> - -<p>Para más información sobre fusionar widgets y modificar la interfaz de usuario usando Overlays, mira debajo.</p> - -<h2 id="Chrome_URIs">Chrome URIs</h2> - -<p>Los archivos XUL son parte de "<a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">Paquetes Chrome</a>" - envoltorios de componentes de interfaz de usuario que son cargados a través de <code>URIs chrome://</code>. En lugar de cargar el navegador desde el disco usando una URI <code>file://</code> (ya que la ubicación de Firefox en el sistema puede cambiar de plataforma a plataforma y de sistema a sistema), los desarrolladores de Mozilla encontraron una solución para crear URIs para contenido XUL que la aplicación instalada conoce.</p> - -<p>La ventana del navegador es: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code>. Prueba tipiando esta URL en la barra de navegación de Firefox!</p> - -<p>Las Chrome URIs constan de varios componentes:</p> - -<ul> - <li>Primero, el <strong>esquema URI</strong> (<code>chrome</code>) que le comunica a la librería de red de Firefox que es una Chrome URI. Indica que el contenido de la URI debería ser tratada como un (<code>chrome</code>). A diferencia de (<code>chrome</code>), (<code>http</code>) le comunica a Firefox que debe tratar la URI como una página web.</li> - <li>Segundo, un nombre de paquete (en el anterior ejemplo, <code><strong>browser</strong></code>) que identifica el envoltorio de componentes de interfaz de usuario. Este debería ser lo más único posible para tu aplicación, para evitar colisiones entre extensiones.</li> - <li>Tercero, el tipo de dato que es requerido. Existen tres tipos: <code>content</code> (XUL, JavaScript, XBL bindings, etc. que forman la estructura y el comportamiento de una aplicación de interfaz de usuario), <code>locale</code> (DTD, archivos .properties, etc que contienen strings para la <a href="/en-US/docs/Localization" title="/en-US/docs/Localization">localización</a> de la interfaz de usuario) , y <code>skin</code> (CSS e imágenes que forman el <a href="/en-US/docs/Themes" title="/en-US/docs/Themes">tema</a> de la interfaz de usuario).</li> - <li>Finalmente, la dirección del archivo a cargar.</li> -</ul> - -<p>Así que, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> carga el archivo <code>bar.png</code> desde la sección <code>skin</code> del tema <code>foo</code>.</p> - -<p>Cuando cargas contenido usando una Chrome URI, Firefox usa el Chrome Registry (Registro de Chrome) para traducir estas URIs en los archivos fuente actuales dentro del disco (o en paquetes JAR).</p> - -<h2 id="Crea_un_Manifiesto_Chrome">Crea un Manifiesto Chrome</h2> - -<p>Para más información de Manifiestos Chrome y las propiedades que soportan, mira Referencia <a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">de Manifiestos Chrome</a>.</p> - -<p>Abre el archivo denominado <strong>chrome.manifest</strong> que has creado junto al directorio <code>chrome</code> en la raíz de la jerarquía de carpetas de tu extensión.</p> - -<p>Agrega este código:</p> - -<pre class="eval">content sample chrome/content/ -</pre> - -<p>(<strong>No te olvides de la barra, "<code>/</code>"!</strong> Sin ella, el paquete no será registrado.)</p> - -<p>Esto especifica:</p> - -<ol> - <li>tipo de material dentro del paquete chrome.</li> - <li>nombre del paquete chrome (asegúrate de usar todos caracteres en minúscula para ele nombre del paquete ("sample") ya que Firefox/Thunderbird no soporta doesn't support caracteres mixtos en la versión 2 y anteriores - {{ Bug("132183") }})</li> - <li>ubicación de los archivos de paquetes chrome.</li> -</ol> - -<p><br> - Entonces, esta línea establece que para un paquete chrome <strong>sample</strong>, podremos encontrar sus archivos de contenido (<strong>content)</strong> en la ubicación <code>chrome/content</code> que es una dirección relativa a la ubicación del manifiesto <code>chrome.manifest</code>.</p> - -<p>Tenga en cuenta que los archivos de contenido (content), localización (locale), y apariencia (skin) deben mantenerse dentro de carpetas llamadas content, locale, and skin dentro del subdirectorio <code>chrome</code>.</p> - -<p>Guarda el archivo. Cuando ejecutes Firefox con tu extensión (más adelante en este tutorial), esto va a registrar el paquete chrome.</p> - -<h2 id="Registrar_un_Overlay">Registrar un Overlay</h2> - -<p>Necesitas que Firefox fusione tu overlay (capa) con la ventana del navegador siempre que se despliegue una. Así que agrega esta linea al archivo <code>chrome.manifest</code>:</p> - -<pre class="eval">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>Esto le dice a Firefox que fusione <code>sample.xul</code> en <code>browser.xul</code> cuando se cargue <code>browser.xul</code>.</p> - -<h2 id="Prueba">Prueba</h2> - -<p>Primero, necesitamos comunicarle a Firefox sobre nuestra extensión. Durante la fase de desarrollo para versiones de Firefox 2.0 y posteriores, puedes señalar a Firefox hacia la carpeta donde estés desarrollando la extensión, y la cargará cada vez que reinicies Firefox.</p> - -<ol> - <li>Ubica tu <a class="external" href="http://kb.mozillazine.org/Profile_folder" title="http://kb.mozillazine.org/Profile_folder">carpeta de perfil</a> y dentro el perfil con el que quieres trabajar (ej., <code>Firefox/Profiles/<profile_id>.default/</code>).</li> - <li>Abra la carpeta <code>extensions/</code>, creandola de ser necesario.</li> - <li>Crea un nuevo archivo de texto y coloca dentro la dirección completa de tu carpeta de desarrollo (ej., <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/)</code>. Los usuarios de Windows deberían conservar la dirección de la barra, y <em>todos</em> deberían acordarse de <strong>incluir</strong> una barar de cierre y <strong>eliminar</strong> cualquier espacio.</li> - <li>Guarda el archivo con la id de tu extensión como su nombre (ej., <code><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></code>). Sin extensión de archivo.</li> -</ol> - -<p>Ahora deberías estar listo opara probar tu extensión!</p> - -<p>Ejecuta Firefox. Firefox detectará el texto de enlace hacia el directorio de tu extensión e instalará la Extensión. Cuando aparezca la ventana del navegador deberías ver el texto "Hello, World!" en la parte derecha del panel con la barra de estado.</p> - -<p>Ahora puedes volver y hacer cambios al archivo .xul, cierra y reinicia Firefox, y deberían aparecer.</p> - -<h2 id="Empaquetamiento">Empaquetamiento</h2> - -<p>Ahora que tu extensión funciona, puedes <a href="/en-US/docs/Extension_Packaging" title="/en-US/docs/Extension_Packaging">empaquetarla</a> para su despliegue e instalación.</p> - -<p>Comprime (zip) los <strong>contenidos (contents)</strong> de la carpeta de tu extensión (no la carpeta de extensión misma), y renombra el archivo zip para que tenga la extensión .xpi. En Windows XP, puedes hacer esto fácilmente seleccionando todos los archivos y subcarpetas en la carpeta de tu extensión, haciendo click derecho y seleccionando "Enviar a -> Carpeta comprimida (zip)". Se creará un archivo .zip para ti. Sólo renombralo y ya terminaste!</p> - -<p>En Mac OS X, puedes hacer click derecho en los <strong>contenidos (contents)</strong> de la carpeta de la extensión y elegir "Crear archivo de..." para hacer un archivo zip. Sin embargo, ya que Mac OS X agrega archivos ocultos a las carpetas para rastrear los metadatos de los archivos, deberías usar la Terminal, eliminar los archivos ocultos (cuyos nombre comienzan con un punto), y luego usar el comando zip en la linea de comandos para crear el archivo zip.</p> - -<p>En Linux, podrías también usar la herramienta zip de linea de comandos.</p> - -<p>Si tienes el 'Extension Builder' (Constructor de Extensiones) instalado, puede compliar el archivo .xpi para ti (Tools -> Extension Developer -> Extension Builder). Simplemente navega al directorio donde está tu extensión (install.rdf, etc.), y presiona el botón Build Extension. Esta extensión tiene una gran cantidad de herramientas para facilitar el desarrollo.</p> - -<p>Ahora carga el archivo .xpi en tu servidor, asegúrate de que es servido como una <code>application/x-xpinstall</code>. Puedes obtener un enlace al mismo y permitir que las personas lo descarguen e instalen. Con el propósito de simplemente testearnuestro archivo .xpi, podemos sólo arrastrarlo en la ventana de extensiones, en Herramientas -> Extensiones para Firefox 1.5.0.x, o Herramientas -> Complementos para versiones posteriores.</p> - -<h3 id="Instalando_desde_una_página_web">Instalando desde una página web</h3> - -<p>Existen muchas formas de instalar extensiones desde páginas web, incluyendo enlace directo hacia archivos XPI y usando el objeto InstallTrigger. Los autores web y de extensiones son alentados a usar el <a href="/en-US/docs/Installing_Extensions_and_Themes_From_Web_Pages" title="/en-US/docs/Installing_Extensions_and_Themes_From_Web_Pages">método InstallTrigger</a> para instalar XPIs, ya que provee la mejor experiencia a los usuarios.</p> - -<h3 id="Usando_addons.mozilla.org">Usando addons.mozilla.org</h3> - -<p>Los Complementos para Firefox es un sitio de distribución donde puedes alojar tu extensión gratuitamente. tu extensión será alojada en un espejo (mirror) de la red de Mozilla para garantizar tu descarga a pesar de que pueda ser muy popular. El sitio de Mozilla también provee una sencilla instalación para los usuarios, y automáticamente hará que tus versiones más nuevas estén disponibles cuando las cargues. Además, los Complementos para Firefox permiten a los usuarios comentar y proveer una retroalimentación en tu extensión. Es altamente recomendado que uses los Complementos de Firefox para distribuir tus extensiones!</p> - -<p>Visita <a class="linkification-ext external" href="http://addons.mozilla.org/developers/" title="Linkification: http://addons.mozilla.org/developers/">http://addons.mozilla.org/developers/</a> para crearte una cuenta y comenzar a distribuir tus extensiones!</p> - -<p><em>Nota:</em> Tu Extensión será enviada más rápidamente y descargada más veces si tienes una buena descripción y algunas capturas de pantalla de la extensión en acción.</p> - -<h3 id="Instalando_Extensiones_Usando_una_Instalador_Separado">Instalando Extensiones Usando una Instalador Separado</h3> - -<p>Es posible instalar extensiones en un directorio especial y será instalado la próxima vez que la aplicación comience. La extensión estará disponible para cualquier perfil. Mira <a class="internal" href="/en-US/docs/Installing_extensions" title="/en-US/docs/Installing extensions">lnstalando extensiones</a> para más información.</p> - -<p>En Windows, la información sobre extensiones puede ser agregada al registro, y las extensiones serán recogidas automáticamente la proxima vez que la aplicación comience. Esto permite a los instaladores de aplicaciones agregar fácilmente ganchos de integración como extensiones. Mira <a href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" title="/en-US/docs/Adding_Extensions_using_the_Windows_Registry">Agregando Extensiones usando el Registro de Windows</a> para más información.</p> - -<h2 id="Más_sobre_XUL_Overlays">Más sobre XUL Overlays</h2> - -<p>Además de agregar widgets de interfaz de usuario al punto de fusión, puedes usar los fragmentos XUL dentro de los Overlays para controlar la posición de los widgets insertados:</p> - -<pre class="eval language-html"><code class="language-html"><toolbarbutton position="1" ... /> - -<toolbarbutton insertbefore="other-id" ... /> - -<toolbarbutton insertafter="other-id" ... /></code></pre> - -<h2 id="Creando_Nuevos_Componentes_de_Interfaz_de_Usuario">Creando Nuevos Componentes de Interfaz de Usuario</h2> - -<p>Puedes crear tus propias ventanas y cuadros de diálogo como archivos .xul separados, brindando funcionalidad a través de la implementación de acciones de usuarios en archivos .js, usando métodos DOM para manipular widgets de interfaz de usuario. Puedes usar reglas de estilos en archivos .css para enlazar imágenes, establecer colores, etc.</p> - -<p>Mira la documentación <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a> con más recursos para los desarrolladores XUL.</p> - -<h2 id="Archivos_por_Defecto">Archivos por Defecto</h2> - -<p>Los archivos por defecto que usas para sembrar un perfil de usuario deberían ser ubicados en <code>defaults/</code> debajo de la raíz de la jerarquía de carpetas de tu extensión. Los archivos .js de preferencias por defecto deberían ser almacenados en <code>defaults/preferences/</code> - si los ubicas aquí serán cargados automáticamente por el sistema de preferencias de Firefox cuando arranque, y así podrás accederlos usando la <a href="/en-US/docs/Preferences_API" title="/en-US/docs/Preferences_API">API de Preferencias</a>.</p> - -<p>Un archivo de preferencia por defecto de ejemplo:</p> - -<pre class="eval">pref("extensions.sample.username", "Joe"); //a string pref -pref("extensions.sample.sort", 2); //an int pref -pref("extensions.sample.showAdvanced", true); //a boolean pref -</pre> - -<h2 id="Componentes_XPCOM">Componentes XPCOM</h2> - -<p>Firefox soporta componentes <a href="/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> en las extensiones. Puedes crear tus propios componentes fácilmente en JavaScript o en C++ (usando <a href="/en-US/docs/Gecko_SDK" title="/en-US/docs/Gecko_SDK">Gecko SDK</a>).</p> - -<p>Ubica todos tus archivos .js o .dll en <code>el directorio components/</code> - son registrados automáticamente la primera vez que se ejecute Firefox luego de que tu extensión es instalada.</p> - -<p>Para más información mira <a href="/en-US/docs/How_to_Build_an_XPCOM_Component_in_Javascript" title="/en-US/docs/How_to_Build_an_XPCOM_Component_in_Javascript">Cómo Construir un Componente XPCOM en Javascript</a>, <a href="/en-US/docs/How_to_build_a_binary_XPCOM_component_using_Visual_Studio" title="/en-US/docs/How_to_build_a_binary_XPCOM_component_using_Visual_Studio">Cómo construir un componente XPCOM binario usando Visual Studio,</a> y el libro <a href="/en-US/docs/Creating_XPCOM_Components" title="/en-US/docs/Creating_XPCOM_Components">Creando Componentes XPCOM</a>.</p> - -<h3 id="Línea_de_Comandos_de_la_Aplicación">Línea de Comandos de la Aplicación</h3> - -<p>Uno de los posibles usos de los componentes XPCOM personalizados, es agregar un manejador de líneas de ocmandos para Firefox o Thunderbird. Puedes usar esta técnica para ejecutar tu extensión como una aplicación:</p> - -<pre class="eval"> 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> Mira <a href="/en-US/docs/Chrome/Command_Line" title="/en-US/docs/Chrome/Command_Line">Chrome: Línea de Comandos</a> y un <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">foro de discusión</a> para más detalles.</p> - -<h2 id="Localización">Localización</h2> - -<p>Para soportar más de un lenguaje, deberías separar los strings (cadenas de caracteres) de tu contenido usando <a href="/en-US/docs/XUL_Tutorial/Localization" title="/en-US/docs/XUL_Tutorial/Localization">entidades</a> y <a href="/en-US/docs/XUL_Tutorial/Property_Files" title="/en-US/docs/XUL_Tutorial/Property_Files">envoltorios de strings</a>. Es mucho más fácil hacer esto mientras estás desarrollando tu extensión, en lugar de volver y hacerlo después!</p> - -<p>La información de localización es almacenada en el directorio locale para tu extensión. Por ejemplo, para agregar un locale a tu extensión de ejemplo, crea dos directorios anidados "locale/en-US" en chrome (donde está ubicado el directorio "content") y agrega la siguiente línea al archivo chrome.manifest:</p> - -<pre class="eval">locale sample en-US chrome/locale/en-US/ -</pre> - -<p>Para crear valores de atributo localizables en XUL, puedes ubicar los valores en un archivo<code> .dtd</code> (sample.dtd para tu extensión de prueba). Este archivo debería ser ubicado en el directorio locale y se parece a esto:</p> - -<pre class="eval"><!ENTITY my-panel.label "Hello, World"> -</pre> - -<p>Luego incluyélo el comienzo de tu documento XUL (pero debajo de"<?xml version"1.0"?>"), como se ve a continuación:</p> - -<pre class="eval language-html"><code class="language-html"><span class="prolog token"><?xml version="1.0"?></span> -<span class="doctype token"><!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd"></span> -...</code></pre> - -<p>donde <code><strong>window</strong></code> es el valor <code><a href="/en-US/docs/DOM/Node.localName" title="/en-US/docs/DOM/element.localName">localName (nombre local)</a></code> del elemento raíz del documento XUL, y el valor de la propiedad <code>SYSTEM</code> es la URI chrome hacia el archivo de entidad.</p> - -<p>Para nuestra extensión de ejemplo, reemplaza <code><strong>window</strong></code> con <code><strong>overlay</strong></code> (elemento raíz), <code><strong>packagename</strong></code> con <code><strong>sample</strong></code>, y <code><strong>filename.dtd</strong></code> con <code><strong>sample.dtd</strong></code>.</p> - -<p>Para usar las entidades, modifica tu XUL para que se vea así:</p> - -<pre class="eval"><statusbarpanel id="my-panel" label="&my-panel.label;" /> -</pre> - -<p>El Registro de Chrome se asegurará que el archivo de entidad es cargado desde el envoltorio de localización que se corresponda con la configuración regional seleccionada.</p> - -<p>Para los strings que usas en script, crea un archivo .propertie, un archivo de texto que tiene un string en cada lína en este formato:</p> - -<pre class="eval">clave=valor -</pre> - -<p>y luego usa {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} o el tag {{ XULElem("stringbundle") }} para cargar valores en el script.</p> - -<h2 id="Entendiendo_el_Navegador">Entendiendo el Navegador</h2> - -<p>Usa el <a href="/en-US/docs/DOM_Inspector" title="/en-US/docs/DOM_Inspector">Inspector DOM</a> para inspeccionar la ventana del navegador o cualquier otra ventana XUL que quieras extender.</p> - -<p><strong>Nota:</strong> <strong>El Inspector DOM </strong>no es parte de la instalación <strong>Estándar</strong> de Firefox. Desde Firefox 3 Beta 4, el Inspector DOM está disponible desde <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">Los Complementos de Firefox</a> como una extensión por separado. Para versiones anteriores, debes reinstalar con la dirección de instalación Personalizada y seleccionar <strong>Inspector DOM</strong> (o <strong>Developer Tools</strong> en Firefox 1.5) si no hay un ítem "Inspector DOM" en el menú de herramientas de tu navegador.</p> - -<p>Usa el botón apunta-y-clickea sobre un nodo en el tope izquierdo de la barra de herramientas del Inspector DOM para clickear sobre un nodo en la ventana XUL, para seleccionar visualmente. Cuando haces esto, el inspector salta en el árbol de jerarquía DOM hacia el nodo que ha sido clickeado.</p> - -<p>Usa el panel lateral derecho del Inspector DOM para descubrir puntos de fusión con ids que puedas usar para insertar tus elementos desde overlays. Si no puedes encontrar un elemento con un id que puedas fusionar, podrías necesitar enlazar un script en tu overlay e insertar tus elementos cuando se dispare el evento <code>load</code> en la ventana XUL maestra.</p> - -<h2 id="Depurando_Extensiones">Depurando Extensiones</h2> - -<p><strong>Herramientas Analíticas para Depuración</strong></p> - -<ul> - <li>El <a href="/en-US/docs/DOM_Inspector" title="/en-US/docs/DOM_Inspector">inspector DOM</a> - inspecciona atributos, estructura DOM, reglas de estilo CSS que están activas (ej., averigua porqué tus reglas de estilo no parecen estar funcionando para un elemento - una herramienta invaluable!)</li> - <li><a href="/en-US/docs/Venkman" title="/en-US/docs/Venkman">Venkman</a> - configura puntos de quiebre (breakpoints) en JavaScript e inspecciona pilas de llamadas.</li> - <li><code>Components.stack.caller></code> en JavaScript - accede a la pila de llamada de una función</li> -</ul> - -<p><strong>Depuración con printf </strong></p> - -<ul> - <li>Usa <code><a href="/en-US/docs/DOM/window.dump" title="/en-US/docs/DOM/window.dump">dump</a>("string")</code> (mira el enlace para más detalles; esto requiere alguna configuración para trabajar correctamente)</li> - <li>Usa <code><a href="/en-US/docs/Components.utils.reportError" title="/en-US/docs/Components.utils.reportError">Components.utils.reportError()</a></code> o {{ interface("nsIConsoleService") }} para hacer log en la consola de JavaScript</li> -</ul> - -<p><strong>Depuración avanzada</strong></p> - -<ul> - <li>Ejectua un build de Firefox para depuración y configura puntos de quiebre en Firefox mismo, o tus componentes en C++. Para el desarollador experimentado, esta es frecuentemente la forma más rápida de diagnosticar un problema. Mira <a href="/en-US/docs/Developer_Guide/Build_Instructions" title="/en-US/docs/Build_Documentation">Build Documentation</a> y <a href="/en-US/docs/Developer_Guide" title="/en-US/docs/Developing_Mozilla">Developing Mozilla</a> para más información.</li> - <li>Mira <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="/en-US/docs/Debugging_a_XULRunner_Application">Depurando una Aplicación XULRunner</a> para más consejos útiles.</li> -</ul> - -<h2 id="Más_Información">Más Información</h2> - -<ul> - <li><a href="/en-US/docs/Extension_Frequently_Asked_Questions" title="/en-US/docs/Extension_Frequently_Asked_Questions">FAQ (Preguntas Frecuentes) sobre Extensiones</a></li> - <li><a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">Extensiones</a></li> -</ul> diff --git a/files/es/conflicting/tools/about_colon_debugging/index.html b/files/es/conflicting/tools/about_colon_debugging/index.html deleted file mode 100644 index 2fb0a75710..0000000000 --- a/files/es/conflicting/tools/about_colon_debugging/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Debugging over a network -slug: conflicting/Tools/about:debugging -translation_of: Tools/about:debugging#Connecting_over_the_Network -translation_of_original: Tools/Remote_Debugging/Debugging_over_a_network -original_slug: Tools/Remote_Debugging/Debugging_over_a_network ---- -<blockquote> -<h3 id="draft">{{draft}}</h3> -</blockquote> - -<p>Coming soon...</p> diff --git a/files/es/conflicting/tools/performance/index.html b/files/es/conflicting/tools/performance/index.html deleted file mode 100644 index 66dc76c6a1..0000000000 --- a/files/es/conflicting/tools/performance/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: JavaScript Profiler -slug: conflicting/Tools/Performance -translation_of: Tools/Performance -translation_of_original: Tools/Profiler -original_slug: Tools/Profiler ---- -<div> - Utilice la herramienta de perfiles para encontrar los cuellos de botella en el código JavaScript. El Profiler muestras periódicamente la pila actual de llamadas JavaScript y compila información sobre las muestras. </div> -<div> - </div> -<div> - Puede iniciar el Analizador seleccionando "Profiler" en el menú "Web Developer". Usted encontrará en el menú "Web Developer" en el menú "Herramientas" en Linux y OS X, y directamente bajo el menú "Firefox" en Windows. </div> -<div> - </div> -<div> - La <a href="/en-US/docs/Tools/DevTools_Window">Caja de herramientas</a> se abrirá, con el Profiler seleccionado.</div> -<div> - </div> -<h2 id="Los_perfiladores_de_muestreo"><a name="sampling-profilers">Los perfiladores de muestreo</a></h2> -<p>El perfilador de JavaScript es un generador de perfiles de muestreo. Esto significa que las muestras periódicamente el estado del motor de JavaScript, y registra la pila para el código que se ejecuta en el momento de tomar la muestra. Estadísticamente, el número de muestras tomadas en la que estábamos ejecutando una función particular, corresponde a la cantidad de tiempo que el navegador está gastando ejecutarlo, para que pueda identificar los cuellos de botella en el código.<br> - <br> - <a name="profiling-example">Por ejemplo, considere un programa como este:</a></p> -<pre class="brush: js">function doSomething() { - var x = getTheValue(); - x = x + 1; // -> sample A - logTheValue(x); -} - -function getTheValue() { - return 5; -} - -function logTheValue(x) { - console.log(x); // -> sample B, sample C -} - -doSomething();</pre> -<p>Supongamos que ejecutar este programa con el perfilador activo, y en el tiempo que se tarda en ejecutar, el perfilador toma de tres muestras, como se indica en los comentarios en línea de arriba. </p> -<p>Todos están tomadas desde el interior <code>doSomething()</code>, pero los otros dos se encuentran dentro de la función <code>logTheValue()</code> llamado por <code>doSomething()</code>. Así que el perfil consistiría en tres seguimientos de pila, como este:</p> -<pre>Sample A: doSomething() -Sample B: doSomething() > logTheValue() -Sample C: doSomething() > logTheValue()</pre> -<p>Esto, obviamente, no hay suficientes datos para que nos digan nada, pero con mucho más muestras de que podría ser capaz de concluir que <code>logTheValue()</code> es el cuello de botella en nuestro código.</p> -<h2 id="Creación_de_un_perfil">Creación de un perfil</h2> -<p>Haga clic en el botón del cronómetro (<em>stopwatch</em><span style="font-size: 14px; line-height: 1.5;">) en el Profiler para iniciar muestras de grabación. Cuando Profiler está grabando, se resaltará el botón del cronómetro. Haga clic en él de nuevo para detener la grabación y guardar el nuevo perfil:</span></p> -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> -<p>Una vez que haya hecho clic en "Stop", el nuevo perfil se abrirá de forma automática:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<p>Este panel está dividido en dos partes:</p> -<ul> - <li>El lado izquierdo muestra todos los perfiles que ha capturado y le permite cargar cada uno. Justo por encima de esto hay dos botones: el botón del cronómetro (<em>stopwatch</em>) le permite grabar un nuevo perfil, mientras que el botón Importar (<em>Import</em>) ... permite importar los datos guardados anteriormente. Cuando se selecciona el perfil, puede guardar sus datos como un archivo JSON haciendo clic en el botón Guardar (Save). </li> - <li>El lado derecho muestra el perfil actualmente cargado.</li> -</ul> -<h2 id="Analyzing_a_profile">Analyzing a profile</h2> -<p>The profile is split into two parts:</p> -<ul> - <li>the <a href="#profile-timeline" title="#profile-timeline">profile timeline</a></li> - <li>the <a href="#profile-details" title="#profile-details">profile details</a></li> -</ul> -<h3 id="Profile_timeline"><a name="profile-timeline">Profile timeline</a></h3> -<p>The profile timeline occupies the top part of the profile display:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.</p> -<p>Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> and <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p> -<p>You can examine a specific range within the profile by clicking and dragging inside the timeline:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<p>A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:</p> -<p><br> - <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<h3 id="Profile_details"><a name="profile-details">Profile details</a></h3> -<p>The profile details occupy the bottom part of the profile display:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> -<p><strong>Running time</strong> shows the total number of samples in which this function appeared<a href="#footnote-1"><sup>1</sup></a>, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the <code>detectImage()</code> function.</p> -<p><strong>Self</strong> shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, <code>doSomething()</code> would have a <strong>Running time</strong> of 3 (samples A, B, and C), but a <strong>Self</strong> value of 1 (sample A).</p> -<p>The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.</p> -<h3 id="Expanding_the_call_tree">Expanding the call tree</h3> -<p>In a given row, if there are any samples taken while we were in a function called by this function (that is, if <strong>Running Time</strong> is greater than <strong>Self</strong> for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.</p> -<p>In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, the fully-expanded call tree would look like this:</p> -<table class="standard-table"> - <tbody> - <tr> - <td style="text-align: center;"><strong>Running Time</strong></td> - <td style="text-align: center;"><strong>Self</strong></td> - <td style="text-align: center;"> </td> - </tr> - <tr> - <td style="text-align: center;">3 100%</td> - <td style="text-align: center;">1</td> - <td style="text-align: center;">doSomething()</td> - </tr> - <tr> - <td style="text-align: center;">2 67%</td> - <td style="text-align: center;">2</td> - <td style="text-align: center;">logTheValue()</td> - </tr> - </tbody> -</table> -<p>To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the <code>detectImage()</code> function. But all of them were taken in functions called by <code>detectImage()</code> (the <strong>Self</strong> cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<p>This tells us that 6 samples were taken when we were actually executing <code>detectAtScale(), </code>12 when we were executing <code>getRect()</code> and so on.</p> -<h2 id="Footnotes">Footnotes</h2> -<ol> - <li><a name="footnote-1">If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like <code>forEach</code> will appear multiple times in the call tree.</a></li> -</ol> -<p> </p> diff --git a/files/es/conflicting/web/api/canvas_api/tutorial/index.html b/files/es/conflicting/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index 31bdbfc942..0000000000 --- a/files/es/conflicting/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Dibujando gráficos con canvas -slug: conflicting/Web/API/Canvas_API/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas -original_slug: Web/HTML/Canvas/Drawing_graphics_with_canvas ---- -<div class="note"> - <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> -</div> -<h2 id="Introduction" name="Introduction">Introduction</h2> -<p>Firefox 1.5, incluye un nuevo elemento HTML para gráficos programables. <canvas> está basado en la especificación de canvas WHATWG, la que a su vez está basada en el <canvas> de Apple, implementado en Safari. Puede ser usado para la renderización de gráficos, elementos de Interfaz de usuarios, y otros gráficos personalizados en el cliente.</p> -<p>La etiqueta <canvas> crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de renderizado. Nos enfocaremos en la representación del contexto 2D Para gráficos 3D, podrías usar la <a href="/es-ES/docs/WebGL">representación del contexto WebGL</a></p> -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">El contexto de representación 2D</h2> -<h3 id="A_Simple_Example" name="A_Simple_Example">Un ejemplo sencillo</h3> -<p>Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> -<p>La funcion draw obtiene el elemento canvas, entonces obtiene el contexto 2D. El objeto ctx puede entonces actualmente ser renderizado para el canvas El ejemplo simplemente llena dos rectangulos, configurando fillStyle a dos diferentes colores utilizando las especificaciones de color de CSS y llamando a fillRect El segundo FillStyle usa rgba() para especificar un valor alpha junto con el color.</p> -<p>El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo. Para representar formas más complejas, se usan trayectorias. </p> -<h3 id="Using_Paths" name="Using_Paths">Usando trayectorias</h3> -<p>La funcion Path inicia un nuevo trazo, y move to, line to, arc to, arc, y metodos similares son usados para agregar segmentos al trazo. La trayectoria puede ser cerrada usando closePath Una vez la trayectoria es creada, puedes usar fill o stroke para representar la trayectoria en el canvas.</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> - ctx.lineTo(30, 30); - ctx.fill(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> -<p>Llamando fill() o stroke() causa que el trazo sea usado. Para ser llenado o juntado otra vez, el trazo debe ser recreado.</p> -<h3 id="Graphics_State" name="Graphics_State">Estado de gráficos</h3> -<p>Los atributos del contexto como fillStyle, strokeStyle, lineWidth, y lineJoin son parte de actual estado de graficos El contexto provee dos metodos, save() y restore(), que pueden ser usados para mover el actual estado y desde estado stack.</p> -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">Un ejemplo más complicado</h3> -<p>Hay aquì un ejemplo más complicado, que usa rutas,estado y tambien introduce la actual matriz de transformación. Los metodos de contexto translate(), scale(), y rotate() todos transforman la matriz actual. Todos los puntos renderizados son primero transformados por esta matriz.</p> -<pre class="brush: js">function drawBowtie(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); -} - -function dot(ctx) { - ctx.save(); - ctx.fillStyle = "yellow"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); -} - -function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // note that all other translates are relative to this one - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // unnecessary - drawBowtie(ctx, "red"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - drawBowtie(ctx, "green"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - drawBowtie(ctx, "blue"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - drawBowtie(ctx, "yellow"); - dot(ctx); - ctx.restore(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> -<p>Esto define dos métodos, lazo y punto, que son llamados 4 veces. Antes de cada llamada, los metodos translate() y rotate() son utilizados para la matriz de transformación actual, que a su vez posicionara el punto y el lazo. el punto presenta un pequeño cuadrado negro centrado a (0,0). Ese punto se mueve alrededor de la matriz de transformación. El lazo presenta un simple ruta de lazo usando el estillo de llenado pasado.</p> -<p>Como las operaciones de la matriz son acumulativas, save() y restore() son utilizados para cada conjunto de llamadas para restaurar el estado de canvas original. Una cosa a tener en cuenta es que la rotación siempre se produce en torno al origen actual, por lo que a traducir () rotate () translate () secuencia producirá resultados diferentes a traducir () translate () serie de llamadas rotate ().</p> -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibilidad con Apple <canvas></h2> -<p>En su mayor parte, <canvas> es compatible con Apple y otras implementaciones. Hay, sin embargo, algunas cuestiones a tener en cuenta, que se describen aquí.</p> -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Etiqueta </canvas> requerida </h3> -<p>En la aplicación de Apple Safari, <canvas> es un elemento ejecutado de la misma manera <img> es, sino que no tiene una etiqueta de cierre. Sin embargo, para <canvas> tener uso generalizado en la web, se debe proporcionar alguna facilidad para contenido de reserva. Por lo tanto, la implementación de Mozilla tiene una etiqueta de cierre requerida.</p> -<p>Si no se necesita contenido de reserva, un simple <canvas id="foo" ...> </ canvas> será totalmente compatible con Safari y Mozilla - Safari simplemente ignorar la etiqueta de cierre.</p> -<p>Si se desea contenido de reserva, algunos trucos CSS se deben emplear para enmascarar el contenido de reserva desde Safari (las cuales deben emitir sólo la tela), y también para enmascarar los propios trucos CSS de IE (que debería hacer que el contenido de reserva).</p> -<pre>canvas { - font-size: 0.00001px !ie; -}</pre> -<h2 id="Additional_Features" name="Additional_Features">Caracteristicas adicionales </h2> -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Renderizando el contenido we dentro de un Canvas.</h3> -<div class="note"> - Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome. No esta permitido en paginas HTML normales. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Porqué leer</a>.</div> -<p>El canvas de Mozilla se extendio con el metodo drawWindow(). Este metodo dibuja una instantanea de los contenidos de una ventana DOM dentro del canvas. Por ejemplo:</p> -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> -<p>atraería el contenido de la ventana actual, en el rectángulo (0,0,100,200) en píxeles con respecto a la parte superior izquierda de la ventana, sobre un fondo blanco, en el lienzo. Mediante la especificación de "rgba (255,255,255,0)" como el color, el contenido no se dibujan con un fondo transparente (lo que sería más lenta).</p> -<p>Normalmente es una mala idea usar un fondo distinto de blanco "rgb(255, 255, 255)" o transparente, esto es lo que hacen todos los navegadores, y muchos sitios web esperan que esas partes transparentes de su interfaz serán puestas en fondo blanco.</p> -<p>Con este metodo, es posible ocupar un IFRAME oculto con contenido arbitrario (por ejemplo, texto HTML con estilo CSS, o SVG) y dibujarlo dentro de un canvas. sera escalado, rotado y sucesivamente de acuerdo a la transformación actual.</p> -<p>Extensión de previsualización pestaña de Ted Mielczarek utiliza esta técnica en cromo para proporcionar imágenes en miniatura de las páginas web, y la fuente está disponible para su referencia. </p> -<div class="note"> - Nota: usar canvas.drawWindow() mientras manejamos un evento de carga de documento, no trabaja En Firefox 3.5 o superior, puedes hacer esto en un manejador para el evento MozAfterPaint para dibujr satisfactoriamente un contenido HTML dentro de un canvas al cargar la pagina </div> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> - <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/en-US/docs/tag/canvas">And more...</a></li> -</ul> diff --git a/files/es/conflicting/web/api/crypto/getrandomvalues/index.html b/files/es/conflicting/web/api/crypto/getrandomvalues/index.html deleted file mode 100644 index 7764d268c4..0000000000 --- a/files/es/conflicting/web/api/crypto/getrandomvalues/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: RandomSource -slug: conflicting/Web/API/Crypto/getRandomValues -tags: - - API - - Interface - - NeedsTranslation - - RandomSource - - Reference - - TopicStub - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource -original_slug: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> represents a source of cryptographically secure random numbers. It is available via the {{domxref("Crypto")}} object of the global object: {{domxref("Window.crypto")}} on Web pages, {{domxref("WorkerGlobalScope.crypto")}} in workers.</p> - -<p><code>RandomSource</code> is a not an interface and no object of this type can be created.</p> - -<h2 id="Properties">Properties</h2> - -<p><em><code>RandomSource</code> neither defines nor inherits any property.</em></p> - -<dl> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.</dd> -</dl> - -<h2 id="Specification" name="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('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Initial definition</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>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.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>23</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li> - <li>{{jsxref("Math.random")}}, a non-cryptographic source of random numbers.</li> -</ul> diff --git a/files/es/conflicting/web/api/document_object_model/index.html b/files/es/conflicting/web/api/document_object_model/index.html deleted file mode 100644 index f318f65508..0000000000 --- a/files/es/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Acerca del Modelo de Objetos del Documento -slug: conflicting/Web/API/Document_Object_Model -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM/About_the_Document_Object_Model -original_slug: Acerca_del_Modelo_de_Objetos_del_Documento ---- -<h3 id=".C2.BFQu.C3.A9_es_DOM.3F" name=".C2.BFQu.C3.A9_es_DOM.3F">¿Qué es DOM?</h3> - -<p>El <strong>Modelo de Objetos del Documento</strong> (DOM) es un <a class="external" href="http://es.wikipedia.org/wiki/API">API</a> para documentos <a href="/es/HTML" title="es/HTML">HTML</a> y <a href="/es/XML" title="es/XML">XML</a>. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido y visualización. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.</p> - -<p>Todas las propiedades, métodos, y eventos disponibles por el desarrollador web para manipular y crear páginas web están organizados en objetos (por ejemplo: el objeto 'document' representa al documento en sí mismo, el objeto 'table' representa los elementos HTML para tablas, etcétera). En los navegadores modernos estos objetos son manejables con lenguajes de scripts.</p> - -<p>Es muy común usar DOM conjuntamente con <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a>. Así es, el código es escrito en JavaScript, pero éste usa DOM para tener acceso a la página Web y sus elementos. Sin embargo, DOM fue diseñado para ser independiente de cualquier lenguaje de programación concreto, poniendo la representación estructural del documento disponible en un solo API consistente. Aunque en este sitio nos centremos en JavaScript, las implementaciones de DOM pueden hacerse para <a class="external" href="http://www.w3.org/DOM/Bindings">cualquier lenguaje</a>.</p> - -<p>El <a class="external" href="http://www.w3c.es/">Consorcio de World Wide Web</a> establece un <a class="external" href="http://www.w3.org/DOM/">estándar para el DOM</a>, llamado W3C DOM. Actualmente los navegadores más importantes lo soportan correctamente, ésto permite crear poderosas aplicaciones multi-navegador.</p> - -<h3 id=".C2.BFPor_qu.C3.A9_es_importante_el_soporte_que_Mozilla_da_al_DOM.3F" name=".C2.BFPor_qu.C3.A9_es_importante_el_soporte_que_Mozilla_da_al_DOM.3F">¿Por qué es importante el soporte que Mozilla da al DOM?</h3> - -<p><em>HTML dinámico</em> (<a href="/es/DHTML" title="es/DHTML">DHTML</a>) es un término usado por muchos para describir la combinación de HTML, hojas de estilo y scripts que permite que los documentos sean dinámicos. El grupo de trabajo W3C DOM trabaja duro para asegurarse de que sus soluciones son interoperables e independientes del lenguaje (ver también la <a class="external" href="http://www.w3.org/DOM/faq.html">DOM FAQ</a>). Cuando Mozilla reclama el título de "Plataforma para aplicaciones web", el soporte a DOM es uno de los rasgos más solicitados, y es necesario si Mozilla quiere ser una alternativa real a otros navegadores.</p> - -<p>El hecho incluso más importante es que la interfaz de usuario de Firefox (también la de Mozilla Suite y Thunderbird) está construida usando XUL - un lenguaje XML para interfaces de usuario. Así Mozilla usa el DOM para manipular sus propias interfaces de usuario. <small>(<a href="/en/Dynamically_modifying_XUL-based_user_interface">en inglés</a>)</small></p> diff --git a/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html deleted file mode 100644 index 9e3c7c7c46..0000000000 --- a/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: DOM developer guide -slug: conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM -original_slug: Web/Guide/DOM ---- -<p>{{draft}}</p> -<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p> -<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> -<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> -<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> -<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> -<h2 id="More_about_the_DOM">More about the DOM</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html b/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html deleted file mode 100644 index ae8c384e87..0000000000 --- a/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: DOM -slug: conflicting/Web/API/Document_Object_Model_7d961b8030c6099ee907f4f4b5fe6b3d -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM -original_slug: DOM ---- -<div class="callout-box"> - <strong><a href="/es/Acerca_del_Modelo_de_Objetos_del_Documento" title="es/Acerca_del_Modelo_de_Objetos_del_Documento">Acerca del Modelo de Objetos del Documento</a></strong><br> - Un par de cosas básicas sobre DOM y Mozilla.</div> -<div> - <p>El <strong>Modelo de Objetos del Documento (DOM)</strong> es un API para documentos <a href="/es/HTML" title="es/HTML">HTML</a> y <a href="/es/XML" title="es/XML">XML</a>. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.</p> -</div> -<p><strong>DOM</strong> es un estándar del <a class="external" href="http://www.w3.org/DOM/">W3C</a></p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"><a href="/Special:Tags?tag=DOM&language=es" title="Special:Tags?tag=DOM&language=es">Documentación</a></h4> - <dl> - <dt> - <a class="external" href="http://www.maestrosdelweb.com/editorial/dom/">Introducción a la manipulación DOM</a></dt> - <dd> - <small>Introducción a los métodos de manipulación DOM mediante Javascript</small></dd> - </dl> - <dl> - <dt> - <a class="external" href="http://html.conclase.net/w3c/dom1-es/cover.html">Especificación del DOM Nivel 1</a></dt> - <dd> - <small>El objetivo de la especificación DOM es definir una interfaz programable para HTML y XML.</small></dd> - </dl> - <dl> - <dt> - <a href="/es/Uso_del_núcleo_del_nivel_1_del_DOM" title="es/Uso_del_núcleo_del_nivel_1_del_DOM">Uso del núcleo del nivel 1 del DOM</a></dt> - <dd> - <small>Es un potente modelo de objetos para modificar el árbol de contenidos de los documentos.</small></dd> - </dl> - <dl> - <dt> - <a href="/es/Los_niveles_del_DOM" title="es/Los_niveles_del_DOM">Los niveles del DOM</a></dt> - <dd> - <small>Una descripción de los niveles del DOM y el soporte ofrecido por Mozilla a cada uno de ellos.</small></dd> - </dl> - <dl> - <dt> - <a href="/es/DHTML_Demostraciones_del_uso_de_DOM//Style" title="es/DHTML_Demostraciones_del_uso_de_DOM//Style">DHTML Demostraciones del uso de DOM/Style</a></dt> - <dd> - <small>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 mas.</small></dd> - </dl> - <dl> - <dt> - <a class="external" href="http://www.mozilla.org/docs/dom/">The Document Object Model in Mozilla.org <small>(en)</small></a></dt> - <dd> - <small>Una versión más antigua acerca de DOM se encuentra en mozilla.org.</small></dd> - </dl> - <p><span class="comment">enlaces a ninguna parte: ; <a href="/es/DOM_y_JavaScript">DOM y JavaScript</a>: <small>"¿Qué está haciendo que? ¿En un script embebido en mi página web, el cual usa DOM y Javascript?"</small> ; <a href="/es/Modificando_dinámicamente_las_interfaces_de_usuario_en_XUL">Modificando dinámicamente las interfaces de usuario en XUL</a>: <small>Fundamentos de manipulación con XUL UI y métodos DOM.</small> ; <a href="/es/Espacios_en_blanco_en_el_DOM">Espacios en blanco en el DOM</a>: <small>Una solución al problema de ignorar los espacios en blanco cuando se interactúa con el DOM.</small> ; <a href="/es/Tablas_HTML_con_JavaScript_e_interfaces_DOM">Tablas HTML con JavaScript e interfaces DOM</a>: <small>Una descripción de algunos métodos de gran alcance, fundamentales para el nivel 1 en el uso de DOM y de cómo utilizarlo con Javascript .</small> fin de enlaces a ninguna parte</span> <span class="alllinks"><a href="/Special:Tags?tag=DOM&language=es" title="Special:Tags?tag=DOM&language=es">Ver todos</a></span></p> - </td> - <td> - <h4 id="Comunidad" name="Comunidad">Comunidad</h4> - <ul> - <li>En la comunidad Mozilla... en inglés</li> - </ul> - <p>{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</p> - <p><span class="alllinks"><a href="/es/DOM/Comunidad" title="es/DOM/Comunidad">Ver todos</a></span></p> - <h4 id="Herramientas" name="Herramientas">Herramientas</h4> - <ul> - <li><a href="/es/DOM_Inspector" title="es/DOM_Inspector">DOM Inspector</a></li> - <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> - <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark, extension para Firefox</a></li> - </ul> - <p><span class="alllinks"><a href="/Special:Tags?tag=DOM:Herramientas&language=es" title="Special:Tags?tag=DOM:Herramientas&language=es">Ver todos</a></span></p> - <h4 id="Temas_relacionados" name="Temas_relacionados">Temas relacionados</h4> - <dl> - <dd> - • <a href="/es/AJAX" title="es/AJAX">AJAX</a> • <a href="/es/CSS" title="es/CSS">CSS</a> • <a href="/es/XML" title="es/XML">XML</a> • <a href="/es/JavaScript" title="es/JavaScript">JavaScript</a> •</dd> - </dl> - <p> </p> - </td> - </tr> - </tbody> -</table> -<p><span class="comment">fin de tabla</span></p> -<p><span class="comment">Categorías</span></p> -<p><span class="comment">Interwiki Language Links</span></p> -<p>{{ languages( { "de": "de/DOM", "en": "en/DOM", "fr": "fr/DOM", "hu": "hu/DOM", "ja": "ja/DOM", "ko": "ko/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM", "zh-cn": "cn/DOM", "zh-tw": "zh_tw/DOM" } ) }} </p> diff --git a/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html b/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html deleted file mode 100644 index bd1c67c343..0000000000 --- a/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Prefacio -slug: conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14 -tags: - - DOM - - Todas_las_Categorías -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface -original_slug: Referencia_DOM_de_Gecko/Prefacio ---- -<p>« <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a></p> - -<h3 id="Sobre_Esta_referencia" name="Sobre_Esta_referencia">Sobre Esta referencia</h3> - -<p>Esta parte describe el manual en sí: para quién está hecho, cómo se presenta la información y cómo se pueden usar los ejemplos de la referencia en el desarrollo propio de DOM.</p> - -<p>Notará que este documento está en curso de desarrollo y aún no es un listado completo de todos los métodos y propiedades DOM que funcionan para GECKO. Sin embargo, cada parte individual de esta guía (por ejemplo, <a href="es/DOM/document">La referencia al documento de DOM</a>) sí está completa para el/los objeto/s que describe. Cuando nuevas informaciones de referencia para los numerosos miembros de esta enorme API estén disponibles, se irán integrando dentro de este documento.</p> - -<h3 id="A_qui.C3.A9n_va_dirigida_esta_gu.C3.ADa.3F" name="A_qui.C3.A9n_va_dirigida_esta_gu.C3.ADa.3F">A quién va dirigida esta guía?</h3> - -<p>El lector de <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a> puede ser un desarrollador Web o un usuario sabio que tiene alguna idea de como se construyen las páginas Web. Esta referencia evita tener presunciones sobre el nivel de conocimiento del lector con el DOM, el <a href="es/XML">XML</a>, los servidores o estándares Web y también con <a href="es/JavaScript">JavaScript</a>, el lenguaje en el cual el DOM se hace accesible al lector. Al contrario, sí, supone de la familiaridad con <a href="es/HTML">HTML</a>, el marcado, la estructura básica de las páginas Web, los navegadores y con las hojas de estilo.</p> - -<p>El material introductorio presentado aquí, con sus varios ejemplos y sus explicaciones de alto nivel, debe ser valorado tanto para los desarrolladores inexpertos como para los experimentados, no es sólo una guía de desarrollo Web para <em>principiantes</em>. En general y sin embargo se le puede considerar como un manual evolutivo del API.</p> - -<h3 id="Qu.C3.A9_es_Gecko.3F" name="Qu.C3.A9_es_Gecko.3F">Qué es Gecko?</h3> - -<p>Mozilla, Firefox, Netscape 6+, y otros navegadores basados en Mozilla tienen la idéntica codificación DOM. Es así porque utilizan la misma tecnología. <span class="comment">naturalmente, es sólo aplicable a los productos basados en la misma versión de Gecko, pero es complicado explicarlo - (naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain)</span></p> - -<p>Gecko, la parte del programa en estos navegadores que se ocupa del análisis del HTML, de la disposición de las páginas, del modelo de objeto del documento, e incluso de la representación de la interfaz de aplicación entera, es una rápida, máquina cumplidora de los estándares de presentación que ejecutar los estándares del modelo de objeto del navegador (por ejemplo, <a href="es/DOM/window">ventana - <code>window</code></a>) del W3C DOM y del parecido DOM (pero no estándar) en el contexto de las páginas Web y la interfaz de aplicación (o<em>chrome</em>) del navegador.</p> - -<p>Aunque la interfaz de aplicación y el contenido exhibido por el navegador son diferentes en muchos puntos, el DOM los expone uniformemente como una jerarquía de nodos. <span class="comment">(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user</span></p> - -<h3 id="Sintaxis_del_API" name="Sintaxis_del_API">Sintaxis del API</h3> - -<p>Cada descripción en la referencia API incluye la sintaxis, los parámetros de entrada y salida (donde el tipo de retorno es agarrado), un ejemplo, todas las notas adicionales y un enlace a la especificación apropiada.</p> - -<p>Típicamente, las propiedades de sólo lectura tienen una simple línea de sintaxis, porque es posible leerlas pero imposible modificarlas. Por ejemplo, la propiedad de sólo lectura <code>availHeight</code> del objeto <code>screen</code> incluye la información siguiente:</p> - -<div></div> - -<p>Eso significa que sólo se puede utilizar la propiedad a la derecha de la declaración. En el caso de propiedades de lectura/escritura (posibilidad de modificación) se puede asignar un valor a la propiedad, como se ilustra en el siguiente ejemplo de sintaxis:</p> - -<div></div> - -<p>En general, el objeto cuyo miembro se está describiendo se pone en la declaración con un sólo tipo de dato:</p> - -<ul> - <li><code>element</code> para todos los elementos.</li> - <li><code>document</code> para el documento entero.</li> - <li><code>table</code> para una tabla, etc.</li> - <li>Para más información sobre la: <a href="es/Referencia_Gecko_del_DOM/Introducci%c3%b3n#Importancia_de_los_tipos_de_datos">Importancia de los tipos de datos</a>, lea este artículo.</li> -</ul> - -<h3 id="Utilizaci.C3.B3n_de_ejemplos" name="Utilizaci.C3.B3n_de_ejemplos">Utilización de ejemplos</h3> - -<p>Varios ejemplos en esta referencia son archivos completos que se pueden ejecutar copiándolos y pegándolos dentro de un nuevo archivo y abriéndolo en un navegador. Otros son trozos de código que se pueden ejecutar poniéndolos en las funciones repeticón de llamada (<code>callback</code>) de JavaScript. Por ejemplo, la propiedad de <a href="es/DOM/window.document">window.document</a> se puede probar dentro de la siguiente función, la cual es llamada por el botón acompañante:</p> - -<pre><html> - -<script> -function testWinDoc() { - - doc= window.document; - - alert(doc.title); - -} -</script> - -<button onclick="testWinDoc();">Prueba la propiedad del documento</button> - -</html> -</pre> - -<p>Funciones y páginas similares pueden ser creadas para todos los miembros de objeto que no hayan sido ya preparados para su uso directo. Ver la parte <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Probando_el_API_del_DOM">Probando el API del DOM</a> en la introducción para una "prueba pesada" que permite probar varios API a la vez.</p> - -<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p> diff --git a/files/es/conflicting/web/api/element/index.html b/files/es/conflicting/web/api/element/index.html deleted file mode 100644 index 75cffcfe19..0000000000 --- a/files/es/conflicting/web/api/element/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: NonDocumentTypeChildNode -slug: conflicting/Web/API/Element -tags: - - API - - DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/NonDocumentTypeChildNode -original_slug: Web/API/NonDocumentTypeChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p>The <code><strong>NonDocumentTypeChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.</p> - -<p><code>NonDocumentTypeChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>There is no inherited property.</em></p> - -<dl> - <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list prior to this node.</dd> - <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or <code>null</code> if there is no {{domxref("Element")}} in the list following this node.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>There is neither inherited, nor specific method.</em></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('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and <code>NonDocumentTypeChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter.<br> - The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.</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</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support (on {{domxref("CharacterData")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("25.0")}} [1]</td> - <td>9.0</td> - <td>10.0</td> - <td>4.0</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>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>10.0</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Support (on {{domxref("CharacterData")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>10.0</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, and {{domxref("Element")}}.</div> - </li> -</ul> diff --git a/files/es/conflicting/web/api/element/namespaceuri/index.html b/files/es/conflicting/web/api/element/namespaceuri/index.html deleted file mode 100644 index e7dbb30dc9..0000000000 --- a/files/es/conflicting/web/api/element/namespaceuri/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Node.namespaceURI -slug: conflicting/Web/API/Element/namespaceURI -tags: - - API - - DOM - - NecesitaCompatilibidadNavegador - - Propiedad - - Referencia - - obsoleta -translation_of: Web/API/Node/namespaceURI -original_slug: Web/API/Node/namespaceURI ---- -<div>{{APIRef("DOM")}}{{obsolete_header}}</div> - -<p>La propiedad de solo lectura <code><strong>Nodo.namespaceURI</strong></code> devuelve la URI del nodo, o null en caso de que el nodo no tenga espacio de nombres. Cuando el nodo es un documento, este devuelve el espacio de nombres del XML para el documento actual.</p> - -<div class="warning"> -<p>En DOM4 esta API fué movida desde <code>Node</code> a las interficies {{domxref("Element")}} y {{domxref("Attr")}}.</p> -</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><var>namespace</var> = <var>node</var>.namespaceURI</pre> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>En este fragmento, un nodo esá siendo examinado por su {{domxref("Node.localName")}} y <code>namespaceURI</code>. Si el <code>namespaceURI</code> devuelve el nombre de espaciosXUL y el <code>localName</code> devuelve "browser", entonces el nodo es entendido a ser un XUL <code><browser/></code>.</p> - -<pre class="brush:js">if (node.localName == "browser" && - node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { - // Este es un navegador XUL -}</pre> - -<h2 id="Notas">Notas</h2> - -<p>Este no es un valor calculado que es el resultado de una búsqueda del espacio de nombres basada en la examinación de las declaraciones de un espacio de nombres en el ámbito. El espacio de nombres URI de un nodo es congelado ene l momento de su creación.</p> - -<p>En Firefox 3.5 y anteriores, el espacio de nombres URI para los elementos HTML en los Documents HTML es <code>null</code>. En versiones psoteriores, en conformidad con HTML5, es <code><a class="external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> como en XHTML. {{gecko_minversion_inline("1.9.2")}}</p> - -<p>Para nodos de cualquier {{domxref("Node.nodeType")}} distintos de <code>ELEMENT_NODE</code> y <code>ATTRIBUTE_NODE</code> el valor de <code>namespaceURI</code> es siempre <code>null</code>.</p> - -<p>Puedes crear un elemento con un <code>namespaceURI</code> concreto creando un método DOM de nivel 2 {{domxref("Document.createElementNS")}} y atributos con el método {{domxref("Element.setAttributeNS")}}.</p> - -<p>Para la especificación <a class="external" href="https://www.w3.org/TR/xml-names11/">Namespaces in XML</a>, un atributo no hereda su espacio de nombres del elemento al que está sujeto. Si un atributo no es dado de manera explícita como espacio de nombres, entonces no los tiene.</p> - -<p>El DOM no controla ni impone la validación del espacio de nombres. Depende de la aplicación DOM de hacer cualquier tipo de validación necesaria. Destacar también que el prefijo de espacio de nombre, una vez es asociado a un nodo enparticular, no puede ser modificado.</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("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Specifies the behavior when it's set to <code>null</code>.</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}<br> - {{CompatNo}}46.0<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> - {{CompatNo}} {{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></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>Edge</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup><br> - {{CompatNo}} {{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Esta API fue movida a las APIs {{domxref("Element")}} y {{domxref("Attr")}} de acuerdo con el standard de DOM4.</p> - -<p>[2] Antes de Gecko 5.0 {{geckoRelease("5.0")}}, esta propiedad era de lectura-escritura; empezando con Gecko 5.0 es sólo lectura, siguiendo la especificación.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{domxref("Node.localName")}}</li> - <li>{{domxref("Node.prefix")}}</li> - <li>{{domxref("Element.namespaceURI")}}</li> - <li>{{domxref("Attr.namespaceURI")}}</li> -</ul> diff --git a/files/es/conflicting/web/api/geolocation/index.html b/files/es/conflicting/web/api/geolocation/index.html deleted file mode 100644 index bd9d8f78d6..0000000000 --- a/files/es/conflicting/web/api/geolocation/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: NavigatorGeolocation -slug: conflicting/Web/API/Geolocation -tags: - - API -translation_of: Web/API/Geolocation -translation_of_original: Web/API/NavigatorGeolocation -original_slug: Web/API/NavigatorGeolocation ---- -<p>{{APIRef("Geolocation API")}}</p> - -<p><code><strong>NavigatorGeolocation</strong></code> contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.</p> - -<p>There is no object of type <code>NavigatorGeolocation</code>, but some interfaces, like {{domxref("Navigator")}} implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorGeolocation</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorGeolocation</code></em><em> interface neither implements, nor inherit any method.</em></p> - -<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('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial specification.</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>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Removed in 15.0<br> - Reintroduced in 16.0</td> - <td>5</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>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation.</a></li> -</ul> - -<p> </p> diff --git a/files/es/conflicting/web/api/html_drag_and_drop_api/index.html b/files/es/conflicting/web/api/html_drag_and_drop_api/index.html deleted file mode 100644 index e8dd96166b..0000000000 --- a/files/es/conflicting/web/api/html_drag_and_drop_api/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: DragDrop -slug: conflicting/Web/API/HTML_Drag_and_Drop_API -tags: - - NeedsTranslation - - TopicStub -translation_of: Web/API/HTML_Drag_and_Drop_API -translation_of_original: DragDrop -original_slug: DragDrop ---- -<p> </p> -<p>See <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p> diff --git a/files/es/conflicting/web/api/index.html b/files/es/conflicting/web/api/index.html deleted file mode 100644 index 66f2f46da6..0000000000 --- a/files/es/conflicting/web/api/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.name -slug: conflicting/Web/API -tags: - - API - - Compatibilidad de los navegadores - - DOM - - Elemento - - Propiedad - - Referencia - - Web - - actualizacion -translation_of: Web/API -translation_of_original: Web/API/Element/name -original_slug: Web/API/Element/name ---- -<p>{{ APIRef("DOM") }}</p> - -<h2 id="Summary" name="Summary">Sumario</h2> - -<p><code><strong>name</strong></code> <span id="result_box" lang="es"><span>obtiene o establece</span> <span>la</span> <span>propiedad del nombre</span> <span>de un</span> <span>objeto DOM</span><span>;</span> <span>sólo se aplica a</span> <span>los</span> <span>siguientes elementos</span><span>:</span></span> {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> - -<div class="note"> -<p><strong>Nota:</strong> <code>La propiedad name no esixte para otros elementos</code>; a diferencia de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> y <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.</p> -</div> - -<p><code>name</code> puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">configuración</a> y con la colección de <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elementos</a> de la configuración. cuando utilizamos una configuración o elementos de una colección, puede devolver un solo elemento o una colección.</p> - -<h2 id="Syntax" name="Syntax">Síntasix</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // Get a reference to the first element in the form - var formElement = document.forms['formA'].elements[0]; - - // Give it a name - formElement.name = 'inputA'; - - // Show the value of the input - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>En Internet Explorer (IE), la propiedad <code>name</code> de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada</p> - -<h2 id="Specification" name="Specification">Especificaciones</h2> - -<p>W3C DOM 2 HTML Specification:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/es/conflicting/web/api/indexeddb_api/index.html b/files/es/conflicting/web/api/indexeddb_api/index.html deleted file mode 100644 index cdcd58724c..0000000000 --- a/files/es/conflicting/web/api/indexeddb_api/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: IndexedDB -slug: conflicting/Web/API/IndexedDB_API -tags: - - páginas_a_traducir -original_slug: IndexedDB ---- -<p>{{ SeeCompatTable() }}</p> - -<p>IndexedDB es una API del lado del cliente, para el almacenamiento de grandes cantidades de datos estructurados y para búsquedas de alto rendimiento en esos datos, usando índices. Mientras <a href="/en-US/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Storage</a> es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.</p> - -<p>Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;<a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceptos básicos acerca de IndexedDB</a>. Para más detalles, vea <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usando IndexedDB</a>.</p> - -<p>IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de <a href="/en-US/docs/DOM/Worker" title="Worker">Web Workers</a>, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.</p> - -<h2 id="API_Asíncrono">API Asíncrono</h2> - -<p>Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use <code><a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open">open</a></code>() en el atributo <code><a href="/en-US/docs/IndexedDB/IDBEnvironment#attr_indexedDB" title="en-US/docs/IndexedDB/IDBEnvironment#attr indexedDB">indexedDB</a></code> de un objeto <a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a>. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.</p> - -<div class="note"> -<p>Nota: El objeto <code>indexedDB</code> se prefija en las versiones antiguas de los navegadores (propiedad <code>mozIndexedDB</code> para Gecko < 16, <code>webkitIndexedDB</code> en Chrome, y <code>msIndexedDB</code> en IE 10).</p> -</div> - -<ul> - <li><a href="/en-US/docs/IndexedDB/IDBFactory" title="en-US/docs/IndexedDB/IDBFactory"><code>IDBFactory</code></a> provee acceso a la base de datos. Esta es la interface implementada por el objeto global <code>indexedDB</code> y es el punto de entrada para la API.</li> - <li><a href="/en-US/docs/IndexedDB/IDBCursor" title="en-US/docs/IndexedDB/IDBCursor"><code>IDBCursor</code></a> itera sobre los objetos de almacenamiento y de índices.</li> - <li><a href="/en-US/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> itera sobre los objetos de almacenamiento y de índices y retorna el valor actual del cursor.</li> - <li><a href="/en-US/docs/IndexedDB/IDBDatabase" title="en-US/docs/IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> representa una conexión a la base de datos. Es la única manera de realizar una transacción en la base de datos.</li> - <li><a href="/en-US/docs/IndexedDB/IDBEnvironment" title="en-US/docs/IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> provee acceso a la base de datos, desde el lado del cliente. Está implementada por el objeto <a href="/../en-US/docs/DOM/window" rel="internal" title="../en-US/docs/DOM/window">window</a>.</li> - <li><a href="/en-US/docs/IndexedDB/IDBIndex" title="en-US/docs/IndexedDB/IDBIndex"><code>IDBIndex</code></a> provee acceso a la metadata de un índice.</li> - <li><code><a href="/en-US/docs/IndexedDB/IDBKeyRange" title="en-US/docs/IndexedDB/KeyRange">IDBKeyRange</a></code> define un rango de claves.</li> - <li><a href="/en-US/docs/IndexedDB/IDBObjectStore" title="en-US/docs/IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> representa un objeto de almacenamiento.</li> - <li><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> representa un requerimiento para abrir una base de datos.</li> - <li><a href="/en-US/docs/IndexedDB/IDBRequest" title="en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> provee acceso a los resultados de los requerimientos asíncronos a la base de datos y a los objetos database. Es lo que se obtiene cuando se llama a un método asíncrono.</li> - <li><a href="/en-US/docs/IndexedDB/IDBTransaction" title="en-US/docs/IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> representa una transacción. Cuando Ud. crea una transacción en la base de datos, especifica el alcance (como a que objetos store desea tener acceso), y determina la clase de acceso (sólo lectura o escritura) que desea tener.</li> - <li><a href="/en-US/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> indica que la versión de la base de datos ha cambiado.</li> -</ul> - -<p>Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:</p> - -<ul> - <li><code><a href="/en-US/docs/IndexedDB/IDBVersionChangeRequest" title="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a></code> representa una solicitud para cambiar la versión de una base de datos. La manera de cambiar la versión de la base de datos ahora es diferente (llamando <a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open"><code>IDBFactory.open()</code></a> sin llamar también a <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>), y la interfaz <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> tiene ahora la funcionalidad de la eliminada <code>IDBVersionChangeRequest</code>.</li> - <li><code><a href="/en-US/docs/IndexedDB/IDBDatabaseException" title="en-US/docs/IndexedDB/DatabaseException">IDBDatabaseException </a></code> {{ obsolete_inline() }} representa las condiciones de excepción que se pueden encontrar mientras se ejecutan operaciones en la base de datos.</li> -</ul> - -<p>Hay también una <a href="/en-US/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI">versión sincrónica de la API</a>. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>.</p> - -<h2 id="Límites_de_almacenamiento">Límites de almacenamiento</h2> - -<p>No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:</p> - -<ul> - <li> - <p>Firefox: no hay límite en el tamaño de una base de datos IndexedDB. La interfaz de usuario solicita permiso para almacenar blobs de más de 50MB. Este límite puede ser modificado mediante la preferencia dom.indexedDB.warningQuota (que está definida en <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</p> - </li> - <li>Google Chrome: vea <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li> -</ul> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<p>Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri</a>, una biblioteca y una aplicación de lectura de libros electrónicos.</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>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>API asíncrono</td> - <td> - <p>24.0<br> - 11.0 {{ property_prefix("webkit") }}</p> - </td> - <td> - <p>{{ CompatGeckoDesktop("16.0") }}<br> - {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}</p> - </td> - <td>10 {{ property_prefix("ms") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>API síncrono<br> - (usado por <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>)</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}<br> - Vea {{ bug(701634) }}</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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>API síncrono</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>Para otra matriz de compatibilidad, vea también: <a href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Cuándo puedo usar IndexedDB</a></p> - -<p>También existe la posibilidad de usar IndexedDB en <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage"> navegadores que soportan WebSQL</a> por el uso de <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Conceptos básicos acerca de IndexedDB</a></li> - <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Usando IndexedDB</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Almacenando imágenes y archivos en 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 simple de PENDIENTES usando HTML5 IndexedDB</a>. {{ Note("Este tutorial está basado en una antigua versión de la especificación y no funciona en los navegadores actualizados. por ejemplo, todavía usa el método actualmente eliminado <code>setVersion()</code>.") }}</li> - <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Especificación de la API para Indexed Database </a></li> - <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 alamcén en su navegador</a></li> - <li><a class="external" href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">Soporte IndexedDB en navegadores</a></li> - <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">Ejemplos IndexedDB</a></li> - <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a> para navegadores que sólo soportan WebSQL (p.e. mobile WebKit)</li> - <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li> -</ul> diff --git a/files/es/conflicting/web/api/node/index.html b/files/es/conflicting/web/api/node/index.html deleted file mode 100644 index 2204a75c59..0000000000 --- a/files/es/conflicting/web/api/node/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Nodo.nodoPrincipal -slug: conflicting/Web/API/Node -tags: - - API - - DOM - - Gecko - - Propiedad -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal -original_slug: Web/API/Node/nodoPrincipal ---- -<div> -<div>{{APIRef("DOM")}}</div> -{{Non-standard_header}} - -<p>La propiedad de solo loctura de <code><strong>Nodo.nodePrincipal</strong></code> devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.</p> - -<p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado</p> - -<h2 id="Specification" name="Specification">Especificación</h2> - -<p>No hay especificaciones.</p> -</div> - -<p> </p> diff --git a/files/es/conflicting/web/api/push_api/index.html b/files/es/conflicting/web/api/push_api/index.html deleted file mode 100644 index ea87d50427..0000000000 --- a/files/es/conflicting/web/api/push_api/index.html +++ /dev/null @@ -1,434 +0,0 @@ ---- -title: Usando la API Push -slug: conflicting/Web/API/Push_API -translation_of: Web/API/Push_API -translation_of_original: Web/API/Push_API/Using_the_Push_API -original_slug: Web/API/Push_API/Using_the_Push_API ---- -<p class="summary"><span class="seoSummary">La W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.</span></p> - -<p>La habilidad de enviar mensajes o notificaciones de un servidor a un cliente en cualquier momento —si la aplicación está activa en su sitema o no—es algo que ha sido disfrutado por las plataformas nativas durante algún tiempo, y esta finalmente llega a la web! el soporte para muchos push está ahora disponible en Firefox 43+ y Chrome 42+ en escritorio, esperamos seguir pronto con las plataformas moviles. {{domxref("PushMessageData")}} actualmente solo es soportada experimentalmente en Firefox (44+), y la implementación está sujeta a cambios.</p> - -<div class="note"> -<p><strong>Note</strong>: Early versions of Firefox OS used a proprietary version of this API called <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. This is being rendered obsolete by the Push API standard.</p> -</div> - -<h2 id="Demo_las_bases_de_una_simple_app_de_servidor_de_chat">Demo: las bases de una simple app de servidor de chat</h2> - -<p>La demo que hemos creado proporciona los principios de una simple app de chat. Esta presenta un formulario para que ingreses un identificador de chat y un boton que al presionar se suscriba a los mensajes push.</p> - -<p>En este punto, el nombre de los nuevos suscriptores aparecerá en la lista de suscriptores, junto con un campo de texto y un botón de envío para permitir al suscriptor enviar mensajes.</p> - -<p>At this point, the new subscriber's name will appear in the subscriber's list, along with a text field and submit button to allow the subscriber to send messages.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> - -<p>Para correr la demo, siga las instrucciones de <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Tenga en cuenta que el componente server-side aún nesecita un poco de trabajo para que funcione en chrome y se ejecute de una manera más rezonable. Pero los aspectos de push pueden ser explicados a fondo; Nos sumergiremos en ella después de revisar las tecnologías en juego.</p> - -<h2 id="Visión_de_la_tecnología">Visión de la tecnología</h2> - -<p>Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.</p> - -<p>Los mensajes web push hacen parte de la familia tecnológica <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a>; en particular, se requiere que un service worker esté activo en la página para recibir mensajes push. el service worker recibe el mensaje push, y acontinuación depende de usted cómo notificar a la página. Usted puede:</p> - -<p>Web Push messages are part of the <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> technology family; in particular, a service worker is required to be active on the page for it to receive push messages. The service worker receives the push message, and then it is up to you how to then notify the page. You can:</p> - -<ul> - <li>Enviar una <a href="/en-US/docs/Web/API/Notifications_API">notificación web</a> emergente para alertar al usuario. Esto requiere que sean concedidos los permisos para enviar el mensaje push.</li> - <li>Envía un mensaje a la página principal a través de un {{domxref("MessageChannel")}}.</li> -</ul> - -<p>A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.</p> - -<div class="note"> -<p><strong>Nota</strong>: Usted necesita algún tipo de código que se ejecute en el servidor para manejar el cifrado de punto final/datos y enviar las solicitudes de notificaciones push. En nuestra demostración hemos creado un servidor quick-and-dirty usando <a href="https://nodejs.org/">NodeJS</a>.</p> -</div> - -<p>El service worker también tiene que suscribirse al servicio de mensajería psuh. Cada sesión recibe su propio punto final único cuando se suscribe al servicio de mensajería. Este punto final es obtenido desde la propiedad ({{domxref("PushSubscription.endpoint")}}) en el objeto de suscripción. Este punto final se puede enviar a su servidor y se utiliza para enviar un mensaje al service worker asctivo en esta sesión. Cada navegador tiene su propio servidor de mensajería push para manejar el envío del mensaje push.</p> - -<h3 id="Encryption">Encryption</h3> - -<div class="note"> -<p><strong>Note</strong>: For an interactive walkthrough, try JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> -</div> - -<p>To send data via a push message, it needs to be encrypted. This requires a public key created using the {{domxref("PushSubscription.getKey()")}} method, which relies upon some complex encryption mechanisms that are run server-side; read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details. As time goes on, libraries will appear to handle key generation and encryption/decryption of push messages; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: There is also another library to handle the encryption with a Node and Python version available, see <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> -</div> - -<h3 id="Push_workflow_summary">Push workflow summary</h3> - -<p>To summarize, here is what is needed to implement push messaging. You can find more details about specific parts of the demo code in subsequent sections.</p> - -<ol> - <li>Request permission for web notifications, or anything else you are using that requires permissions.</li> - <li>Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.</li> - <li>Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.</li> - <li>Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that <code>getKey()</code> is currently experimental and Firefox only.)</li> - <li>Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> - <li>If you are using the <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send <code>port2</code> over to the service worker by calling {{domxref("Worker.postMessage()")}} on the service worker, in order to open up the communication channel. You should also set up a listener to respond to messages sent back from the service worker.</li> - <li>On the server side, store the endpoint and any other required details so they are available when a push message needs to be sent to a push subscriber (we are using a simple text file, but you could use a database or whatever you like). In a production app, make sure you keep these details hidden, so malicious parties can't steal endpoints and spam subscribers with push messages.</li> - <li>To send a push message, you need to send an HTTP <code>POST</code> to the endpoint URL. The request must include a <code>TTL</code> header that limits how long the message should be queued if the user is not online. To include payload data in your request, you must encrypt it (which involves the client public key). In our demo, we are using the <a href="https://github.com/marco-c/web-push">web-push</a> module, which handles all the hard work for you.</li> - <li>Over in your service worker, set up a <code>push</code> event handler to respond to push messages being received. - <ol> - <li>If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the <code>port2</code> we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the <code>ports</code> property, index 0. Once this is done, you can send a message back to <code>port1</code>, using {{domxref("MessagePort.postMessage()")}}.</li> - <li>If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.<span id="cke_bm_307E" class="hidden"> </span></li> - </ol> - </li> -</ol> - -<h2 id="Construyendo_la_demo">Construyendo la demo</h2> - -<p>Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.</p> - -<ul> - <li> - <h3 id="HTML_y_CSS">HTML y CSS</h3> - </li> -</ul> - -<p>No hay nada destacalbe sobre el HTML y el CSS para la demo; el HTML inicialmente contiene un simple formulario que permite introducir un udentificador para la sala de chat, un boton que al hacer click se suscribe a las notificaciones push, y dos listas con los suscriptores y los mensajes. Una vez suscrito, aparecerán controles adicionales para permitir al usuario actual escribir mensajes en el chat.</p> - -<p>El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.</p> - -<ul> - <li> - <h3 id="El_archivo_JavaScript_principal">El archivo JavaScript principal</h3> - </li> -</ul> - -<p>El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.</p> - -<h4 id="Variables_y_configuración_inicial">Variables y configuración inicial</h4> - -<p>Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:</p> - -<pre class="brush: js">var isPushEnabled = false; -var useNotifications = false; - -var subBtn = document.querySelector('.subscribe'); -var sendBtn; -var sendInput; - -var controlsBlock = document.querySelector('.controls'); -var subscribersList = document.querySelector('.subscribers ul'); -var messagesList = document.querySelector('.messages ul'); - -var nameForm = document.querySelector('#form'); -var nameInput = document.querySelector('#name-input'); -nameForm.onsubmit = function(e) { - e.preventDefault() -}; -nameInput.value = 'Bob';</pre> - -<p>Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.</p> - -<p>A continuación, tomamos una referencia al suscrito/no-suscrito <code>{{htmlelement("button")}}</code>, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)</p> - -<p>Las siguientes variables toman referencia a los trés elementos principales <code>{{htmlelement("div")}}</code> en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón <em>envíar el mensaje de chat</em> o el mensaje de chat aparezca en la lista de <em>mensajes</em>.)</p> - -<p>Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento <code>{{htmlelement("input")}},</code> damos a la entrada un valor por defecto, y usamos <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> para detener el envío del formulario cuando este es enviado pulsando return.</p> - -<p>A continuación, pedimos permiso para enviar las notificaciones web, usando <code>{{domxref("Notification.requestPermission","requestPermission()")}}</code>:</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>Ahora ejecutamos una sección de código cuando se dispara el <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, para empezar el proceso de inicialización de la app cuando se carga pro primera vez. En primer lugar añadimos un detector de eventos de clik al botón Sucribirse/unsubscribe que ejecuta nuestra funcion <code>unsubscribe()</code> si actualmente estamos suscritos (<code>isPushEnabled</code> is <code>true</code>), y <code>subscribe()</code> de la otra manera:</p> - -<pre class="brush: js">window.addEventListener('load', function() { - subBtn.addEventListener('click', function() { - if (isPushEnabled) { - unsubscribe(); - } else { - subscribe(); - } - });</pre> - -<p>A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando <code>{{domxref("ServiceWorkerContainer.register()")}}</code>, y ejecutando nuestra función <code>initialiseState()</code>. Si no es así, entregamos un mensaje de error a la consola.</p> - -<pre class="brush: js"> // Check that service workers are supported, if so, progressively - // enhance and add push messaging support, otherwise continue without it. - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('sw.js').then(function(reg) { - if(reg.installing) { - console.log('Service worker installing'); - } else if(reg.waiting) { - console.log('Service worker installed'); - } else if(reg.active) { - console.log('Service worker active'); - } - - initialiseState(reg); - }); - } else { - console.log('Service workers aren\'t supported in this browser.'); - } -}); -</pre> - -<p>La siguiente cosa en el código es la función <code>initialiseState()</code> — para el codigo completo comentado, mira en <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (no lo estamos repitiendo aquí por brevedad.)</p> - -<p><code>initialiseState()</code> primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable <code>useNotifications</code> a verdadero. A continuación comprueba si dichas notificaciones están permitidas por el usuario y si los mensajes push están soportados, y reacciona deacuerdo a cada uno.</p> - -<p>Finalmente, se usa <code>{{domxref("ServiceWorkerContainer.ready()")}}</code> para esperar a que el service worker esté activo y listo para hacer las cosas. Una vez se revuelva el promise, recuperamos nuestra suscripsión para enviar los mensajes push usando la propiedad <code>{{domxref("ServiceWorkerRegistration.pushManager")}}</code>, que devuelve un objeto <code>{{domxref("PushManager")}}</code> cuando llamamos a <code>{{domxref("PushManager.getSubscription()")}}</code>. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (<code>subBtn.disabled = false;</code>), y verificamos que tenemos un objeto suscripsión para trabajar.</p> - -<p>Si lo hacemos, entonces ya estamos suscritos. Esto es posible cuando la app no está abierta en el navegador; el service worker aun puede ser activado en segundo plano. si estamos suscritos, actualizamos la UI para mostrar que estamos suscritos por la actualizacion del label en el botón, entonces establecemos <code>isPushEnabled</code> to <code>true</code>, toma el punto final de suscripsión desde <code>{{domxref("PushSubscription.endpoint")}}</code>, genera una public key usando <code>{{domxref("PushSubscription.getKey()")}}</code>, y ejecutando nuestra función <code>updateStatus()</code>, que como verá más adelante se comunica con el servidor.</p> - -<p>Como un bonus añadido, configuramos un nuevo <code>{{domxref("MessageChannel")}}</code> usando el constructor <code>{{domxref("MessageChannel.MessageChannel()")}}</code>, toma una referencia al service worker activo usando <code>{{domxref("ServiceworkerRegistration.active")}}</code>, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando <code>{{domxref("Worker.postMessage()")}}</code>. El contexto del navegador recive mensajes en <code>{{domxref("MessageChannel.port1")}}</code>; Cuando esto suceda, ejecutamos la función <code>handleChannelMessage()</code> para decidir que hacer con esos datos (mirar la sección <code>{{anch("Handling channel messages sent from the service worker")}}</code> ).</p> - -<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4> - -<p>Ahora regresamos la atención a las funciones <code>subscribe()</code> y <code>unsubscribe()</code> usadas para subscribe/unsubscribe al servicion de notificaciones push.</p> - -<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p> - -<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p> - -<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p> - -<p>Appropriate error handling is also provided in both functions. </p> - -<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> - -<pre class="brush: js">function subscribe() { - // Disable the button so it can't be changed while - // we process the permission request - - subBtn.disabled = true; - - navigator.serviceWorker.ready.then(function(reg) { - reg.pushManager.subscribe({userVisibleOnly: true}) - .then(function(subscription) { - // The subscription was successful - isPushEnabled = true; - subBtn.textContent = 'Unsubscribe from Push Messaging'; - subBtn.disabled = false; - - // Update status to subscribe current user on server, and to let - // other users know this user has subscribed - var endpoint = subscription.endpoint; - var key = subscription.getKey('p256dh'); - updateStatus(endpoint,key,'subscribe'); - }) - .catch(function(e) { - if (Notification.permission === 'denied') { - // The user denied the notification permission which - // means we failed to subscribe and the user will need - // to manually change the notification permission to - // subscribe to push messages - console.log('Permission for Notifications was denied'); - - } else { - // A problem occurred with the subscription, this can - // often be down to an issue or lack of the gcm_sender_id - // and / or gcm_user_visible_only - console.log('Unable to subscribe to push.', e); - subBtn.disabled = false; - subBtn.textContent = 'Subscribe to Push Messaging'; - } - }); - }); -}</pre> - -<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4> - -<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p> - -<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p> - -<ul> - <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li> - <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li> - <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li> -</ul> - -<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> - -<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4> - -<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p> - -<pre class="brush: js">channel.port1.onmessage = function(e) { - handleChannelMessage(e.data); -}</pre> - -<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p> - -<p>The <code>handleChannelMessage()</code> function looks like this:</p> - -<pre class="brush: js">function handleChannelMessage(data) { - if(data.action === 'subscribe' || data.action === 'init') { - var listItem = document.createElement('li'); - listItem.textContent = data.name; - subscribersList.appendChild(listItem); - } else if(data.action === 'unsubscribe') { - for(i = 0; i < subscribersList.children.length; i++) { - if(subscribersList.children[i].textContent === data.name) { - subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); - } - } - nameInput.disabled = false; - } else if(data.action === 'chatMsg') { - var listItem = document.createElement('li'); - listItem.textContent = data.name + ": " + data.msg; - messagesList.appendChild(listItem); - sendInput.value = ''; - } -}</pre> - -<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p> - -<ul> - <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li> - <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li> - <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p> -</div> - -<h4 id="Sending_chat_messages">Sending chat messages</h4> - -<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p> - -<h3 id="The_server">The server</h3> - -<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p> - -<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p> - -<ul> - <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li> - <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li> - <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li> - <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li> -</ul> - -<p>A couple more things to note:</p> - -<ul> - <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li> - <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li> - <li>If you wish to have messages that collapse (newer updates will replace older updates), you can use the Topic feature. A topic is a special class of subscription update that has a <code>Topic</code> header. A topic name can be any URL safe, base64 string. For example, a header like "<code>Topic: MyFavoriteTopic-For2016</code>" is fine, but "<code>Topic: OMG! Kitties :)</code>" is not. Topic messages are collapsed when the subscriber is offline or unavailable. When they come back, they will receive only the lastest message per topic, along with whatever other messages are pending. "<a href="https://hacks.mozilla.org/2016/11/mozilla-push-server-now-supports-topics/">Mozilla Push Server now supports Topics</a>" on the Mozilla Hacks blog gives more details and examples.</li> -</ul> - -<h3 id="The_service_worker">The service worker</h3> - -<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p> - -<ul> - <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li> - <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li> -</ul> - -<pre class="brush: js">self.addEventListener('push', function(event) { - var obj = event.data.json(); - - if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { - fireNotification(obj, event); - port.postMessage(obj); - } else if(obj.action === 'init' || obj.action === 'chatMsg') { - port.postMessage(obj); - } -});</pre> - -<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p> - -<pre class="brush: js">function fireNotification(obj, event) { - var title = 'Subscription change'; - var body = obj.name + ' has ' + obj.action + 'd.'; - var icon = 'push-icon.png'; - var tag = 'push'; - - event.waitUntil(self.registration.showNotification(title, { - body: body, - icon: icon, - tag: tag - })); -}</pre> - -<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> - -<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p> - -<div class="note"> -<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> -</div> - -<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2> - -<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example. This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p> - -<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // do something, usually resubscribe to push and -</span> <span class="comment token"> // send the new subscription details back to the -</span> <span class="comment token"> // server via XHR or Fetch -</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p> - -<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2> - -<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p> - -<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3> - -<p>To get this set up, follow these steps:</p> - -<ol> - <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a> and set up a new project.</li> - <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then - <ol> - <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li> - <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li> - <li>Click the <em>Enable API</em> button.</li> - </ol> - </li> - <li>Now you need to make a note of your project number and API key because you'll need them later. To find them: - <ol> - <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li> - <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li> - </ol> - </li> -</ol> - -<h3 id="manifest.json">manifest.json</h3> - -<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p> - -<pre class="brush: js">{ - "name": "Push Demo", - "short_name": "Push Demo", - "icons": [{ - "src": "push-icon.png", - "sizes": "111x111", - "type": "image/png" - }], - "start_url": "/index.html", - "display": "standalone", - "gcm_sender_id": "224273183921" -}</pre> - -<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p> - -<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> - -<h3 id="userVisibleOnly">userVisibleOnly</h3> - -<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> -</div> diff --git a/files/es/conflicting/web/api/url/index.html b/files/es/conflicting/web/api/url/index.html deleted file mode 100644 index 61ab76466d..0000000000 --- a/files/es/conflicting/web/api/url/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Window.URL -slug: conflicting/Web/API/URL -tags: - - API - - DOM - - Propiedad - - Referencia - - Referência DOM - - WebAPI -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL -original_slug: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p>La propiedad <strong><code>Window.URL</code></strong> devuelve un objeto que proporciona métodos estáticos usados para crear y gestionar objetos de URLs. Además puede ser llamado como un constructor para construir objetos {{domxref("URL")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Llamando a un método estático:</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>Construyendo un nuevo objeto:</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></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('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</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>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</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>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar <code>nsIDOMMozURLProperty</code>. En la práctica, esto no hace ninguna diferencia.</p> - -<p>[2] Implementado bajo el nombre no estandar <code>webkitURL</code>.</p> diff --git a/files/es/conflicting/web/api/web_storage_api/index.html b/files/es/conflicting/web/api/web_storage_api/index.html deleted file mode 100644 index 551f98f92d..0000000000 --- a/files/es/conflicting/web/api/web_storage_api/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Almacenamiento -slug: conflicting/Web/API/Web_Storage_API -tags: - - DOM - - JavaScript - - Referencia_DOM_de_Gecko - - Todas_las_Categorías - - para_revisar -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage -original_slug: DOM/Almacenamiento ---- -<p>{{ ApiRef() }}</p> -<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3> -<p>El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">características relacionadas con el almacenamiento</a> introducidas en la especificación de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">aplicaciones web 1.0</a> y ahora detalladas por separado en su propia especificación <a class="external" href="http://dev.w3.org/html5/webstorage/" rel="external nofollow" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies. Fue introducido por primera vez en <a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a> y <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" rel="external nofollow" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a> .</p> -<div class="note"> - <strong>Nota:</strong> el almacenamiento DOM no es lo mismo que <a href="/es/Almacenamiento" title="es/Almacenamiento">mozStorage</a> (las interfaces XPCOM de Mozilla para SQLite) o la <a href="/es/API_para_guardar_sesiones" title="es/API_para_guardar_sesiones">API para guardar sesiones</a> (una utilidad de almacenamiento <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> usada por extensiones).</div> -<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3> -<p>El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).</p> -<p>Actualmente los navegadores basados en Mozilla, Internet Explorer 8+ y Safari 4 y Chrome proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, las versiones anteriores a Internet Explorer 8 poseen una característica similar llamada "<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>" que permite conservar datos entre múltiples sesiones.</p> -<p>El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">cookies de los navegadores</a> tienen una capacidad limitada y no implementan una forma de organizar datos persistentes y otros métodos (tales como <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">almacenamiento local de Flash</a>) necesitan un plugin externo.</p> -<p>Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (una aplicación para tomar notas) escrita por <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.</p> -<p>Aunque el concepto e implementación presentada en halfnote era en comparación simple, su creación mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.</p> -<h3 id="Referencias" name="Referencias">Referencia</h3> -<p>Los siguientes objetos globales existen como propiedades de cada <a href="/es/DOM/window" title="es/DOM/window">objeto <code>window</code></a>. Esto significa que se puede acceder a ellas como <code>sessionStorage</code> o <code>window.sessionStorage</code> (esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).</p> -<h4 id="sessionStorage" name="sessionStorage"><code>Storage</code></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-1"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este es un constructor ( <code>Storage</code> ) para todos los objetos de almacenamiento ( <code>sessionStorage</code> y <code>globalStorage[location.hostname]).</code></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al hacer <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> podrías usar luego como atajo a la función <code>removeItem("key")</code> la forma <code>localStorage.removeKey and sessionStorage.removeKey</code>.</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="">Los elementos <code>globalStorage</code> no son de tipo <code>Storage</code> , sino <code>StorageObsolete</code> .</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><code>Storage</code> se define por la <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fdev.w3.org%2Fhtml5%2Fwebstorage%2F%23storage-0&sa=D&sntz=1&usg=AFQjCNGvCDT1Wf0oh4zXJCIScYRZKlrPAA">interfaz de almacenamiento</a> WhatWG de la siguiente forma:</span></span></p> -<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">interface Storage {</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="http://dev.w3.org/html5/webstorage/#dom-storage-length">length</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="">[IndexGetter]<a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="http://dev.w3.org/html5/webstorage/#dom-storage-key">key</a> DOMString (in unsigned long index);</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-getitem">GetItem</a> (in DOMString key);</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-setitem">setItem</a> (in DOMString key, in DOMString data);</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem">removeItem</a> (in DOMString key);</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="http://dev.w3.org/html5/webstorage/#dom-storage-clear">clear</a>();</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}; -</span></span></pre> -<p> </p> -<div class="note"> - <strong>Nota: </strong>aunque los valores pueden establecerse y leerse a través del método de acceso de la propiedad de JavaScript estándar, se recomienda el uso de los métodos getItem y setItem.</div> -<div class="note"> - <strong>Nota:</strong> ten en cuenta que todo lo que guardes en cualquiera de los almacenamientos (<em>storages) </em>descritos en esta página se convierte en una cadena a través de su método <code>.toString </code>almacenado anteriormente, por lo que al intentar almacenar un objeto común, se almacenará una cadena <code>"[object Object]" </code>en lugar del objeto o su representación JSON. Usar los métodos de serialización y análisis de JSON nativos que proporciona el navegador es una buena forma bastante común de almacenar objetos en formato cadena.</div> -<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4> -<p>Este es un objeto global (<code>sessionStorage</code>) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.</p> -<pre class="brush: js">// Guardar datos en el almacén de la sesión actual -sessionStorage.setItem("username", "John"); - -// Acceder a algunos datos guardados -alert( "username = " + sessionStorage.getItem("username")); -</pre> -<p>El objeto <code>sessionStorage</code> es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.</p> -<p>{{ fx_minversion_note("3.5", "Antes de Firefox 3.5, los datos de sessionStorage no se restablecían automáticamente después de recuperarse de un fallo del navegador. A partir de Firefox 3.5, funciona según la especificación.") }}</p> -<p><strong>Ejemplos:</strong></p> -<p>Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.</p> -<pre class="brush: js"> // Obtener el campo de texto al que vamos a seguir la pista - var field = document.getElementById("field"); - - // Ver si se tiene un valor de autoguardado - // (esto sólo sucede si la página es actualizada accidentalmente) - if ( sessionStorage.getItem("autosave")) { - // Restaurar los contenidos del campo de texto - field.value = sessionStorage.getItem("autosave"); - } - - // Comprobar los contenidos del campo de texto cada segundo - setInterval(function(){ - // Y guardar los resultados en el objeto de almacenamiento de sesión - sessionStorage.setItem("autosave", field.value); - }, 1000); -</pre> -<p><strong>Más información:</strong></p> -<ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage" title="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">Especificación sessionStorage</a></li> -</ul> -<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4> -<p> </p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ Non-standard_header() }} Este es un objeto global ( <code>globalStorage</code> ) que mantiene múltiples áreas de almacenamiento privado que se pueden utilizar para almacenar los datos durante un largo período de tiempo (por ejemplo, en varias páginas y las sesiones del navegador) .</span></span></p> -<div class="warning"> - <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Nota: <code>globalStorage</code> no es de tipo <code>Storage</code>, sino un objeto de tipo <code>StorageList</code> que contiene a su vez elementos <code>StorageObsolete</code>.</span></span></div> -<pre class="brush: js">// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org -globalStorage['mozilla.org'].setItem("snippet", "<b>Hola</b>, ¿cómo estás?"); -</pre> -<p>Específicamente, el objeto <code>globalStorage</code> proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa <code>globalStorage</code> en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:</p> -<ul> - <li><code>globalStorage['developer.mozilla.org']</code>- Todas las páginas web dentro del subdominio developer.mozilla.org podrán leer de, y escribir datos en, este objeto de almacenamiento.</li> -</ul> -<p>{{ Fx_minversion_note(3, "Firefox 2 permitía el acceso a objetos de almacenamiento superiores en la jerarquía del dominio al documento actual, pero esto ya no se permite en Firefox 3 por razones de seguridad. Además, se ha eliminado esta adición propuesta a HTML 5 de la especificación en favor de <code>localStorage</code>, que se implementa a partir de Firefox 3.5.") }}</p> -<p><strong>Ejemplos:</strong></p> -<p>Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.</p> -<p>Recordar el nombre un usuario para un subdominio en particular que está siendo visitado:</p> -<pre class="brush: js"> globalStorage['developer.mozilla.org'].setItem("username", "John"); -</pre> -<p>Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio:</p> -<pre class="brush: js"> // parseInt must be used since all data is stored as a string - globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); -</pre> -<p> </p> -<h4 class="editable" id="localStorage"><span><code>localStorage</code></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que <code>localStorage</code> es un elemento de tipo <code>Storage</code> a diferencia de <code>globalStorage[location.hostname]</code>, que es de tipo <code>StorageObsolete</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por ejemplo, <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fexample.com%2F&sa=D&sntz=1&usg=AFQjCNHbmhS24rOBWpzaMcUapS5k_3_-JQ" rel="external nofollow">http://example.com</a> no es capaz de acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fexample.com%2F&sa=D&sntz=1&usg=AFQjCNFdUqh3fgxBA_n6BEUpV3eYKVuHXA" rel="external nofollow">https://example.com</a> pero pueden acceder al mismo objeto <code>globalStorage</code>. <code>localStorage</code> es una interfaz estándar, mientras que <code>globalStorage</code> no es estándar. <code>localStorage</code> fue introducida en Firefox 3.5.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ten en cuenta que establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code> y extender <code>Storage.prototype</code> no afecta a los elementos <code>globalStorage</code>. Esto sólo se hace extendiendo <code>StorageObsolete.prototype</code>.</span></span></p> -<div class="note"> - <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> cuando el navegador entra en modo de navegación privada, se crea una nueva base de datos temporal para almacenar los datos locales de almacenamiento; </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">esta base de datos se vacía cuando se sale del modo de navegación privada.</span></span></div> -<div id="section_8"> - <h5 id="Compatibilidad">Compatibilidad</h5> - <p>Los objetos <code>Storage</code> se han agregado recientemente al estándar, por lo que puede ocurrir que no estén presentes en todos los navegadores. Puedes solucionar esto insertando uno de los siguientes códigos al principio de tus scripts, lo que permitirá el uso del objeto <code>localStorage</code> object en aquellas implementaciones que de forma nativa no lo admitan.</p> - <p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero haciendo uso de cookies.</p> - <pre class="brush: js">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - var sExpDate = new Date(); - sExpDate.setDate(sExpDate.getDate() - 1); - document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) { - iCouple = aCouples[iCouplId].split(/\s*=\s*/); - if (iCouple.length > 1) { - oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - <div class="note"> - <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave = tuValor;</code> y <code>delete localStorage.tuClave;</code> para establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div> - <p>Aquí tienes otra imitación, menos exacta, del objeto <code>localStorage</code>. Es mucho más simple que el anterior, pero es compatible con los navegadores antiguos como Internet Explorer < 8. También usa cookies.</p> - <pre class="brush: js">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - var sExpDate = new Date(); - sExpDate.setDate(sExpDate.getDate() - 1); - document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - <div class="note"> - <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave</code> para obtener, establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div> - <h3 class="editable" id="Lugar_de_almacenamiento_y_borrado_de_datos"><span><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Lugar de almacenamiento y borrado de datos</span></span></span></h3> - <p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los datos de almacenamiento DOM se guardan en el <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" rel="external nofollow" title="http://kb.mozillazine.org/Webappsstore.sqlite">archivo webappsstore.sqlite</a> de la carpeta del perfil.</span></span></p> - <ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Almacenamiento DOM se puede borrar a través de "Herramientas -> Borrar Historial reciente -> Cookies" cuando el rango de tiempo es "Todo" (a través de nsICookieManager:: removeAll)</span></span> - <ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Pero no cuando se especifica otro intervalo de tiempo: ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D527667&sa=D&sntz=1&usg=AFQjCNEMF8WI1pO7c8uQnfOUS0KITnlz5Q" rel="external nofollow">bug 527667</a> )</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">No aparece en Herramientas -> Opciones -> Privacidad -> Eliminar cookies individuales ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D506692&sa=D&sntz=1&usg=AFQjCNH3d0Etkixvdpdvd_u6gywZoEmsMQ" rel="external nofollow">bug 506692</a> )</span></span></li> - </ul> - </li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El almacenamiento DOM <strong>no</strong> se elimina a través de Herramientas -> Opciones -> Avanzado -> Red -> Datos en modo sin conexión -> Limpiar ahora.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">No aparece en la lista "Herramientas -> Opciones -> Avanzado -> Red -> Datos en modo sin conexión", a menos que el sitio también utilice la caché sin conexión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si el sitio aparece en esa lista, los datos de almacenamiento DOM se eliminan junto con la <a href="/en/Using_Application_Cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache">memoria caché sin conexión</a> cuando se hace clic en el botón Eliminar.</span></span></li> - </ul> - <p><span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta también <a href="/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache">borrar la caché de recursos en modo sin conexión</a> .</span></span></p> -</div> -<h3 id="M.C3.A1s_informaci.C3.B3n" name="M.C3.A1s_informaci.C3.B3n"><span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Más información</span></span></h3> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><a class="external" href="http://www.w3.org/TR/webstorage/" rel="external nofollow" title="http://www.w3.org/TR/webstorage/">Almacenamiento web</a> (W3C Web Grupo de trabajo sobre aplicaciones web)</span></span></li> - <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled" rel="external nofollow" title="http://kb.mozillazine.org/Dom.storage.enabled"><span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Activar / Desactivar almacenamiento DOM en Firefox o SeaMonkey</span></span></a></li> -</ul> -<h3 id="Ejemplos" name="Ejemplos"><span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Ejemplos</span></span></h3> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" rel="external nofollow" title="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application">Tutorial de almacenamiento web JavaScript: cómo crear una aplicación de la libreta de direcciones</a>. Práctico tutorial que describe cómo utilizar la API de almacenamiento web mediante la creación de una aplicación sencilla de la libreta de direcciones.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" rel="external nofollow" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">Aplicaciones web en modo desconexión</a> en hacks.mozilla.org: muestra una demo de la aplicación en modo desconexión y explica cómo funciona.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://noteboard.eligrey.com/" rel="external nofollow" title="http://noteboard.eligrey.com/">Noteboard</a>: aplicación para escritura de notas que almacena todos los datos en local.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://github.com/eligrey/jData-host" rel="external nofollow" title="http://github.com/eligrey/jData-host">JData</a>: una interfaz de objetos compartidos localStorage a la que cualquier sitio web en Internet puede acceder y que funciona en Firefox 3 +, Webkit 3.1.2 + versiones estables ("nightlies) y IE8.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Piensa en ella como pseudo-globalStorage [""], pero el acceso de escritura necesita la confirmación del usuario.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://codebase.es/test/webstorage.html" rel="external nofollow" title="http://codebase.es/test/webstorage.html">Ejemplo de localStorage en HTML 5 </a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo de localStorage muy sencillo y fácil de entender.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Guarda y recupera los textos y muestra una lista de elementos guardados.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3 o superior.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" rel="external nofollow" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">Almacenamiento de sesión en HTML5</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo muy simple de almacenamiento de sesión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">También incluye un ejemplo en almacenamiento local.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3.6 o superior.</span></span></li> -</ul> -<h3 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h3> -<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>localStorage</td> - <td>4</td> - <td>3.5</td> - <td>8</td> - <td>10.50</td> - <td>4</td> - </tr> - <tr> - <td>sessionStorage</td> - <td>5</td> - <td>2</td> - <td>8</td> - <td>10.50</td> - <td>4</td> - </tr> - <tr> - <td>globalStorage</td> - <td>{{ CompatNo() }}</td> - <td>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>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Compatibilidad básica</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un<a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/"> resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores</a>.</p> -<h3 id="Contenido_relacionado" name="Contenido_relacionado"><span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Contenido relacionado</span></span></h3> -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHTTP_cookie&sa=D&sntz=1&usg=AFQjCNFACogcWPyUjw22LvVhbEL5L07xEA">Cookies HTTP</a> ( <a><code>document.cookie</code></a> )</span></span></li> - <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.macromedia.com%2Fsupport%2Fdocumentation%2Fen%2Fflashplayer%2Fhelp%2Fhelp02.html&sa=D&sntz=1&usg=AFQjCNFrtvzw9ttNpzuCXBX_Hlq3o20cYA"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Almacenamiento local de Flash</span></span></a></li> - <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fmsdn2.microsoft.com%2Fen-us%2Flibrary%2Fms531424.aspx&sa=D&sntz=1&usg=AFQjCNFaRBrB2GGggww2L9dRDlUWDBm9IQ"><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Comportamiento userData en Internet Explorer </span></span></a></li> - <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">nsIDOMStorageEventObsolete</span></span></a></li> - <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">StorageEvent</span></span></a></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">{{ HTML5ArticleTOC () }}</span></span></p> -<p> </p> -<p> </p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ languages( { "en": "en/DOM/Storage", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</span></span></p> diff --git a/files/es/conflicting/web/api/webrtc_api/index.html b/files/es/conflicting/web/api/webrtc_api/index.html deleted file mode 100644 index 41554256cd..0000000000 --- a/files/es/conflicting/web/api/webrtc_api/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: WebRTC -slug: conflicting/Web/API/WebRTC_API -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC -original_slug: WebRTC ---- -<p>El RTC en WebRTC significa <em>Real-Time Communications</em>, o comunicaciones en tiempo real, en español. WebRTC es una tecnología que permite compartir en tiempo real datos de audio y video entre navegadores (pares). Como conjunto de estándares, WebRTC provee a cualquier navegador de la capacidad de compartir datos de aplicación y realizar teleconferencias de par a par, sin la necesidad de instalar complementos o Software de terceros.</p> -<p>Los componentes de WebRTC son utilizados a través de interfaces avanzadaz de programación en JavaScript (APIs). Actualmente se están desarrollando la API de streaming a través de la red, que representa los flujos de datos de audio y vídeo, y la API PeerConnection, que permite a dos o más usuarios realizar conexiones navegador a navegador. Igualmente en desarrollo se encuentra la API DataChannel, que permite la transmisión de otros tipos de datos para juegos en tiempo real, mensajería instantánea, transferencia de archivos, y otros.</p> -<div class="note"> - <p><strong>Nota:</strong> Parte de este contenido está desactualizado, pero se estará actualizando pronto.</p> -</div> -<p>¿Quieres descubrir WebRTC? ¡Mira este <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="/en-US/docs/https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">vídeo introductorio!</a></p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentación sobre WebRTC</h2> - <dl> - <dt> - <a href="/es/docs/WebRTC/Introduction" title="/en-US/docs/WebRTC/Introduction">Introducción a WebRTC</a></dt> - <dd> - Una guía de introducción sobre qué es WebRTC y cómo funciona.</dd> - <dt> - <a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">Using the Network Stream API</a></dt> - <dd> - Una guía para usar la API Network Stream para transmitir flujos de audio y vídeo.</dd> - <dt> - <a href="/es/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Comunicaciones peer-to-peer (P2P) con WebRTC</a></dt> - <dd> - Como realizar conexiones par a par usando las APIs de WebRTC.</dd> - <dt> - </dt> - <dt> - <a href="/es/docs/WebRTC/Taking_webcam_photos" title="taking webcam photos">Capturar fotografías con la cámara web</a></dt> - <dd> - Como capturar imágenes desde un Webcam con WebRTC.</dd> - <dt> - <a href="/es/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">API de MediaStream</a></dt> - <dd> - Descripción de la API que soporta la creación y manipulación de flujos de medios.</dd> - <dt> - <a href="/es/docs/Web/API/Navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt> - <dd> - La función del navegador que permite el acceso a dispositivos de medios del sistema.</dd> - <dd> - </dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">Ver todo...</a></span></p> - <h2 class="Tools" id="Ejemplos">Ejemplos</h2> - <ul> - <li><a href="http://idevelop.github.com/ascii-camera/" title="http://idevelop.github.com/ascii-camera/">ASCII camera</a></li> - </ul> - </td> - <td> - <h2 class="Community" id="Community" name="Community">Obteniendo ayuda de la comunidad</h2> - <p>Cuando desarrolles sitios y aplicaciones que tomen ventaja de las tecnologías de WebRTC, puede ser muy útil ponerse en contacto con otras personas haciendo lo mismo.</p> - <ul> - <li>Consulta el tópico <em>Media</em> en el foro: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li> - </ul> - <ul> - <li>Pregunta en el canal IRC de Media de Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li> - </ul> - <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">No olvides la <em>netiqueta</em>...</a></span></p> - <br> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2> - <ul> - <li><a href="/es/docs/Usando_audio_y_video_con_HTML5" title="/es/docs/Usando_audio_y_video_con_HTML5">Usando audio y video con HTML5</a></li> - </ul> - <h2 class="Tools" id="Recursos">Recursos</h2> - <ul> - <li><a href="http://www.w3.org/TR/webrtc/" title="WebRTC specification">WebRTC Specification</a></li> - <li><a href="http://mozilla.github.io/webrtc-landing/" title="http://mozilla.github.io/webrtc-landing/">WebRTC Test Landing Page</a></li> - </ul> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/es/conflicting/web/api/websockets_api/index.html b/files/es/conflicting/web/api/websockets_api/index.html deleted file mode 100644 index 6250ba53c0..0000000000 --- a/files/es/conflicting/web/api/websockets_api/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: WebSockets -slug: conflicting/Web/API/WebSockets_API -tags: - - WebSockets - - para_revisar -original_slug: WebSockets ---- -<p><span><span style="">{{ SeeCompatTable () }}</span></span></p> -<p><span><span style="">WebSockets es una tecnología que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor.</span></span> <span><span style="">Con esta API, puedes enviar mensajes a un servidor y recibir respuestas por eventos sin tener que consultar al servidor.</span></span></p> -<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Documentation"><a><span><span style="">Documentación</span></span></a></h4> <dl> <dt><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_client_applications"><span><span style="">Cómo escribir aplicaciones para cliente WebSocket</span></span></a></dt> <dd><span><span style="">Una guía tutorial sobre cómo escribir clientes WebSocket para ejecutarse en el navegador.</span></span></dd> <dt><a href="/en/WebSockets/WebSockets_reference" title="https://developer.mozilla.org/en/WebSockets/WebSockets_reference"><span><span style="">Referencia WebSockets</span></span></a></dt> <dd><span><span style="">Una referencia a la API del lado del cliente WebSocket.</span></span></dd> <dt><a href="/en/WebSockets/The_WebSocket_protocol" title="https://developer.mozilla.org/en/WebSockets/The_WebSocket_protocol"><span><span style="">El protocolo WebSocket</span></span></a></dt> <dd><span><span style="">Una referencia al protocolo de WebSocket.</span></span></dd> <dt><a href="/en/WebSockets/Writing_WebSocket_servers" title="https://developer.mozilla.org/en/WebSockets/Writing_WebSocket_servers"><span><span style="">Cómo escribir servidores WebSocket</span></span></a></dt> <dd><span><span style="">Una guía sobre cómo escribir el código del lado del servidor para manejar el protocolo WebSocket.</span></span></dd> </dl> <p><a href="/Special:Tags?tag=WebSockets&language=en" title="https://developer.mozilla.org/Special:Tags?tag=WebSockets&language=en"><span></span></a><a><span><span style="">Ver todas</span></span></a></p> </td> <td> <h4 id="Tools"><span><span style="">Herramientas</span></span></h4> <ul> <li><span><span style=""><a class=" external" href="http://socket.io/" title="http://socket.io/">Socket.</a><a class=" external" href="http://www.google.com/url?q=http%3A%2F%2Fsocket.io&sa=D&sntz=1&usg=AFQjCNHh469AGdVlfIU6_sHUVrgvsaDIaQ">IO</a>:</span></span><span><span style="">una potente API multiplataforma de WebSocket para <a class=" external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>.</span></span></li> <li><span><span style=""><a class=" link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a> : una implementación de la API del servidor WebSocket <a class=" external" href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a> .</span></span></li> </ul> <p> </p> <h4 id="Related_Topics"><span><span style="">Temas relacionados</span></span></h4> <dl> <dd><span><span style=""><a href="/en/AJAX" title="https://developer.mozilla.org/en/AJAX">AJAX</a> , <a href="/en/JavaScript" title="https://developer.mozilla.org/en/JavaScript">JavaScript</a></span></span></dd> </dl> </td> </tr> </tbody> -</table> -<h2 id="Consulta_también"><span><span style="">Consulta también</span></span></h2> -<ul> <li><a class=" external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/"><span><span style="">Especificación de la API de WebSocket</span></span></a></li> <li><a href="/en/Server-sent_events" title="https://developer.mozilla.org/en/Server-sent_events"><span><span style="">Eventos enviados por el servidor </span></span></a></li> -</ul> -<h2 id="Compatibilidad_de_los_navegadores"><span><span style="">Compatibilidad de los navegadores</span></span></h2> -<p><span><span style="">{{ CompatibilityTable () }}</span></span></p> -<div id="compat-desktop"> -<table class="compat-table"> <tbody> <tr> <th><span><span style="">Característica</span></span></th> <th><span><span style="">Chrome</span></span></th> <th><span><span style="">Firefox (Gecko)</span></span></th> <th><span><span style="">Internet Explorer</span></span></th> <th><span><span style="">Opera</span></span></th> <th><span><span style="">Safari</span></span></th> </tr> <tr> <td><span><span style="">Compatibilidad con la versión -76 {{ obsolete_inline () }}</span></span></td> <td><span><span style="">6</span></span></td> <td><span><span style="">{{ CompatGeckoDesktop ("2.0") }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">11.00 (desactivado)</span></span></td> <td><span><span style="">5.0.1</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 7</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td> <p><span><span style="">{{ CompatGeckoDesktop ("6.0") }}</span></span></p> <div class="note"><span><span style="">usa <code>MozWebSocket</code> .</span></span></div> </td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> <td><span><span style="">{{ CompatNo () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 10</span></span></td> <td><span><span style="">14</span></span></td> <td> <p><span><span style="">{{ CompatGeckoDesktop ("7.0") }}</span></span></p> <div class="note"><span><span style="">usa MozWebSocket .</span></span></div> </td> <td><span><span style="">HTML5 Labs</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> </tr> </tbody> -</table> -</div> -<div id="compat-mobile"> -<table class="compat-table"> <tbody> <tr> <th><span><span style="">Característica</span></span></th> <th><span><span style="">Android</span></span></th> <th><span><span style="">Firefox Mobile (Gecko)</span></span></th> <th><span><span style="">IE Mobile</span></span></th> <th><span><span style="">Opera Mobile</span></span></th> <th><span><span style="">Safari Mobile</span></span></th> </tr> <tr> <td><span><span style="">Compatibilidad con la versión -76 {{ obsolete_inline () }}</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 7</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> <tr> <td><span><span style="">Compatibilidad con el protocolo de la versión 8 (borrador 10 de IETF)</span></span></td> <td><span><span style="">{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatGeckoMobile ("7.0") }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> <td><span><span>{{ CompatUnknown () }}</span></span></td> </tr> </tbody> -</table> -</div> -<h3 id="Notas_para_Gecko"><span><span style="">Notas para Gecko</span></span></h3> -<p><span><span style="">El soporte de WebSockets en Firefox sigue de cerca el desarrollo de la especificación WebSocket.</span></span> <span><span style="">Firefox 6 implementa la versión 7 del protocolo subyacente, mientras que Firefox 7 implementa la versión 8 (según lo especificado por el borrador 10 de IETF).</span></span> <span><span style="">Firefox Mobile recibió el soporte de WebSocket en Firefox móvil 7.0.</span></span></p> -<div class="geckoVersionNote"> -<p><span><span style="">{{ gecko_callout_heading("6.0") }}</span></span></p> -<p><span><span style="">Antes de Gecko 6.0 {{ geckoRelease ("6,0 ") }}, hubo, incorrectamente, un objeto <code>WebSocket</code> que algunos sitios creyeron que implicaba que los servicios <code>WebSocket</code> no estaban prefijados. Este objeto se ha cambiado a <code>MozWebSocket</code> .</span></span></p> -</div> -<div class="geckoVersionNote"> -<p><span><span style="">{{ gecko_callout_heading("7.0") }}</span></span></p> -<p><span><span style="">A partir de Gecko 7.0 {{ geckoRelease ("7,0 ") }}, la preferencia <code>network.websocket.max-connections</code> se usa para determinar el número máximo de conexiones WebSocket que pueden estar abiertas a la vez.</span></span> <span><span style="">El valor predeterminado es 200.</span></span></p> -</div> -<div class="warning"><span><span style="">Advertencia: entre otras cosas, una razón clave por la que WebSockets está desactivado por defecto es el descubrimiento de un <a class=" external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">problema de seguridad en el diseño del protocolo</a>.</span></span> <span><span style="">En este momento no se recomienda utilizar WebSockets en las versiones de Firefox en un entorno de producción.</span></span> <span><span style="">Si aun así deseas experimentar con WebSockets, puedes hacerlo abriendo about: config y estableciendo la preferencia network.websocket.enabled en true.</span></span> <span><span style="">También tendrás que establecer la preferencia network.websocket.override-security-block en true para permitir la inicialización de una conexión WebSocket.</span></span></div> -<p><span><span style="">{{ HTML5ArticleTOC () }}</span></span></p> -<p><span><span style="">{{ languages ( {"en": "en/WebSockets", "zh-tw": "zh_tw/WebSockets"} ) }}</span></span></p> diff --git a/files/es/conflicting/web/api/window/localstorage/index.html b/files/es/conflicting/web/api/window/localstorage/index.html deleted file mode 100644 index d4307e30a4..0000000000 --- a/files/es/conflicting/web/api/window/localstorage/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: LocalStorage -slug: conflicting/Web/API/Window/localStorage -tags: - - Almacenamiento en Navegador - - Almacenamiento local -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage -original_slug: Web/API/Storage/LocalStorage ---- -<p><code>localStorage</code> (almacenamiento local) es lo mismo que<code> <a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a> </code>(almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. <code>localStorage</code> se introdujo en la version Firefox 3.5.</p> - -<div class="note"><strong>Nota:</strong> Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar <em>datos </em>de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.</div> - -<pre class="brush:js notranslate" style="font-size: 14px;">// Guardar datos al almacenamiento local actual -localStorage.setItem("nombredeusuario", "John"); - -// Acceder a datos almacenados -alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));</pre> - -<p class="note">La persistencia de <code>localStorage</code> lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en <a href="http://codepen.io/awesom3/pen/Hlfma">este tutorial en Codepen</a>.</p> - -<h4 id="Compatibilidad" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad</h4> - -<p>Los objetos de <code>Storage</code> (almacenamiento) son una adición reciente al estándar, por lo que pueden no estar presentes en todos los navegadores. Esto se puede solucionar si introduce uno de los dos códigos al principio de sus <em>scripts</em>, permitiendo el uso de el objeto <code>localStorage</code> en implementaciones que no lo soportan de forma nativa.</p> - -<p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero hace uso de cookies.</p> - -<pre class="brush:js notranslate" style="font-size: 14px;">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - -<div class="note"><strong>Nota:</strong> El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div> - -<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se pasará a ser un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div> - -<p>Esta es otra imitación menos exacta de el objeto <code>localStorage</code>, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (<strong>probado y funcional incluso en Internet Explorer 6</strong>). También hace uso de cookies.</p> - -<pre class="brush:js notranslate" style="font-size: 14px;">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - -<div class="note"><strong>Nota:</strong> El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div> - -<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se volverá un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div> - -<h4 id="Compatibilidad_y_relación_con_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad y relación con globalStorage</h4> - -<p class="note"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, con la excepción de que tiene un ámbito de origen HTML5 (<em>esquema </em>+ <em>nombre del host </em>+ <em>puerto no estandar</em>), y <code>localStorage</code> es una instancia de <code>Storage</code>, al contrario que <code>globalStorage[location.hostname]</code>, que es una instancia de <code>StorageObsolete</code>, como se explica más adelante. Por ejemplo, <a class="external" href="http://example.com" rel="freelink">http://ejemplo.com</a> no puede acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://ejemplo.com,</a> pero los dos pueden acceder al mismo elemento de <code>globalStorage</code>. --<code>localStorage</code> es una interfaz estándar mientras que <code>globalStorage</code> no lo es, así que no se debe depender de ella.</p> - -<p>Nótese que al establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code>, y al extender <code>Storage.prototype</code> no afecta a los elementos de <code>globalStorage</code>; sólo al extender <code>StorageObsolete.prototype</code> los afecta.</p> - -<h4 id="El_formato_de_Storage">El formato de Storage</h4> - -<p>Las claves y valores de <code>Storage</code> se guardan en el formato UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a>, que usa 2 bytes por carácter.</p> diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 881424841a..0000000000 --- a/files/es/conflicting/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: WindowBase64 -slug: conflicting/Web/API/WindowOrWorkerGlobalScope -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 -original_slug: Web/API/WindowBase64 ---- -<p>{{APIRef}}</p> -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> -<h2 id="Properties">Properties</h2> -<p><em>This helper neither defines nor inherits any properties.</em></p> -<h2 id="Methods">Methods</h2> -<p><em>This helper does not inherit any methods.</em></p> -<dl> - <dt> - {{domxref("WindowBase64.atob()")}}</dt> - <dd> - Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt> - {{domxref("WindowBase64.btoa()")}}</dt> - <dd> - Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> -<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('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</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>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html deleted file mode 100644 index bede3a0c57..0000000000 --- a/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: WindowTimers -slug: conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a -tags: - - API -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers -original_slug: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<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('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</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>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html deleted file mode 100644 index 7630d77e37..0000000000 --- a/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: WebAPI -slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 -tags: - - Apps - - DOM - - Firefox OS - - Mobile - - NeedsTranslation - - TopicStub -translation_of: Web/API -translation_of_original: WebAPI -original_slug: WebAPI ---- -<p><strong>WebAPI</strong> es un termino usado para referirse al conjunto de APIs compatibles y de acceso a los dispositivos que permite a las Web apps y contenido acceder al hardware del dispositivo (como el estado de la batería o la vibración de hardware), al igual que acceso a información almacenada en el dispositivo (como el calendario o la lista de contactos). Agregando estas APIs, esperamos expandir lo que la Web puede hacer hoy y solo plataformas propietarias fueron capaces de hacer en el pasado.</p> - -<div class="note"> -<p><strong>Nota:</strong> More of this documentation has been written than it looks like; links are not all added yet. We're actively working on improving this and expect to see things much better over the next couple of weeks. See the <a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">WebAPI doc status page</a>, where we're tracking work on WebAPI docs.</p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">APIs DE COMUNICACIÓN</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">API de información de la red</a></dt> - <dd>Provee información básica sobre la conexión de red actual, como la velocidad de conexión.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt> - <dd>La API de WebBluetooth provee acceso a bajo nivel al hardware de Bluetooth del dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">API de conexión móvil</a> {{NonStandardBadge}}</dt> - <dd>Expone información sobre la conectividad celular del dispositivo, como la fuerza de la señal, información del operador y así suscesivamente.</dd> - <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">API de estadísticas de red</a></dt> - <dd>Monitorea la data usada y expone esta data a aplicaciones privilegiadas.</dd> - <dt><a href="/en-US/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a></dt> - <dd>Proporciona sockets de bajo nivel y soporte SSL.</dd> - <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telefonía</a> {{NonStandardBadge}}</dt> - <dd>Permite a las apps contestar llamadas telefónicas y usar la interfaz de usuario de telefonía integrada.</dd> - <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> - <dd>Permite a las apps enviar y recibir mensajes de texto, así como también acceder y manejar los mensajes almacenados en el dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">API de información de WiFi</a></dt> - <dd>API privilegiada, la cual provee información sobre la fuerza de la señal, el nombre de la red actual, redes wifi disponibles, y más.</dd> -</dl> - -<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">APIS de acceso a Hardware</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">API de sensor de luz ambiental</a></dt> - <dd>Provee acceso al sensor de luz ambiental, el cual permite a una app detectar el nivel de luz ambiental proximos al dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">API de estado de batería</a></dt> - <dd>Provee información sobre el nivel de carga de la batería y si el dispositivo se encuentra conectado a un punto de carga o no.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">API de Geolocalización</a></dt> - <dd>Provee información sobre la ubicación física del dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">API de bloqueo de puntero</a></dt> - <dd>Permite a las apps bloquear acceso al mouse y obtener acceso a los deltas de movimiento en lugar de coordenadas absolutas; esto es ideal para juegos.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">API de proximidad</a></dt> - <dd>Permite determinar la proximidad del dispositivo a objetos cercanos, como el rostro del usuario.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">API de orientación del dispositivo</a></dt> - <dd>Provee notificaciones cuando la orientación del dispositivo cambia.</dd> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">API de orientación de pantalla</a></dt> - <dd>Provee notificaciones cuando cambia la orientación de la pantalla. También puedes usar esta API para dejar que su app indique que orientación prefiere.</dd> - <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">API de Vibración</a></dt> - <dd>Permite a las apps controlar la vibración de hardware del dispositivo para cosas como retroalimentación háptica en juegos. Esto <strong>no</strong> es pensado para cosas como vibraciones de notificaciones, para ello revisa la <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarma</a>.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">API de Cámara</a> {{NonStandardBadge}}</dt> - <dd>Permite a las apps tomar fotografías y/o grabar videos usaando la cámara integrada del dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">API de administración de energía </a>{{NonStandardBadge}}</dt> - <dd>Permite a las apps encender o apagar la pantalla, el CPU, la energía del dispositivo, y así sucesivamente. También provee soporte para escuchar e inspeccionar eventos de bloqueo de recursos.</dd> -</dl> - -<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> -</div> - -<div class="section"> -<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">APIs de administración de información</h2> - -<dl> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">API de identificador de archivos</a></dt> - <dd>Provee soporte para escribir archivos con soporte de bloqueo.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>Almacenamiento de información estructurada del lado cliente con soporte para búsquedas de alto rendimiento.</dd> -</dl> - -<h2 class="Documentation" id="Other_APIs" name="Other_APIs">OtrAS APIs</h2> - -<dl> - <dt><a href="/es/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarma</a></dt> - <dd>Permite a las apps programar notificaciones.</dd> - <dd>También proporciona soporte para el lanzamiento de una aplicación de forma automática en un momento determinado.</dd> - <dt><a href="/en-US/docs/Apps" title="Apps">Apps API</a></dt> - <dd>La API de aplicaciones web abiertas permite soporte para instalar y administrar aplicaciones web. Y además, permite a las aplicaciones determinar información de pago.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>API de navegador</strong></a></dt> - <dd>Provee soporte para construir un navegador web usando tecnologías web completamente (en esencia, un navegador dentro de un navegador).</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> - <dd>Permite a las apps recibir información cuando el usuario no está usando el dispositivo activamente.</dd> - <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">API de permisos</a></dt> - <dd>Administra permisos de las apps en una ubicación central. Usado por la app de Ajustes.</dd> - <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> - <dd>Permite a la plataforma enviar mensajes de notificación a aplicaciones específicas.</dd> - <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de tiempo/reloj</a> {{NonStandardBadge}}</dt> - <dd>Provee soporte para ajustar el tiempo actual. La zona horaria es establecida usando la <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">API de ajustes</a>.</dd> - <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> - <dd>Permite a una app delegar una actividad a otra app; por ejemplo, una app podría preguntar a otra app seleccionar (o crear) y devolver una foto. Normalmente el usuario es capaz de configurar que aplicaciones se utilizan para que actividad.</dd> - <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> - <dd>Permite a contenido web iniciar pago y reembolsos por bienes virtuales.</dd> -</dl> - -<h2 class="Community" id="Community" name="Community">comunidad WebAPI</h2> - -<p>Si necesitas ayuda con estas APIs, existen varias maneras en la que puedes hablar con otros desarrolladores que las utilizan.</p> - -<ul> - <li>Consulta en el foro de WebAPI: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> - <li>Visita el canal de IRC de WebAPI: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> -</ul> - -<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">temas Relacionados</h2> - -<ul> - <li>El <a href="/es/docs/DOM" title="Document Object Model (DOM)">Modelo de Objetos del Documento (DOM)</a> es la representación estructural del documento HTML.</li> - <li><a href="/es/docs/JavaScript" title="JavaScript">JavaScript</a> - Lenguaje de Script para la Web.</li> - <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: Una lista de WebAPIs y el estado de su documentación.</li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/es/conflicting/web/css/@viewport/index.html b/files/es/conflicting/web/css/@viewport/index.html deleted file mode 100644 index ee1ddb6a65..0000000000 --- a/files/es/conflicting/web/css/@viewport/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: height -slug: conflicting/Web/CSS/@viewport -tags: - - Descriptor CSS - - Referencia -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height -original_slug: Web/CSS/@viewport/height ---- -<div>{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El descriptor CSS <code><strong>height</strong></code> es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.</p> - -<p>Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="brush: css">/* Un valor */ -height: auto; -height: 320px; -height: 15em; - -/* Dos valores */ -height: 320px 200px; -</pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd> - <dt><code><length></code></dt> - <dd>Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.</dd> - <dt><code><percentage></code></dt> - <dd>Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd> -</dl> - -<h3 id="Sintaxis_formal">Sintaxis formal</h3> - -{{csssyntax}} - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: css">@viewport { - height: 500px; -}</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">Comentarios</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</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>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>29 (usando una bandera)</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</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>4.4</td> - <td>29</td> - <td>{{CompatNo}}</td> - <td>10{{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html deleted file mode 100644 index 87d024b474..0000000000 --- a/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: width -slug: conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width -original_slug: Web/CSS/@viewport/width ---- -<div>{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El descriptor CSS <strong>width</strong> es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.</p> - -<p>Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="brush: css">/* Ejemplo con un valor de viewport: */ -@viewport { - width: 320px; -} - -/* Ejemplo con dos valores de viewport: */ -@viewport { - width: 320px, 120px; -} - -</pre> - -<p> </p> - -<h3 id="Values" name="Values">Valores</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd> - <dt><code><length></code></dt> - <dd>Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.</dd> - <dt><code><percentage></code></dt> - <dd>Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.</dd> -</dl> - -<h3 id="Sintaxis_formal">Sintaxis formal</h3> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">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 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</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" style="height: 93px; width: 950px;"> - <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>29 (usando una bandera)</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table" style="height: 93px; width: 948px;"> - <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>4.4</td> - <td>29</td> - <td>{{CompatNo}}</td> - <td>10{{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/es/conflicting/web/css/_colon_placeholder-shown/index.html b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html deleted file mode 100644 index a29af2de30..0000000000 --- a/files/es/conflicting/web/css/_colon_placeholder-shown/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: conflicting/Web/CSS/:placeholder-shown -tags: - - CSS - - Marcador de Posición INPUT - - Marcador de posición - - No estándar(2) - - Placeholder - - Pseudo-Clase CSS - - Referencia CSS -translation_of: Web/CSS/:placeholder-shown -translation_of_original: Web/CSS/:-moz-placeholder -original_slug: Web/CSS/:-moz-placeholder ---- -<div class="note"><strong>Nota:</strong> La pseudo-clase CSS <code>:-moz-placeholder</code> está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.</div> - -<div class="note"><strong>Nota: </strong> El CSSWG ha decidido introducir <code>:placeholder-shown</code>. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre. {{bug(1069012)}}</div> - -<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p><code>La </code><a href="/es/docs/CSS/Pseudo-classes">pseudo-clase </a><code>:-moz-placeholder</code> representa a cualquier elemento que muestre un <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder)</a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Ejemplo_básico">Ejemplo básico</h3> - -<p>Este ejemplo le da estilo a un <em>placeholder</em> (marcador de posición) haciendo que el color del texto sea verde.</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> - <title>Placeholder demo</title> - <style type="text/css"> - input::-moz-placeholder { - color: green; - } - input:-moz-placeholder { - color: green; - } - </style> -</head> -<body> - <input id="test" placeholder="Placeholder text!"> -</body> -</html> -</pre> - -<p>{{EmbedLiveSample("Basic_example")}}</p> - -<h3 id="Desbordamiento">Desbordamiento</h3> - -<p>En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS <code>text-overflow: ellipsis</code> para envolverlo.</p> - -<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; } -::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */ -input:-moz-placeholder { text-overflow: ellipsis; } -</pre> - -<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.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>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>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementado en {{bug("457801")}}.</p> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li><a href="/es/docs/Web/Guide/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html b/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html deleted file mode 100644 index 41ba68e25e..0000000000 --- a/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: ':-ms-input-placeholder' -slug: conflicting/Web/CSS/:placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891 -tags: - - CSS - - No estándar(2) - - Pseudo clase CSS - - Referencia -translation_of: Web/CSS/:placeholder-shown -translation_of_original: Web/CSS/:-ms-input-placeholder -original_slug: Web/CSS/:-ms-input-placeholder ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>propietaria y no estándar <code>:-ms-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder) </a> de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>El siguiente ejemplo destaca con un estilo personalizado los campos <em>"Branch"</em> y código "<em>ID"</em>. El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.</p> - -<h3 id="HTML">HTML</h3> - -<pre><form id="test"> - <p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p> - <p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p> - <p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p> - <input type="submit" /> -</form></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input { - background-color:#E8E8E8; - color:black; } -/* placeholder only style */ -input.studentid:-ms-input-placeholder { - font-style:italic; - color: red; - background-color: yellow; -}</pre> - -<h3 id="Resultado">Resultado</h3> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación aunque Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">una descripción en MSDN.</a></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 (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>10</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>Firefox OS</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>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html deleted file mode 100644 index 99c5ec97ee..0000000000 --- a/files/es/conflicting/web/css/_doublecolon_placeholder/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: conflicting/Web/CSS/::placeholder -tags: - - CSS - - No estándar(2) - - Pseudo-elemento CSS - - Referencia CSS -translation_of: Web/CSS/::placeholder -translation_of_original: Web/CSS/::-moz-placeholder -original_slug: Web/CSS/::-moz-placeholder ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<div class="note"><strong>Nota:</strong> El pseudo-elemento <code>::-moz-placeholder</code> fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>::-moz-placeholder</code> sirve para seleccionar cualquier elemento de un formulario que esté mostrando un <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text) </a>. Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).</p> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<pre class="brush:html"><input id="test" placeholder="Placeholder text!"> -</pre> - -<h3 id="Contenido_CSS">Contenido CSS</h3> - -<pre class="brush:css">input::-moz-placeholder { - color: green; -} -</pre> - -<p>Obtendremos el siguiente resultado:</p> - -<p>{{EmbedLiveSample("Example")}}</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 (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></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>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox aplica un estilo por defecto de <code>{{cssxref("opacity")}}: 0.54</code> al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.</p> - -<p>La implementación previa en el motor Gecko era como la pseudo-clase {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.</p> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html deleted file mode 100644 index 54824a3934..0000000000 --- a/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: '::-webkit-input-placeholder' -slug: conflicting/Web/CSS/::placeholder_70bda352bb504ebdd6cd3362879e2479 -tags: - - CSS - - NeedsExample - - No estándar(2) - - Pseudo-elemento - - Pseudo-elemento CSS - - Referencia - - Referencia CSS -translation_of: Web/CSS/::placeholder -translation_of_original: Web/CSS/::-webkit-input-placeholder -original_slug: Web/CSS/::-webkit-input-placeholder ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> no estándar y propietario <code>::-webkit-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text)</a> de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</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 (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</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</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index c2fb316660..0000000000 --- a/files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: Usando las cajas flexibles CSS -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">La propiedad <strong>Flexible Box</strong>, o <strong>flexbox</strong>, de CSS3 es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Layout_mode">modo de diseño</a> que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad <span style="font-family: courier new,andale mono,monospace;">float</span>, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.</span></p> - -<p>Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.</p> - -<div class="note"><strong>Nota:</strong> Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo <code>-webkit</code>; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.</div> - -<h2 id="El_concepto_de_cajas_flexibles">El concepto de "cajas flexibles"</h2> - -<p>Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.</p> - -<p>El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.</p> - -<h2 id="Vocabulario_de_cajas_flexibles">Vocabulario de "cajas flexibles"</h2> - -<p>Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una <code>flex-direction</code> de tipo <code>row</code>, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.</p> - -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> - -<dl> - <dt>Contenedor flexible (Flex container)</dt> - <dd>El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores <code>flex</code> o <code>inline-flex</code> en la propiedad <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>.</dd> - <dt>Elemento flexible (Flex item)</dt> - <dd> - <p>Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.</p> - </dd> - <dt>Ejes</dt> - <dd> - <p>Cada diseño de "caja flexible" sigue dos ejes. El <strong>eje principal</strong> es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El <strong>eje secundario</strong> es el eje perpendicular al <strong>eje principal</strong>.</p> - - <ul> - <li>La propiedad <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> establece el eje principal.</li> - <li>La propiedad <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.</li> - <li>La propiedad <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.</li> - <li>La propiedad <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por <code>align-items.</code></li> - </ul> - </dd> - <dt>Direcciones</dt> - <dd> - <p>Los lados <strong>inicio principal</strong>/<strong>fin principal (main start/main end) </strong>e <strong>inicio secundario</strong>/<strong>fin </strong><strong>secundario (cross start/cross end)</strong> del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por <code>writing-mode</code> (izquierda-a-derecha, derecha-a-izquierda, etc.).</p> - - <ul> - <li>La propiedad <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> asigna elementos a grupos ordinales y determina qué elementos aparecen primero.</li> - <li>La propiedad <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> combina las propiedades <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> y <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> para colocar los elementos flexibles.</li> - </ul> - </dd> - <dt>Líneas</dt> - <dd> - <p>Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.</p> - </dd> - <dt>Dimensiones</dt> - <dd> - <p>Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son <strong>tamaño principal (main size)</strong> and <strong>tamaño secundario (cross size),</strong> que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.</p> - - <ul> - <li>La propiedades <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> y <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> tienen un nuevo valor, <code>auto</code> que establece el tamaño mínimo de un elemento flexible.</li> - <li>La propiedad <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> combina las propiedades <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, y <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> para establecer el grado de flexibilidad de los elementos flexibles.</li> - </ul> - </dd> -</dl> - -<h2 id="Diseñando_una_caja_flexible">Diseñando una "caja flexible"</h2> - -<p>Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad <a href="/en/CSS/display" title="/en/CSS/display">display</a> así:</p> - -<pre class="brush: css">display : flex</pre> - -<p>o</p> - -<pre class="brush: css">display : inline-flex</pre> - -<p>Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor <code>flex</code> hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor <code>inline-flex</code> hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.</p> - -<div class="note"><strong>Nota:</strong> Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, <code>display : -webkit-flex</code>.</div> - -<h2 id="Consideraciones_de_los_elementos_flexibles">Consideraciones de los elementos flexibles</h2> - -<p>El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad <code style="color: rgb(93,86,54); font-size: 14px;">display:none</code>.</p> - -<p>Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del <strong>inicio principal (main start)</strong> de su contenedor flexible.</p> - -<p>Actualmente, debido a un problema conocido, asignar <code style="font-size: 14px;">visibility:collapse</code> a un elemento flexible causa que sea tratado como si fuera <code style="font-size: 14px;">display:none</code> en vez de lo que se supone que debería ocurrir, es decir, como si fuera <code style="font-size: 14px;">visibility:hidden</code>. La alternativa mientras se resuelve este problema es usar <code>visibility:hidden</code> para elementos flexibles que deban comportarse como <code>visibility:collapse</code>.</p> - -<p>Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes <code>auto</code> se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.</p> - -<p>Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa <code>min-width:auto</code> y/o <code>min-height:auto</code>. Para los elementos flexibles, el valor de atributo <code>auto</code> calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}} y {{cssxref("min-height")}} para más detalles al respecto.</p> - -<p>Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades <code>align-</code>, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades <code>justify-</code>, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar <code>justify-content</code> con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "<span style="line-height: inherit;">centrado-basado-en-márgenes</span><span style="line-height: inherit;">" en el eje principal al reemplazar la propiedad </span><code style="font-size: 14px; line-height: inherit;">justify-content</code><span style="line-height: inherit;">.</span></p> - -<p>Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. </p> - -<h2 id="Propiedades_de_las_cajas_flexibles">Propiedades de las "cajas flexibles"</h2> - -<h3 id="Propiedades_que_no_afectan_a_las_cajas_flexibles">Propiedades que no afectan a las "cajas flexibles"</h3> - -<p>Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.</p> - -<ul> - <li>Propiedades column-* del <a href="/en/CSS/Using_CSS_multi-column_layouts" title="/en/CSS/Using_CSS_multi-column_layouts">Módulo Multicol</a> no tienen ningún efecto en un elemento flexible.</li> - <li>{{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar <code>float</code> causa que la propiedad <code>display</code> del elemento se comporte como <code>block</code>.</li> - <li>{{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Ejemplo_básico_flex">Ejemplo básico "flex"</h3> - -<p>Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. </p> - -<pre class="brush:html;"><!DOCTYPE html> -<html lang="en"> - <head> - <style> - - .flex - { - /* basic styling */ - width: 350px; - height: 200px; - border: 1px solid #555; - font: 14px Arial; - - /* flexbox setup */ - display: -webkit-flex; - -webkit-flex-direction: row; - - display: flex; - flex-direction: row; - } - - .flex > div - { - -webkit-flex: 1 1 auto; - flex: 1 1 auto; - - width: 30px; /* To make the transition work nicely. (Transitions to/from - "width:auto" are buggy in Gecko and Webkit, at least. - See http://bugzil.la/731886 for more info.) */ - - -webkit-transition: width 0.7s ease-out; - transition: width 0.7s ease-out; - } - - /* colors */ - .flex > div:nth-child(1){ background : #009246; } - .flex > div:nth-child(2){ background : #F1F2F1; } - .flex > div:nth-child(3){ background : #CE2B37; } - - .flex > div:hover - { - width: 200px; - } - - </style> - - </head> - <body> - <p>Flexbox nuovo</p> - <div class="flex"> - <div>uno</div> - <div>due</div> - <div>tre</div> - </div> - </body> -</html></pre> - -<h3 id="Ejemplo_de_Diseño_del_Santo_Gríal">Ejemplo de "Diseño del Santo Gríal"</h3> - -<p>Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.</p> - -<pre class="brush:html;"> -<!DOCTYPE html> -<html lang="en"> - <head> - <style> - - body { - font: 24px Helvetica; - background: #999999; - } - - #main { - min-height: 800px; - margin: 0px; - padding: 0px; - display: -webkit-flex; - display: flex; - -webkit-flex-flow: row; - flex-flow: row; - } - - #main > article { - margin: 4px; - padding: 5px; - border: 1px solid #cccc33; - border-radius: 7pt; - background: #dddd88; - -webkit-flex: 3 1 60%; - flex: 3 1 60%; - -webkit-order: 2; - order: 2; - } - - #main > nav { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - -webkit-flex: 1 6 20%; - flex: 1 6 20%; - -webkit-order: 1; - order: 1; - } - - #main > aside { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - -webkit-flex: 1 6 20%; - flex: 1 6 20%; - -webkit-order: 3; - order: 3; - } - - header, footer { - display: block; - margin: 4px; - padding: 5px; - min-height: 100px; - border: 1px solid #eebb55; - border-radius: 7pt; - background: #ffeebb; - } - - /* Too narrow to support three columns */ - @media all and (max-width: 640px) { - - #main, #page { - -webkit-flex-flow: column; - flex-flow: column; - } - - #main > article, #main > nav, #main > aside { - /* Return them to document order */ - -webkit-order: 0; - order: 0; - } - - #main > nav, #main > aside, header, footer { - min-height: 50px; - max-height: 50px; - } - } - - </style> - </head> - <body> - <header>header</header> - <div id='main'> - <article>article</article> - <nav>nav</nav> - <aside>aside</aside> - </div> - <footer>footer</footer> - </body> -</html></pre> - -<h2 id="Área_de_juego">Área de juego</h2> - -<p>Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:</p> - -<ul> - <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> - <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> -</ul> - -<h2 id="Cosas_a_tener_en_mente">Cosas a tener en mente</h2> - -<p>El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".</p> - -<p>Las "cajas flexibles" se comportan en función del <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">modo de escritura</a> establecido. Esto siginifica que <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>fin principal</strong> (<strong>main end</strong>) se disponen de según la posición de <strong>inicio</strong> (<strong>start</strong>) y <strong>fin</strong> (<strong>end</strong>).</p> - -<p><strong>inicio secundario (cross start)</strong> y <strong>fin secundario</strong> (<strong>cross end)</strong> confían en la definición de la posición <strong>inicio</strong> (<strong>start)</strong> o <strong>antes</strong> (<strong>before)</strong> que depende del valor de <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p> - -<p>Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad <code>break-</code> lo permita. Las propiedades CSS3 <code>break-after</code>, <code>break-before</code> y <code>break-inside</code> así como las propiedades CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> y <code>page-break-inside</code> se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.</p> - -<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caraterí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</td> - <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> - {{ CompatGeckoDesktop("22.0") }}</td> - <td>21.0{{ property_prefix("-webkit") }}</td> - <td>10{{ property_prefix("-ms") }}(partial)</td> - <td>12.1</td> - <td>3.1{{ property_prefix("-webkit") }}(partial)<br> - 6.1{{ property_prefix("-webkit") }}<br> - 9</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caraterística</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> - {{ CompatGeckoMobile("22.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>10{{ property_prefix("-ms") }}(partial)<br> - 11</td> - <td>12.1</td> - <td> - <p>3.2{{ property_prefix("-webkit") }}(partial)<br> - 7.1{{ property_prefix("-webkit") }}<br> - 9.0</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Notas">Notas</h3> - -<p>[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.</p> - -<p>[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p> - -<p>[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.</p> - -<p>[4] Mientras que en la implementación inicial en Opera 12.10 <code>flexbox </code>no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.</p> - -<p>[5] Hasta Firefox 29, especificar <code>visibility: collapse</code> en un elemento flex causaba que fuera tratado como si fuera <code>display: none </code>en vez del comportamiento pretendido, tratándolo como si fuera <code>visibility: hidden</code>. El método alternativo sugerido es usar <code>visibility: hidden</code> para los elementos flex que debieran comportarse como si huberan sido designados <code>visibility: collapse</code>. Para más información, ver {{bug(783470)}}.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://github.com/philipwalton/flexbugs">El Proyecto Flexbugs</a> para información de errores en implementación de flexbox en navegadores.</li> -</ul> diff --git a/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html deleted file mode 100644 index e28553d037..0000000000 --- a/files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Usando flexbox para componer aplicaciones web -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -tags: - - Avanzado - - CSS - - Cajas Flexibles CSS - - Ejemplo - - Guía - - Web -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -original_slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web ---- -<p>{{CSSRef}}</p> - -<p>Usar <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">flexbox</a> puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">el posicionamiento absoluto</a>, y los <em>hacks</em> de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de <a href="/es/docs/Web/CSS">CSS</a>. Algunos ejemplos básicos de casos de uso:</p> - -<ul> - <li>Quieres centrar un elemento en la mitad de una página</li> - <li>Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro</li> - <li>Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla</li> -</ul> - -<p>Este artículo sólo aborda el uso de <em>flexbox</em> con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">la guía más general para usar cajas flexibles de CSS</a>.</p> - -<h2 id="Conceptos_básicos">Conceptos básicos</h2> - -<p>Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como <code>flex</code> y luego dando a la propiedad {{cssxref("flex-flow")}} el valor <code>row</code>, si deseas que los elementos fluyan horizontalmente, o el valor <code>column</code>, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor <code>wrap</code>.</p> - -<p>Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:</p> - -<ul> - <li>Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza <code>flex: none</code> que se expande a <code>0 0 auto</code>.</li> - <li>Si deseas explícitamente dimensionar un elemento, usa <code>flex: 0 0 <em>tamaño</em></code>. Por ejemplo: <code>flex 0 0 60px</code>.</li> - <li>Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza <code>flex: auto</code>. Se expande a <code>1 1 auto</code>.</li> -</ul> - -<p>Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.</p> - -<h2 id="Centrando_un_elemento_en_una_página">Centrando un elemento en una página</h2> - -<p>Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.</p> - -<h3 id="Contenido_CSS">Contenido CSS</h3> - -<pre class="brush: css;">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.horizontal-box { - display: flex; - flex-flow: row; -} -.spacer { - flex: auto; - background-color: black; -} -.centered-element { - flex: none; - background-color: white; -} -</pre> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<pre class="brush: html;"><div class="vertical-box"> - <div class="spacer"></div> - <div class="centered-element horizontal-box"> - <div class="spacer"></div> - <div class="centered-element">Centered content</div> - <div class="spacer"></div> - </div> - <div class="spacer"></div> -</div> -</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}</p> - -<h2 id="Haciendo_fluir_verticalmente_un_conjunto_de_contenedores">Haciendo fluir verticalmente un conjunto de contenedores</h2> - -<p>Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como <code>auto</code> y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como <code>none</code>.</p> - -<h3 id="Contenido_CSS_2">Contenido CSS</h3> - -<pre class="brush: css;highlight:[8,14,18]">.vertical-box { - display: flex; - height: 400px; - width: 400px; - flex-flow: column; -} -.fixed-size { - flex: none; - height: 30px; - background-color: black; - text-align: center; -} -.flexible-size { - flex: auto; - background-color: white; -} -</pre> - -<h3 id="Contenido_HTML_2">Contenido HTML</h3> - -<pre class="brush: html;"><div id="document" class="vertical-box"> - <div class="fixed-size"><button id="increase-size">Increase container size</button></div> - <div id="flexible-content" class="flexible-size"></div> - <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> -</div> -</pre> - -<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> - -<pre class="brush: js;">var height = 400; -document.getElementById('increase-size').onclick=function() { - height += 10; - if (height > 500) height = 500; - document.getElementById('document').style.height = (height + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - height -= 10; - if (height < 300) height = 300; - document.getElementById('document').style.height = (height + "px"); -}</pre> - -<h3 id="Resultado_2">Resultado</h3> - -<p>{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}</p> - -<p>Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.</p> - -<h2 id="Creando_un_contenedor_que_colapse_horizontalmente">Creando un contenedor que colapse horizontalmente</h2> - -<p>En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor <code>wrap</code>.</p> - -<h3 id="Contenido_CSS_3">Contenido CSS</h3> - -<pre class="brush: css;highlight:[4]">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="Contenido_HTML_3">Contenido HTML</h3> - -<pre class="brush: html;"><div id="container" class="horizontal-container"> - <div class="fixed-size">Element 1</div> - <div class="fixed-size">Element 2</div> - <div class="fixed-size">Element 3</div> -</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> -</pre> - -<h3 id="Contenido_JavaScript_2">Contenido JavaScript</h3> - -<pre class="brush: js;">var width = 300; - -document.getElementById('increase-size').onclick=function() { - width += 100; - if (width > 300) width = 300; - document.getElementById('container').style.width = (width + "px"); -} - -document.getElementById('decrease-size').onclick=function() { - width -= 100; - if (width < 100) width = 100; - document.getElementById('container').style.width = (width + "px"); -} -</pre> - -<h3 id="Resultado_3">Resultado</h3> - -<p>{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando cajas flexibles CSS</a></li> -</ul> diff --git a/files/es/conflicting/web/css/cursor/index.html b/files/es/conflicting/web/css/cursor/index.html deleted file mode 100644 index a1b674c1c7..0000000000 --- a/files/es/conflicting/web/css/cursor/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: '-moz-cell' -slug: conflicting/Web/CSS/cursor -tags: - - CSS -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell -original_slug: Web/CSS/-moz-cell ---- -<div>{{CSSRef}}{{obsolete_header}}</div> - -<p><em>¡No uses este valor!Don't use this value! </em> Usa el valor {{cssxref("cursor#cell","cell")}} en su lugar.</p> diff --git a/files/es/conflicting/web/css/font-variant/index.html b/files/es/conflicting/web/css/font-variant/index.html deleted file mode 100644 index 09f79f2844..0000000000 --- a/files/es/conflicting/web/css/font-variant/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: normal -slug: conflicting/Web/CSS/font-variant -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal -original_slug: Web/CSS/normal ---- -<h2 id="Sumario" name="Sumario">Sumario</h2> -<p>El valor <i>normal</i> en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.</p> -<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> -<p>En la propiedad <code>font-style:</code> <code>normal</code> establece que el tipo de fuente no es <code>italic</code> ni <code>oblique</code>.</p> -<p>El la propiedad <code>font-size:</code> <code>normal</code>se establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.</p> diff --git a/files/es/conflicting/web/css/width/index.html b/files/es/conflicting/web/css/width/index.html deleted file mode 100644 index ade93e4cf9..0000000000 --- a/files/es/conflicting/web/css/width/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: auto -slug: conflicting/Web/CSS/width -tags: - - CSS - - CSS:Referencias - - Todas_las_Categorías -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto -original_slug: Web/CSS/auto ---- -<p> -</p><p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a> -</p> -<h3 id="Resumen" name="Resumen"> Resumen </h3> -<p>Un valor computado automáticamente por el 'useragent.' -</p><p>Usando el valor <i>auto</i> en cualquier propiedad, dejamos al navegador que calcule el valor requerido. </p><p><br> -FIXME -</p> -<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> -<pre class="eval">div { - height: 600px; - border: 1px solid #000; -} -</pre> -<pre class="eval">div img { - height: auto; - border: 1px solid red; -} -</pre> -<h3 id="Se_utiliza_en" name="Se_utiliza_en"> Se utiliza en </h3> -<ul><li> {{ Cssxref("overflow") }} -</li><li> {{ Cssxref("cursor") }} -</li><li> {{ Cssxref("width") }} -</li><li> {{ Cssxref("marker-offset") }} -</li><li> {{ Cssxref("margin") }} -</li><li> margin-* (left|bottom|top|right|start|end) -</li><li> {{ Cssxref("bottom") }} -</li><li> {{ Cssxref("left") }} -</li><li> {{ Cssxref("table-layout") }} -</li><li> {{ Cssxref("z-index") }} -</li><li> {{ Cssxref("-moz-column-width") }} -</li></ul> -<p><br> -</p> -<div class="noinclude"> -<p><span class="comment">Categorías</span> -<span class="comment">Interwiki Languages</span> -</p> -</div> -{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/conflicting/web/guide/index.html b/files/es/conflicting/web/guide/index.html deleted file mode 100644 index e1fb2513bd..0000000000 --- a/files/es/conflicting/web/guide/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Desarrollo Web -slug: conflicting/Web/Guide -tags: - - Desarrollo_Web - - Todas_las_Categorías -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: Desarrollo_Web ---- -<p> -</p> -<div class="callout-box"><b><a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/WebSemantica">Guía Breve de Web Semántica</a></b> <br> -Una magnífica introducción al tema.</div> <div> -<div> -<p>El <b>Desarrollo Web</b> abarca todos los aspectos necesarios para desarrollar un sitio o aplicación Web. Esto implica múltiples tecnologías, la mayoría cuentan con una sección específica en este wiki. En esta sección trataremos el tema desde una perspectiva más general. -</p> -</div> -<table class="topicpage-table"> -<tbody><tr><td> -<h4 id="Documentaci.C3.B3n" name="Documentaci.C3.B3n"> <a>Documentación</a> </h4> -<dl><dt> <a class="external" href="http://www.w3c.es/Divulgacion/Guiasbreves/IndependenciaDispositivo">Guía Breve de Independencia de Dispositivo</a> -</dt><dd> <small>"hacer la Web universal y accesible para cualquier persona, en cualquier sitio, en cualquier momento y usando cualquier dispositivo"</small> -</dd></dl> -<dl><dt> <a href="es/Selecci%c3%b3n_de_modo_en_Mozilla">Selección de modo en Mozilla</a> -</dt><dd> <small>Este documento describe cómo Mozilla utiliza la declaración de DOCTYPE para determinar el modo de renderizado más apropiado para visualizar una página web. </small> -</dd></dl> -<dl><dt> <a href="es/Modo_casi_est%c3%a1ndar_de_Gecko">El modo casi estándar de Gecko</a> -</dt><dd> <small>Además de los modos tradicionales, estándar y quirks, el motor gecko nos ofrece este modo intermedio. Puede que te interese.</small> -</dd></dl> -<dl><dt> <a class="external" href="http://www.mozilla.org/docs/web-developer/faq.html">Mozilla Web Author FAQ (en)</a> -</dt><dd> <small>This document answers questions that Web authors ask frequently specifically in connection with Mozilla and other Gecko-based browsers such as Firefox.</small> -</dd></dl> -<p><span class="alllinks"><a>Ver más...</a></span> -</p> -</td> <td> -<h4 id="Comunidad" name="Comunidad"> Comunidad </h4> -<ul><li> En MozillaES -<ul><li> <a class="external" href="http://www.mozillaes.org/index.php?option=com_forum&Itemid=122&page=viewforum&f=13">Desarrollo web (HTML, CSS...)</a> </li></ul> -</li></ul> -<ul><li> En la comunidad Mozilla... en inglés -</li></ul> -<p>{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} -</p><p><span class="alllinks"><a href="es/Desarrollo_Web/Comunidad">Ver más...</a></span> -</p> -<h4 id="Herramientas" name="Herramientas"> Herramientas </h4> -<ul><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&application=firefox">Web Developer extension</a> -</li><li> <a href="es/Venkman">Venkman</a>, the JavaScript debugger -</li><li> <a href="es/DOM_Inspector">DOM Inspector</a> -</li></ul> -<p><span class="alllinks"><a>Ver más...</a></span> -</p> -<h4 id="Temas_relacionados" name="Temas_relacionados"> Temas relacionados </h4> -<dl><dd><a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a>, <a href="es/XHTML">XHTML</a>, <a href="es/XML">XML</a>, <a href="es/AJAX">AJAX</a>, <a href="es/JavaScript">JavaScript</a>, <a href="es/Est%c3%a1ndares_Web">Estándares Web</a> -</dd></dl> -</td> </tr> </tbody></table> -<p><span class="comment">Categorías</span> -</p><p><span class="comment">Interwiki Language Links</span> -</p> -</div> -{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/es/conflicting/web/guide/mobile/index.html b/files/es/conflicting/web/guide/mobile/index.html deleted file mode 100644 index 028d0c71ed..0000000000 --- a/files/es/conflicting/web/guide/mobile/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Mobile Web development -slug: conflicting/Web/Guide/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile -original_slug: Web_Development/Mobile ---- -<p>Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.</p> -<ul> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> - <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> -</ul> diff --git a/files/es/conflicting/web/html/element/index.html b/files/es/conflicting/web/html/element/index.html deleted file mode 100644 index ebde8fbff4..0000000000 --- a/files/es/conflicting/web/html/element/index.html +++ /dev/null @@ -1,600 +0,0 @@ ---- -title: Lista de Elementos HTML5 -slug: conflicting/Web/HTML/Element -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list -original_slug: HTML/HTML5/HTML5_lista_elementos ---- -<p>Todos los <strong>elementos del estandar HTML5</strong> están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al <a href="/en-US/docs/HTML/Element" title="HTML/Element">indice de elementos HTML</a> el cual lista todas las posibles etiquetas, estandar, no-estandar, válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser usados en nuevos sitios Web.</p> - -<p>El simbolo <a href="/en-US/docs/HTML/HTML5"><img alt="This element was added as part of HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a> indica que el elemento fue añadido en HTML5. Nótese que otros elementos listados aqui pueden haber sido modificados o extendido en su significado por la especificación HTML5.</p> - -<h2 id="Elemento_raíz">Elemento raíz</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td>Elemento</td> - <td>Descripcion</td> - </tr> - <tr> - <td>{{HTMLElement("<!DOCTYPE html>")}}</td> - <td>Define que el documento esta bajo el estandar de HTML 5</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("html")}}</td> - <td>Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.</td> - </tr> - </tbody> -</table> - -<h2 id="Metadatos_del_documento">Metadatos del documento</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("head")}}</td> - <td>Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.</td> - </tr> - <tr> - <td>{{HTMLElement("title")}}</td> - <td>Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.</td> - </tr> - <tr> - <td>{{HTMLElement("base")}}</td> - <td>Define la URL base para las URLs relativas en la página.</td> - </tr> - <tr> - <td>{{HTMLElement("link")}}</td> - <td>Usada para enlazar JavaScript y CSS externos con el documento HTML actual.</td> - </tr> - <tr> - <td>{{HTMLElement("meta")}}</td> - <td>Define los metadatos que no pueden ser definidos usando otro elemento HTML.</td> - </tr> - <tr> - <td>{{HTMLElement("style")}}</td> - <td>Etiqueta de estilo usada para escribir CSS en línea.</td> - </tr> - </tbody> -</table> - -<h2 id="Scripting">Scripting</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("script")}}</td> - <td>Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript</td> - </tr> - <tr> - <td>{{HTMLElement("noscript")}}</td> - <td>Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.</td> - </tr> - </tbody> -</table> - -<h2 id="Secciones">Secciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("body")}}</td> - <td> - <div>Representa el contenido principal de un documento HTML. Solo hay un elemento <code><body></code> en un documento.</div> - </td> - </tr> - <tr> - <td>{{HTMLElement("section")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define una sección en un documento.</td> - </tr> - <tr> - <td>{{HTMLElement("nav")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define una sección que solamente contiene enlaces de navegación</td> - </tr> - <tr> - <td>{{HTMLElement("article")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define contenido autónomo que podría existir independientemente del resto del contenido.</td> - </tr> - <tr> - <td>{{HTMLElement("aside")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido</td> - </tr> - <tr> - <td><a href="/en-US/docs/HTML/Element/Heading_Elements"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> - <td>Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <code><h1></code> es la de mayor y <code><h6></code> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.</td> - </tr> - <tr> - <td>{{HTMLElement("header")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.</td> - </tr> - <tr> - <td>{{HTMLElement("footer")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.</td> - </tr> - <tr> - <td>{{HTMLElement("address")}}</td> - <td>Define una sección que contiene información de contacto.</td> - </tr> - <tr> - <td>{{HTMLElement("main")}}<a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define el contenido principal o importante en el documento. Solamente existe un elemento <code><main></code> en el documento.</td> - </tr> - </tbody> -</table> - -<h2 id="Agrupación_de_Contenido">Agrupación de Contenido</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("p")}}</td> - <td>Define una parte que debe mostrarse como un párrafo.</td> - </tr> - <tr> - <td>{{HTMLElement("hr")}}</td> - <td>Representa un quiebre temático entre párrafos de una sección o articulo o cualquier contenido.</td> - </tr> - <tr> - <td>{{HTMLElement("pre")}}</td> - <td>Indica que su contenido esta preformateado y que este formato debe ser preservado.</td> - </tr> - <tr> - <td>{{HTMLElement("blockquote")}}</td> - <td>Representa un contenido citado desde otra fuente.</td> - </tr> - <tr> - <td>{{HTMLElement("ol")}}</td> - <td>Define una lista ordenada de artículos.</td> - </tr> - <tr> - <td>{{HTMLElement("ul")}}</td> - <td>Define una lista de artículos sin orden.</td> - </tr> - <tr> - <td>{{HTMLElement("li")}}</td> - <td>Define un artículo de una lista enumerada.</td> - </tr> - <tr> - <td>{{HTMLElement("dl")}}</td> - <td>Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.</td> - </tr> - <tr> - <td>{{HTMLElement("dt")}}</td> - <td>Representa un término definido por el siguiente <code><dd></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("dd")}}</td> - <td>Representa la definición de los términos listados antes que él.</td> - </tr> - <tr> - <td>{{HTMLElement("figure")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa una figura ilustrada como parte del documento.</td> - </tr> - <tr> - <td>{{HTMLElement("figcaption")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa la leyenda de una figura.</td> - </tr> - <tr> - <td>{{HTMLElement("div")}}</td> - <td>Representa un contenedor genérico sin ningún significado especial.</td> - </tr> - </tbody> -</table> - -<h2 id="Semántica_a_nivel_de_Texto">Semántica a nivel de Texto</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("a")}}</td> - <td>Representa un <em>hiperenlace</em>, enlazando a otro recurso.</td> - </tr> - <tr> - <td>{{HTMLElement("em")}}</td> - <td>Representa un texto <em>enfatizado</em>, como un acento de intensidad.</td> - </tr> - <tr> - <td>{{HTMLElement("strong")}}</td> - <td>Representa un texto especialmente <em>importante</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("small")}}</td> - <td>Representa un <em>comentario aparte</em>, es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.<code> </code></td> - </tr> - <tr> - <td>{{HTMLElement("s")}}</td> - <td>Representa contenido que <em>ya</em> <em>no es exacto o relevante</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("cite")}}</td> - <td>Representa el <em>título de una obra</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("q")}}</td> - <td>Representa una <em>cita textual</em> inline.</td> - </tr> - <tr> - <td>{{HTMLElement("dfn")}}</td> - <td>Representa un término cuya <em>definición</em> está contenida en su contenido ancestro más próximo.</td> - </tr> - <tr> - <td>{{HTMLElement("abbr")}}</td> - <td>Representa una <em>abreviación </em>o un <em>acrónimo</em> ; la expansión de la abreviatura puede ser representada por el atributo <code>title</code>.</td> - </tr> - <tr> - <td>{{HTMLElement("data")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Asocia un <em>equivalente legible por máquina </em>a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).</td> - </tr> - <tr> - <td>{{HTMLElement("time")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un valor de <em>fecha </em>y <em>hora</em>; el equivalente legible por máquina puede ser representado en el atributo <span style="font-family: courier new,andale mono,monospace; line-height: normal;">datetime</span>.</td> - </tr> - <tr> - <td>{{HTMLElement("code")}}</td> - <td>Representa un <em>código de </em><em>ordenador</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("var")}}</td> - <td>Representa a una <em>variable, </em>es decir<em>, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa</em><em>.</em></td> - </tr> - <tr> - <td>{{HTMLElement("samp")}}</td> - <td>Representa la <em>salida</em> de un programa o un ordenador.</td> - </tr> - <tr> - <td>{{HTMLElement("kbd")}}</td> - <td>Representa la <em>entrada de usuario</em>, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.</td> - </tr> - <tr> - <td>{{HTMLElement("sub")}},{{HTMLElement("sup")}}</td> - <td>Representan un <em>subíndice</em> y un <em>superíndice, </em>respectivamente.</td> - </tr> - <tr> - <td>{{HTMLElement("i")}}</td> - <td>Representa un texto en una voz o estado de ánimo <em>alterno</em>, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.</td> - </tr> - <tr> - <td>{{HTMLElement("b")}}</td> - <td>Representa un texto hacia el cual se llama la atención para <em>propósitos utilitarios. </em> No confiere ninguna importancia adicional y no implica una voz alterna.</td> - </tr> - <tr> - <td>{{HTMLElement("u")}}</td> - <td>Representa una anotación no textual <em>sin-articular</em>, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en chino.</td> - </tr> - <tr> - <td>{{HTMLElement("mark")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa texto resaltado con propósitos de <em>referencia</em>, es decir por su relevancia en otro contexto.</td> - </tr> - <tr> - <td>{{HTMLElement("ruby")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td> - <p>Representa contenidos a ser marcados con <em>anotaciones ruby</em>, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el <em>furigana</em> japonés.</p> - </td> - </tr> - <tr> - <td>{{HTMLElement("rt")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa el <em>texto de una anotación ruby</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("rp")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa los <em>paréntesis </em>alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.</td> - </tr> - <tr> - <td>{{HTMLElement("bdi")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un texto que debe ser <em>aislado</em> de sus alrededores para el formateado bidireccional del texto. Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.</td> - </tr> - <tr> - <td>{{HTMLElement("bdo")}}</td> - <td>Representa la <em>direccionalidad</em> de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.</td> - </tr> - <tr> - <td>{{HTMLElement("span")}}</td> - <td>Representa texto sin un significado específico. Este debe ser usado cuando <em>ningún otro</em> elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como <code>class</code>, <code>lang</code>, o <code>dir</code>.</td> - </tr> - <tr> - <td>{{HTMLElement("br")}}</td> - <td>Representa un <em>salto de línea</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("wbr")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa una <em>oportunidad de salto de línea, </em>es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.</td> - </tr> - </tbody> -</table> - -<h2 id="Ediciones">Ediciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("ins")}}</td> - <td>Define una <em>adición</em> en el documento.</td> - </tr> - <tr> - <td>{{HTMLElement("del")}}</td> - <td>Define una <em>remoción</em> del documento.</td> - </tr> - </tbody> -</table> - -<h2 id="Contenido_incrustado">Contenido incrustado</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("img")}}</td> - <td>Representa una <em>imagen</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("iframe")}}</td> - <td>Representa un <em>contexto anidado de navegación</em>, es decir, un documento HTML embebido.</td> - </tr> - <tr> - <td>{{HTMLElement("embed")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>punto de integración</em> para una aplicación o contenido interactivo externo que por lo general no es HTML.</td> - </tr> - <tr> - <td>{{HTMLElement("object")}}</td> - <td>Representa un <em>recurso externo, </em>que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.</td> - </tr> - <tr> - <td>{{HTMLElement("param")}}</td> - <td>Define <em>parámetros</em> para el uso por los plugins invocados por los elementos <code><object></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("video")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>video</em>, y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos. </td> - </tr> - <tr> - <td>{{HTMLElement("audio")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>sonido</em> o <em>stream de audio.</em></td> - </tr> - <tr> - <td>{{HTMLElement("source")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <code><video></code> o <code><audio></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("track")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Permite a autores especificar una <em>pista de texto</em> temporizado para elementos multimedia como <code><video></code> o<em> <code><audio></code>.</em></td> - </tr> - <tr> - <td>{{HTMLElement("canvas")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>área de mapa de bits</em> en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.</td> - </tr> - <tr> - <td>{{HTMLElement("map")}}</td> - <td>En conjunto con <code><area></code>, define un <em>mapa de imagen</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("area")}}</td> - <td>En conjunto con <code><map></code>, define un <em>mapa de imagen</em>.</td> - </tr> - <tr> - <td>{{SVGElement("svg")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define una <em>imagen vectorial</em> embebida.</td> - </tr> - <tr> - <td>{{MathMLElement("math")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Define una <em>fórmula matemática</em>.</td> - </tr> - </tbody> -</table> - -<h2 id="Datos_tabulares">Datos tabulares</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("table")}}</td> - <td>Representa <em>datos con más de una dimensión.</em></td> - </tr> - <tr> - <td>{{HTMLElement("caption")}}</td> - <td>Representa el <em>título de una tabla</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("colgroup")}}</td> - <td>Representa un <em>conjunto de una o más columnas</em> de una tabla.</td> - </tr> - <tr> - <td>{{HTMLElement("col")}}</td> - <td>Representa una <em>columna </em>de una tabla.</td> - </tr> - <tr> - <td>{{HTMLElement("tbody")}}</td> - <td>Representa el bloque de filas que describen los <em>datos concretos </em>de una tabla.</td> - </tr> - <tr> - <td>{{HTMLElement("thead")}}</td> - <td>Representa el bloque de filas que describen las <em>etiquetas de columna</em> de una tabla.</td> - </tr> - <tr> - <td>{{HTMLElement("tfoot")}}</td> - <td>Representa los bloques de filas que describen los <em>resúmenes de columna</em> de una tabla.</td> - </tr> - <tr> - <td>{{HTMLElement("tr")}}</td> - <td>Representa una <em>fila de celdas </em>en una tabla.</td> - </tr> - <tr> - <td>{{HTMLElement("td")}}</td> - <td>Representa una <em>celda de datos</em> en una tabla.</td> - </tr> - <tr> - <td>{{HTMLElement("th")}}</td> - <td> - <p>Representa una <em>celda encabezado </em>en una tabla. </p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Formularios">Formularios</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("form")}}</td> - <td>Representa un <em>formulario</em>, consistiendo de controles que puede ser enviado a un servidor para procesamiento.</td> - </tr> - <tr> - <td>{{HTMLElement("fieldset")}}</td> - <td>Representa un <em>conjunto de controles</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("legend")}}</td> - <td>Representa el <em>título </em>de un <code><fieldset></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("label")}}</td> - <td>Representa el <em>título</em> de un control de formulario.</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}</td> - <td>Representa un <em>campo de datos escrito </em>que permite al usuario editar los datos.</td> - </tr> - <tr> - <td>{{HTMLElement("button")}}</td> - <td>Representa un <em>botón</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("select")}}</td> - <td>Representa un control que permite la <em>selección entre un conjunto de opciones</em>.</td> - </tr> - <tr> - <td>{{HTMLElement("datalist")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>conjunto de opciones predefinidas </em>para otros controles.</td> - </tr> - <tr> - <td>{{HTMLElement("optgroup")}}</td> - <td>Representa un <em>conjunto de opciones, </em>agrupadas lógicamente.</td> - </tr> - <tr> - <td>{{HTMLElement("option")}}</td> - <td>Representa una <em>opción</em> en un elemento <code><select></code>, o una sugerencia de un elemento <code><datalist></code>.</td> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}</td> - <td>Representa un <em>control de edición de texto multilínea.</em></td> - </tr> - <tr> - <td>{{HTMLElement("keygen")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un control de <em>par generador de llaves.</em></td> - </tr> - <tr> - <td>{{HTMLElement("output")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa el <em>resultado de un cálculo.</em></td> - </tr> - <tr> - <td>{{HTMLElement("progress")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa el <em>progreso de finalización </em>de una tarea.</td> - </tr> - <tr> - <td>{{HTMLElement("meter")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa la <em>medida </em>escalar (o el valor fraccionario) dentro de un rango conocido.</td> - </tr> - </tbody> -</table> - -<h2 id="Elementos_interactivos">Elementos interactivos</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Elemento</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{HTMLElement("details")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>widget</em> desde el que un usuario puede obtener información o controles adicionales.</td> - </tr> - <tr> - <td>{{HTMLElement("summary")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>resumen, título</em> o <em>leyenda</em> para un elemento <code><details></code> dado.</td> - </tr> - <tr> - <td>{{HTMLElement("command")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa un <em>comando</em> que un usuario puede invocar.</td> - </tr> - <tr> - <td>{{HTMLElement("menu")}} <a href="/en-US/docs/HTML/HTML5"><img alt="This element has been added in HTML5" src="/files/3843/HTML5_Badge_32.png" style="height: 16px; vertical-align: middle; width: 16px;" title="This element has been added in HTML5"></a></td> - <td>Representa una <em>lista de comandos</em> .</td> - </tr> - </tbody> -</table> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">Un conjunto de documentos sobre HTML5</a>.</li> - <li>La <a href="/en-US/docs/HTML/Element" title="HTML/Element">referencia de todos las etiquetas HTML</a>, incluso elementos no validos en HTML5.</li> - <li>Otra manera de listar las etiquetas: la <a href="http://joshduck.com/periodic-table.html" title="http://joshduck.com/periodic-table.html">Tabla Periodica de elementos HTML5</a> por Josh Duck.</li> -</ul> diff --git a/files/es/conflicting/web/html/global_attributes/index.html b/files/es/conflicting/web/html/global_attributes/index.html deleted file mode 100644 index 5c1df0adc7..0000000000 --- a/files/es/conflicting/web/html/global_attributes/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Atributo global -slug: conflicting/Web/HTML/Global_attributes -tags: - - CodingScripting - - Glosario - - HTML - - atributo -translation_of: Web/HTML/Global_attributes -translation_of_original: Glossary/Global_attribute -original_slug: Glossary/Atributo_global ---- -<p>Los<strong> Atributos Globales</strong> son {{glossary("attribute","atributos")}} que pueden ser usados en todos los {{glossary("element","elementos")}} (aunque a veces no tienen efecto en algunos de ellos).</p> - -<p>Algunos atributos se pueden utilizar en cualquier elemento HTML:</p> - -<ul> - <li><a href="/es/docs/Web/HTML/Atributos_Globales/dir"><strong>dir</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/lang"><strong>lang</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/style"><strong>style</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/id"><strong>id</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/class"><strong>class</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/tabindex"><strong>tabindex</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/accesskey"><strong>accesskey</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/title"><strong>title</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/hidden"><strong>hidden</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/data-*"><strong>data-*</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/contextmenu"><strong>contextmenu</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/contenteditable"><strong>contenteditable</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/translate"><strong>translate</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/spellcheck"><strong>spellcheck</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/draggable"><strong>draggable</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/dropzone"><strong>dropzone</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemid"><strong>itemid</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemprop"><strong>itemprop</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemref"><strong>itemref</strong></a>, <a href="/es/docs/Web/HTML/Atributos_Globales/itemscope"><strong>itemscope</strong></a>, y <a href="/es/docs/Web/HTML/Atributos_Globales/itemtype"><strong>itemtype</strong></a>.</li> - <li>Tanto <strong>xml:lang</strong> como <strong>xml:base</strong>, obsoletos, heredados de las especificaciones de {{glossary("XHTML")}} y mantenidos por razones de compatibilidad.</li> - <li>Los múltiples atributos <strong><a href="https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA">aria-*</a></strong>, para mejorar la accesibilidad.</li> - <li>Los atributos de manejadores de eventos: <strong>onabort</strong>, <strong>onautocomplete</strong>, <strong>onautocompleteerror</strong>, <strong>onblur</strong>, <strong>oncancel</strong>, <strong>oncanplay</strong>, <strong>oncanplaythrough</strong>, <strong>onchange</strong>, <strong>onclick</strong>, <strong>onclose</strong>, <strong>oncontextmenu</strong>, <strong>oncuechange</strong>, <strong>ondblclick</strong>, <strong>ondrag</strong>, <strong>ondragend</strong>, <strong>ondragenter</strong>, <strong>ondragexit</strong>, <strong>ondragleave</strong>, <strong>ondragover</strong>, <strong>ondragstart</strong>, <strong>ondrop</strong>, <strong>ondurationchange</strong>, <strong>onemptied</strong>, <strong>onended</strong>, <strong>onerror</strong>, <strong>onfocus</strong>, <strong>oninput</strong>, <strong>oninvalid</strong>, <strong>onkeydown</strong>, <strong>onkeypress</strong>, <strong>onkeyup</strong>, <strong>onload</strong>, <strong>onloadeddata</strong>, <strong>onloadedmetadata</strong>, <strong>onloadstart</strong>, <strong>onmousedown</strong>, <strong>onmouseenter</strong>, <strong>onmouseleave</strong>, <strong>onmousemove</strong>, <strong>onmouseout</strong>, <strong>onmouseover</strong>, <strong>onmouseup</strong>, <strong>onmousewheel</strong>, <strong>onpause</strong>, <strong>onplay</strong>, <strong>onplaying</strong>, <strong>onprogress</strong>, <strong>onratechange</strong>, <strong>onreset</strong>, <strong>onresize</strong>, <strong>onscroll</strong>, <strong>onseeked</strong>, <strong>onseeking</strong>, <strong>onselect</strong>, <strong>onshow</strong>, <strong>onsort</strong>, <strong>onstalled</strong>, <strong>onsubmit</strong>, <strong>onsuspend</strong>, <strong>ontimeupdate</strong>, <strong>ontoggle</strong>, <strong>onvolumechange</strong>, <strong>onwaiting</strong>.</li> -</ul> - -<h2 id="Saber_más">Saber más</h2> - -<ul> - <li>Los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> de HTML.</li> -</ul> diff --git a/files/es/conflicting/web/html/global_attributes/spellcheck/index.html b/files/es/conflicting/web/html/global_attributes/spellcheck/index.html deleted file mode 100644 index 7d8b76554b..0000000000 --- a/files/es/conflicting/web/html/global_attributes/spellcheck/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Control de la corrección ortográfica en formularios HTML -slug: conflicting/Web/HTML/Global_attributes/spellcheck -tags: - - Desarrollo_Web - - Gestión de configuración - - HTML - - Intermedio - - Todas_las_Categorías - - XHTML -translation_of: Web/HTML/Global_attributes/spellcheck -translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms -original_slug: Control_de_la_corrección_ortográfica_en_formularios_HTML ---- -<p><span class="seoSummary">{{ gecko_minversion_header("1.8.1") }} Firefox 2 incorpora un corrector ortográfico para las áreas y los campos de texto de los formularios web.</span> Usando la interfaz "about:config" el usuario puede activar o desactivar el corrector, además, puede indicar si desea o no habilitar la corrección ortográfica y si debe habilitarse para áreas y campos de texto o sólo en áreas de texto.</p> - -<p>Por defecto, se comprueban las áreas de texto y los documentos en <code>designMode</code>, pero los campos de texto no. Esto se debe a que sería una distracción para los usuarios si Firefox marca cosas como el ID de usuario y direcciones de correo electrónico como errores.</p> - -<p>Sin embargo, puede haber situaciones en las que este comportamiento no sea el más apropiado. Por ejemplo, si un área de texto va a ser usada para editar código HTML, u otro tipo de datos que no sean texto simple, el corrector ortográfico puede resultar un estorbo en vez de una ayuda. También puede haber casos en los que un sitio quiera recomendarle a Firefox que active la corrección ortográfica en un campo de texto específico; por ejemplo, para los cuadros de búsqueda y los campos de asunto del correo electrónico.</p> - -<p>Si un sitio web desea recomendar si usar o no la corrección ortográfica para un elemento <code><input type="text"></code> concreto, se puede usar el atributo <code>spellcheck</code>, especificando el valor <code>true</code> para recomendar la activación del corrector, o <code>false</code> para desaconsejarla.</p> - -<p>Ten en cuenta que la recomendación del sitio puede ser ignorado si el usuario ha desactivado la corrección ortográfica en su totalidad fijando <code>layout.spellcheckDefault</code> a "0". Si <code>layout.spellcheckDefault</code> tiene cualquier otro valor, el recomendaciones se tienen en cuenta.</p> - -<p>Por ejemplo, el siguiente código HTML recomienda el uso del corrector en un campo de texto simple:</p> - -<pre class="eval"><span class="nowiki"><input type="text" size="50" spellcheck="true"></span> -</pre> - -<p>Del mismo modo, se puede desaconsejar la corrección en un área de texto con un código HTML como este:</p> - -<pre class="eval"><span class="nowiki"><textarea spellcheck="false"></textarea></span> -</pre> - -<p>Se puede controlar un documento en <code>designMode</code> (habitualmente usado para la edición de texto enriquecido), poniendo el atributo <code>spellcheck</code> en la etiqueta <code><body></code> de los documentos. <span class="comment">N.T. Esto del designMode no me gusta</span></p> - -<p>También se puede usar el atributo <code>spellcheck</code> en otros elementos, como en los elementos <code><span></code> o <code><div></code>, en tal caso, cualquier elemento <code><input></code> contenido por estos elementos heredará ese atributo. Los elementos <code><input></code> que no tengan un atributo <code>spellcheck</code> lo heredarán de sus padres, y si estos tampoco lo tienen, se aplicará la configuración por defecto.</p> - -<p>Por ejemplo:</p> - -<pre class="brush: html"><div spellcheck="true"> - <label>Escribe una oración: </label><input type="text" size="50"> - <br> - <label>Escriba otra: </label><input type="text" size="50"> -</div> -<br> -<label>Escriba una tercera: </label><input type="text" size="50"> -</pre> - -<p>En este fragmento de código HTML, los dos primeros campos de texto se comprueban mientras que el tercero no.</p> - -<p id="lang">{{ h1_gecko_minversion("Controlar el idioma del corrector ortográfico", "9.0") }}</p> - -<p>A partir de Gecko 9.0 {{ geckoRelease("9.0") }}, el corrector ortográfico utiliza un elemento {{ HTMLElement("input") }} con atributo {{ htmlattrxref("lang", "input") }} para determinar el idioma predeterminado del corrector ortográfico. Si {{ HTMLElement("input") }} no tiene atributo <code>lang</code>, el atributo se busca en cada elemento padre sucesivamente y hacia arriba, hacia el nodo raíz hasta encontrar uno.</p> - -<p>De esta manera, si un usuario tiene a la vez instalados los diccionarios Frances e Ingles, y un elemento editable tiene <code>lang="en"</code>, el diccionario Inglés se utilizará automáticamente para ese elemento.</p> - -<p>Por ejemplo:</p> - -<pre class="brush: html"><html lang="en"> -<body> - <textarea></textarea> - <textarea lang="fr"></textarea> - <div lang="ru"> - <textarea></textarea> - </div> -</body> -</html> -</pre> --- - -<p>En este fragmento de código HTML, el primer {{ HTMLElement("textarea") }} será revisado en Inglés, el segundo en Francés, y el tercero en Ruso. - -</p><p>Si un elemento especifica un idioma, y el usuario no tiene instalado el diccionario para ese idioma, corrector ortográfico estrá desactivado por defecto, aunque el usuario puede elegir activarlo de forma manual.</p> diff --git a/files/es/conflicting/web/http/basics_of_http/mime_types/index.html b/files/es/conflicting/web/http/basics_of_http/mime_types/index.html deleted file mode 100644 index 7e325a7d49..0000000000 --- a/files/es/conflicting/web/http/basics_of_http/mime_types/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Tipo MIME incorrecto en archivos CSS -slug: conflicting/Web/HTTP/Basics_of_HTTP/MIME_types -tags: - - CSS - - Todas_las_Categorías -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types -translation_of_original: Incorrect_MIME_Type_for_CSS_Files -original_slug: Tipo_MIME_incorrecto_en_archivos_CSS ---- -<h3 id=".C2.BFCu.C3.A1l_es_el_problema.3F"> ¿Cuál es el problema? </h3> -<p>Quizás encuentres una web que use CSS con un diseño pobre en Netscape 7.x o cualquier navegador basado en Gecko como Mozilla, mientras que en Internet Explorer se muestra correctamente. Una de las razones más comunes para que esto suceda es una configuración inapropiada del servidor que tiene almacenado el archivo CSS. Algunos servidores Apache e iPlanet asocian archivos con extensión .CSS con un tipo incorrecto MIME como el "text/plain" o "application/x-pointplus". En algunos casos, Netscape 7.x y Mozilla ignoran el archivo CSS porque tiene un tipo MIME incorrecto y usan una hoja de estilo por defecto que causa que el diseño sea diferente del que se pretendía por parte del desarrollador web. -</p> -<h3 id=".C2.BFCu.C3.A1ndo_ocurre_esto.3F"> ¿Cuándo ocurre esto? </h3> -<p>La <a class="external" href="http://www.w3.org/TR/REC-CSS2/conform.html#text-css">especificación</a> W3C menciona que los archivos CSS deben ser almacenados con el tipo MIME "text/css". Mozilla y Netscape 7.x, cuando son usados en "modo estricto" siguen la especificación al pie de la letra y esperan que el archivo CSS este almacenado con el tipo MIME correcto (El "Modo estricto" se activa teniendo una Definición del Tipo de Documento estricta en la primera línea de la página HTML). En el "modo no estricto", ambas aplicaciones tolerarán el tipo MIME incorrecto y usarán la hoja de estilo adjunta a pesar de la configuración errónea del servidor. Esto significa que no puedes tener documentos en modo "estricto" con un servidor mal configurado. Internet Explorer te permite saltarte esta desconfiguración al no tener en cuenta el tipo MIME que el servidor proporciona en la cabecera del http. -</p> -<h3 id=".C2.BFQu.C3.A9_puedo_hacer_para_cambiar_esto.3F"> ¿Qué puedo hacer para cambiar esto? </h3> -<p>Debes comentar a los administradores del servidor que actualicen el archivo de configuración de tipo MIME en el servidor web. -</p><p>Esta cuestión, en los servidores web iPlanet/Netscape ya ha sido puesta en conocimiento por el vendedor, quien ha añadido una <a href="#Cambiando_el_tipo_MIME_en_servidores_iPlanet.2FSun">nota técnica</a> en su base de conocimientos. -</p><p>Si usas Apache, puedes cambiar también la configuración del archivo .htaccess en tu directorio raíz (El archivo .htaccess es un archivo de solo lectura que maneja varias cosas incluyendo los tipos MIME). Añade esta línea a tu archivo .htaccess: -</p> -<pre>AddType text/css .css</pre> -<p>Ten en cuenta que algunos Webmasters han deshabilitado el uso del archivo de configuración .htaccess en sus servidores Apache porque tiene un pequeño impacto de rendimiento. -</p> -<h3 id="Conclusi.C3.B3n"> Conclusión </h3> -<p>Usar un tipo de definición de documento estricta con Mozilla dará lugar a que el servidor que aloja tus páginas web necesite ser configurado apropiadamente. Hay varias soluciones a este problema, pero la más efectiva es tener el tipo MIME correcto asociado a los archivos .css. Comenta al Webmaster que arregle esto por ti, ¡todo el mundo que publique documentos html en modo estricto te lo agradecerá! -</p> -<h3 id="Cambiando_el_tipo_MIME_en_servidores_iPlanet.2FSun"> Cambiando el tipo MIME en servidores iPlanet/Sun </h3> -<p><b>Problema</b> -</p><p>Los usuarios se encuentran con un dialogo de <i>Salvar como</i> con el tipo de contenido <i>application/x-pointplus</i> o con el contenido del archivo CSS representado como texto en el navegador cuando una pagina incluye una Hoja de Estilo con la extensión .css. -</p><p><b>Solución</b> -</p><p>El tipo de archivo .css no esta enlazado a las hojas de estilo en los tipos por defecto MIME incluidos en el Enterprise Server. Puedes cambiar el enlace en la pagina de tipos globales MIME. -</p><p>Para acceder a esta página, desde el admin server acceder a <i>Preferencias del Servidor</i>, <i>MIME Types</i>, y establece el tipo MIME a .css a <i>text/css</i> en vez de <i>application/x-pointplus</i>. -</p><p>Si el problema persiste, desactiva el keepalive añadiendo "KeepAliveTimeout 0" al <i>magnus.conf</i> -</p><p>Basado en: <a class="external" href="http://sunsolve.sun.com">SunSolve, Sun Microsystems</a> -</p> -<h3 id="Fuentes_adicionales"> Fuentes adicionales </h3> -<p><a href="es/Configurar_correctamente_los_tipos_MIME_del_servidor">Configurar correctamente los tipos MIME del servidor</a> -</p><p><a class="external" href="http://www.htmlhelp.com/faq/html/media.html#garbled-media">Sobre garbled media</a> -</p> -<div class="originaldocinfo"> -<h3 id="Informaci.C3.B3n_original_del_documento"> Información original del documento </h3> -<ul><li> Autor(es): Tristan Nitot -</li><li> Última actualización: March 18th, 2002 -</li><li> Copyright © 2001-2003 Netscape. -</li></ul> -</div> -{{ languages( { "en": "en/Incorrect_MIME_Type_for_CSS_Files", "fr": "fr/Type_MIME_incorrect_pour_les_fichiers_CSS", "pl": "pl/Nieprawid\u0142owy_typ_MIME_plik\u00f3w_CSS" } ) }} diff --git a/files/es/conflicting/web/http/csp/index.html b/files/es/conflicting/web/http/csp/index.html deleted file mode 100644 index bb9d56164f..0000000000 --- a/files/es/conflicting/web/http/csp/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: CSP (Políticas de Seguridad de Contenido) -slug: conflicting/Web/HTTP/CSP -tags: - - Documento - - Referencia -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP -original_slug: Web/Security/CSP ---- -<div>{{gecko_minversion_header("2.0")}}</div> - -<p><strong>Políticas de Seguridad de Contenido </strong>(CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo <a href="/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a> y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde robo de datos hasta la alteración de su sitio o distribución de malware.</p> - -<p>Aunque las Políticas de Seguridad de Contenido fueron incluidas desde Firefox 4, esa implementación, usando la cabecera <code>X-Content-Security-Policy</code>, es anterior a la existencia de una especificacion formal de CSP. Firefox 23 contiene una implementación actualizada de CSP que usa la cabecera <code>Content-Security-Policy</code> sin prefijo y las directivas como están descritas en la especificación W3C CSP 1.0.</p> - -<h2 id="Tópicos_de_Políticas_de_Seguridad_de_Contenido">Tópicos de Políticas de Seguridad de Contenido</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy">Introducción a Políticas de Seguridad de Contenido</a></dt> - <dd>Un resumen de que es y como CSP puede hacer su sitio mas seguro.</dd> - <dt><a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">Directivas de Políticas CSP</a></dt> - <dd>Una referencia de las directivas de políticas CSP.</dd> - <dt><a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy">Usando Políticas de Seguridad de Contenido</a></dt> - <dd>Puede ajustar el comportamiento de CSP configurando el conjunto de las políticas. Esto le permite reducir y ajustar la seguridad para tipos individuales de recursos, basado en las necesidades de su sitio. Este artículo describe como configurar CSP, asi como también habilitarlo para el uso en su sitio.</dd> - <dt><a href="/en-US/docs/Web/Security/CSP/Using_CSP_violation_reports">Usando reportes de violación de CSP</a></dt> - <dd>Como usar los reportes de violación de las Políticas de Seguridad de Contenido para monitorear los intentos de ataque a su sitio y a sus usuarios.</dd> - <dt><a href="/en-US/docs/Security/CSP/Default_CSP_restrictions">Restricciones CSP por defecto</a></dt> - <dd>Detalles acerca de las restricciones por defecto reforzadas por CSP.</dd> -</dl> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Security">Seguridad</a></li> - <li><a href="/en-US/docs/HTTP_access_control">Control de acceso HTTP</a></li> - <li><a class="link-https" href="http://www.w3.org/TR/CSP/">Especificación CSP 1.0</a></li> - <li><a class="link-https" href="http://w3c.github.io/webappsec/specs/content-security-policy/csp-specification.dev.html">Especificación CSP 2</a></li> - <li><a href="/docs/Apps/CSP">Restricciones CSP para Aplicaciones Web Públicas</a></li> -</ul> diff --git a/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html b/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html deleted file mode 100644 index 96a5cf6d8d..0000000000 --- a/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Introducción a Políticas de Seguridad de Contenido -slug: conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 -tags: - - Documento - - Políticas de Seguridad de Contenido - - Referencia - - Seguridad -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP/Introducing_Content_Security_Policy -original_slug: Web/Security/CSP/Introducing_Content_Security_Policy ---- -<p>{{ gecko_minversion_header("2") }}</p> - -<p><strong>Políticas de Seguridad de Contenido</strong> (CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a> y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde el robo de datos hasta hasta la alteración de su sitio o la distribución de malware.</p> - -<p>CSP esta diseñado para ser completamente compatible hacia atras; los navegadores web que no lo soporten todavía pueden trabajar con servidores que las implementen, y viceversa. Los navegadores web que no soporten CSP simplemente la ignoran, funcionando como es normal, usando la política de mismo origen por defecto para contenido web. Si el sitio no tiene la cabecera CSP, los navegadores web usan en su lugar la <a href="/en-US/docs/Web/Security/Same-origin_policy" title="En/Same origin policy for JavaScript">política de mismo origen</a>.</p> - -<p>Habilitar CSP tan fácil como configurar su servidor web para retornar la cabecera HTTP <code>Content-Security-Policy</code>. (Antes de Firefox 23, la cabecera <code>X-Content-Security-Policy</code> era usada). Ver <a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Usando Políticas de Seguridad de Contenido</a> para detalles de como configurar y habilitar CSP.</p> - -<div class="note"><strong>Nota:</strong> El estándar de Políticas de Seguridad de Contenido <a class="link-https" href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element">especifica</a> que un elemento {{ HTMLElement("meta") }} puede ser usado para configurar una política, pero esta característica todavía no está soportada en Firefox. El soporte para esta característica será añadida según <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=663570" title="https://bugzilla.mozilla.org/show_bug.cgi?id=663570">bug 663570</a>.</div> - -<h2 id="Mitigando_cross_site_scripting">Mitigando cross site scripting</h2> - -<p>Un objetivo primario de CSP es mitigar y reportar ataques XSS. Los ataques XSS explotan la confianza de los navegadores web en el contenido recibido del servidor. Los scripts maliciosos son ejecutados por la victima del navegador web por que éste confía en el origen del contenido, aún cuando no viene desde donde parece venir.</p> - -<p>CSP hace posible a los administradores de servidores reducir o eliminar los vectores por los cuales un ataque XSS puede ocurrir especificando los dominios que el navegador web debe considerar orígenes válidos de scripts ejecutables. Un navegador web compatible con CSP entonces solo ejecutará scripts cargados en archivos fuente recibidos de aquellos dominios permitidos, ignorando todos los demás scripts (incluyendo scripts en línea y atributos HTML de manejo de eventos).</p> - -<p>Como una última forma de protección, los sitios que no deseen permitir nunca la ejecución de scripts pueden optar por deshabilitar globalmente la ejecución de scripts.</p> - -<h2 id="Mitigando_ataques_de_packet_sniffing">Mitigando ataques de packet sniffing</h2> - -<p>En adición a la restricción de los dominos desde los cuales el contenido puede ser cargado, el servidor puede especificar que protocolos son permitidos para su uso; por ejemplo (e idealmente, desde un punto de vista de seguridad), un servidor puede especificar que todo el contenido debe ser cargado usando HTTPS.</p> - -<div class="note"><strong>Nota:</strong> Una estrategia de transmisión segura de datos incluye no solo reforzar HTTPS para la transferencia de datos, sino tambien marcar todas las cookies con indicadores seguros y proveer redirecciones automáticas desde páginas HTTP a sus contrapartes en HTTPS.</div> - -<div class="note"><strong>Nota:</strong> Los sitios pueden usar tambien la cabecera HTTP <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security" title="/en/Security/HTTP_Strict_Transport_Security">Strict-Transport-Security</a> para asegurarse de que los navegadores web se conecten solo a traves de un canal encriptado.</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Usando las Políticas de Seguridad de Contenido</a></li> - <li><a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives" title="en/Security/CSP/CSP policy directives">Directivas de políticas CSP</a></li> - <li><a href="/en-US/docs/Web/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Usando reportes de violación de CSP</a></li> -</ul> - -<h2 id="Especificación">Especificación</h2> - -<ul> - <li>{{ spec("https://w3c.github.io/webappsec/specs/content-security-policy/", "Políticas de Seguridad de Contenidos (Borradores de Editores)") }}</li> - <li>{{ spec("http://www.w3.org/TR/CSP/", "Políticas de Seguridad de Contenido (Recomendación Candidata)") }}</li> -</ul> - -<div class="noinclude"> -<p>{{ languages( { "ja": "ja/Introducing_Content_Security_Policy" } ) }}</p> -</div> - -<p> </p> diff --git a/files/es/conflicting/web/http/headers/content-security-policy/index.html b/files/es/conflicting/web/http/headers/content-security-policy/index.html deleted file mode 100644 index dd1cb8d720..0000000000 --- a/files/es/conflicting/web/http/headers/content-security-policy/index.html +++ /dev/null @@ -1,710 +0,0 @@ ---- -title: Políticas Directivas CSP -slug: conflicting/Web/HTTP/Headers/Content-Security-Policy -translation_of: Web/HTTP/Headers/Content-Security-Policy -translation_of_original: Web/Security/CSP/CSP_policy_directives -original_slug: Web/Security/CSP/CSP_policy_directives ---- -<p> </p> - -<p>Hay varios ámbitos de las políticas que pueden ser definidas por los administradores de las páginas web usando las Normas de Seguridad de Contenido o CSP por sus siglas en ingles. Cualquier combinación de estas políticas puede ser utilizada para satisfacer las necesidades de su sitio web, no es necesario especificar todas ellas..</p> - -<h2 id="Fuentes_de_contenido">Fuentes de contenido</h2> - -<p>La mayoría de las políticas directivas necesitan de una o más fuentes de contenido. Una fuente de contenido es una cadena que indica una posible fuente de donde el contenido puede ser descargado.</p> - -<h3 id="Listas_de_fuentes">Listas de fuentes</h3> - -<p>Una lista de fuentes es un cadena que especifica uno o más hosts de internet o direcciones IP, así como un <a href="/en-US/docs/URIs_and_URLs" title="en/URIs and URLs">esquema de URL</a> opcional y/o número de puerto. La dirección del sitio puede incluir un comodín líder (el carácter asterisco, <code>'*'</code>), y puedes usar un comodín (de nuevo, <code>'*'</code>) como el número de puerto, indicando que todos los puertos legales son válidos para la fuente. Los hosts son delimitados por espacio.</p> - -<p>Las expresiones validas del host son:</p> - -<dl> - <dt><span class="nowiki">http://*.foo.com</span></dt> - <dd>Junta todos los intentos de carga desde cualquier subdominio de foo.com usando el sistema URL http:.</dd> - <dt><span class="nowiki">mail.foo.com:443</span></dt> - <dd>Junta todos los intentos de acceso al puerto 443 en mail.foo.com.</dd> - <dt><span class="nowiki">https://store.foo.com</span></dt> - <dd>Junta todos los intentos para acceder store.foo.com usando https:.</dd> -</dl> - -<p>Si un número de puerto no está especificado, el navegador usara el número de puerto predeterminado para el sistema especificado. Si no hay sistema especificado, el mismo sistema que ha sido usado para acceder al documento protegido será usado.</p> - -<dl> -</dl> - -<h3 id="Palabras_claves">Palabras claves</h3> - -<p>También existen algunas palabras claves disponibles para describir clases especiales de fuentes de contenido. Estas palabras son las siguientes:</p> - -<dl> - <dt><code>'none'</code></dt> - <dd>Se refiere al conjunto vacío, es decir, no hay URLs que coincidan. Las comillas simples son necesarias.</dd> - <dt><code>'self'</code></dt> - <dd>Se refiere al origen del cual los documentos protegidos están siendo enviados, incluyendo el mismo sistema de URL y numero de puerto. Las comillas simples deben ser incluidas. Algunos navegadores excluyen específicamente <code>blob</code> y <code>filesystem</code> de las políticas directivas. Sitios que necesitan permitir este tipo de contenido puede especificarlos usando el Data attribute.</dd> - <dt><code>'unsafe-inline'</code></dt> - <dd>Permite el uso de recursos alineados como elementos alineados {{ HTMLElement("script") }} , <code>javascript:</code> URLs, controladores de eventos alineados e elementos alineados {{ HTMLElement("style") }} . Las comillas simples deben ser incluidas.</dd> - <dt><code>'unsafe-eval'</code></dt> - <dd>Permite el uso de <code>eval()</code>y métodos similares para la creación de códigos desde las cadenas de caracteres. Las comillas simples deben ser incluidas.</dd> -</dl> - -<div class="note"><strong>Nota:</strong> 'unsafe-inline' y 'unsafe-eval' son inseguros y pueden hacer de tu página web vulnerable contra cross-site scripting.</div> - -<p>Ejemplo, puedes especificar que el contenido sea cargado desde el origen del documento, así como desde trustedscripts.foo.com de la siguiente manera:</p> - -<pre>Content-Security-Policy: default-src 'self' trustedscripts.foo.com -</pre> - -<dl> -</dl> - -<h3 id="Data">Data</h3> - -<div class="note"><strong>Nota:</strong> data: URIs son inseguras y pueden hacer de tu página web vulnerable contra cross-site scripting si es permitido por las fuentes del script.</div> - -<dl> - <dt>data:</dt> - <dd>Permite que <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs" title="en/data URIs"><code>data:</code> URIs</a> sea usada como fuente de contenido. Esto es inseguro y un atacante puede insertar data: URIs arbitrarias. Utilízala con moderación y definitivamente no para los scripts.</dd> - <dt>mediastream:</dt> - <dd>Permite que <a href="/en-US/docs/Web/API/MediaStream_API" title="/en/WebRTC/MediaStream_API"><code>mediastream:</code> URIs</a> sea usada como fuente de contenido.</dd> - <dt>blob:</dt> - <dd>Permite que <a href="/en-US/docs/Web/API/Blob" title="/en/WebRTC/MediaStream_API"><code>blob:</code> URIs</a> sea usada como fuente de contenido.</dd> - <dt>filesystem:</dt> - <dd>Permite que <a href="/en-US/docs/Web/API/FileSystem" title="/en/WebRTC/MediaStream_API"><code>filesystem:</code> URIs</a> sea usada como fuente de contenido.</dd> -</dl> - -<pre>Content-Security-Policy: default-src 'self'; img-src 'self' data: blob: filesystem:; media-src mediastream: -</pre> - -<h2 id="Políticas_directivas_soportadas">Políticas directivas soportadas</h2> - -<p>Las siguientes políticas directivas están disponibles para controlar la política de seguridad para varias ares de las políticas.</p> - -<h3 id="base-uri"><code>base-uri</code></h3> - -<p>La directiva ><code>base-uri</code> define las URLs que un agente usuario puede usar como el documento URL base. Si este valor no está presente, cualquier URL está permitido. Si esta directiva no está presente, el agente usuario usara el valor en el elemento <code><a href="/en-US/docs/Web/HTML/Element/base">base</a>.</code></p> - -<pre>base-uri <em>source-list</em></pre> - -<h3 id="child-src"><code>child-src</code></h3> - -<p>La directiva <code>child-src</code> define las fuentes válidas para los trabajadores de la web y contextos de navegación anidados cargados utilizando elementos tales como {{ HTMLElement("frame") }} y {{ HTMLElement("iframe") }}. Esta opción es preferida sobre la directiva <code>frame-src</code><code>, </code><code>la cual es obsoleta. Para los trabajadores, las </code>solicitudes no conformes son tratadas como errores de red fatales por el agente usuario.</p> - -<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div> - -<pre><span>child-src <em>source-list</em></span></pre> - -<h3 id="connect-src"><code>connect-src</code></h3> - -<p>La directiva <code>connect-src</code> define fuentes válidas para fetch, <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, WebSocket y conecciones EventSource.</p> - -<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div> - -<div class="note"><strong>Nota: </strong>Antes de la versión Firefox 23, xhr-src era utilizado en lugar de la directiva connect-src y solo restringía el uso de <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>.</div> - -<pre><code>connect-src</code> <em><code>source-list</code></em></pre> - -<h3 id="default-src"><code>default-src</code></h3> - -<p>La directiva por defecto <code>default-src </code><code>define la política de seguridad para los tipos de contenidos que no están expresamente señalados por otras directivas. Esta directiva abarca las siguientes directivas:</code></p> - -<ul> - <li><code>child-src</code></li> - <li><code>connect-src</code></li> - <li><code>font-src</code></li> - <li><code>img-src</code></li> - <li><code>media-src</code></li> - <li><code>object-src</code></li> - <li><code>script-src</code></li> - <li><code>style-src</code></li> -</ul> - -<pre><code>default-src</code> <em><code>source-list</code></em></pre> - -<h3 id="font-src"><code>font-src</code></h3> - -<p>La directivas <code>font-src</code> especifica las fuentes válidas para los tipos de letras cargadas usando {{ cssxref("@font-face") }}.</p> - -<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div> - -<pre><code>font-src</code> <em><code>source-list</code></em></pre> - -<h3 id="form-action"><code>form-action</code></h3> - -<p>La directiva <code>form-action</code>{{experimental_inline}} especifica criterios de valoración válidos para las sumisiones {{ HTMLElement("form") }}.</p> - -<pre id="script-src"><code><code>form-action</code> ><em><code>source-list</code></em></code></pre> - -<h3 id="frame-ancestors"><code>frame-ancestors</code></h3> - -<p>La directiva <code>frame-ancestors</code>{{experimental_inline}} especifica padres validos que pueden incustrar una pagina usando elementos {{ HTMLElement("frame") }} y {{ HTMLElement("frame") }}. Esta directiva no esta soportada en el elemento <code><meta> </code>o por la cabecera <code>Content-Security-Policy-Report-Only.</code></p> - -<pre><code>frame-ancestors</code> <em><code>source-list</code></em></pre> - -<h3 id="frame-src_obsolete_inline"><code>frame-src</code> {{obsolete_inline}}</h3> - -<p>The <code>frame-src</code> directive specifies valid sources for web workers and nested browsing contexts loading using elements such as >{{ HTMLElement("frame") }} and {{ HTMLElement("iframe") }}.></p> - -<div class="note"> -<div><strong>Note: </strong>This directive is deprecated. Use <code>child-src</code> instead.</div> -</div> - -<pre>frame-src <em>source-list</em></pre> - -<h3 id="img-src"><code>img-src</code></h3> - -<p>The <code>img-src</code> directive specifies valid sources of images and favicons. </p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>img-src</code> <em><code>source-list</code></em></pre> - -<h3 id="manifest-src"><code>manifest-src</code></h3> - -<p>The <code><strong>manifest-src</strong></code> directive specifies which manifest can be applied to the resource.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>manifest-src</code> <em><code>source-list</code></em></pre> - -<h3 id="media-src"><code>media-src</code></h3> - -<p>The <code>media-src</code> directive specifies valid sources for loading media using the {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>media-src</code> <em><code>source-list</code></em></pre> - -<h3 id="object-src"><code>object-src</code></h3> - -<p>The <code>object-src</code> directive specifies valid sources for the {{ HTMLElement("object") }}, {{ HTMLElement("embed") }}, and {{ HTMLElement("applet") }} elements. </p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>object-src</code> <em><code>source-list</code></em></pre> - -<h3 id="plugin-types"><code>plugin-types</code></h3> - -<p>The <code>plugin-types</code> directive specifies the valid plugins that the user agent may invoke.</p> - -<pre>plugin-types <em>type-list</em></pre> - -<h3 id="referrer"><code>referrer</code></h3> - -<p>The <code>referrer</code> directive specifies information in the referrer header for links away from a page.</p> - -<pre>referrer <em>value</em></pre> - -<h3 id="reflected-xss"><code>reflected-xss</code></h3> - -<p>The <code>reflected-xss</code> directive instructs a user agent to activate or deactivate any heuristics used to filter or block reflected cross-site scripting attacks. Valid values are <code>allow</code>, <code>block</code>, and <code>filter</code>. This directive is not supported in the <code><meta></code> element.</p> - -<div class="note"><strong>Note: </strong>This directive is ignored if it is contained in a <code>meta</code> element.</div> - -<pre>reflected-xss <em>value</em></pre> - -<h3 id="report-uri"><code>report-uri</code></h3> - -<p>The <code>report-uri</code> directive instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of <a href="/en/JSON" title="en/JSON">JSON</a> documents sent via an HTTP <code>POST</code> request to the specified URI. See <a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a> for details. This directive is not supported in the <code><meta></code> element.</p> - -<pre><code>report-uri</code> <em><code><a class="external" href="http://tools.ietf.org/html/rfc2396" title="http://tools.ietf.org/html/rfc2396">uri</a></code></em></pre> - -<h3 id="sandbox"><code>sandbox</code></h3> - -<p>The <code>sandbox</code> directive applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy. This directive is not supported in the <code><meta></code> element or by the <code>Content-Security-policy-Report-Only</code> header field.</p> - -<pre>sandbox <em>value</em></pre> - -<h3 id="script-src_2"><code>script-src</code></h3> - -<p>The <code>script-src</code> directive specifies valid sources for JavaScript. When either the <code>script-src</code> or the <code>default-src</code> directive is included, inline script and <code>eval()</code> are disabled unless you specify 'unsafe-inline' and 'unsafe-eval', respectively.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>script-src</code> <em><code>source-list</code></em></pre> - -<h3 id="style-src"><code>style-src</code></h3> - -<p>The <code>style-src</code> directive specifies valid sources for stylesheets. This includes both externally-loaded stylesheets and inline use of the {{ HTMLElement("style") }} element and HTML <code>style</code> attributes. Stylesheets from sources that aren't included in the source list are not requested or loaded. When either the <code>style-src</code> or the <code>default-src</code> directive is included, inline use of the {{ HTMLElement("style") }} element and HTML <code>style</code> attributes are disabled unless you specify 'unsafe-inline'.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>style-src</code> <em><code>source-list</code></em></pre> - -<div class="note"><strong>Note:</strong> Firefox currently requires using the same URL scheme and port for the <code>report-uri</code> as the content being protected by Content Security Policy.</div> - -<h3 id="upgrade-insecure-requests"><code>upgrade-insecure-requests</code></h3> - -<p>The <code>upgrade-insecure-requests</code> directive instructs user agents to treat all of a site's unsecure URL's (those serverd over HTTP) as though they have been replaced with secure URL's (those served over HTTPS). This directive is intended for web sites with large numbers of unsecure legacy URL's that need to be rewritten. </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("Upgrade Insecure Requests")}}</td> - <td>{{Spec2('Upgrade Insecure Requests')}}</td> - <td>Adds <code>upgrade-insecure-requests</code>.</td> - </tr> - <tr> - <td>{{ specName("CSP 1.1") }}</td> - <td>{{Spec2('CSP 1.1')}}</td> - <td>Adds <code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, <code>reflected-xss</code>, and <code>report-uri</code>. Deprecates <code>frame-src</code>.</td> - </tr> - <tr> - <td>{{ specName("CSP 1.0") }}</td> - <td>{{Spec2('CSP 1.0')}}</td> - <td>Defines <code>connect-src</code>, ><code>default-src</code>, ><code>font-src</code>, ><code>frame-src</code>, ><code>img-src</code>, ><code>media-src</code>, ><code>objects-src</code>, >report-uri,><code>sandbox</code>, ><code>script-src,</code> and ><code>style-src</code>.></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop">{{CompatUnknown}} -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome{{ref("2")}}</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatChrome(14.0)}} (X-Webkit-CSP)</p> - - <p>{{CompatChrome(25.0)}}</p> - </td> - <td> - <p>{{CompatGeckoDesktop("2.0")}} (X-Content-Security-Policy)</p> - - <p>{{CompatGeckoDesktop("23.0")}}</p> - </td> - <td>Edge</td> - <td>15</td> - <td> - <p>6 (X-Webkit-CSP)</p> - - <p>7</p> - </td> - </tr> - <tr> - <td><code>base-uri</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("35.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>child-src</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>connect-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>default-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>font-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>form-action</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("36.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>frame-ancestors</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("33.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>frame-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>img-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>manifest-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("41.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>media-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>object-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>plugin-types</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>referrer</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("37.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>reflected-xss</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>report-uri</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>script-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>style-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td> - <p><code>upgrade-insecure-requests</code></p> - </td> - <td> - <p class="p1">{{CompatChrome(43.0)}}</p> - </td> - <td>{{CompatGeckoDesktop("42.0")}}</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 Browser{{ref("1")}}</th> - <th>Android Webview{{ref("2")}}</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Mobile{{ref("2")}}</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>iOS 7.1</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>base-uri</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoMobile("35.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>child-src</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>connect-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>default-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>font-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>form-action</code> </td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoMobile("36.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>frame-ancestors</code> </td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoMobile("33.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>frame-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>img-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>manifest-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("41.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>media-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>object-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>plugin-types</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>referrer</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("37.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>reflected-xss</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>report-uri</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>script-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>style-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>upgrade-insecure-requests</code></td> - <td>{{CompatGeckoMobile(42)}}</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="sect1"> </h2> - -<h2 id="Notes">Notes</h2> - -<p>{{ref("1")}} Deprecated since Android 4.0.</p> - -<p>{{ref("2")}} Starting with version {{CompatChrome(45.0)}}, Chrome excludes <code>blob</code> and <code>filesystem</code> from source directives. Sites needing to allow these content types can specify them using the Data attribute.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Security/CSP/Introducing Content Security Policy">Introducing Content Security Policy</a></li> - <li><a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a></li> - <li><a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a></li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html deleted file mode 100644 index 48a3db323c..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: ArrayBuffer.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer -tags: - - ArrayBuffer - - JavaScript - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <strong><code>ArrayBuffer.prototype</code></strong> representa el prototipo para el objeto {{jsxref("ArrayBuffer")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Las instancias de <code>ArrayBuffer</code> heredan de <code>ArrayBuffer.prototype</code>. Como con todos los constructores, puedes modificar el prototipo del constructor para aplicar cambios sobre todas las instancias de <code>ArrayBuffer</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>ArrayBuffer.prototype.constructor</dt> - <dd>Especifica la función que se encarga de crear el prototipo del objeto. El valor inicial es el constructor incluido en el estándar <code>ArrayBuffer</code>.</dd> - <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>El tamaño, en bytes, del array. Este valor se establece al construir el objeto y no se puede modificar. <strong>Sólo lectura.</strong></dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> - <dd>Retorna un nuevo <code>ArrayBuffer</code> cuyo contenido es una copia los bytes de este <code>ArrayBuffer</code> desde <code>begin</code>, incluido, hasta <code>end</code>, no incluido. Si <code>begin</code> o <code>end</code> son negativos, éstos hacen referencia a un índice que comienza a partir del final del array.</dd> -</dl> - -<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-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p> - -<div id="compat-mobile"> </div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("ArrayBuffer")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/date/index.html b/files/es/conflicting/web/javascript/reference/global_objects/date/index.html deleted file mode 100644 index 362876f5af..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/date/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Date.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date -tags: - - Date - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype ---- -<div> - {{JSRef("Objetos_globales", "Date")}}</div> -<h2 id="Resumen">Resumen</h2> -<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p> -<div> - {{js_property_attributes(0,0,1)}}</div> -<h2 class="noinclude" id="Propriedades">Propriedades</h2> -<dl> - <dt class="noinclude"> - <code>Date.prototype.constructor</code></dt> - <dd> - </dd> -</dl> -<div> - {{ jsOverrides("Object", "properties", "constructor") }}</div> -<h2 id="Métodos">Métodos</h2> -<dl> - <dt> - {{jsxref("Date.prototype.getDate()")}}</dt> - <dd> - Devuelve el día del mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getDay()")}}</dt> - <dd> - Devuelve el día de la semana de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getFullYear()")}}</dt> - <dd> - Devuelve el año de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getHours()")}}</dt> - <dd> - Devuelve la hora de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getMilliseconds()")}}</dt> - <dd> - Devuelve los milisegundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getMinutes()")}}</dt> - <dd> - Devuelve los minutos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getMonth()")}}</dt> - <dd> - Devuelve el mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getSeconds()")}}</dt> - <dd> - Devuelve los segundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getTime()")}}</dt> - <dd> - Devuelve el valor numérico correspondiente a la hora especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> - <dd> - Devuelve la diferencia horaria en minutos para la zona geográfica actual.</dd> - <dt> - {{jsxref("Date.prototype.getUTCDate()")}}</dt> - <dd> - Devuelve el día del mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCDay()")}}</dt> - <dd> - Devuelve el día de la semana de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCFullYear()")}}</dt> - <dd> - Devuelve el día el año de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCHours()")}}</dt> - <dd> - Devuelve las horas de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> - <dd> - Devuelve los milisegundos de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCMinutes()")}}</dt> - <dd> - Devuelve los minutos de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCMonth()")}}</dt> - <dd> - Devuelve el mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCSeconds()")}}</dt> - <dd> - Devuelve los segundos de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getYear()")}} {{ deprecated_inline() }}</dt> - <dd> - Devuelve el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.getFullYear()")}} a cambio.</dd> - <dt> - {{jsxref("Date.prototype.setDate()")}}</dt> - <dd> - Establece el día del mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setFullYear()")}}</dt> - <dd> - Establece el año completo de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setHours()")}}</dt> - <dd> - Establece las horas de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setMilliseconds()")}}</dt> - <dd> - Establece los milisegundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setMinutes()")}}</dt> - <dd> - Establece los minutos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setMonth()")}}</dt> - <dd> - Establece el mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setSeconds()")}}</dt> - <dd> - Establece los segundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setTime()")}}</dt> - <dd> - Establece el valor del objeto <code>Date</code> según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setUTCDate()")}}</dt> - <dd> - Establece el día del mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCFullYear()")}}</dt> - <dd> - Establece el año completo de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCHours()")}}</dt> - <dd> - Establece la hora de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> - <dd> - Establece los milisegundos de la fecha especificada según la hora universal..</dd> - <dt> - {{jsxref("Date.prototype.setUTCMinutes()")}}</dt> - <dd> - Establece los minutos de la fecha especificada según la hora universal..</dd> - <dt> - {{jsxref("Date.prototype.setUTCMonth()")}}</dt> - <dd> - Establece el mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCSeconds()")}}</dt> - <dd> - Establece los segundos de la fecha especificada según la hora universal..</dd> - <dt> - {{jsxref("Date.prototype.setYear ()")}}{{deprecated_inline}}</dt> - <dd> - Establece el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.setFullYear()")}} a cambio.</dd> - <dt> - {{jsxref("Date.prototype.toGMTString()")}} {{ deprecated_inline}}</dt> - <dd> - Convierte una fecha en una cadena, usando las convenciones de Internet GMT. Utilice {{jsxref("Date.prototype.toUTCString()")}} a cambio.</dd> - <dt> - {{jsxref("Date.prototype.toLocaleString()")}}</dt> - <dd> - Convierte una fecha en una cadena, usando las reglas de la localización actual. Sobreescribe el método {{jsxref("Object.toLocaleString()")}}.</dd> - <dt> - {{jsxref("Date.prototype.toLocaleDateString()")}}</dt> - <dd> - Devuelve la porción fecha (sin la hora) de una fecha como una cadena, usando las reglas de la localización actual.</dd> - <dt> - {{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> - <dd> - Devuelve la porción hora (sin la fecha) de una fecha como una cadena, siguiendo las reglas de la localización actual.</dd> - <dt> - {{jsxref("Date.prototype.toSource()")}}</dt> - <dd> - Devuelve un literal que representa al objeto <code>Date</code> especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.toSource()")}}.</dd> - <dt> - {{jsxref("Date.prototype.toString()")}}</dt> - <dd> - Devuelve una cadena representando el objeto <code>Date</code> especificado. Sobreescribe el método {{jsxref("Object.toString()")}}.</dd> - <dt> - {{jsxref("Date.prototype.toUTCString()")}}</dt> - <dd> - Convierte una fecha en una cadena, usando las reglas horarias universales.</dd> - <dt> - {{jsxref("Date.prototype.valueOf()")}}</dt> - <dd> - Devuelve el valor primitivo de un objeto <code>Date</code>. Sobreescribe el método {{jsxref("Object.valueOf()")}}.</dd> -</dl> -<p>{{ jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf") }}</p> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/error/index.html b/files/es/conflicting/web/javascript/reference/global_objects/error/index.html deleted file mode 100644 index 5540880b03..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/error/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Error.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>Error.prototype</strong></code> representa el prototipo del constructor {{jsxref("Error")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Todas las instancias de {{jsxref("Error")}} e instancias de {{jsxref("Global_Objects/Error", "errores no genéricos", "#Error_types", 1)}}, heredan de <code>Error.prototype</code>. Como todas las funciones constructoras, se puede usar el protoipo del constructor para añadir propiedades o métodos a todas las instancias creadas con este constructor.</p> - -<h2 id="Properties">Properties</h2> - -<h3 id="Propiedades_estándar">Propiedades estándar</h3> - -<dl> - <dt><code>Error.prototype.constructor</code></dt> - <dd>Especifica la función que crea una instancia del prototipo.</dd> - <dt>{{jsxref("Error.prototype.message")}}</dt> - <dd>Mensaje de error.</dd> - <dt>{{jsxref("Error.prototype.name")}}</dt> - <dd>Nombre del error.</dd> -</dl> - -<h3 id="Extensiones_específicas_del_proveedor">Extensiones específicas del proveedor</h3> - -<div>{{non-standard_header}}</div> - -<h4 id="Microsoft">Microsoft</h4> - -<dl> - <dt>{{jsxref("Error.prototype.description")}}</dt> - <dd>Descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.</dd> - <dt>{{jsxref("Error.prototype.number")}}</dt> - <dd>Número de error.</dd> -</dl> - -<h4 id="Mozilla">Mozilla</h4> - -<dl> - <dt>{{jsxref("Error.prototype.fileName")}}</dt> - <dd>Ruta del archivo que lanzó el error.</dd> - <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> - <dd>Número de fila en el archivo que lanzó el error.</dd> - <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> - <dd>Número de columna en el archivo que lanzó el error.</dd> - <dt>{{jsxref("Error.prototype.stack")}}</dt> - <dd>Seguimiento de la pila.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Devuelve una cadena que contiene el codígo del objeto {{jsxref("Error")}}; se puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Error.prototype.toString()")}}</dt> - <dd>Devuelve una cadena que representa el objeto. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> - -<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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial. Implementado en JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con 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</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/function/index.html b/files/es/conflicting/web/javascript/reference/global_objects/function/index.html deleted file mode 100644 index 20de74f338..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Function.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function -tags: - - Function - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype ---- -<div>{{JSRef("Objetos_globales", "Function")}}</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>Un valor desde cuyas instancias de una clase particular son creados. Cada objeto que puede ser creado por la invocación a la función constructora posee una propiedad prototype asociada.</p> - -<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> - -<p>Puede añadir propiedades o métodos a una clase existente mediante la adición de ellos al prototipo asociado con la función constructora para esa clase.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>{{jsxref("Function.arguments")}} {{Deprecated_inline}}</dt> - <dd>Una matriz correspondiente a los argumentos pasados a una función. Como propiedad de una <code>Function</code>, este uso está obsoleto. Se recomenda el uso del objeto {{jsxref("Functiones/arguments", "arguments")}}.</dd> - <dt>{{jsxref("Function.arity")}} {{obsolete_inline}}</dt> - <dd>Especifica el número de argumentos que espera la función. Se recomienda, no obstante, utilizar la función {{jsxref("Function.length", "length")}}.</dd> - <dt>{{jsxref("Function.caller")}}</dt> - <dd>Especifica la función que invoca la ejecución de la función actual (no estándar).</dd> - <dt>{{jsxref("Function.constructor")}}</dt> - <dd>Especifica la función que crea un prototipo de objeto.</dd> - <dt>{{jsxref("Function.length")}}</dt> - <dd>Specifica el número de argumentos esperados por la función.</dd> - <dt>{{jsxref("Function.name")}}</dt> - <dd>El nombre de la función (no forma parte del estándar).</dd> - <dt>{{jsxref("Function.prototype")}}</dt> - <dd>Permite añadir propiedades a los objetos función (ambos, los construidos usando <code>Function</code> y los declarados usando una declaración de función o una expresión de función).</dd> -</dl> - -<div>{{ jsOverrides("Object", "properties", "arguments", "arity", "caller", "constructor", "length", "name", "displayName") }}</div> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Function.prototype.apply()")}}</dt> - <dd>Le permite aplicar el método de otro objeto en el contexto de un objeto diferente (el objeto llamado).</dd> - <dt>{{jsxref("Function.prototype.call()")}}</dt> - <dd>Le Permite llamar (ejecutar) a un método de otro objeto en el contexto de un objeto diferente (el objeto que llama).</dd> - <dt>{{jsxref("Function.prototype.toSource()")}}</dt> - <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd> - <dt>{{jsxref("Function.prototype.toString()")}}</dt> - <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd> -</dl> - -<div>{{ jsOverrides("Object", "methods", "apply", "call", "toSource", "toString") }}</div> - -<dl> - <dt> </dt> -</dl> - -<h2 id="Vea_También">Vea También</h2> - -<ul> - <li>{{jsxref("Objetos_globales/Function", "Function")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/map/index.html b/files/es/conflicting/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index 557a561e76..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Map.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>Map</strong></code><strong><code>.prototype</code></strong> representa el prototipo del constructor {{jsxref("Map")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>La instancia de {{jsxref("Map")}} hereda de {{jsxref("Map.prototype")}}. Puedes utilizar el constructor del prototipo del objeto para agregar propiedades o métodos a todas las instancias de <code>Map</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>Devuelve la función que creó el prototipo de una instancia. Esta es la función de {{jsxref("Map")}} por defecto.</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd>Devuelve el número de conjuntos de llave/valor en el objeto <code>Map</code>.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>Elimina todos los conjuntos de llave/valor del objeto <code>Map</code>.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> - <dd>Elimina cualquier valor asociado a la <code>llave</code> y devuelve el valor que <code>Map.prototype.has(key)</code> tenía previamente. Después <code>Map.prototype.has(key)</code> devolverá <code>false</code>.</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>Llama a la callbackFn una vez por cada conjunto llave/valor presentes en cada objeto <code>Map</code>, en orden de inserción. Si se le proporciona un parámetro thisArg a forEach, se usará como valor "this" para cada callback.</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> - <dd>Devuelve el valor asociado a la <code>llave</code>, o <code>undefined</code> si no tiene ninguno.</dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd>Devuelve un booleano que indica si un valor se ha asociado a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">llave</span></font> en el objeto <code>Map</code> o no se ha asociado.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene las <strong>llaves</strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd>Establece un valor para la <code>llave</code> en el objeto <code>Map</code>. Devuelve el objeto <code>Map</code>.</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene los <strong>valores</strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> -</dl> - -<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', 'Map.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</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>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop("13") }}</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ística</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</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>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("13")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td> - <p>8</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/number/index.html b/files/es/conflicting/web/javascript/reference/global_objects/number/index.html deleted file mode 100644 index 2f9f0a8e4e..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/number/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Number.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number -tags: - - JavaScript - - Number - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype ---- -<div> - {{JSRef("Objetos_globales", "Number")}}</div> -<h3 id="Resumen" name="Resumen">Resumen</h3> -<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase. Para información acerca de prototipos.</p> -<div class="noinclude"> - </div> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/object/index.html b/files/es/conflicting/web/javascript/reference/global_objects/object/index.html deleted file mode 100644 index 805aa55cf9..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/object/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Object.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object -tags: - - JavaScript - - Objeto - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype ---- -<div>{{JSRef("Objetos_globales", "Object")}}</div> - -<h2 id="Summary" name="Summary">Resumen</h2> - -<p>La propiedad <code><strong>Object.prototype</strong></code> representa al objeto prototipo de {{jsxref("Object")}}.</p> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Todos los objetos en JavaScript provienen de {{jsxref("Global_Objects/Object", "Object")}}; todos los objetos heredan métodos y propiedades de<code> Object.prototype</code>, aunque pueden ser sobrecargados. Sin embargo, un <code>Object</code> puede ser deliberadamente creado para que esto no sea cierto (por ejemplo usando {{jsxref("Object.create", "Object.create(null)")}}), o bien alterado para que no cumpla esta propiedad (por ejemplo usando {{jsxref("Object.setPrototypeOf")}}).</p> - -<p>Cambios en el prototipo de {{jsxref("Object")}} son vistos por <strong>todos </strong>los objetos a traves de el encadenado de prototype, a no ser que las propiedades y los metodos sujetos a estos cambios sean sobreescritos en algun lugar de la cadena de prototype. Este poderoso y a la vez potencialmente peligroso mecanismo permite extender o sobreescribir el comportamiento de un objeto.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>Especifica la función que crea el prototipo de un objeto.</dd> - <dt>{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{Non-standard_inline}}</dt> - <dd>Apunta al objeto que se usó como prototipo cuando fue instanciado.</dd> - <dt>{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{Non-standard_inline}}</dt> - <dd>Permite a una función ser definida que sera ejecutada cuando un miembro del objeto es llamado como un metodo.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline()}}</s></dt> - <dd>Se utiliza para devolver el número de propiedades enumerables directamente en un objeto definido por el usuario, pero que ha sido eliminado.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline()}}</s></dt> - <dd><s class="obsoleteElement">Apunta al contexto de un objeto. Ha sido borrado.</s></dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Asocia una función con una propiedad que, cuando se accede a ella, ejecuta esa función y devuelve su valor de retorno.</dd> - <dt>{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Asocia una función con una propiedad que al establecerse ejecuta esa función que modifica la propiedad.</dd> - <dt>{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Devuelve la función asociada con la propiedad indicada por el método {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> - <dt>{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Devuelve la función asociada con la propiedad indicada en el método {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>Devuelve un valor lógico (boolean) que indica si el objeto contiene la propiedad indicada como una propiedad directa de ese objeto y no heredada por la cadena de prototipo.</dd> - <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> - <dd>Devuelve una indicación <em>booleana</em> cuando el objeto especificado está en la cadena de prototipos del objeto sobre el cuál éste método es llamado.</dd> - <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> - <dd>Devuelve un valor lógico (boolean) indicando si el attributo <a href="/es/docs/Web/JavaScript/Data_structures#Objetos">ECMAScript [[Enumerable]]</a> está definido.</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline}}</dt> - <dd>Devuelve una cadena con el fuente de un literal de objeto que representa el objeto desde el que este método es llamado; se puede usar este valor para crear un nuevo objeto.</dd> - <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> - <dd>Llama a {{jsxref("Object.toString", "toString()")}}.</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>Devuelve la cadena de texto (string) que representa al objeto.</dd> - <dt>{{jsxref("Object.prototype.unwatch()")}} {{Non-standard_inline}}</dt> - <dd>Remueve un punto de mira de una propiedad del objeto.</dd> - <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> - <dd>Devuelve el valor primitivo del objeto indicado.</dd> - <dt>{{jsxref("Object.prototype.watch()")}} {{Non-standard_inline}}</dt> - <dd>Agrega un punto de mira a una propiedad del objeto.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{ obsolete_inline()}}</s></dt> - <dd><s class="obsoleteElement">Se utiliza para evaluar una cadena de código JavaScript en el contexto del objeto especificado, pero que ha sido removido.</s></dd> -</dl> - -<h2 id="Ejemplos">Ejemplos</h2> - -<p>Al alterar el comportamiento de un método existente en Object.prototype, es oportuno considerar envolver el código de tu extensión antes o después de la existente lógica. Por ejemplo, este trozo de código (sin testear) ejecutara una determinada lógica antes de que la lógica existente o la de algún otro elemento sea ejecutada.</p> - -<p>Cuando una función es llamada, los parámetros de la llamada son mantenidos en el argumento parecido a una array llamado "arguments". Por ejemplo, en la llamada "myFn(a, b, c)", los parámetros dentro del cuerpo de la función myFn estarán contenidos en una variable llamada "arguments". Si se desea llamar al siguiente método de la cadena de prototype, simplemente añade this y arguments a la funcion apply(). Este patrón puede ser usado en cualquier prototype, por ejemplo Node.prototype, Function.prototype, etc.</p> - -<pre class="brush: js">var current = Object.prototype.valueOf; - -// Como mi propiedad "-prop-value" es un atajo y no se encuentra siempre -// en la cadena de prototype, queremos modificar Object.prototype: -Object.prototype.valueOf = function() { - if (this.hasOwnProperty('-prop-value')) { - return this['-prop-value']; - } else { - // No parece que este objeto sea uno de los mios, por lo que recaeeremos - // en el comportamiento por defecto lo mejor que podamos. - // La llamada apply se comporta como el "super" en otros lenguages de programación. - // A pesar de que valueOf() no tiene parametros, alguna otra llamada podria tenerlos. - return current.apply(this, arguments); - } -}</pre> - -<p>Como JavaScript no tiene objetos de tipo “subclase”, prototype es realmente útil para crear un objeto “base” donde ciertas funciones actúan como objetos. Por ejemplo:</p> - -<pre class="brush: js">var Person = function(name) { - this.name = name; - this.canTalk = true; -}; - -Person.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name); - } -}; - -var Employee = function(name, title) { - Person.call(this, name); - this.title = title; -}; - -Employee.prototype = Object.create(Person.prototype); -Employee.prototype.constructor = Employee; - -Employee.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name + ', the ' + this.title); - } -}; - -var Customer = function(name) { - Person.call(this, name); -}; - -Customer.prototype = Object.create(Person.prototype); -Customer.prototype.constructor = Customer; - -var Mime = function(name) { - Person.call(this, name); - this.canTalk = false; -}; - -Mime.prototype = Object.create(Person.prototype); -Mime.prototype.constructor = Mime; - -var bob = new Employee('Bob', 'Builder'); -var joe = new Customer('Joe'); -var rg = new Employee('Red Green', 'Handyman'); -var mike = new Customer('Mike'); -var mime = new Mime('Mime'); - -bob.greet(); -// Hi, I am Bob, the Builder - -joe.greet(); -// Hi, I am Joe - -rg.greet(); -// Hi, I am Red Green, the Handyman - -mike.greet(); -// Hi, I am Mike - -mime.greet();</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">Observación</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td> - <p>Definición inicial.Implementado en JavaScript 1.0.</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p> </p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("javascript.builtins.Object.prototype")}}</p> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html deleted file mode 100644 index 99fe5cfd8d..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Promise.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise -tags: - - JavaScript - - Promesa - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>Promise.prototype</strong></code> representa el prototipo del constructor de {{jsxref("Promise")}}</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Las instancias de {{jsxref("Promise")}} heredan de {{jsxref("Promise.prototype")}}. Se puede usar el objeto prototipo del constructor para agregar propiedades o métodos a todas las instancias de <code>Promise</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>Retorna la función que creó el prototipo de una instancia. Esta es la función por defecto de {{jsxref("Promise")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(alRechazarse)")}}</dt> - <dd>Anexa a la promesa un callback manejador de rechazo, y retorna una nueva promesa que resuelve al valor de retorno del callback si es llamado, o de lo contrario a su valor de cumplimiento original si la promesa es cumplida.</dd> - <dt>{{jsxref("Promise.then", "Promise.prototype.then(alCumplirse, alRechazarse)")}}</dt> - <dd>Anexa a la promesa manejadores de cumplimiento y rechazo, y retorna una nueva promesa que resuelve al valor de retorno del manejador llamado, o a su valor de <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise#settledNote">determinación (settled)</a> original si la promesa no fue manejada (p.ej. si el manejador relevante <code>alCumplirse</code> o <code>alRechazarse</code> no es una función).</dd> -</dl> - -<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('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> - -<p>{{Compat("javascript/promise","Promise.prototype")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html deleted file mode 100644 index 0f4dc1fde3..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: RangeError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError -tags: - - Error - - JavaScript - - Propiedad - - Prototipo - - Prototype - - RangeError -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>RangeError.prototype</strong></code> representa el prototipo de {{jsxref("RangeError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Todas las instancias de {{jsxref("RangeError")}} heredan de <code>RangeError.prototype</code>. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>RangeError.prototype.constructor</code></dt> - <dd>Especifica la función que crea instancias del prototipo.</dd> - <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> - <dd>Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("RangeError")}} debe procurar su propio <code>message</code>, en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, se hereda de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> - <dd>Nombre del error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> - <dd>Ruta al fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> - <dd>Número de línea en el fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> - <dd>Número de columna de la línea en la que se produjo. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> - <dd>Pila de llamadas. Heredada de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p>Aunque el prototipo del objeto {{jsxref("RangeError")}} no contiene métodos propios, las instancias de {{jsxref("RangeError")}} heredan algunos a través de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>.</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">Commentario</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definido como <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido como <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de 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</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/string/index.html b/files/es/conflicting/web/javascript/reference/global_objects/string/index.html deleted file mode 100644 index 5f13679c36..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: String.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/String -tags: - - JavaScript - - Property - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype ---- -<p>{{JSRef("Objetos_globales", "String")}}</p> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>The <strong><code>String.prototype</code></strong> propiedad representa el prototipo de esta clase. Puede usar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>String.prototype.constructor</code></dt> - <dd>Especifica la función que crea un prototipo de objeto.</dd> - <dt>{{jsxref("String.prototype.length")}}</dt> - <dd>Refleja la longitud de la cadena.</dd> -</dl> - -<div>{{ jsOverrides("Object", "properties", "constructor", "length") }}</div> - -<h2 id="Métodos">Métodos</h2> - -<h3 id="M.C3.A9todos_no_relacionados_con_HTML" name="M.C3.A9todos_no_relacionados_con_HTML">Métodos no relacionados con HTML</h3> - -<dl> - <dt>{{jsxref("String.prototype.charAt()")}}</dt> - <dd>Devuelve el carácter en el índice especificado.</dd> - <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> - <dd>Devuelve el número que indica el valor Unicode del carácter en el índice especificado.</dd> - <dt>{{jsxref("String.prototype.concat()")}}</dt> - <dd>Combina el texto de dos cadenas y devuelve una nueva cadena.</dd> - <dt>{{jsxref("String.prototype.indexOf()")}}</dt> - <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la primera ocurrencia del valor especificado, o -1 si no lo encuentra.</dd> - <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> - <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la última ocurrencia del valor especificado, o -1 si no lo encuentra.</dd> - <dt>{{jsxref("String.prototype.match()")}}</dt> - <dd>Se usa para emparejar una expresión regular con una cadena.</dd> - <dt>{{jsxref("String.prototype.replace()")}}</dt> - <dd>Se usa para emparejar una expresión regular con una cadena, y reemplezar la subcadena emparejada con una nueva subcadena.</dd> - <dt>{{jsxref("String.prototype.search()")}}</dt> - <dd>Realiza una búsqueda de una expresión regular en una cadena especificada.</dd> - <dt>{{jsxref("String.prototype.slice()")}}</dt> - <dd>Extrae una sección de una cadena y devuelve una nueva cadena.</dd> - <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>Divide un objeto <code>String</code> en un arreglo de cadenas, separando la cadena en subcadenas.</dd> - <dt>{{jsxref("String.prototype.substr()")}}</dt> - <dd>Devuelve los caracteres de una cadena comenzando en la localización especificada y hasta el número de caracteres especificado.</dd> - <dt>{{jsxref("String.prototype.substring()")}}</dt> - <dd>Devuelve los caracteres de una cadena entre dos índices dentro de la cadena.</dd> - <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> - <dd>Devuelve el valor de la cadena que realiza la llamada en minúsculas.</dd> - <dt>{{jsxref("String.prototype.toSource()")}}</dt> - <dd>Devuelve el objeto literal que representa el objeto especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("String.prototype.toString()")}}</dt> - <dd>Devuelve una cadena que representa el objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> - <dd>Devuelve el valor de la cadena que realiza la llamada en mayúsculas.</dd> - <dt>{{jsxref("String.prototype.valueOf()")}}</dt> - <dd>Devuelve el valor primitivo del objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Métodos de encapsulado HTML</h3> - -<p>Cada uno de los métodos siguientes devuelve una copia de la cadena encapsulada dentro de una etiqueta HTML. Por ejemplo, "test".bold() devuelve "<b>test</b>".</p> - -<dl> - <dt>{{jsxref("String.prototype.anchor()")}}</dt> - <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-name-A"><code><a name="<em>name</em>"></code></a> (Ancha Hipertexto)</dd> - <dt>{{jsxref("String.prototype.big()")}}</dt> - <dd>{{HTMLElement("big")}}</dd> - <dt>{{jsxref("String.prototype.blink()")}}</dt> - <dd>{{HTMLElement("blink")}}</dd> - <dt>{{jsxref("String.prototype.bold()")}}</dt> - <dd>{{HTMLElement("b")}}</dd> - <dt>{{jsxref("String.prototype.fixed()")}}</dt> - <dd>{{HTMLElement("tt")}}</dd> - <dt>{{jsxref("String.prototype.fontcolor()")}}</dt> - <dd><code><font color="<em>color</em>"></code></dd> - <dt>{{jsxref("String.prototype.fontsize()")}}</dt> - <dd><code><font size="<em>size</em>"></code></dd> - <dt>{{jsxref("String.prototype.italics()")}}</dt> - <dd>{{HTMLElement("i")}}</dd> - <dt>{{jsxref("String.prototype.link()")}}</dt> - <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-href"><code><a href="<em>url</em>"></code></a> (Enlace a URL)</dd> - <dt>{{jsxref("String.prototype.small()")}}</dt> - <dd>{{HTMLElement("small")}}</dd> - <dt>{{jsxref("String.prototype.strike()")}}</dt> - <dd>{{HTMLElement("strike")}}</dd> - <dt>{{jsxref("String.prototype.sub()")}}</dt> - <dd>{{HTMLElement("sub")}}</dd> - <dt>{{jsxref("String.prototype.sup()")}}</dt> - <dd>{{HTMLElement("sup")}}</dd> -</dl> - -<p>Estos métodos son de uso limitado, ya que sólo están disponibles un subconjunto de etiquetas HTML y atributos.</p> - -<p>{{ jsOverrides("Object", "methods", "charAt", "charCodeAt", "concat", "indexOf", "lastIndexOf", "localeCompare", "match", "quote", "replace", "search", "slice", "split", "substr", "substring", "toLocaleLowerCase", "toLocaleUpperCase", "toLowerCase", "toSource", "toString", "toUpperCase", "trim", "trimLeft", "trimRight", "valueOf", "anchor", "big", "blink", "bold", "fixed", "fontcolor", "fontsize", "italics", "link", "small", "strike", "sub", "sup") }}</p> - -<h2 id="See_also" name="See_also">Vea también</h2> - -<ul> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> - -<dl> - <dt> </dt> -</dl> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html deleted file mode 100644 index 8fbdac1a8d..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: SyntaxError.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError -tags: - - Error - - JavaScript - - Property - - Prototype - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>SyntaxError.prototype</strong></code> representa el prototipo para el constructor {{jsxref("SyntaxError")}}.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>Todas las instancias de {{jsxref("SyntaxError")}} son heredadas de <code>SyntaxError.prototype</code>. Puedes usar el prototipo para agregar propiedades o metodos a todas las instancias.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>SyntaxError.prototype.constructor</code></dt> - <dd>Especifica la funcion que creó una instancia del prototipo.</dd> - <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> - <dd>Mensaje de error. A pesar de que ECMA-262 especifica que {{jsxref("SyntaxError")}} debe proveer su propia propiedad <code>message</code> , en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, es heredada de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> - <dd>Error name. Inherited from {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> - <dd>Ruta al archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> - <dd>Numero de linea en el archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> - <dd>Numero de columna en la linea que produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> - <dd>Stack trace. Heredada de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Metodos">Metodos</h2> - -<p>A pesar de que el objeto prototipo de {{jsxref("SyntaxError")}} no contiene metodos propios, las instancias de {{jsxref("SyntaxError")}} heredan algunos metodos debido a la cadena de prototipos.</p> - -<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('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> - -<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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html deleted file mode 100644 index fd84aa6280..0000000000 --- a/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: WeakMap.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -original_slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> representa el prototipo para el constructor {{jsxref("WeakMap")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Las instancias de {{jsxref("WeakMap")}} heredan de {{jsxref("WeakMap.prototype")}}. Se puede usar el objeto prototipo del constructor para añadir propiedades o métodos para todas las instancias de <code>WeakMap</code>.</p> - -<p><code>WeakMap.prototype</code> por si mismo es solamente un objeto ordinario:</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>WeakMap.prototype.constructor</code></dt> - <dd>Retorna la función que creó el prototipo de la instanciaReturns the function that created an instance's prototype. Esta es la función {{jsxref("WeakMap")}} por defecto.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> - <dd>Remueve cualquier valor asociado a la clave. Después de esto <code>WeakMap.prototype.has(key)</code> retornará falso.</dd> - <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> - <dd>Retorna el valor asociado a la clave, o <code>undefined</code> si no hay ninguno.</dd> - <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> - <dd>Retorna un valor booleano indicando si hay un valor asociado a la clave en el objeto the <code>WeakMap</code> object o no.</dd> - <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> - <dd>Asigna el valor para la clave en el objeto <code>WeakMap</code>. Retorna el objeto <code>WeakMap</code>.</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Remueve todas los pares clave/valore del objeto <code>WeakMap</code>. Notese que es posible implementar un objeto parecido al <code>WeakMap</code> que posea un método <code>.clear()</code>, encapsulando el objeto <code>WeakMap</code> que no lo tiene (ver ejemplo en la página {{jsxref("WeakMap")}})</s></dd> -</dl> - -<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-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </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>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>36</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>11</td> - <td>23</td> - <td>7.1</td> - </tr> - <tr> - <td>Objeto ordinario</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("40")}}</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>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>{{CompatGeckoMobile("6.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - <tr> - <td>Objeto ordinario</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("40")}}</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>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html deleted file mode 100644 index 0f36de5c58..0000000000 --- a/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Palabras Reservadas -slug: conflicting/Web/JavaScript/Reference/Lexical_grammar -tags: - - JavaScript - - palabras reservadas -translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords -translation_of_original: Web/JavaScript/Reference/Reserved_Words -original_slug: Web/JavaScript/Referencia/Palabras_Reservadas ---- -<p> </p> - -<p>Las siguientes son palabras reservadas y no pueden ser utilizadas como variables, funciones, métodos o identificadores de objetos. Las siguientes son reservadas como palabras claves existentes por la especificación ECMAScript:</p> - -<h3 id="Reserved_keywords_as_of_ECMAScript_6">Reserved keywords as of ECMAScript 6</h3> - -<div class="threecolumns"> -<ul> - <li>{{jsxref("Sentencias/break", "break")}}</li> - <li>{{jsxref("Sentencias/switch", "case")}}</li> - <li><code>class</code></li> - <li>{{jsxref("Sentencias/try...catch", "catch")}}</li> - <li>{{jsxref("Sentencias/const", "const")}}</li> - <li>{{jsxref("Sentencias/continue", "continue")}}</li> - <li>{{jsxref("Sentencias/debugger", "debugger")}}</li> - <li>{{jsxref("Sentencias/switch", "default")}}</li> - <li>{{jsxref("Operadores/delete", "delete")}}</li> - <li>{{jsxref("Sentencias/while", "do")}}</li> - <li>{{jsxref("Sentencias/if...else", "else")}}</li> - <li>{{jsxref("Sentencias/export", "export")}}</li> - <li><code>extends</code></li> - <li>{{jsxref("Sentencias/try...catch", "finally")}}</li> - <li>{{jsxref("Sentencias/for", "for")}}</li> - <li>{{jsxref("Sentencias/function", "function")}}</li> - <li>{{jsxref("Sentencias/if...else", "if")}}</li> - <li>{{jsxref("Sentencias/import", "import")}}</li> - <li>{{jsxref("Sentencias/for...in", "in")}}</li> - <li>{{jsxref("Operadores/instanceof", "instanceof")}}</li> - <li>{{jsxref("Sentencias/let", "let")}}</li> - <li>{{jsxref("Operadores/new", "new")}}</li> - <li>{{jsxref("Sentencias/return", "return")}}</li> - <li>{{jsxref("Operadores/super", "super")}}</li> - <li>{{jsxref("Sentencias/switch", "switch")}}</li> - <li>{{jsxref("Operadores/this", "this")}}</li> - <li>{{jsxref("Sentencias/throw", "throw")}}</li> - <li>{{jsxref("Sentencias/try...catch", "try")}}</li> - <li>{{jsxref("Operadores/typeof", "typeof")}}</li> - <li>{{jsxref("Sentencias/var", "var")}}</li> - <li>{{jsxref("Operadores/void", "void")}}</li> - <li>{{jsxref("Sentencias/while", "while")}}</li> - <li>{{jsxref("Sentencias/with", "with")}}</li> - <li><code>yield</code></li> -</ul> -</div> - -<p>Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:</p> - -<ul> - <li><code>enum</code></li> -</ul> - -<p>Las siguientes estan reservadas como palabras futuras cuando se encuentre el modo correcto para su estructura de codigo:</p> - -<div class="threecolumns"> -<ul> - <li><code>implements</code></li> - <li><code>package</code></li> - <li><code>protected</code></li> - <li><code>static</code></li> - <li><code>interface</code></li> - <li><code>private</code></li> - <li><code>public</code></li> -</ul> -</div> - -<h4 id="Futuras_Palabras_Reservadas_en_estandares_antiguos">Futuras Palabras Reservadas en estandares antiguos</h4> - -<p>Las siguientes estan reservadas como palabras futuras por la antigua especificación ECMAScript (ECMAScript 1 hasta 3).</p> - -<div class="threecolumns"> -<ul> - <li><code>abstract</code></li> - <li><code>boolean</code></li> - <li><code>byte</code></li> - <li><code>char</code></li> - <li><code>double</code></li> - <li><code>final</code></li> - <li><code>float</code></li> - <li><code>goto</code></li> - <li><code>int</code></li> - <li><code>long</code></li> - <li><code>native</code></li> - <li><code>short</code></li> - <li><code>synchronized</code></li> - <li><code>transient</code></li> - <li><code>volatile</code></li> -</ul> -</div> - -<p>Adicionalmente, los literales "<code>null"</code>, "<code>true"</code>, y "<code>false"</code> estan reservadas en ECMAScript para usos normales.</p> diff --git a/files/es/conflicting/web/javascript/reference/operators/index.html b/files/es/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index ef6c162b92..0000000000 --- a/files/es/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: Operadores Aritméticos -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Referencia/Operadores/Aritméticos ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Los operadores Aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y retornan un valor numérico único. Los operadores aritméticos estándar son adición o suma (+), sustracción o resta (-), multiplicación (*), y división (/).</p> - -<p>Estos operadores trabajan al igual que en la mayoría de otros lenguajes de programacion, excepto el operador /, que retorna una división de punto flotante en JavaScript, no una división truncada como en lenguajes tales como C o Java. Por ejemplo:</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</p> - -<h2 id="Suma_o_adición_()"><a name="Addition">Suma o adición (+)</a></h2> - -<p>La operación suma se produce mediante la suma de número o strings concatenados.</p> - -<h3 id="Sintaxis">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x + y</pre> - -<h3 id="Ejemplos">Ejemplos:</h3> - -<pre class="brush: js">// Número + Número = Adición - -1 + 2 // 3 - -// Bolean + Número = Adición - -true + 1 // 2 - -// Bolean + Bolean // Adición - -false + false // 0 - -// Número + String = Concatenación - -5 + 'foo' // "5foo" - -// String + Bolean = Concatenación - -'foo' + true // "footrue" - -// String + String = Concatenación - -'foo' + 'bar' // "foobar" -</pre> - -<h2 id="Resta_o_sustracción_(-)"><a name="Subtraction">Resta o sustracción (-)</a></h2> - -<p>La resta se produce cuando se sutraen el resultado de los operadores, produciendo su diferencia.</p> - -<h3 id="Sintaxis_2">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x - y</pre> - -<h3 id="Ejemplos_2">Ejemplos</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -'foo' - 3 // NaN -</pre> - -<h2 id="División_()"><a name="Division">División (/)</a></h2> - -<p>El operador división se produce el cociente de la operación donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p> - -<h3 id="Sintaxis_3">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x / y</pre> - -<h3 id="Ejemplos_3">Ejemplos</h3> - -<pre class="brush: js">1 / 2 // devuelve 0.5 en JavaScript -1 / 2 // devuelve 0 en Java -// (Ninguno de los números es explícitamente un número de punto flotante) - -1.0 / 2.0 // devuelve 0.5 en JavaScript y Java - -2.0 / 0 // devuelve Infinito en JavaScript -2.0 / 0.0 // devuelve Infinito -2.0 / -0.0 // devuelve -Infinito en JavaScript -</pre> - -<h2 id="Multiplicación_(*)"><a name="Multiplication">Multiplicación (*)</a></h2> - -<p>El operador multiplicación produce el producto de la multiplicación de los operandos.</p> - -<h3 id="Sintaxis_4">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x * y</pre> - -<h3 id="Ejemplos_4">Ejemplos</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinito * 0 // NaN -Infinito * Infinito // Infinito -'foo' * 2 // NaN</pre> - -<h2 id=".25_.28modular.29" name=".25_.28modular.29">Resto o Residuo (%)</h2> - -<p>El operador resto devuelve el resto que queda cuando un operando se divide por un segundo operando. Siempre toma el signo del dividendo, no el divisor. Utiliza una función de <code>modulo</code> incorporada para producir el resultado, que es el resto entero de dividir <code>var1</code> por <code>var2</code> - por ejemplo - <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe una propuesta para obtener un operador de módulo real en una versión futura de ECMAScript</a>, con la diferencia de que el resultado del operador de módulo tomaría el signo del divisor, no el dividendo.</p> - -<h3 id="Sintaxis_5">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> var1 % var2</pre> - -<h3 id="Ejemplos_5">Ejemplos</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -1 % -2 // 1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5</pre> - -<h2 id="Exponenciación_(**)">Exponenciación (**)</h2> - -<p>El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia. es decir, <code>var1<sup>var2</sup></code>, en la declaración anterior, donde <code>var1</code> y <code>var2</code> son variables. El operador de exponenciación es asociativo a la derecha. <code>a ** b ** c</code> es igual a <code>a ** (b ** c)</code>.</p> - -<h3 id="Sintaxis_6">Sintaxis</h3> - -<pre><strong>Operador:</strong> var1 ** var2</pre> - -<p> </p> - -<h3 id="Notas">Notas</h3> - -<p>En la mayoría de los lenguajes como PHP y Python y otros que tienen un operador de exponenciación (**), el operador de exponenciación se define para tener una precedencia más alta que los operadores unarios, como unario + y unario -, pero hay algunas excepciones. Por ejemplo, en Bash, el operador ** se define como de menor precedencia que los operadores unarios. En JavaScript, es imposible escribir una expresión de exponenciación ambigua, es decir, no se puede poner un operador unario (<code>+/-/~/!/delete/void/typeof</code>) inmediatamente antes del número de base.</p> - -<pre class="brush: js">-2 ** 2; -// 4 en Bash, -4 en otros idiomas. -// Esto no es válido en JavaScript, ya que la operación es ambigua. - - --(2 ** 2); -// -4 en JavaScript y la intención del autor no es ambigua.</pre> - -<h3 id="Ejemplos_6">Ejemplos</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<p>Para invertir el signo del resultado de una expresión de exponenciación:</p> - -<pre class="brush: js">-(2 ** 2) // -4</pre> - -<p>Para forzar la base de una expresión de exponenciación a ser un número negativo:</p> - -<pre class="brush: js">(-2) ** 2 // 4</pre> - -<div class="note"> -<p><strong>Nota:</strong> JavaScript también tiene <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">un operador bit a bit ^ (logical XOR)</a>. <code>**</code> y <code>^</code> son diferentes (por ejemplo: <code>2 ** 3 === 8</code> cuando <code>2 ^ 3 === 1</code>.)</p> -</div> - -<p> </p> - -<h2 id=".2B.2B_.28incremento.29" name=".2B.2B_.28incremento.29">Incremento (++)</h2> - -<p> </p> - -<p>El operador de incremento incrementa (agrega uno a) su operando y devuelve un valor.</p> - -<ul> - <li>Si se usa postfijo, con el operador después del operando (por ejemplo, x++), devuelve el valor antes de incrementar.</li> - <li>Si se usa prefijo, con el operador antes del operando (por ejemplo, ++x), devuelve el valor después de incrementar.</li> -</ul> - -<h3 id="Sintaxis_7">Sintaxis</h3> - -<pre><strong>Operador:</strong> x++ o ++x</pre> - -<h3 id="Ejemplos_7">Ejemplos</h3> - -<pre class="brush: js">// Postfijo -var x = 3; -y = x++; // y = 3, x = 4 - -// Prefijo -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="--_.28decremento.29" name="--_.28decremento.29">Decremento (--)</h2> - -<p>El operador de decremento disminuye (resta uno de) su operando y devuelve un valor.</p> - -<ul> - <li>Si se usa postfijo (por ejemplo, x--), devuelve el valor antes de decrementar.</li> - <li>Si usa el prefijo (por ejemplo, --x), entonces devuelve el valor después de decrementar.</li> -</ul> - -<h3 id="Sintaxis_8">Sintaxis</h3> - -<pre><strong>Operador:</strong> x-- o --x</pre> - -<h3 id="Ejemplos_8">Ejemplos</h3> - -<pre class="brush: js">// Postfijo -var x = 3; -y = x--; // y = 3, x = 2 - -// Prefijo -var a = 2; -b = --a; // a = 1, b = 1</pre> - -<p> </p> - -<h2 id="-_.28negaci.C3.B3n_unitario.29" name="-_.28negaci.C3.B3n_unitario.29">Negación unaria (-)</h2> - -<p>El operador de negación unaria precede su operando y lo niega.</p> - -<h3 id="Sintaxis_9">Sintaxis</h3> - -<pre><strong>Operador:</strong> -x</pre> - -<h3 id="Ejemplos_9">Ejemplos</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// el operador de negación unario puede convertir no-números en un número -var x = "4"; -y = -x; // y = -4</pre> - -<h2 id="Unario_más_()">Unario más (+)</h2> - -<p>El operador unario más precede su operando y evalúa su operando, pero intenta convertirlo en un número, si no lo está. Aunque la negación unaria (-) también puede convertir no números, unario plus es la manera más rápida y preferida de convertir algo en un número, porque no realiza ninguna otra operación en el número. Puede convertir representaciones de cadenas de enteros y flotantes, así como los valores que no sean cadenas <code>true</code>, <code>false</code> y <code>null</code>. Se admiten enteros en formato decimal y hexadecimal ("0x" -prefijado). Los números negativos son compatibles (aunque no para hexadecimal). Si no puede analizar un valor particular, evaluará a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> - -<h3 id="Sintaxis_10">Sintaxis</h3> - -<pre><strong>Operador:</strong> +x</pre> - -<h3 id="Ejemplos_10">Ejemplos</h3> - -<pre class="brush: js">+3 // 3 -+'3' // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN</pre> - -<p> </p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<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-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores unarios.</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Operadores unarios.</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td><a href="https://github.com/rwaldron/exponentiation-operator">Operador de exponenciación</a> agregado.</td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operadores de Asignación</a></li> -</ul> - -<p> </p> diff --git a/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html deleted file mode 100644 index f8d23e4eaa..0000000000 --- a/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Operador de propagación -slug: conflicting/Web/JavaScript/Reference/Operators/Spread_syntax -tags: - - Experimental - - Expérimental(2) - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator -original_slug: Web/JavaScript/Referencia/Operadores/Spread_operator ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de propagación <em><strong>spread operator</strong></em> permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Llamadas a funciones:</p> - -<pre class="brush: js">f(...iterableObj); -</pre> - -<p>Arrays literales:</p> - -<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre> - -<p>Desestructuración <em>destructuring</em>:</p> - -<pre class="brush: js">[a, b, ...iterableObj] = [1, 2, 3, 4, 5];</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Un_mejor_método_apply">Un mejor método apply</h3> - -<p><strong>Ejemplo:</strong> Es común usar {{jsxref( "Function.prototype.apply")}} en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:</p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f.apply(null, args);</pre> - -<p>Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:</p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f(...args);</pre> - -<p>Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación <em>spread, </em>donde además puede ser usada varias veces.</p> - -<pre class="brush: js">function f(v, w, x, y, z) { } -var args = [0, 1]; -f(-1, ...args, 2, ...[3]);</pre> - -<h3 id="Un_array_literal_mas_poderoso">Un array literal mas poderoso</h3> - -<p><strong>Ejemplo:</strong> La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis de propagación <em>spread</em> esta tarea resulta mucho mas concisa:</p> - -<pre class="brush: js">var parts = ['shoulder', 'knees']; -var lyrics = ['head', ...parts, 'and', 'toes'];</pre> - -<p>Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.</p> - -<h3 id="Combinación_del_método_apply_y_el_operador_new">Combinación del método apply y el operador new</h3> - -<p><strong>Ejemplo:</strong> En ES5 no es posible combinar <code>new</code> y <code>apply</code> (en ES5 el método <code>apply</code> crea un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). En ES6 la sintaxis de propagación <em>spread</em> soporta esto de forma natural:</p> - -<pre class="brush: js">var dateFields = readDateFields(database); -var d = new Date(...dateFields);</pre> - -<h3 id="Un_método_push_mejorado">Un método push mejorado</h3> - -<p><strong>Ejemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Agregar todos los elementos de arr2 a arr1 -Array.prototype.push.apply(arr1, arr2);</pre> - -<p>Usando el operador de propagación <em>spread</em> de ES6, este sería el resultado:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1.push(...arr2);</pre> - -<h3 id="Solo_funciona_para_iterables">Solo funciona para iterables</h3> - -<pre class="brush: js">var obj = {"key1":"value1"}; -function myFunction(x) { - console.log(x); // undefined -} -myFunction(...obj); -var args = [...obj]; -console.log(args, args.length) //[] 0</pre> - -<h2 id="Operador_Rest">Operador Rest</h2> - -<p>El operador <em>Rest</em> es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, <em>Rest</em> es lo contrario de <em>spread</em>. <em>Spread</em> 'expande' un array en sus elementos, y <em>Rest</em> recoge múltiples elementos y los 'condensa' en uno solo.</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">Commentario</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p>{{SpecName('ES6', '#sec-array-initializer', 'Array Initializer')}}<br> - {{SpecName('ES6', '#sec-argument-lists', 'Argument Lists')}}</p> - </td> - <td>{{Spec2('ES6')}}</td> - <td> - <ul> - <li>12.2.4 Array Initializer</li> - <li>12.3.6 Argument Lists</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en 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>Operación de spread en arrays literales</td> - <td>{{CompatNo}}<br> - <a href="https://code.google.com/p/v8/issues/detail?id=3018">v8 issue 3018</a></td> - <td>{{ CompatGeckoDesktop("16") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operación de spread en llamadas a funciones</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("27") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operación de spread en desestructuración<br> - <em>destructuring</em></td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("34") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</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>Características</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en arrays literales</span></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("16") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en llamadas a funciones</span></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("27") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en desestructuración</span><br> - <em>destructuring</em></td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("34") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Temas_relacionados">Temas relacionados</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parámetros rest</a></li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html b/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html deleted file mode 100644 index 9c2a7a8c40..0000000000 --- a/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Operadores de Comparación -slug: >- - conflicting/Web/JavaScript/Reference/Operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8 -tags: - - JavaScript - - Operador - - Referencia -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators -original_slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript tiene comparaciones estrictas y de conversión de tipos. Una comparación estricta (por ejemplo, <code>===</code>) solo es verdadera si los operandos son del mismo tipo y los contenidos coinciden. La comparación abstracta más comúnmente utilizada (por ejemplo, <code>==</code>) convierte los operandos al mismo tipo antes de hacer la comparación. Para las comparaciones abstractas relacionales (p. Ej., <code><=</code>), Los operandos primero se convierten en primitivos, y luego en el mismo tipo, antes de la comparación.</p> - -<p>Las cadenas se comparan en base al orden lexicográfico estándar, utilizando valores Unicode.</p> - -<pre class="brush: js notranslate">console.log(1 == 1) -// Esperamos True - -console.log("1" == 1 ) -// Esperamos true - -console.log( 1 === 1) -// Esperamos true - -console.log( "1" === 1) -// Esperamos false -</pre> - -<p>Características de las comparaciones:</p> - -<ul> - <li>Dos cadenas son estrictamente iguales cuando tienen la misma secuencia de caracteres, la misma longitud y los mismos caracteres en las posiciones correspondientes.</li> - <li>Dos números son estrictamente iguales cuando son numéricamente iguales (tienen el mismo valor numérico). <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> no es igual a nada, incluido NaN. Los ceros positivos y negativos son iguales entre sí. </li> - <li>Dos operandos booleanos son estrictamente iguales si ambos son <code>true</code> o ambos son <code>false</code>.</li> - <li>Dos objetos distintos nunca son iguales para comparaciones estrictas o abstractas.</li> - <li>Una expresión que compara objetos solo es verdadera si los operandos hacen referencia al mismo objeto.</li> - <li>Los tipos Null y Undefined son estrictamente iguales a ellos mismos y abstractivamente iguales entre sí.</li> -</ul> - -<h2 id="Operadores_de_igualdad">Operadores de igualdad</h2> - -<h3 id="Igualdad"><a name="Equality">Igualdad (==)</a></h3> - -<p>El operador de igualdad convierte los operandos si <strong>no son del mismo tipo</strong>, luego aplica una comparación estricta. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que son iguales cuando los operandos se refieren al mismo objeto en la memoria.</p> - -<h4 id="Sintaxis">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h4 id="Ejemplos">Ejemplos</h4> - -<pre class="brush: js notranslate">1 == 1 // true -'1' == 1 // true -1 == '1' // true -0 == false // true -0 == null // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 == object2 // false -0 == undefined // false -null == undefined // true -</pre> - -<h3 id="Desigualdad_!"><a name="Inequality">Desigualdad (!=)</a></h3> - -<p>El operador de desigualdad devuelve verdadero si los operandos no son iguales. Si los dos operandos <strong>no son del mismo tipo</strong>, JavaScript intenta convertir los operandos a un tipo apropiado para la comparación. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que no son iguales cuando los operandos se refieren a diferentes objetos en la memoria.</p> - -<h4 id="Sintaxis_2">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h4 id="Ejemplos_2">Ejemplos</h4> - -<pre class="brush: js notranslate">1 != 2 // true -1 != '1' // false -1 != "1" // false -1 != true // false -0 != false // false -</pre> - -<h3 id="Identidad_igualdad_estricta"><a name="Identity">Identidad / igualdad estricta (===)</a></h3> - -<p>El operador de identidad devuelve verdadero si los operandos son estrictamente iguales (ver arriba) <strong>sin conversión de tipo</strong>.</p> - -<h4 id="Sintaxis_3">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h4 id="Ejemplos_3">Ejemplos</h4> - -<pre class="brush: js notranslate">3 === 3 // true -3 === '3' // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 === object2 // false</pre> - - - -<h3 id="Sin_identidad_desigualdad_estricta_!"><a name="Nonidentity">Sin identidad / desigualdad estricta (!==)</a></h3> - -<p>El operador sin identidad devuelve verdadero si los operandos <strong>no son iguales y / o no del mismo tipo</strong>.</p> - -<h4 id="Sintaxis_4">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h4 id="Ejemplos_4">Ejemplos</h4> - -<pre class="brush: js notranslate">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="Operadores_relacionales">Operadores relacionales</h2> - -<p>Cada uno de estos operadores llamará a la función <code>valueOf()</code> en cada operando antes de realizar una comparación.</p> - -<h3 id="Operador_mayor_que_>"><a name="Greater_than_operator">Operador mayor que (>)</a></h3> - -<p>El operador mayor que, devuelve verdadero si el operando izquierdo es mayor que el operando derecho.</p> - -<h4 id="Sintaxis_5">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h4 id="Ejemplos_5">Ejemplos</h4> - -<pre class="brush: js notranslate">4 > 3 // true -</pre> - -<h3 id="Operador_mayor_o_igual_>"><a name="Greater_than_or_equal_operator">Operador mayor o igual (>=)</a></h3> - -<p>El operador mayor o igual que, devuelve verdadero si el operando izquierdo es mayor o igual que el operando derecho.</p> - -<h4 id="Sintaxis_6">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h4 id="Ejemplos_6">Ejemplos</h4> - -<pre class="brush: js notranslate">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="Operador_menor_que_<"><a name="Less_than_operator"> Operador menor que (<)</a></h3> - -<p>El operador menor que devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.</p> - -<h4 id="Sintaxis_7">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h4 id="Ejemplos_7">Ejemplos</h4> - -<pre class="brush: js notranslate">3 < 4 // true -</pre> - -<h3 id="Operador_menor_o_igual_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor o igual (<=)</a></h3> - -<p>El operador menor o igual devuelve verdadero si el operando izquierdo es menor o igual que el operando derecho.</p> - -<h4 id="Sintaxis_8">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h4 id="Ejemplos_8">Ejemplos</h4> - -<pre class="brush: js notranslate">3 <= 4 // true -</pre> - -<h2 id="Usando_los_operadores_de_igualdad">Usando los operadores de igualdad</h2> - -<p>Los operadores de igualdad estándar (<code>==</code> y <code>!=</code>) utilizan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparación de Igualdad Abstracta</a> para comparar dos operandos. Si los operandos son de tipos diferentes, intentará convertirlos al mismo tipo antes de hacer la comparación, por ejemplo, en la expresión <code>5 == '5'</code>, la cadena de la derecha se convierte a {{jsxref("Number")}} antes de realizar la comparación.</p> - -<p>Los operadores de igualdad estricta (<code>===</code> y <code>!==</code>) usan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de Comparación de Igualdad Estricta</a> y están destinados a realizar comparaciones de igualdad en operandos del mismo tipo. Si los operandos son de tipos diferentes, el resultado siempre es <code>false</code>, entonces <code>5 !== '5'</code>.</p> - -<p>Utilice operadores de igualdad estrictos si los operandos deben ser de un tipo específico así como de valor o si el tipo exacto de los operandos es importante. De lo contrario, utilice los operadores de igualdad estándar, que le permiten comparar la identidad de dos operandos, incluso si no son del mismo tipo.</p> - -<p>Cuando la conversión de tipo está involucrada en la comparación (es decir, comparación no estricta), JavaScript convierte los tipos {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} o {{jsxref("Object")}} operandos de la siguiente manera:</p> - -<ul> - <li>Al comparar un número y una cadena, la cadena se convierte en un valor numérico. JavaScript intenta convertir el literal numérico de cadena a un valor de tipo <code>Number</code>. Primero, un valor matemático se deriva del literal numérico de cadena. A continuación, este valor se redondea al valor de tipo <code>Number</code> más cercano.</li> - <li>Si uno de los operandos es <code>Boolean</code>, el operando <code>Boolean</code> se convierte en 1 si es <code>true</code> y +0 si es <code>false</code>.</li> - <li>Si un objeto se compara con un número o cadena, JavaScript intenta devolver el valor predeterminado para el objeto. Los operadores intentan convertir el objeto a un valor primitivo, un valor <code>String</code> o <code>Number</code>, utilizando los métodos <code>valueOf</code> y <code>toString</code> de los objetos. Si falla este intento de convertir el objeto, se genera un error de tiempo de ejecución.</li> - <li>Tenga en cuenta que un objeto se convierte en una primitiva si, y solo si, su comparando es una primitiva. Si ambos operandos son objetos, se comparan como objetos, y la prueba de igualdad es verdadera solo si ambos refieren el mismo objeto.</li> -</ul> - -<div class="note"><strong>Nota:</strong> Los objetos de cadena son Tipo Objeto, no String! Los objetos de cadena rara vez se utilizan, por lo que los siguientes resultados pueden ser sorprendentes:</div> - -<pre class="brush:js notranslate">// true, ya que ambos operandos son de tipo String (es decir, primitivas de cadena): -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// false como a y b son tipo Objeto y referencia a diferentes objetos -a == b - -// false como a y b son tipo Objeto y referencia a diferentes objetos -a === b - -// true como a y 'foo' son de tipo diferente y, el Objeto (a) -// se convierte en cadena 'foo' antes de la comparación -a == 'foo'</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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial. Implementado en JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> - <p>Agrega <code>===</code> y <code>!==</code> operadores. Implementado en JavaScript 1.3</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdad</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Operadores de Igualdad</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Operadores de Igualdad</a></p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparaciones de igualdad y uniformidad</a></li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html b/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html deleted file mode 100644 index 7d80f90f12..0000000000 --- a/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html +++ /dev/null @@ -1,724 +0,0 @@ ---- -title: Operadores a nivel de bit -slug: >- - conflicting/Web/JavaScript/Reference/Operators_5c44e7d07c463ff1a5a63654f4bda87b -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Los operadores a nivel de bit </strong>tratan sus operandos como una secuencia de 32 bits (unos y ceros) en lugar de <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">números</a> decimales, hexadecimales u octales. Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores a nivel de bit realizan las operaciones en esas representaciones binarias, pero los valores devueltos son los valores numéricos estándar de JavaScript.</p> - -<p>La siguiente tabla resume los operadores a nivel de bit de JavaScript:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Uso</th> - <th>Descripción</th> - </tr> - <tr> - <td><a href="#Bitwise_AND">AND binario</a></td> - <td><code>a & b</code></td> - <td>Devuelve un uno en cada posición en la que ambos operandos sea uno.</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">OR binario </a></td> - <td><code>a | b</code></td> - <td>Devuelve un uno en cada posición en la que uno o ambos operandos sea uno.</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR</a></td> - <td><code>a ^ b</code></td> - <td>Devuelve un uno en cada posición en la que los bits correspondientes en cada uno de los operandos, pero no en ambos, es uno. </td> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT</a></td> - <td><code>~ a</code></td> - <td>Invierte los bits del operando.</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift</a></td> - <td><code>a << b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la izquierda, desplazando en ceros desde la derecha.</td> - </tr> - <tr> - <td><a href="#Right_shift">Sign-propagating right shift</a></td> - <td><code>a >> b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, descartando los bits desplazados fuera.</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td> - <td><code>a >>> b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, desplazando en ceros desde la izquierda.</td> - </tr> - </tbody> -</table> - -<h2 id="Enteros_con_signo_de_32_bits">Enteros con signo de 32 bits</h2> - -<p>Los operandos de todas las operaciones bitwise son convertidos a enteros con signo de 32 bits en complemento a dos. Complemento a dos significa que el equivalente negativo de un número (por ejemplo, 5 y -5) es igual a todos los bits del número invertido (un NOT del número, también conocido como el compelemento a uno del número) más uno. Por ejemplo, a continuación se codifica el entero 314:</p> - -<pre>00000000000000000000000100111010 -</pre> - -<p>A continuación se codifica <code>~314</code> como complemento a uno de 314:</p> - -<pre>11111111111111111111111011000101 -</pre> - -<p>Por último, se codifica <code>-314 como complemento a dos de </code><code>314</code>:</p> - -<pre>11111111111111111111111011000110 -</pre> - -<p>El complemento a dos garantiza que el bit más a la izquierda es 0 cuando el número es positivo, y 1 cuando el número es negativo. Por esto es llamado <em>bit de signo.</em></p> - -<p>El número 0 es el entero compuesto íntegramente por bits en 0.</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) - -</pre> - -<p>El número -1 es el entero compuesto íntegramente por bits de 1.</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p>El número <code>-2147483648</code> (representación hexadecimal: <code>-0x80000000</code>) es el entero compuesto íntegramente por bits de 0 excepto el de más a la izquierda.</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p>El número <code>2147483647</code> (representación hexadecimal: <code>0x7fffffff</code>) es el entero compuesto íntegramente por bits de 1 excepto el de más a la izquierda. </p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>Los números <code>-2147483648</code> and <code>2147483647</code> son el mínimo y el máximo entero que se pueden representar con signo de 32 bits.</p> - -<h2 id="Operadores_lógicos_a_nivel_de_bit">Operadores lógicos<strong> a nivel de bit</strong></h2> - -<p>Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:</p> - -<ul> - <li>Los operandos son convertidos en enteros de 32 bits y representados por series de bits (ceros y unos). Los numeros con más de 32 bits se convierten para que sus bits más significativos sean descartados. Por ejemplo, el siguiente entero con más de 32 bits se convierte a un entero de 32 bits.</li> - <li> - <pre><code>Antes: 1100110111110100000000000000110000000000001 -Después: 10100000000000000110000000000001</code></pre> - </li> - <li>Cada bit del primer operando es emparejado con su bit correspondiente en el segundo operando: el primero con el primero, el segundo con el segundo, y así.</li> - <li>El operador se aplica a cada pareja de bits, y el resultado se construye bit a bit. </li> -</ul> - -<h3 id="(Bitwise_AND_o_AND_a_nivel_de_bits)"><a name="Bitwise_AND">& (Bitwise AND o AND a nivel de bits)</a></h3> - -<p>Corresponde al operador lógico & o "Y". Ejecuta la operación AND en cada par de bits, <code>a</code> AND <code>b</code> es 1 sólo si tanto a como b son 1. La tabla de verdad del operador AND es:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>El resultado de hacer un AND de cualquier número x con 0 es 0, mientras que el de hacer un AND de cualquier número x con -1 da como resultado x. </p> - -<h3 id="(Bitwise_OR_o_OR_a_nivel_de_bits)"><a name="Bitwise_OR">| (Bitwise OR o OR a nivel de bits)</a></h3> - -<p>Realiza la operación OR en cada par de bits. a OR b devuelve 1 si a o b son 1. La tabla de verdad para la operación OR es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Ejecutar la operación OR sobre cualquier número x y 0 devuelve x. Ejecutar OR sobre cualquier número X y -1 devuelve -1.</p> - -<h3 id="(Bitwise_XOR_o_XOR_a_nivel_de_bits)"><a name="Bitwise_XOR">^ (Bitwise XOR o XOR a nivel de bits)</a></h3> - -<p>Realiza la operación XOR en cada par de bits. a OR b devuelve 1 si a o b son diferentes. La tabla de verdad para la operación OR es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Ejecutar la operación XOR sobre cualquier número x y 0 devuelve x. Ejecutar la operación XOR sobre cualquier número x y -1 devuelve ~x</p> - -<h3 id="(Bitwise_NOT_o_Negación_a_nivel_de_bits)"><a name="Bitwise_NOT">~ (Bitwise NOT o Negación a nivel de bits)</a></h3> - -<p>Realiza la operación NOT a cada bit. NOT devuelve el valor invertido ( conocido como complementario). La tabla de verdad para la operación NOT es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<p> </p> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p> </p> - -<p>Ejecutar la operación NOT sobre cualquier número x devuelve -(x+1). Por ejemplo -5 devuelve 4.</p> - -<p>Ejemplo con indexOf:</p> - -<pre class="brush: js">var str = 'rawr'; -var searchFor = 'a'; - -// esta es un forma alternativa de escribir (-1*str.indexOf('a') <= 0) -if (~str.indexOf(searchFor)) { - // searchFor esta en el string -} else { - // searchFor no esta en el string -} - -// aquí verás los valores que retorna (~str.indexOf(searchFor)) -// r == -1 -// a == -2 -// w == -3 -</pre> - -<h2 id="Operadores_de_desplazamiento_a_nivel_de_bit">Operadores de desplazamiento <strong>a nivel de bit</strong></h2> - -<p>Los operadores de desplazamiento toman dos operandos: el primero es la cantidad a ser desplazados, y el segundo especifica el número de posiciones bits que el primer operando debe ser desplazado. El sentido del operador de desplazamiento es determinado por el operador utilizado.</p> - -<p>Shift operators u operadores de desplazamiento, convierten sus operandos a enteros de 32-bit en orden big-endian y retorna el resultado del mismo tipo que el operando izquierdo. El operador derecho debe ser menor que 32, de lo contrario solo se usaran los ultimos cinco bits mas bajos.</p> - -<h3 id="<<_(Desplazamiento_a_la_izquierda)"><a name="Left_shift"><< (Desplazamiento a la izquierda)</a></h3> - -<p>Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits en exceso desplazados hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.</p> - -<p>Por ejemplo, 9 << 2 devuelve 36:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Desplazar a la izquierda cualquier número <strong>x</strong> por <strong>y</strong> bits da por resultado <strong>x * 2^y</strong>.</p> - -<h3 id=">>_(Desplazamiento_a_la_derecha_con_propagación_de_signo_o_Desplazamiento_aritmético_a_la_derecha)"><a name="Right_shift">>> (Desplazamiento a la derecha con propagación de signo o </a><a name="Unsigned_right_shift">Desplazamiento aritmético a la derecha</a><a name="Right_shift">)</a></h3> - -<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Las copias del bit del extremo izquierdo se desplazan desde la izquierda. Como el nuevo bit más a la izquierda tiene el mismo valor que el bit anterior más a la izquierda, el bit de signo (el bit más a la izquierda) no cambia. De ahí el nombre "propagación de signo".</p> - -<p>Por ejemplo, <code>9 >> 2</code> devuelve 2:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Igualmente, <code>-9 >> 2</code> devuelve-3, porque se mantiene el signo:</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(Desplazamiento_a_la_derecha_con_relleno_de_ceros_o_Desplazamiento_lógico_)"><a name="Unsigned_right_shift">>>> (Desplazamiento a la derecha con relleno de ceros o Desplazamiento lógico )</a></h3> - -<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Ceros son despalzadas o introducidos desde la izquierda. El bit de signo aútomaticamente se convierte 0, así que el resultado siempre es pósitivo. </p> - -<p><br> - Para números no negativos, el desplazamiento lógico y arítmetico dan el mismo resultado. Por ejemplo, <code>9 >>> 2</code> da 2, al igual que <code>9 >> 2</code>:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Sin embargo, no es el caso para números negativos. Por ejemplo, <code>-9 >>> 2</code> da 1073741821, que es diferente de <code>-9 >> 2</code> (que da -3):</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Banderas_y_máscaras_de_bits">Banderas y máscaras de bits</h3> - -<p>Los operadores lógicos a nivel de bits se utilizan a menudo para crear, manipular y leer secuencias de indicadores, que son como variables binarias. Se podrían usar variables en lugar de estas secuencias, pero las banderas binarias toman mucho menos memoria (por un factor de 32).</p> - -<p>Supongamos que hay 4 banderas:</p> - -<ul> - <li>bandera A: tenemos un problema de hormigas</li> - <li>bandera B: somos dueños de un murciélago</li> - <li>bandera C: somos dueños de un gato</li> - <li>bandera D: somos dueños de un pato</li> -</ul> - -<p>Estas banderas están representadas por una secuencia de bits: DCBA. Cuando se establece un indicador, tiene un valor de 1. Cuando se elimina un indicador, tiene un valor de 0. Suponga que los indicadores de una variable tienen el valor binario 0101:</p> - -<pre class="brush: js">var flags = 5; // binary 0101 -</pre> - -<p>Este valor indica:</p> - -<ul> - <li>la bandera A es verdadera (tenemos un problema de hormigas);</li> - <li>la bandera B es falsa (no tenemos un murciélago);</li> - <li>la bandera C es verdadera (somos dueños de un gato);</li> - <li>la bandera D es falsa (no tenemos pato);</li> -</ul> - -<p>Dado que los operadores bitwise son de 32 bits, 0101 es en realidad 0000000000000000000000000000000101, pero los ceros anteriores pueden ignorarse ya que no contienen información significativa.</p> - -<p>Una máscara de bits es una secuencia de bits que puede manipular y / o leer banderas. Normalmente, se define una máscara de bits "primitiva" para cada bandera:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>Se pueden crear nuevas máscaras de bits utilizando los operadores lógicos a nivel de bits en estas máscaras de bits primitivas. Por ejemplo, la máscara de bits 1011 se puede crear mediante ORing FLAG_A, FLAG_B y FLAG_D:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Los valores de los indicadores individuales se pueden extraer mediante AND con una máscara de bits, donde cada bit con el valor de uno "extraerá" el indicador correspondiente. La máscara de bits enmascara las marcas no relevantes mediante AND con ceros (de ahí el término "bitmask"). Por ejemplo, la máscara de bits 0101 se puede usar para ver si el indicador C está establecido:</p> - -<pre class="brush: js">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>Una máscara de bits con varios indicadores establecidos actúa como un "either/or". Por ejemplo, los siguientes dos son equivalentes:</p> - -<pre class="brush: js">// if we own a bat or we own a cat -// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true -if ((flags & FLAG_B) || (flags & FLAG_C)) { - // do stuff -} -</pre> - -<pre class="brush: js">// if we own a bat or cat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>Los indicadores se pueden establecer mediante ORing con una máscara de bits, donde cada bit con el valor uno establecerá el indicador correspondiente, si ese indicador no está ya establecido. Por ejemplo, la máscara de bits 1100 se puede utilizar para establecer los indicadores C y D:</p> - -<pre class="brush: js">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Los indicadores se pueden borrar ANDing con una máscara de bits, donde cada bit con el valor cero borrará el indicador correspondiente, si aún no se ha borrado. Esta máscara de bits se puede crear NOTing las máscaras de bits primitivas. Por ejemplo, la máscara de bits 1010 se puede utilizar para borrar los indicadores A y C:</p> - -<pre class="brush: js">// no, we don't have an ant problem or own a cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>La máscara también podría haberse creado con ~ FLAG_A & ~ FLAG_C (ley de De Morgan):</p> - -<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Los indicadores se pueden alternar mediante XORing con una máscara de bits, donde cada bit con el valor uno cambiará el indicador correspondiente. Por ejemplo, la máscara de bits 0110 se puede utilizar para alternar los indicadores B y C:</p> - -<pre class="brush: js">// if we didn't have a bat, we have one now, -// and if we did have one, bye-bye bat -// same thing for cats -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finalmente, todas las banderas se pueden voltear con el operador NOT:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Fragmentos_de_conversión">Fragmentos de conversión</h3> - -<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> - -<pre class="brush: js">var sBinString = "1011"; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // prints 11, i.e. 1011 -</pre> - -<p> </p> - -<p>Convierte una cadena binaria a un número decimal:</p> - -<p> </p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // prints 1011, i.e. 11 -</pre> - -<h3 id="Automatiza_la_creación_de_una_máscara.">Automatiza la creación de una máscara.</h3> - -<p>Si tiene que crear muchas máscaras a partir de algunos valores booleanos, puede automatizar el proceso:</p> - -<pre class="brush: js">function createMask () { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 -var mask2 = createMask(false, false, true); // 4, i.e.: 0100 -var mask3 = createMask(true); // 1, i.e.: 0001 -// etc. - -alert(mask1); // prints 11, i.e.: 1011 -</pre> - -<h3 id="Algoritmo_inverso_una_matriz_de_valores_booleanos_de_una_máscara">Algoritmo inverso: una matriz de valores booleanos de una máscara</h3> - -<p>Si desea crear una matriz de valores booleanos a partir de una máscara, puede usar este código:</p> - -<pre class="brush: js">function arrayFromMask (nMask) { - // nMask must be between -2147483648 and 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError("arrayFromMask - out of range"); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert("[" + array1.join(", ") + "]"); -// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>Puedes probar ambos algoritmos al mismo tiempo ...</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>Solo para fines didácticos (ya que existe el método Number.toString (2)), mostramos cómo es posible modificar el algoritmo arrayFromMask para crear una cadena que contenga la representación binaria de un número, en lugar de una matriz de booleanos:</p> - -<pre class="brush: js">function createBinaryString (nMask) { - // nMask must be between -2147483648 and 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// prints 00000000000000000000000000001011, i.e. 11 -</pre> - -<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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definicion inicial</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</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><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</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><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Operadores logicos</a></li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html b/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html deleted file mode 100644 index 90a97a1033..0000000000 --- a/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html +++ /dev/null @@ -1,464 +0,0 @@ ---- -title: Operadores de asignación -slug: >- - conflicting/Web/JavaScript/Reference/Operators_d3958587a3d3dd644852ad397eb5951b -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators -original_slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Un <strong>operador de asignacion</strong> asigna un valor al operando de la izquierda basado en el valor del operando de la derecha.</p> - -<h2 id="Visión_general"><span class="short_text" id="result_box" lang="es"><span>Visión general</span></span></h2> - -<p>El operador de asignación basico es el igual (<code>=</code>), el cual asigna el valor del operando derecho al operando izquierdo. Es decir, x = y asigna el valor de y a x. El otro operador de asignacion son usualmente son abreviaciones para operaciones estandar, como se muestra en las siguientes definiciones y ejemplos.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Nombres</th> - <th>Abreviaciones</th> - <th>Significado</th> - </tr> - <tr> - <td><a href="#Assignment">Asignación</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Addition_assignment">Asignación de adición</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de sustracción</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de multiplicación</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de división</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Remainder_assignment">Asignación de Resto</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Exponentiation_assignment">Asignación de exponenciación</a></td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la derecha</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_AND_assignment">Asignacion AND</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Asignacion XOR</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Asignacion OR</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="Asignación"><a name="Assignment">Asignación</a></h2> - -<p>Operador de asignación simple que asigna un valor a una variable. EL operador de asignación evalua al valor asignado. Encadenando el operador de asignación es posible en orden de asignar un solo valor a multiples variables. Vea el ejemplo.</p> - -<h3 id="Sintaxis">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y -</pre> - -<h3 id="Ejemplos">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo las siguientes variables -// x = 5 -// y = 10 -// z = 25 - - -x = y // x es 10 -x = y = z // x, y, z son todas 25 -</pre> - -<h2 id="Asignación_de_Adición"><a name="Addition_assignment">Asignación de Adición</a></h2> - -<p>El operador de asignación de suma <strong>agrega</strong> el valor del operando derecho a la variable y le asigna el resultado a la variable. Los dos tipos de operandos determinan el comportamiento del operador de asignación de adición. Adición o concatenación es posible. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de adición", "#Addition", 1)}} para más detalles.</p> - -<h3 id="Sintaxis_2">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x += y -<strong>Significado:</strong> x = x + y -</pre> - -<h3 id="Ejemplos_2">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asuma las siguientes variables -// foo = "foo" -// bar = 5 -// baz = true - - -// Number + Number -> Adición -bar += 2 // 7 - -// Boolean + Number -> Adición -baz += 1 // 2 - -// Boolean + Boolean -> Adición -baz += false // 1 - -// Number + String -> concatenación -bar += "foo" // "5foo" - -// String + Boolean -> concatenación -foo += false // "foofalse" - -// String + String -> concatenación -foo += "bar" // "foobar" -</pre> - -<h2 id="Asignación_de_Sustracción"><a name="Subtraction_assignment">Asignación de Sustracción</a></h2> - -<p>El operador de asignación de sustracción <strong>sustrae </strong>el valor del operador derecho desde la variable y asigna el resultado a la variable. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de sustracción", "#Subtraction", 1)}} para mas detalles.</p> - - - -<h4 id="Sintaxis_3">Sintaxis</h4> - - - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x -= y -<strong>Significado:</strong> x = x - y -</pre> - -<h4 id="Ejemplos_3">Ejemplos</h4> - -<pre class="brush: js notranslate">// Asumiendo las siguientes variables -// bar = 5 - -bar -= 2 // 3 -bar -= "foo" // NaN -</pre> - -<h2 id="Asignación_de_Multiplicación">Asignación de Multiplicación </h2> - -<p>El operador de asignación de multiplicación <strong>multiplica </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de Multiplicación", "#Multiplication", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_4">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x *= y -<strong>Significado:</strong> x = x * y -</pre> - -<h3 id="Ejemplos_4">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar *= 2 // 10 -bar *= "foo" // NaN -</pre> - -<h2 id="Asignación_de_división"><a name="Division_assignment">Asignación de división</a></h2> - -<p>El operador de asignación de división <strong>divide </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "operador de división", "#Division", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_5">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x /= y -<strong>Significado:</strong> x = x / y -</pre> - -<h3 id="Ejemplos_5">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar /= 2 // 2.5 -bar /= "foo" // NaN -bar /= 0 // Infinity -</pre> - -<h2 id="Asignación_de_resto"><a name="Remainder_assignment">Asignación de resto</a></h2> - -<p>El operador de asignación de resto <strong>divide </strong>la variable por el valor del operador derecho y asigna el <strong>resto </strong>a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de resto", "#Remainder", 1)}} para mas detelles.</p> - -<h3 id="Sintaxis_6">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x %= y -<strong>Significado:</strong> x = x % y -</pre> - -<h3 id="Ejemplos_6">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar %= 2 // 1 -bar %= "foo" // NaN -bar %= 0 // NaN -</pre> - -<h2 id="Asignación_de_exponenciación"><a id="Exponentiation_assignment" name="Exponentiation_assignment"></a>Asignación de <span id="result_box" lang="es"><span>exponenciación</span></span></h2> - -<p>El operador de asignación de exponente evalua el resultado de elevar primero el operando a la <strong>potencia </strong>del segundo operando. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de exponenciación", "#Left_shift", 1)}}para mas detalles</p> - -<h3 id="Sintaxis_7">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x **= y -<strong>Significado:</strong> x = x ** y -</pre> - -<h3 id="Ejemplos_7">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar **= 2 // 25 -bar **= "foo" // NaN</pre> - -<h2 id="Asignación_de_desplazamiento_a_la_izquierda"><a name="Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></h2> - -<p>El operador de asignación de desplazamiento a la izquierda mueve una cantidad especifica de bits a la izquierda y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la izquierda", "#Left_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_8">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x <<= y -<strong>Significado:</strong> x = x << y -</pre> - -<h3 id="Ejemplos_8">Ejemplos</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h2 id="Asignación_de_desplazamiento_a_la_derecha"><a name="Right_shift_assignment">Asignación de desplazamiento a la derecha</a></h2> - -<p>El operador de asignación de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la derecha", "#Right_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_9">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>= y -<strong>Significado:</strong> x = x >> y -</pre> - -<h3 id="Ejemplos_9">Ejemplos</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar >>= 2; // 1 (00000000000000000000000000000001) - -var bar -5; // (-00000000000000000000000000000101) -bar >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h2 id="Asignación_sin_signo_de_desplazamiento_a_la_derecha"><a name="Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></h2> - -<p>El operador de asignación sin signo de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador sin signo de desplazamiento a la derecha", "#Unsigned_right_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_10">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>>= y -<strong>Significado:</strong> x = x >>> y -</pre> - -<h3 id="Ejemplo">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar >>>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h2 id="Asignación_AND"><a name="Bitwise_AND_assignment">Asignación AND</a></h2> - -<p>El operador de asignacion AND usa la representación binaria de ambos operandos, hace una operacion AND en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador AND", "#Bitwise_AND", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_11">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &= y -<strong>Significado:</strong> x = x & y -</pre> - -<h3 id="Ejemplo_2">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -bar &= 2; // 0 -</pre> - -<h2 id="Asignación_XOR"><a name="Bitwise_XOR_assignment">Asignación XOR</a></h2> - -<p>El operador de asignacion XOR usa la representación binaria de ambos operandos, hace una operacion XOR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador XOR", "#Bitwise_XOR", 1)}} para mas detalles</p> - -<h3 id="Sintaxis_12">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x ^= y -<strong>Significado:</strong> x = x ^ y -</pre> - -<h3 id="Ejemplo_3">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -bar ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Asignación_OR"><a name="Bitwise_OR_assignment">Asignación OR</a></h2> - -<p>El operador de asignacion OR usa la representación binaria de ambos operandos, hace una operacion OR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador OR", "#Bitwise_XOR", 1)}} para mas detalles</p> - -<h3 id="Sintaxis_13">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x |= y -<strong>Significado:</strong> x = x | y -</pre> - -<h3 id="Ejemplo_4">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -bar |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Ejemplos_10">Ejemplos</h2> - -<h3 id="Operador_izquierdo_con_otros_operadores_de_asignación">Operador izquierdo con otros operadores de asignación</h3> - -<p>En situaciones inusuales, el operador de asignacion (e.g x += y) no es identico al significado de la expresión (aca x = x + y). Cuando el operando izquierdo de un mismo operador de asignación contiene un operador de asignaciónm el operando izquierdo es evaluado una vez. por ejemplo:</p> - -<pre class="brush: js notranslate">a[i++] += 5 // i es evaluado una vez -a[i++] = a[i++] + 5 // i es evaluado dos veces -</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('ESDraft', '#sec-assignment-operators', 'Operadores de asignación')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-assignment-operators', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.13', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.13', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES1')}}</td> - <td> - <p>Definición inicial</p> - </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>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</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 basico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vea_tambien">Vea tambien</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Operadores Aritméticos</a></li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html b/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html deleted file mode 100644 index a2a2ca8de7..0000000000 --- a/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: Operadores lógicos -slug: >- - conflicting/Web/JavaScript/Reference/Operators_e72d8790e25513408a18a5826660f704 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators -original_slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos ---- -<div>{{jsSidebar("Operadores_lógicos")}}</div> - -<p>Los operadores lógicos se usan típicamente con valores {{jsxref("Boolean")}}. En tal caso, regresan un valor Boolean. Sin embargo, los operadores && y || regresan en realidad el valor de uno de los operandos especificados, por lo que si estos operadores se usan con valores no Boolean, posiblemente regresen un valor no Boolean.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>Los operadores lógicos se describen en la tabla siguiente:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Uso</th> - <th>Descripción</th> - </tr> - <tr> - <td>AND (<code>&&</code>) lógico</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td> - <p>Regresa <code>expr1 </code>si tal puede convertirse a false; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, && regresa true si ambos operandos son verdaderos; de lo contrario regresa false.</p> - </td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td> - <p>Regresa<code> expr1</code> si tal puede convertirse a true; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, || regresa true si cualquier operando es verdadero; pero si ambos son falsos, regresa "false".</p> - </td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td><code>!<em>expr</em></code></td> - <td> - <p>Regresa false si su único operando puede convertirse a true; de lo contrario, regresa true.</p> - </td> - </tr> - </tbody> -</table> - -<p>Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que evalúan a null, 0, un string vacío (""), o undefined.</p> - -<p>A pesar de que los operadores && y || pueden ser usados con operandos que no son valores Boolean, aún pueden ser considerados como operadores Boolean porque sus valores de regreso siempre pueden convertirse a valores Boolean.</p> - -<h3 id="Evaluación_contra_corto_circuitos">Evaluación contra "corto circuitos"</h3> - -<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, se prueban con una evaluación contra posibles "cortos circuitos" usando las siguientes normas:</p> - -<ul> - <li><code>false && (<em>cualquier valor)</em></code> evalúa a "false".</li> - <li><code>true || (<em>cualquier valor)</em></code> evalúa a "true".</li> -</ul> - -<p>Las reglas de lógica garantizan que estas evaluaciones siempre son correctas. Se debe notar que la parte de "cualquier valor" en las expresiones anteriores no se evalúa, para que tal acción no afecte de ninguna forma. Además, es de notar que la parte de "cualquier valor" en las expresiones anteriores debe ser cualquier expresión lógica (lo que se indica con los paréntesis).</p> - -<p>Por ejemplo, las siguientes dos expresiones son equivalentes.</p> - -<pre class="brush: js">function shortCircuitEvaluation() { - doSomething() || doSomethingElse() -} - -function equivalentEvaluation() { - var flag = doSomething(); - if (!flag) { - doSomethingElse(); - } -} -</pre> - -<p>Sin embargo, las siguientes expresiones no son equivalentes debido a la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, y con tal ejemplo se enfatiza la importancia de que la parte derecha sea una única expresión (agrupada en paréntesis si es necesario).</p> - -<pre class="brush: js">false && true || true // regresa true -false && (true || true) // regresa false</pre> - -<h3 id="AND_()_lógico"><a name="Logical_AND">AND (<code>&&</code>) lógico</a></h3> - -<p>El siguiente código muestra ejemplos del operador && (AND lógico).</p> - -<pre class="brush: js">a1 = true && true // t && t regresa true -a2 = true && false // t && f regresa false -a3 = false && true // f && t regresa false -a4 = false && (3 == 4) // f && f regresa false -a5 = "Cat" && "Dog" // t && t regresa "Dog" -a6 = false && "Cat" // f && t regresa false -a7 = "Cat" && false // t && f regresa false -</pre> - -<h3 id="OR_()_lógico"><a name="Logical_OR">OR (<code>||</code>) lógico</a></h3> - -<p>El siguiente código muestra ejemplos del operador <code>||</code> (OR lógico).</p> - -<pre class="brush: js">o1 = true || true // t || t regresa true -o2 = false || true // f || t regresa true -o3 = true || false // t || f regresa true -o4 = false || (3 == 4) // f || f regresa false -o5 = "Cat" || "Dog" // t || t regresa "Cat" -o6 = false || "Cat" // f || t regresa "Cat" -o7 = "Cat" || false // t || f regresa "Cat" -</pre> - -<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3> - -<p>El siguiente código muestra ejemplos del operador <code>!</code> (NOT lógico).</p> - -<pre class="brush: js">n1 = !true // !t regresa false -n2 = !false // !f regresa true -n3 = !"Cat" // !t regresa false -</pre> - -<h3 id="Reglas_de_conversión">Reglas de conversión</h3> - -<h4 id="Convertir_de_AND_a_OR">Convertir de AND a OR</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="Convertir_de_OR_a_AND">Convertir de OR a AND</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="Convertir_entre_operadores_NOT">Convertir entre operadores NOT</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">bCondition</pre> - -<h3 id="Eliminando_paréntesis_anidados">Eliminando paréntesis anidados</h3> - -<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, siempre es posible eliminar paréntesis en una expresión compleja, si se siguen ciertas reglas.</p> - -<h4 id="Eliminando_operadores_AND_anidados">Eliminando operadores AND anidados</h4> - -<p>La siguiente operación compleja que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="Eliminando_operadores_OR_anidados">Eliminando operadores OR anidados</h4> - -<p>La siguiente operación compleja que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</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">Comentarios</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre 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>AND (<code>&&</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</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>AND (<code>&&</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Operaciones binarias</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> -</ul> diff --git a/files/es/conflicting/web/javascript/reference/statements/switch/index.html b/files/es/conflicting/web/javascript/reference/statements/switch/index.html deleted file mode 100644 index c70e5eec5d..0000000000 --- a/files/es/conflicting/web/javascript/reference/statements/switch/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: default -slug: conflicting/Web/JavaScript/Reference/Statements/switch -tags: - - JavaScript - - Palabra clave -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default -original_slug: Web/JavaScript/Referencia/Sentencias/default ---- -<div>{{jsSidebar("Sentencias")}}</div> - -<p>La palabra clave<strong> default, </strong>en JavaScript puede ser usada en dos situaciones: dentro una sentencia {{jsxref("Sentencias/switch", "switch")}}, o con un sentencia{{jsxref("Sentencias/export", "export")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> - -<p class="hidden">El codigo fuente para este ejemplo interactivo esta almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y mandenos un pull request.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Dentro de una sentencia {{jsxref("Sentencias/switch", "switch")}}:</p> - -<pre class="syntaxbox">switch (expresion) { - case valor1: - //Declaración ejecutada cuando el resultado de la expresion conincida con valor1 - [break;] - default: - //Declaración ejecutada cuando ninguno de los valores conincida con algun valor de la expresion - [break;] -}</pre> - -<p>Con una sentencia {{jsxref("Sentencias/export", "export")}}:</p> - -<pre class="syntaxbox">export default <em>nameN</em> </pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Para mas detalles vea las paginas:</p> - -<ul> - <li>Sentencia {{jsxref("Sentencias/switch", "switch")}} y</li> - <li>Sentencia {{jsxref("Sentencias/export", "export")}}.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_default_en_una_sentencia_switch">Usando <code>default</code> en una sentencia <code>switch</code></h3> - -<p>En el siguiente ejemplo, si se evalua <code>expr</code> como "Naranjas" o "Manzanas", el programa coincide los valores en cada caso: "Naranjas" o "Manzanas", y ejecuta la declaración correspondiente. La palabra clave <code>default</code> ayudara en algun otro caso y ejecuta la declaración asociada.</p> - -<pre class="brush: js">switch (expr) { - case 'Naranjas': - console.log('Las Naranjas cuestan $0.59 el kilogramo.'); - break; - case 'Manzanas': - console.log('Las Manzanas cuestan $0.32 el kilogramo.'); - break; - default: - console.log('Lo esntimos, no tenemos ' + expr + '.'); -}</pre> - -<h3 id="Usando_default_con_export">Usando <code>default</code> con <code>export</code></h3> - -<p>Si queres exportar un solo valor o necesitas reservar un valor para un modulo, puedes usar una exportación por defecto:</p> - -<pre class="brush: js">// modulo "mi-modulo.js" -let cube = function cube(x) { - return x * x * x; -}; -export default cube;</pre> - -<p>Entonces, en otro script, sera sencillo de importar el valor del modulo:</p> - -<pre class="brush: js">// modulo "otro-modulo.js" -import cubeArea from 'mi-modulo'; //default export nos da la libertad de decir import cubeArea, en lugar de import cube from 'my-module' -console.log(cubeArea(3)); // 27 -</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-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div class="hidden">La tabla de compatibilidad en esta pagina es generada desde datos estruturados. si quieres contribuir con los datos, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div> - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="Vea_tambien">Vea tambien</h2> - -<ul> - <li>{{jsxref("Sentencias/export", "export")}}</li> - <li>{{jsxref("Sentencias/switch", "switch")}}</li> -</ul> diff --git a/files/es/conflicting/web/media/formats/index.html b/files/es/conflicting/web/media/formats/index.html deleted file mode 100644 index 15b4627d03..0000000000 --- a/files/es/conflicting/web/media/formats/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Formatos de medios admitidos por los elementos HTML audio y video -slug: conflicting/Web/Media/Formats -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats -original_slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 ---- -<p>Las etiquetas {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} <span id="result_box" lang="es"><span class="hps">proporcionan apoyo</span> <span class="hps">para la reproducción de</span> <span class="hps">audio</span> <span class="hps">y video</span> <span class="hps">sin necesidad de</span> <span class="atn hps">plug-</span><span>ins.</span> <span class="hps">Codecs</span> <span class="hps">de vídeo</span> <span class="hps">y codecs</span> <span class="hps">de audio</span> <span class="hps">se utilizan para manejar</span> <span class="hps">vídeo y</span> <span class="hps">audio,</span> <span class="hps">y los diferentes</span> <span class="hps">codecs</span> <span class="hps">ofrecen diferentes</span> <span class="hps">niveles de compresión</span> <span class="hps">y calidad.</span> <span class="hps">Un</span> <span class="hps">formato de contenedor</span> <span class="hps">se utiliza para</span> <span class="hps">almacenar y transmitir</span> <span class="hps">el vídeo</span> <span class="hps">y el audio</span> <span class="hps">codificado</span> <span class="hps">juntos.</span> <span class="hps">Muchos</span> <span class="hps">codecs</span> <span class="hps">y formatos</span> <span class="hps">de contenedor</span> <span class="hps">existe</span><span>,</span> <span class="hps">e incluso hay</span> <span class="hps">más combinaciones de</span> <span class="hps">ellos.</span> <span class="hps">Para su uso</span> <span class="hps">en la web,</span> <span class="hps">sólo un puñado de</span> <span class="hps">combinaciones</span> <span class="hps">son relevantes.</span></span></p> - -<p>Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE (La memoria de las patentes en este articulo se proporciona tal cual y sin ningun tipo de garantia.)</p> - -<p><span id="result_box" lang="es"><span class="hps">Para hacer</span> <span class="hps">un vídeo de</span> <span class="hps">HTML5</span><span>, que</span> <span class="hps">trabaja en</span> <span class="hps">las nuevas versiones de</span> <span class="hps">los principales navegadores</span><span>, puede</span> <span class="hps">usar el elemento {{HTMLElement("source")}} para reproducir</span> <span class="hps">en formatos WebM</span> o el formato <span class="hps">AAC</span> <span class="hps">MPEG</span> <span class="hps">H.264,</span> <span class="hps">usando el</span> <span class="hps">elemento de origen</span> <span class="hps">de esta manera:</span></span></p> - -<pre class="brush: html"><video controls> - <source src="somevideo.webm" type="video/webm"> - <source src="somevideo.mp4" type="video/mp4"> - I'm sorry; your browser doesn't support HTML5 video. - <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> -</video> -</pre> - -<h3 id="WebM">WebM</h3> - -<p><span id="result_box" lang="es"><span class="hps">El formato</span> <a href="http://www.webmproject.org/" title="http://www.webmproject.org/"><span class="hps">WebM</span></a> <span class="hps">se basa en</span> <span class="hps">una versión restringida</span> <span class="hps">del</span> <span class="hps">formato contenedor</span> <span class="hps">Matroska</span><span>.</span> <span class="hps">Siempre</span> <span class="hps">utiliza</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span><span>.</span> <span class="hps">WebM</span> <span class="hps">es</span> <span class="hps">soportado nativamente</span> <span class="hps">en</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span></span></p> - -<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx"><span id="result_box" lang="es"><span class="hps">Declaración</span> <span class="hps">de</span> <span class="hps">Microsoft</span> <span class="hps">sobre por qué</span> <span class="hps">IE9</span> <span class="hps">no tiene soporte</span> <span class="hps">WebM</span> <span class="hps">nativo.</span></span></a></p> - -<p><span id="result_box" lang="es"><span class="hps">El formato</span> <span class="hps">WebM</span><span>,</span> <span class="hps">específicamente</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span><span>,</span> <span class="alt-edited hps">habría</span> sido <span class="alt-edited hps">acusado</span> <span class="hps">de</span> <span class="hps">infracción de derechos de</span> <span class="hps">patente</span> <span class="hps">por un grupo de</span> <span class="hps">empresas de</span> <span class="hps">responder a una llamada</span> <span class="hps">por la</span> <span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">para la formación de</span> <span class="hps">un consorcio de patentes</span><span>, pero</span> <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">se ha comprometido a</span> <span class="hps">licenciar</span> <span class="hps">las patentes</span> <span class="hps">de</span> <span class="hps">Google</span></a> <span class="hps">bajo</span> <span class="atn hps">"</span><a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">transferible y de licencia gratuita</span></a><span class="atn hps">"</span><span>.</span> <span class="hps">Esto significa,</span> <span class="hps">efectivamente</span><span>,</span> <span class="hps">que todas las patentes</span> <span class="hps">conocidas en</span> <span class="hps">el formato</span> <span class="hps">WebM</span> <span class="hps">tienen licencia</span> <span class="hps">para todo el mundo</span> <span class="hps">de forma gratuita.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="hps">para los archivos WebM:</span></span></p> - -<dl> - <dt><code>video/webm</code></dt> - <dd>Un archivo WebM que es capaz de reproducir video (y es posible audio también)</dd> - <dt><code>audio/webm</code></dt> - <dd>Un archivo WebM que contiene audio unicamente.</dd> -</dl> - -<h3 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h3> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">Ogg</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">Theora</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span> <span class="hps">es compatible con</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span> <span class="hps">El formato no</span> <span class="hps">es compatible en Internet</span> <span class="hps">Explorer.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">WebM</span> <span class="alt-edited hps">es preferente</span>, <span class="hps">generalmente sobre</span> <span class="hps">Theora</span> <span class="hps">Ogg</span> <span class="hps">Vorbis</span> <span class="hps">cuando esté disponible</span></span><span id="result_box" lang="es"><span>,</span> <span class="hps">ya que proporciona</span> <span class="hps">una mejor</span> <span class="hps">relación de</span> <span class="hps">compresión para</span> <span class="hps">la calidad</span> <span class="hps">y</span> <span class="hps">se apoya</span> <span class="hps">en</span> <span class="hps">más navegadores</span><span>.</span> <span class="hps">El formato</span> <span class="hps">Ogg</span> <span class="hps">sin embargo, puede</span> <span class="hps">ser utilizado para apoyar</span> <span class="hps">versiones de los navegadores</span> <span class="hps">más antiguos</span><span>, en los que</span> <span class="hps">aún no</span> <span class="hps">se dispone de</span> <span class="hps">soporte para</span> <span class="hps">WebM</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">situación de las patentes</span> <span class="hps">de</span> <span class="hps">Theora</span> <span class="hps">es</span> <span class="hps">similar a la de</span> <span class="hps">WebM</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Usted puede aprender</span> <span class="hps">más sobre la creación</span> <span class="hps">de medios</span> <span class="hps">Ogg</span> <span class="hps">leyendo </span></span><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">the Theora Cookbook</a>.</p> - -<p>Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:</p> - -<dl> - <dt><code>audio/ogg</code></dt> - <dd><span class="short_text" id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">que contiene sólo</span> <span class="hps">audio.</span></span></dd> - <dt><code>video/ogg</code></dt> - <dd><span id="result_box" lang="es"><span class="hps">Un video</span> <span class="hps">que contiene</span> <span class="hps">el archivo</span> <span class="hps">ogg</span> <span class="hps">(y posiblemente </span><span class="hps">audio también)</span><span>.</span></span></dd> - <dt><code>application/ogg</code></dt> - <dd><span id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">con el contenido</span> <span class="hps">especificado.</span> <span class="hps">Utilizando uno de</span> <span class="hps">los otros dos tipos</span> <span class="hps">MIME</span> <span class="hps">es</span> <span class="hps">preferido</span><span>,</span> <span class="hps">pero se puede usar</span> <span class="hps">esta opción si</span> <span class="hps">usted no sabe</span> <span class="hps">lo que</span> <span class="hps">el contenido</span> <span class="hps">del fichero es</span></span>.</dd> -</dl> - -<h3 id="Ogg_Opus">Ogg Opus</h3> - -<p><span id="result_box" lang="es"><span class="hps">El contenedor</span> <span class="hps">Ogg</span> <span class="hps">también puede contener</span> <span class="hps">audio codificado</span> <span class="hps">con el <a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">códec</a></span><a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/"> <span class="hps">Opus</span><span>.</span></a> <span class="hps">El apoyo a esta</span> <span class="hps">disponible en</span></span> Gecko 15.0 {{ geckoRelease("15.0") }} y superior.</p> - -<h3 id="MP4_H.264_(AAC_o_MP3)">MP4 H.264 (AAC o MP3)</h3> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">MP4</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">H.264</span> <span class="hps">y, o bien</span> <span class="hps">el códec de audio</span> <span class="hps">AAC</span> <span class="hps">o</span> <span class="hps">el códec de audio</span> <span class="hps">MP3</span> <span class="alt-edited hps">es</span> <span class="alt-edited hps">nativamente</span> <span class="hps">compatible con</span> <span class="hps">Internet</span> <span class="hps">Explorer,</span> <span class="hps">Safari</span> <span class="hps">y</span> <span class="hps">Chrome,</span> pero <span class="hps">Chromium y</span> <span class="hps">Opera</span> <span class="hps">no son compatibles con</span> <span class="hps">el formato</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">pronto</span> <span class="hps">admite el formato</span><span>, pero sólo cuando</span> <span class="hps">un decodificador</span> <span class="hps">de terceros</span> <span class="hps">esté disponible.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">formatos</span> <span class="hps">MPEG</span> <span class="hps">están cubiertos por</span> <span class="hps">patentes, que</span> <span class="hps">no tienen licencia</span> <span class="hps">libre</span><span>.</span> <span class="hps">Todas</span> <span class="hps">las licencias necesarias</span> <span class="hps">se pueden comprar de</span> <span class="hps">MPEG</span> <span class="hps">LA.</span> <span class="hps">Desde</span> <span class="hps">H.264</span> <span class="hps">no está en</span> <span class="hps">un formato</span> <span class="hps">libre de</span> <span class="hps">regalías,</span> <span class="hps">no es apto</span> <span class="hps">para la plataforma</span> <span class="hps">web de código abierto</span><span>, de acuerdo con</span> <span class="hps">Mozilla</span> <span class="atn hps">[</span><a href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/"><span>1</span></a><span>,</span> <a href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html"><span class="hps">2</span></a><span>]</span><span>,</span> <span class="hps">Google</span> <span class="atn hps">[</span><a href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html"><span>1</span></a><span>,</span> <a href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html"><span class="hps">2</span></a><span>]</span> <span class="hps">y Opera.</span> <span class="hps">Sin embargo, los</span> <span class="hps">formatos libres</span> <span class="hps">no son compatibles con</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span><span>, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla</a></span><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/"> <span class="hps">ha decidido apoyar</span> <span class="hps">el formato de</span> </a><span class="hps"><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">todos modos</a>, y</span> <span class="hps">Google</span> <span class="hps">no</span> <span class="hps">cumplió</span> <span class="hps">su promesa de</span> <span class="hps">eliminar el soporte</span> <span class="hps">para él en</span> <span class="hps">Chrome.</span></span></p> - -<h3 id="WAVE_PCM">WAVE PCM</h3> - -<p>El formato contenedor WAVE, con el códec de audio PCM (WAVE codec "1") con el apoyo de Gecko (Firefox), y Safari. Archivos en el formato contenedor WAVE normalmente terminan con la extensión ". wav".</p> - -<div class="note"><strong>Nota: </strong><span class="short_text" id="result_box" lang="es"><span class="hps">Consulte</span> <a href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt"><span class="hps">RFC</span> <span class="hps">2361</span></a> <span class="hps">para</span> <span class="hps">el registro</span> <span class="hps">códec</span> <span class="hps">WAVE</span><span>.</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="alt-edited hps">en archivos de audio</span> <span class="hps">WAVE</span><span>:</span></span></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> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en 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>Basic support</td> - <td>3.0</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>9.0</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: WAVE, PCM</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: WebM, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.60</td> - <td>3.1 (must be installed separately)</td> - </tr> - <tr> - <td><code><audio></code>: Ogg, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><code><audio></code>: MP4, MP3</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td> - <p>Partial (see below)</p> - </td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: MP4, AAC</td> - <td> - <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> - </td> - <td> - <p>Partial (see below)</p> - </td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Ogg, Opus</td> - <td>27.0</td> - <td>{{ CompatGeckoDesktop("15.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: WebM, VP8, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> - <td>10.60</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> - </tr> - <tr> - <td><code><video></code>: Ogg, Theora, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><code><video></code>: MP4, H.264, MP3</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><video></code>: MP4, H.264, AAC</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td>any other format</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>3.1 (plays all formats available via QuickTime)</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</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Para evitar</span> <span class="hps">problemas de patentes</span><span>, el apoyo a</span> <span class="hps">MPEG</span> <span class="hps">4</span><span>, H.264</span><span>, MP3</span> <span class="hps">y</span> <span class="hps">AAC</span> <span class="hps">no</span> <span class="hps">está integrado directamente en</span> <span class="hps">Firefox.</span> <span class="hps">En su lugar,</span> <span class="hps">se basa en</span> <span class="hps">el apoyo del</span> <span class="hps">sistema operativo o</span> <span class="hps">hardware.</span> <span class="hps">Firefox</span> <span class="hps">soporta</span> <span class="hps">estos formatos</span> <span class="hps">en las siguientes plataformas</span><span>:</span></span></p> - -<table class="standard-table" style="height: 159px; width: 285px;"> - <thead> - <tr> - <th scope="col">Plataforma</th> - <th scope="col">Versión de Firefox</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td> - <td>21.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td> - <td>22.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> - <td>20.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> - <td>15.0</td> - </tr> - <tr> - <td>OS X 10.7</td> - <td>22.0</td> - </tr> - </tbody> -</table> - -<ul> - <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> - <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> -</ul> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in 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">Media elements</a> (HTML 5 specification)</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> diff --git a/files/es/conflicting/web/opensearch/index.html b/files/es/conflicting/web/opensearch/index.html deleted file mode 100644 index 524c22557e..0000000000 --- a/files/es/conflicting/web/opensearch/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Añadir motores de búsqueda desde páginas web -slug: conflicting/Web/OpenSearch -tags: - - Plugins_de_búsqueda -translation_of: Web/OpenSearch -translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages -original_slug: Añadir_motores_de_búsqueda_desde_páginas_web ---- -<p>Firefox permite que código JavaScript instale plugins de motores de búsqueda, y soporta dos formatos de plugin de motores de búsqueda: <a href="es/Creando_plugins_de_OpenSearch_para_Firefox">OpenSearch</a>, y Sherlock. -</p> -<div class="note"><b>Nota:</b> a partir de Firefox 2, OpenSearch es el formato preferido de búsqueda para Firefox.</div> -<p>Cuando código JavaScript intenta instalar un plugin de búsqueda, Firefox presenta una alerta pidiendo permiso al usuario para instalar el plugin. -</p> -<h2 id="Instalando_plugins_de_OpenSearch">Instalando plugins de OpenSearch</h2> -<p>Para instalar un plugin de OpenSearch, necesita utlilizar el método<code>window.external.AddSearchProvider()</code> DOM . El síntaxis de éste método es: -</p> -<pre class="eval">window.external.AddSearchProvider(<i>engineURL</i>); -</pre> -<p>Donde <i>engineURL</i> es la URL absoluta del archivo XML para el plugin del motor de búsqueda. -</p> -<div class="note"><b>Nota:</b> El soporte de OpenSearch esta sólo disponible en Firefox 2 y posterior.</div> -<h2 id="Instalando_plugins_de_Sherlock">Instalando plugins de Sherlock</h2> -<p>Para instalar un plugin de Sherlock, necesitará llamar <code>window.sidebar.addSearchEngine()</code>, el síntaxis para el mismo 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 la URL del plugin de Sherlock (un archivo ".src") a instalar. -</li><li> <code>iconURL</code> es la URL a un icono para asociar al plugin. -</li><li> El parámetro <code>suggestedName</code> sólo se usa al pedir permiso al usuario para instalar el plugin, así que un mensaje cómo "Desea instalar <i>suggestedName</i> de <i>engineURL</i>?" podrá mostrarse. -</li><li> El parámetro <code>suggestedCategory</code> no se usa. Debería especificar un valor vacío tipo string (<code>""</code>) o <code>null</code> (nulo). -</li></ul> -<p>Para detalles de Sherlock, visite <a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a> -</p> -<h2 id="Detecci.C3.B3n_de_la_capacidad_del_motor_de_b.C3.BAsqueda_del_navegador">Detección de la capacidad del motor de búsqueda del navegador</h2> -<p>Debido a que las APIs para añadir motores de búsqueda ha cambiado en el paso de la versión 1.5 a la 2 de firefox y ya que Firefox 1.5 no soporta los ficheros de descripción OpenSearch, los desarrolladores web que quieran añadir motores de búsqueda manteniendo la compatibilidad hacia atrás (p.e. que funcione en Firefox 1.5, Firefox 2.0 o IE 7) deben soportar tanto el formato Sherlock como el OpenSearch y deben detectar las capacidades del navegador de acuerdo a ello. El siguiente fragmento de código es un ejemplo de cómo puede hacerse esto: -</p> -<pre class="eval">function installSearchEngine() { - if (window.external && ("AddSearchProvider" in window.external)) { - // Firefox 2 and IE 7, OpenSearch - window.external.AddSearchProvider("<span class="nowiki">http://example.com/search-plugin.xml</span>"); - } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) { - // Firefox <= 1.5, Sherlock - window.sidebar.addSearchEngine("<span class="nowiki">http://example.com/search-plugin.src</span>", - "<span class="nowiki">http://example.com/search-icon.png</span>", - "Search Plugin", ""); - } else { - // Sin soporte para motores de búsqueda (IE 6, Opera, etc...). - alert("Sin soporte para motores de búsqueda"); - } -} -</pre> -<div class="noinclude"> -</div> -{{ languages( { "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "en": "en/Adding_search_engines_from_web_pages", "fr": "fr/Ajout_de_moteurs_de_recherche_depuis_des_pages_Web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages", "pl": "pl/Dodawanie_wyszukiwarek_z_poziomu_stron_WWW", "zh-tw": "zh_tw/\u81ea\u7db2\u9801\u6dfb\u52a0\u641c\u5c0b\u5f15\u64ce" } ) }} diff --git a/files/es/conflicting/web/progressive_web_apps/index.html b/files/es/conflicting/web/progressive_web_apps/index.html deleted file mode 100644 index 4025b422b5..0000000000 --- a/files/es/conflicting/web/progressive_web_apps/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Diseño adaptable («responsivo») -slug: conflicting/Web/Progressive_web_apps -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design -original_slug: Web_Development/Mobile/Diseño_responsivo ---- -<p>Como reacción a los problemas asociados con la estrategia de desarrollar <a href="https://developer.mozilla.org/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">sitios web separados</a> para los móviles y los escritorios, una idea relativamente nueva — aunque de hecho es <a class="external" href="http://www.alistapart.com/articles/dao/">bastante vieja</a>— que está aumentando en popularidad: deshacerse por completo de la detección del agente de usuario y hacer que la misma página responda a las capacidades del navegador en el lado del cliente. Este enfoque se ha denominado comúnmente como <a class="external" href="http://www.alistapart.com/articles/responsive-web-design/">diseño web adaptable —o «responsivo»—</a>. Al igual que la estrategia de sitios separados, el diseño web adaptativo tiene aspectos positivos y negativos.</p> -<h2 id="Las_ventajas">Las ventajas</h2> -<p>Aunque no se propuso inicialmente como un método para crear sitios para los móviles, el diseño flexible ha ganado recientemente mucha atención como una forma de dar los primeros pasos para el desarrollo de sitios que sean compatibles y amigables con los móviles en vez de tener un sitio separado para los mismos.</p> -<p>Se ahorra tiempo y dinero, ya que no es necesario mantener sitios web separados para los diferentes dispositivos.</p> -<p>El diseño flexilbe ofrece cada página con una sola y única URL. Las estadísticas compartidas de las redes sociales (Facebook Likes, Tweets, 1 en Google plus) no están divididas, ya que las versiones de tus páginas web para el escritorio y los móviles utilizan la misma URL .</p> -<p>El diseño adaptativo no se preocupa por los agentes de usuario.</p> -<p>Hay aspectos realmente buenos en este enfoque. Puesto que no se basa en la detección del navegador del usuario, tiene más capacidad de adaptarse cara al futuro que el enfoque de sitios separados. Para sitios sencillos, puede ser más fácil de implementar y mantener que otras opciones.</p> -<h2 id="Las_desventajas">Las desventajas</h2> -<p>Este enfoque no está excento de limitaciones. Dado que el contenido debe ser modificado del lado del cliente con JavaScript, se busca cambiar solo lo mínimo necesario. En general, las cosas suelen complicarse muy rápido si tratamos de escribir dos códigos separados en JavaScript para trabajar con el mismo DOM. Ésta es la razón más importante por la que las aplicaciones web tienden a no adoptan esta enfoque.</p> -<p>Dar a tu sitio actual un diseño flexible también implica reescribir tus estilos, si aún no están luciendo un diseño flexible. Podría tener sus ventajas hacer un diseño adaptativo de tu sitio y ser una buena oportunidad para modernizar y limpiar el CSS de tu sitio.</p> -<p>Por último, dado que vas a añadir código a tus archivos de comandos (scripts) y tus estilos, el rendimiento puede ser peor que con el enfoque de los sitios separados. En realidad no hay forma de evitar esto salvo refactorizar tus archivos de comandos y tus estilos para ahorrar algunos bytes a largo plazo.</p> -<h2 id="Cuándo_es_adecuado_elegir_esta_opción">Cuándo es adecuado elegir esta opción</h2> -<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img align="right" alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="width: 300px; height: 177px;"></a>Como se mencionó anteriormente, debido a que los cambios de contenido pueden resultar difíciles, cuando se toma este enfoque, no somos capaces de dar a los usuarios una experiencia radicalmente diferente en el móvil sin un aumento significativo en la complejidad del código. Entonces, si las versiones del escritorio y los móviles son muy similares, este enfoque es una opción muy buena. Ésto es partir de páginas bien adaptadas a sitios centrados en los datos, como las páginas de producto. Puede ver ejemplos debajo, de blog o portfolios!</p> -<h2 id="Ejemplos">Ejemplos</h2> -<p>Aunque no es tan popular como el enfoque de sitios separados, hay cada día más sitios web que emplean esta técnica. Por suerte, ya que todo el código está del lado del cliente, si desea ver cómo un sitio implementa técnicamente este método, es tan simple como visitar el sitio y hacer clic en “Ver código fuente.” Aquí tienes algunos ejemplos:</p> -<ul> - <li><a class="external" href="http://teixido.co/">http://teixido.co/</a> – uno de mis diseños flexibles favoritos, también la foto de arriba.</li> - <li><a class="external" href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – también es un buen artículo para leer, con sus propios enlaces a ejemplos</li> - <li><a class="external" href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> - <li><a class="external" href="http://stephencaver.com/">http://stephencaver.com/</a></li> - <li><a class="external" href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> -</ul> -<p>A pesar de ser un método relativamente nuevo, ya están apareciendo mejores prácticas. Por ejemplo, si tú estás diseñando un sitio desde cero con esta opción en mente, por lo general vale la pena <a class="external" href="http://www.lukew.com/ff/entry.asp?1117">crear primero un diseño de pantalla pequeña</a>, de manera que las limitaciones del telefono móvil están contigo desde el principio. También es de gran utilidad la mejora progresiva de tus estilos en lugar de ocultar los elementos de tu sitio actual con preguntas de los medios. De esta manera, los navegadores antiguos que no admitan las preguntas de los medios siguen mostrando la disposición adecuada. Una excelente presentación sobre las ventajas de este método la puedes ver <a class="external" href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aquí</a>.</p> -<h2 id="Métodos_de_desarrollo_web_para_móviles">Métodos de desarrollo web para móviles</h2> -<p>Consulta los siguientes artículos de antecedentes y otros enfoques para el desarrollo de plataformas móviles.</p> -<ul> - <li><a href="/en/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">¿Qué es un móvil-amigable?</a></li> - <li><a href="/en/Web_Development/Mobile/Separate_sites" title="en/Web development/Mobile/Separate sites">Sitios separados</a></li> - <li><a href="/en/Web_development/Mobile/A_hybrid_approach" title="en/Web development/Mobile/Hybrid approach">Un enfoque híbrido</a></li> -</ul> -<h2 id="Véase_también">Véase también</h2> -<ul> - <li><a href="/en/Web_Development/Responsive_Web_design" title="Responsive Web design">Diseño Web Adaptativo</a> para ver recursos adicionales</li> -</ul> -<div class="originaldocinfo"> - <h3 id="Original_document_information">Original document information</h3> - <p>Originally published on 27 May, 2011 on the Mozilla Webdev blog as "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", by Jason Grlicky.</p> -</div> -<p> </p> diff --git a/files/es/conflicting/web/progressive_web_apps/introduction/index.html b/files/es/conflicting/web/progressive_web_apps/introduction/index.html deleted file mode 100644 index be12926a85..0000000000 --- a/files/es/conflicting/web/progressive_web_apps/introduction/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Ventajas de una aplicación web progresiva (AWP) -slug: conflicting/Web/Progressive_web_apps/Introduction -tags: - - AWP - - aplicaciones web progresivas - - conceptos - - ventajas -translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications -translation_of_original: Web/Progressive_web_apps/Advantages -original_slug: Web/Progressive_web_apps/Ventajas ---- -<p class="summary">Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.</p> - - - -<h2 id="Reconocible">Reconocible<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>El objetivo final es que las aplicaciones web deben tener una mejor representación en los motores de búsqueda, ser más fáciles de exponer, catalogar y clasificar, y tener metadatos que los navegadores puedan utilizar para darles capacidades especiales.</p> - -<p>Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en la web mediante tecnologías patentadas como <a href="http://ogp.me/">Open Graph</a>, que proporciona un formato para especificar metadatos similares en el <code><head></code> de HTML usando metaetiquetas.</p> - -<p>El estándar web relevante aquí es el <a href="/en-US/docs/Web/Manifest">Manifiesto de aplicación web</a>, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato JSON. Esto es para usar en contextos como listados de aplicaciones y pantallas de inicio de dispositivos.</p> - -<ul> -</ul> - -<h2 id="Instalable">Instalable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una parte central de la experiencia de aplicaciones es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio, y ser capaz de pulsar para abrir aplicaciones en su propio contenedor nativo que se siente bien integrado con la plataforma subyacente.</p> - -<p>Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de las propiedades establecidas dentro del manifiesto de la aplicación web, y a través de una función disponible en los navegadores de teléfonos inteligentes modernos llamada <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Añadir a la página de inicio</a>.</p> - -<h2 id="Enlazable">Enlazable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una de las características más potentes de la Web es ser capaz de enlazar a una aplicación en una URL específica. No necesita tienda de aplicaciones, ningún proceso de instalación complejo. Así es como siempre ha sido.</p> - -<h2 id="Independencia_de_la_red">Independencia de la red<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web modernas pueden funcionar cuando la red no es confiable, o incluso inexistente. Las ideas básicas detrás de la independencia de la red son:</p> - -<ul> - <li>Volver a visitar un sitio y obtener sus contenidos, incluso si no hay una conexión red disponible.</li> - <li>Explore cualquier tipo de contenido que el usuario haya visitado anteriormente al menos una vez, incluso en situaciones de poca conectividad.</li> - <li>Controlar lo que se muestra al usuario en situaciones en las que no hay conectividad.</li> -</ul> - -<p>Esto se logra mediante una combinación de tecnologías: <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la <a href="/en-US/docs/Web/API/Cache">Cache API</a> para almacenar respuestas a solicitudes de red fuera de línea (muy útil para almacenar recursos del sitio) y tecnologías de almacenamiento de datos del lado del cliente como <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> y <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> para almacenar datos de la aplicación sin conexión.</p> - -<h2 id="Progresiva">Progresiva<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia súper genial a los navegadores totalmente capaces, y una experiencia aceptable (aunque no tan brillante) para los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas como <a href="/en-US/docs/Glossary/Progressive_Enhancement">mejora progresiva</a>.</p> - -<h2 id="Reconectable">Reconectable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a participar mediante actualizaciones y contenido nuevo, incluso cuando no están mirando la aplicación o utilizando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> para controlar páginas, el <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker, y la <a href="/en-US/docs/Web/API/Notifications_API">API de notificaciones</a> para generar notificaciones del sistema para ayudar a atraer a los usuarios cuando no están en el navegador.</p> - -<h2 id="Adaptable">Adaptable<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web adaptables usan tecnologías como consultas de media y viewport para asegurarse de que sus interfaces se ajusten a cualquier factor de forma: escritorio, móvil, tableta o lo que sea que venga después.</p> - -<h2 id="Seguro">Seguro<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2> - -<p>La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y garantiza que el contenido no haya sido alterado, siempre que aproveche de HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad. Además, puede verificar la verdadera naturaleza de una AWP confirmando que está en la URL correcta, mientras que las aplicaciones en las tiendas de aplicaciones a menudo pueden parecer una cosa, pero ser otra (<a href="https://twitter.com/andreasbovens/status/926965095296651264">ejemplo</a>).</p> diff --git a/files/es/conflicting/web/web_components/using_custom_elements/index.html b/files/es/conflicting/web/web_components/using_custom_elements/index.html deleted file mode 100644 index 9ca4c50786..0000000000 --- a/files/es/conflicting/web/web_components/using_custom_elements/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Custom Elements -slug: conflicting/Web/Web_Components/Using_custom_elements -tags: - - Componentes Web - - Web Components - - custom elements -translation_of: Web/Web_Components/Using_custom_elements -translation_of_original: Web/Web_Components/Custom_Elements -original_slug: Web/Web_Components/Custom_Elements ---- -<p>Los <em>Custom Elements </em>son una característica que permite crear tus propios <a href="https://developer.mozilla.org/en-US/docs/Glossary/Element">elementos</a> HTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components</a>, pero también pueden ser utilizados independientemente.</p> - -<div class="note"> -<p><strong>Nota:</strong> Los <em>Custom elements</em> sólo se han estabilizado recientemente, y partes de MDN todavía contienen información desactualizada de las APIs de los antiguos borradores de la especificación.</p> -</div> - -<p>Puede no estar claro por qué se creó la nueva capacidad de elementos personalizados, ya que ya era posible crear una etiqueta como <code><mytag></code> y aplicarle estilo con CSS, luego utilizar scripts para darle comportamiento. Una ventaja que tienen los <em>custom elements</em> son las reacciones de ciclo de vida (<em>lifecycle reactions)</em>, que permiten asociar comportamiento a diferentes partes del nuevo "ciclo de vida" del elemento. Por ejemplo, se puede asociar un comportamiento concreto cuando un nuevo elemento se inserta en el DOM ("conectado"), y otro distinto cuando es eliminado del DOM ("desconectado"), o cuando sus atributos cambien.</p> - -<p>El habilitador de claves de los elementos personalizados v1 es el método {{domxref("CustomElementRegistry.define()")}}, el cual se puede utilizar para definir un nuevo elemento personalizado. El nuevo elemento utilizará la clase suministrada para cualquier instancia, en lugar del valor predeterminado {{domxref("HTMLUnknownElement")}}. Los elementos personalizados pueden basarse en un elemento nativo como <code><button></code>, utilizando la sintaxis <code><button is="my-button"></code>; estos se llaman <em>elementos integrados personalizados.</em></p> - -<h2 id="Métodos_de_custom_element">Métodos de <em>custom element</em></h2> - -<p>Los <em>Custom elements</em> tienen los siguientes métodos que dictan su comportamiento:</p> - -<dl> - <dt>constructor()</dt> - <dd>Llamado cuando el elemento es creado o actualizado</dd> - <dt>connectedCallback()</dt> - <dd>Llamado cuando el elemento se es insertado en el documento, incluyéndose en un árbol shadow</dd> - <dt>disconnectedCallback()</dt> - <dd>Llamado cuando el elemento es eliminado de un documento</dd> - <dt>attributeChangedCallback(nombreDelAtributo, antiguoValor, nuevoValor, dominio)</dt> - <dd>Llamado cuando un atributo es cambiado, concatenado, eliminado o reemplazado en el elemento. Sólo llamado sobre <a href="#Atributos_Observados">atributos observados</a>.</dd> - <dt>adoptedCallback(antiguoDocumento, nuevoDocumento)</dt> - <dd>Llamado cuando un elemento es adoptado en otro nuevo documento</dd> -</dl> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Los <em>custom elements</em> necesitan usar la <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes">sintaxis de clase</a> introducida en las versiones modernas de JavaScript.</p> - -<p>Archivo HTML:</p> - -<pre class="brush: html">Si no aparece nada debajo, es que tu navegador no soporta aún los Custom Elements. -<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product> -<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product> -<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product></pre> - -<p>Archivo JS:</p> - -<pre class="brush: js">// Declaración de un <em>custom element</em> que hereda de HTMLElement -class XProduct extends HTMLElement { - constructor() { - // Siempre debe llamarse primero al constructor padre - super(); - - // Se crea el <em>shadow root</em> - var shadow = this.attachShadow({mode: 'open'}); - - // Se crea un elemnto img y se asignan sus atributos. - var img = document.createElement('img'); - img.alt = this.getAttribute('data-name'); - img.src = this.getAttribute('data-img'); - img.width = '150'; - img.height = '150'; - img.className = 'product-img'; - - // Añadir la imagen al shadow root. - shadow.appendChild(img); - - // Añadir un elemento de escucha a la imagen. - img.addEventListener('click', () => { - window.location = this.getAttribute('data-url'); - }); - - // Crear un enlace al producto. - var link = document.createElement('a'); - link.innerText = this.getAttribute('data-name'); - link.href = this.getAttribute('data-url'); - link.className = 'product-name'; - - // Añadir el enlace al shadow root. - shadow.appendChild(link); - } -} - -// Definir el nuevo elemento. -customElements.define('x-product', XProduct); -</pre> - -<p>Archivo CSS:</p> - -<pre class="brush: css">body { - background: #F7F7F7; -} - -x-product { - display: inline-block; - float: left; - margin: 0.5em; - border-radius: 3px; - background: #FFF; - box-shadow: 0 1px 3px rgba(0,0,0,0.25); - font-family: Helvetica, arial, sans-serif; - -webkit-font-smoothing: antialiased; -} - -x-product::slotted(.product-img) { - cursor: pointer; - background: #FFF; - margin: 0.5em; -} - -x-product::slotted(.product-name) { - display: block; - text-align: center; - text-decoration: none; - color: #08C; - border-top: 1px solid #EEE; - font-weight: bold; - padding: 0.75em 0; -} -</pre> - -<p>A continuación se muestra el ejemplo en vivo de lo anterior:</p> - -<p>{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}</p> - -<h2 id="Atributos_Observados">Atributos Observados</h2> - -<p>Para ser notificado cuando un atributo cambia, se debe definir una lista de atributos observados al inicializar el elemento, poniendo un getter estático <code>observedAttributes</code> en la clase del elemento que devuelve un array de nombre de atributos.</p> - -<p>Archivo JS:</p> - -<pre class="brush: js">class HelloElement extends HTMLElement { - // Observar los cambios en el atributo 'name'. - static get observedAttributes() {return ['name']; } - - // Responder a los cambios en el atributo. - attributeChangedCallback(attr, oldValue, newValue) { - if (attr == 'name') { - this.textContent = `Hello, ${newValue}`; - } - } -} - -// Definir el nuevo elemento -customElements.define('hello-element', HelloElement); -</pre> - -<p>Archivo HTML:</p> - -<pre class="brush: html"><hello-element name="Anita"></hello-element></pre> - -<p>A continuación está el ejemplo en vivo de lo anterior:</p> - -<p>{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>Los <em>Custom Elements </em>están definido en la siguiente especificación:</p> - -<table class="spec-table standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td><a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-elements">The HTML Standard: Custom elements</a></td> - <td>LS</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Recursos">Recursos</h2> - -<ul> - <li><a href="https://developers.google.com/web/fundamentals/primers/customelements/">Custom elements v1: reusable web components - Google Developers tutorial</a></li> -</ul> 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> |