From 4f70db6399a732ca7571c6c8cb952be7c9a85763 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 6 Jul 2021 12:07:28 -0400 Subject: delete conflicting/orphaned in es (#1418) --- files/es/_redirects.txt | 331 +----- files/es/conflicting/glossary/doctype/index.html | 8 - .../cascade_and_inheritance/index.html | 126 --- .../learn/css/building_blocks/index.html | 336 ------ .../learn/css/building_blocks/selectors/index.html | 417 -------- .../building_blocks/values_and_units/index.html | 365 ------- .../es/conflicting/learn/css/css_layout/index.html | 385 ------- .../learn/css/first_steps/how_css_works/index.html | 108 -- .../index.html | 130 --- .../index.html | 148 --- .../conflicting/learn/css/first_steps/index.html | 95 -- .../learn/css/styling_text/fundamentals/index.html | 157 --- files/es/conflicting/learn/forms/index.html | 367 ------- .../getting_started/index.html | 67 -- .../video_and_audio_content/index.html | 288 ------ files/es/conflicting/learn/index.html | 12 - .../learn/javascript/objects/index.html | 386 ------- .../mdn/contribute/getting_started/index.html | 19 - files/es/conflicting/mdn/tools/index.html | 15 - files/es/conflicting/mdn/yari/index.html | 17 - .../index.html | 51 - files/es/conflicting/mozilla/add-ons/index.html | 381 ------- .../tools/about_colon_debugging/index.html | 12 - files/es/conflicting/tools/performance/index.html | 106 -- .../web/api/canvas_api/tutorial/index.html | 163 --- .../web/api/crypto/getrandomvalues/index.html | 112 -- .../web/api/document_object_model/index.html | 25 - .../index.html | 23 - .../index.html | 88 -- .../index.html | 77 -- files/es/conflicting/web/api/element/index.html | 133 --- .../web/api/element/namespaceuri/index.html | 146 --- .../es/conflicting/web/api/geolocation/index.html | 108 -- .../web/api/html_drag_and_drop_api/index.html | 12 - files/es/conflicting/web/api/index.html | 81 -- .../conflicting/web/api/indexeddb_api/index.html | 146 --- files/es/conflicting/web/api/node/index.html | 35 - files/es/conflicting/web/api/push_api/index.html | 434 -------- files/es/conflicting/web/api/url/index.html | 103 -- .../conflicting/web/api/web_storage_api/index.html | 304 ------ files/es/conflicting/web/api/webrtc_api/index.html | 79 -- .../conflicting/web/api/websockets_api/index.html | 38 - .../web/api/window/localstorage/index.html | 137 --- .../web/api/windoworworkerglobalscope/index.html | 110 -- .../index.html | 120 --- .../index.html | 145 --- files/es/conflicting/web/css/@viewport/index.html | 126 --- .../index.html | 124 --- .../web/css/_colon_placeholder-shown/index.html | 124 --- .../index.html | 113 --- .../web/css/_doublecolon_placeholder/index.html | 110 -- .../index.html | 87 -- .../basic_concepts_of_flexbox/index.html | 377 ------- .../typical_use_cases_of_flexbox/index.html | 192 ---- files/es/conflicting/web/css/cursor/index.html | 12 - .../es/conflicting/web/css/font-variant/index.html | 12 - files/es/conflicting/web/css/width/index.html | 51 - files/es/conflicting/web/guide/index.html | 61 -- files/es/conflicting/web/guide/mobile/index.html | 19 - files/es/conflicting/web/html/element/index.html | 600 ----------- .../web/html/global_attributes/index.html | 28 - .../html/global_attributes/spellcheck/index.html | 74 -- .../web/http/basics_of_http/mime_types/index.html | 48 - files/es/conflicting/web/http/csp/index.html | 40 - .../index.html | 58 -- .../headers/content-security-policy/index.html | 710 ------------- .../global_objects/arraybuffer/index.html | 70 -- .../reference/global_objects/date/index.html | 202 ---- .../reference/global_objects/error/index.html | 155 --- .../reference/global_objects/function/index.html | 66 -- .../reference/global_objects/map/index.html | 136 --- .../reference/global_objects/number/index.html | 17 - .../reference/global_objects/object/index.html | 196 ---- .../reference/global_objects/promise/index.html | 70 -- .../reference/global_objects/rangeerror/index.html | 132 --- .../reference/global_objects/string/index.html | 119 --- .../global_objects/syntaxerror/index.html | 134 --- .../reference/global_objects/weakmap/index.html | 144 --- .../reference/lexical_grammar/index.html | 100 -- .../web/javascript/reference/operators/index.html | 316 ------ .../reference/operators/spread_syntax/index.html | 221 ---- .../index.html | 264 ----- .../index.html | 724 ------------- .../index.html | 464 --------- .../index.html | 298 ------ .../reference/statements/switch/index.html | 122 --- files/es/conflicting/web/media/formats/index.html | 282 ------ files/es/conflicting/web/opensearch/index.html | 55 - .../web/progressive_web_apps/index.html | 46 - .../progressive_web_apps/introduction/index.html | 64 -- .../using_custom_elements/index.html | 183 ---- .../index.html | 231 ----- .../index.html" | 56 - files/es/orphaned/code_snippets/index.html | 6 - .../pesta\303\261as_del_navegador/index.html" | 14 - .../interior_del_componente/index.html" | 217 ---- .../prefacio/index.html" | 40 - .../creando_una_extensi\303\263n/index.html" | 237 ----- .../index.html" | 582 ----------- "files/es/orphaned/css_din\303\241mico/index.html" | 340 ------- files/es/orphaned/desarrollando_mozilla/index.html | 17 - .../index.html" | 57 -- .../index.html | 50 - .../index.html" | 6 - .../index.html" | 699 ------------- .../etiquetas_audio_y_video_en_firefox/index.html | 47 - .../index.html" | 31 - .../es/orphaned/faq_incrustando_mozilla/index.html | 71 -- .../introduction_to_extensions/index.html | 160 --- .../index.html | 80 -- .../index.html | 44 - .../fragmentos_de_c\303\263digo/index.html" | 14 - files/es/orphaned/funciones/index.html | 9 - .../generaci\303\263n_de_guids/index.html" | 62 -- files/es/orphaned/glossary/elemento/index.html | 8 - .../index.html" | 24 - .../index.html" | 194 ---- .../index.html" | 177 ---- files/es/orphaned/herramientas/index.html | 14 - .../es/orphaned/html/elemento/datalist/index.html | 8 - files/es/orphaned/html/elemento/form/index.html | 6 - files/es/orphaned/html/elemento/section/index.html | 178 ---- .../incrustando_mozilla/comunidad/index.html | 8 - .../index.html" | 34 - .../es/orphaned/learn/how_to_contribute/index.html | 89 -- .../learn/html/forms/html5_updates/index.html | 45 - files/es/orphaned/localizar_con_narro/index.html | 63 -- files/es/orphaned/mdn/community/index.html | 55 - .../mdn/community/working_in_community/index.html | 119 --- .../howto/create_an_mdn_account/index.html | 33 - .../howto/do_a_technical_review/index.html | 45 - .../howto/do_an_editorial_review/index.html | 55 - .../property_template/index.html | 121 --- .../howto/remove_experimental_macros/index.html | 49 - .../howto/set_the_summary_for_a_page/index.html | 119 --- .../howto/tag_javascript_pages/index.html | 84 -- .../howto/use_navigation_sidebars/index.html | 79 -- .../index.html | 107 -- .../mdn/tools/page_regeneration/index.html | 33 - .../orphaned/mdn/tools/template_editing/index.html | 15 - .../index.html | 1068 -------------------- .../modo_casi_est\303\241ndar_de_gecko/index.html" | 47 - .../add-ons/webextensions/debugging/index.html | 190 ---- .../package_your_extension_/index.html | 106 -- .../porting_a_google_chrome_extension/index.html | 23 - .../temporary_installation_in_firefox/index.html | 92 -- .../orphaned/m\303\263dulos_javascript/index.html" | 24 - files/es/orphaned/nsdirectoryservice/index.html | 12 - .../participar_en_el_proyecto_mozilla/index.html | 11 - .../index.html" | 6 - .../index.html" | 43 - .../index.html" | 37 - .../index.html | 162 --- files/es/orphaned/referencia_de_xul/index.html | 318 ------ .../index.html" | 144 --- files/es/orphaned/storage/index.html | 252 ----- .../tools/add-ons/dom_inspector/index.html | 30 - files/es/orphaned/tools/add-ons/index.html | 18 - .../index.html | 90 -- .../traducir_una_extensi\303\263n/index.html" | 162 --- .../index.html | 378 ------- .../index.html" | 16 - files/es/orphaned/usar_web_workers/index.html | 261 ----- .../index.html | 237 ----- .../index.html" | 93 -- files/es/orphaned/vigilar_plugins/index.html | 109 -- .../es/orphaned/web/api/abstractworker/index.html | 131 --- .../web/api/ambient_light_events/index.html | 115 --- files/es/orphaned/web/api/body/formdata/index.html | 73 -- files/es/orphaned/web/api/body/index.html | 100 -- files/es/orphaned/web/api/body/json/index.html | 83 -- .../es/orphaned/web/api/childnode/after/index.html | 182 ---- .../orphaned/web/api/childnode/before/index.html | 176 ---- files/es/orphaned/web/api/childnode/index.html | 181 ---- .../orphaned/web/api/childnode/remove/index.html | 95 -- .../web/api/childnode/replacewith/index.html | 142 --- .../api/detecting_device_orientation/index.html | 279 ----- .../api/document_object_model/events/index.html | 73 -- .../web/api/element/currentstyle/index.html | 81 -- .../web/api/element/runtimestyle/index.html | 83 -- .../web/api/elementcssinlinestyle/style/index.html | 53 - .../api/htmlorforeignelement/dataset/index.html | 133 --- .../basic_concepts_behind_indexeddb/index.html | 217 ---- .../orphaned/web/api/parentnode/append/index.html | 135 --- .../web/api/parentnode/children/index.html | 158 --- .../api/parentnode/firstelementchild/index.html | 144 --- files/es/orphaned/web/api/parentnode/index.html | 152 --- .../web/api/parentnode/lastelementchild/index.html | 147 --- .../checking_authenticity_with_password/index.html | 31 - .../web/css/_colon_-moz-ui-valid/index.html | 95 -- .../web/css/comenzando_(tutorial_css)/index.html | 41 - files/es/orphaned/web/css/como_iniciar/index.html | 6 - .../orphaned/web/css/linear-gradient()/index.html | 262 ----- .../es/orphaned/web/css/primeros_pasos/index.html | 40 - .../orphaned/web/css/radial-gradient()/index.html | 300 ------ files/es/orphaned/web/css/rtl/index.html | 23 - .../css/tools/cubic_bezier_generator/index.html | 321 ------ .../creating_and_triggering_events/index.html | 145 --- .../web/guide/events/event_handlers/index.html | 133 --- files/es/orphaned/web/guide/events/index.html | 17 - .../index.html | 48 - .../html/html5/constraint_validation/index.html | 346 ------- .../web/guide/html/html5/html5_parser/index.html | 65 -- files/es/orphaned/web/guide/html/html5/index.html | 200 ---- .../html/html5/introduction_to_html5/index.html | 17 - .../html/introduction_alhtml_clone/index.html | 173 ---- .../using_html_sections_and_outlines/index.html | 410 -------- .../orphaned/web/html/element/command/index.html | 153 --- .../orphaned/web/html/element/element/index.html | 111 -- .../orphaned/web/html/element/isindex/index.html | 45 - .../orphaned/web/html/element/multicol/index.html | 21 - .../etiqueta_personalizada_html5/index.html | 47 - .../html/elemento/tipos_de_elementos/index.html | 120 --- .../web/html/global_attributes/dropzone/index.html | 100 -- .../global_objects/array/prototype/index.html | 189 ---- .../reference/global_objects/map/clear/index.html | 110 -- .../reference/global_objects/map/delete/index.html | 115 --- .../global_objects/map/entries/index.html | 110 -- .../global_objects/map/foreach/index.html | 95 -- .../reference/global_objects/map/get/index.html | 78 -- .../reference/global_objects/map/has/index.html | 66 -- .../reference/global_objects/map/index.html | 214 ---- .../reference/global_objects/map/keys/index.html | 110 -- .../reference/global_objects/map/set/index.html | 134 --- .../reference/global_objects/map/size/index.html | 111 -- .../reference/global_objects/map/values/index.html | 78 -- .../operators/pipeline_operator/index.html | 79 -- files/es/orphaned/web/reference/api/index.html | 65 -- files/es/orphaned/web/reference/index.html | 57 -- .../orphaned/web/svg/svg_en_firefox_1.5/index.html | 61 -- .../es/orphaned/xpinstall_api_reference/index.html | 133 --- 231 files changed, 2 insertions(+), 31259 deletions(-) delete mode 100644 files/es/conflicting/glossary/doctype/index.html delete mode 100644 files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html delete mode 100644 files/es/conflicting/learn/css/building_blocks/index.html delete mode 100644 files/es/conflicting/learn/css/building_blocks/selectors/index.html delete mode 100644 files/es/conflicting/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/es/conflicting/learn/css/css_layout/index.html delete mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works/index.html delete mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works_194e34e451d4ace023d98021c00b3cfd/index.html delete mode 100644 files/es/conflicting/learn/css/first_steps/how_css_works_a460b5a76c3c2e7fc9b8da464dfd0c22/index.html delete mode 100644 files/es/conflicting/learn/css/first_steps/index.html delete mode 100644 files/es/conflicting/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/es/conflicting/learn/forms/index.html delete mode 100644 files/es/conflicting/learn/html/introduction_to_html/getting_started/index.html delete mode 100644 files/es/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/es/conflicting/learn/index.html delete mode 100644 files/es/conflicting/learn/javascript/objects/index.html delete mode 100644 files/es/conflicting/mdn/contribute/getting_started/index.html delete mode 100644 files/es/conflicting/mdn/tools/index.html delete mode 100644 files/es/conflicting/mdn/yari/index.html delete mode 100644 files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html delete mode 100644 files/es/conflicting/mozilla/add-ons/index.html delete mode 100644 files/es/conflicting/tools/about_colon_debugging/index.html delete mode 100644 files/es/conflicting/tools/performance/index.html delete mode 100644 files/es/conflicting/web/api/canvas_api/tutorial/index.html delete mode 100644 files/es/conflicting/web/api/crypto/getrandomvalues/index.html delete mode 100644 files/es/conflicting/web/api/document_object_model/index.html delete mode 100644 files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html delete mode 100644 files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html delete mode 100644 files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html delete mode 100644 files/es/conflicting/web/api/element/index.html delete mode 100644 files/es/conflicting/web/api/element/namespaceuri/index.html delete mode 100644 files/es/conflicting/web/api/geolocation/index.html delete mode 100644 files/es/conflicting/web/api/html_drag_and_drop_api/index.html delete mode 100644 files/es/conflicting/web/api/index.html delete mode 100644 files/es/conflicting/web/api/indexeddb_api/index.html delete mode 100644 files/es/conflicting/web/api/node/index.html delete mode 100644 files/es/conflicting/web/api/push_api/index.html delete mode 100644 files/es/conflicting/web/api/url/index.html delete mode 100644 files/es/conflicting/web/api/web_storage_api/index.html delete mode 100644 files/es/conflicting/web/api/webrtc_api/index.html delete mode 100644 files/es/conflicting/web/api/websockets_api/index.html delete mode 100644 files/es/conflicting/web/api/window/localstorage/index.html delete mode 100644 files/es/conflicting/web/api/windoworworkerglobalscope/index.html delete mode 100644 files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html delete mode 100644 files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html delete mode 100644 files/es/conflicting/web/css/@viewport/index.html delete mode 100644 files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html delete mode 100644 files/es/conflicting/web/css/_colon_placeholder-shown/index.html delete mode 100644 files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html delete mode 100644 files/es/conflicting/web/css/_doublecolon_placeholder/index.html delete mode 100644 files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html delete mode 100644 files/es/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/es/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html delete mode 100644 files/es/conflicting/web/css/cursor/index.html delete mode 100644 files/es/conflicting/web/css/font-variant/index.html delete mode 100644 files/es/conflicting/web/css/width/index.html delete mode 100644 files/es/conflicting/web/guide/index.html delete mode 100644 files/es/conflicting/web/guide/mobile/index.html delete mode 100644 files/es/conflicting/web/html/element/index.html delete mode 100644 files/es/conflicting/web/html/global_attributes/index.html delete mode 100644 files/es/conflicting/web/html/global_attributes/spellcheck/index.html delete mode 100644 files/es/conflicting/web/http/basics_of_http/mime_types/index.html delete mode 100644 files/es/conflicting/web/http/csp/index.html delete mode 100644 files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html delete mode 100644 files/es/conflicting/web/http/headers/content-security-policy/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/date/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/error/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/function/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/number/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/object/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/promise/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/string/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/lexical_grammar/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/operators/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html delete mode 100644 files/es/conflicting/web/javascript/reference/statements/switch/index.html delete mode 100644 files/es/conflicting/web/media/formats/index.html delete mode 100644 files/es/conflicting/web/opensearch/index.html delete mode 100644 files/es/conflicting/web/progressive_web_apps/index.html delete mode 100644 files/es/conflicting/web/progressive_web_apps/introduction/index.html delete mode 100644 files/es/conflicting/web/web_components/using_custom_elements/index.html delete mode 100644 files/es/orphaned/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html delete mode 100644 "files/es/orphaned/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" delete mode 100644 files/es/orphaned/code_snippets/index.html delete mode 100644 "files/es/orphaned/code_snippets/pesta\303\261as_del_navegador/index.html" delete mode 100644 "files/es/orphaned/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" delete mode 100644 "files/es/orphaned/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" delete mode 100644 "files/es/orphaned/creando_una_extensi\303\263n/index.html" delete mode 100644 "files/es/orphaned/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" delete mode 100644 "files/es/orphaned/css_din\303\241mico/index.html" delete mode 100644 files/es/orphaned/desarrollando_mozilla/index.html delete mode 100644 "files/es/orphaned/detectar_la_orientaci\303\263n_del_dispositivo/index.html" delete mode 100644 files/es/orphaned/dhtml_demostraciones_del_uso_de_dom_style/index.html delete mode 100644 "files/es/orphaned/dibujando_gr\303\241ficos_con_canvas/index.html" delete mode 100644 "files/es/orphaned/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" delete mode 100644 files/es/orphaned/etiquetas_audio_y_video_en_firefox/index.html delete mode 100644 "files/es/orphaned/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" delete mode 100644 files/es/orphaned/faq_incrustando_mozilla/index.html delete mode 100644 files/es/orphaned/firefox_addons_developer_guide/introduction_to_extensions/index.html delete mode 100644 files/es/orphaned/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html delete mode 100644 files/es/orphaned/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html delete mode 100644 "files/es/orphaned/fragmentos_de_c\303\263digo/index.html" delete mode 100644 files/es/orphaned/funciones/index.html delete mode 100644 "files/es/orphaned/generaci\303\263n_de_guids/index.html" delete mode 100644 files/es/orphaned/glossary/elemento/index.html delete mode 100644 "files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" delete mode 100644 "files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" delete mode 100644 "files/es/orphaned/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" delete mode 100644 files/es/orphaned/herramientas/index.html delete mode 100644 files/es/orphaned/html/elemento/datalist/index.html delete mode 100644 files/es/orphaned/html/elemento/form/index.html delete mode 100644 files/es/orphaned/html/elemento/section/index.html delete mode 100644 files/es/orphaned/incrustando_mozilla/comunidad/index.html delete mode 100644 "files/es/orphaned/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" delete mode 100644 files/es/orphaned/learn/how_to_contribute/index.html delete mode 100644 files/es/orphaned/learn/html/forms/html5_updates/index.html delete mode 100644 files/es/orphaned/localizar_con_narro/index.html delete mode 100644 files/es/orphaned/mdn/community/index.html delete mode 100644 files/es/orphaned/mdn/community/working_in_community/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html delete mode 100644 files/es/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 files/es/orphaned/mdn/tools/page_regeneration/index.html delete mode 100644 files/es/orphaned/mdn/tools/template_editing/index.html delete mode 100644 files/es/orphaned/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html delete mode 100644 "files/es/orphaned/modo_casi_est\303\241ndar_de_gecko/index.html" delete mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/debugging/index.html delete mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html delete mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html delete mode 100644 files/es/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html delete mode 100644 "files/es/orphaned/m\303\263dulos_javascript/index.html" delete mode 100644 files/es/orphaned/nsdirectoryservice/index.html delete mode 100644 files/es/orphaned/participar_en_el_proyecto_mozilla/index.html delete mode 100644 "files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" delete mode 100644 "files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" delete mode 100644 "files/es/orphaned/principios_b\303\241sicos_de_los_servicios_web/index.html" delete mode 100644 files/es/orphaned/recursos_en_modo_desconectado_en_firefox/index.html delete mode 100644 files/es/orphaned/referencia_de_xul/index.html delete mode 100644 "files/es/orphaned/selecci\303\263n_de_modo_en_mozilla/index.html" delete mode 100644 files/es/orphaned/storage/index.html delete mode 100644 files/es/orphaned/tools/add-ons/dom_inspector/index.html delete mode 100644 files/es/orphaned/tools/add-ons/index.html delete mode 100644 files/es/orphaned/traducir_las_descripciones_de_las_extensiones/index.html delete mode 100644 "files/es/orphaned/traducir_una_extensi\303\263n/index.html" delete mode 100644 files/es/orphaned/usando_archivos_desde_aplicaciones_web/index.html delete mode 100644 "files/es/orphaned/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" delete mode 100644 files/es/orphaned/usar_web_workers/index.html delete mode 100644 files/es/orphaned/usar_xpinstall_para_instalar_plugins/index.html delete mode 100644 "files/es/orphaned/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" delete mode 100644 files/es/orphaned/vigilar_plugins/index.html delete mode 100644 files/es/orphaned/web/api/abstractworker/index.html delete mode 100644 files/es/orphaned/web/api/ambient_light_events/index.html delete mode 100644 files/es/orphaned/web/api/body/formdata/index.html delete mode 100644 files/es/orphaned/web/api/body/index.html delete mode 100644 files/es/orphaned/web/api/body/json/index.html delete mode 100644 files/es/orphaned/web/api/childnode/after/index.html delete mode 100644 files/es/orphaned/web/api/childnode/before/index.html delete mode 100644 files/es/orphaned/web/api/childnode/index.html delete mode 100644 files/es/orphaned/web/api/childnode/remove/index.html delete mode 100644 files/es/orphaned/web/api/childnode/replacewith/index.html delete mode 100644 files/es/orphaned/web/api/detecting_device_orientation/index.html delete mode 100644 files/es/orphaned/web/api/document_object_model/events/index.html delete mode 100644 files/es/orphaned/web/api/element/currentstyle/index.html delete mode 100644 files/es/orphaned/web/api/element/runtimestyle/index.html delete mode 100644 files/es/orphaned/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/es/orphaned/web/api/htmlorforeignelement/dataset/index.html delete mode 100644 files/es/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/append/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/children/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/firstelementchild/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/index.html delete mode 100644 files/es/orphaned/web/api/parentnode/lastelementchild/index.html delete mode 100644 files/es/orphaned/web/api/web_crypto_api/checking_authenticity_with_password/index.html delete mode 100644 files/es/orphaned/web/css/_colon_-moz-ui-valid/index.html delete mode 100644 files/es/orphaned/web/css/comenzando_(tutorial_css)/index.html delete mode 100644 files/es/orphaned/web/css/como_iniciar/index.html delete mode 100644 files/es/orphaned/web/css/linear-gradient()/index.html delete mode 100644 files/es/orphaned/web/css/primeros_pasos/index.html delete mode 100644 files/es/orphaned/web/css/radial-gradient()/index.html delete mode 100644 files/es/orphaned/web/css/rtl/index.html delete mode 100644 files/es/orphaned/web/css/tools/cubic_bezier_generator/index.html delete mode 100644 files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/es/orphaned/web/guide/events/event_handlers/index.html delete mode 100644 files/es/orphaned/web/guide/events/index.html delete mode 100644 files/es/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/constraint_validation/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/html5_parser/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/index.html delete mode 100644 files/es/orphaned/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/es/orphaned/web/guide/html/introduction_alhtml_clone/index.html delete mode 100644 files/es/orphaned/web/guide/html/using_html_sections_and_outlines/index.html delete mode 100644 files/es/orphaned/web/html/element/command/index.html delete mode 100644 files/es/orphaned/web/html/element/element/index.html delete mode 100644 files/es/orphaned/web/html/element/isindex/index.html delete mode 100644 files/es/orphaned/web/html/element/multicol/index.html delete mode 100644 files/es/orphaned/web/html/elemento/etiqueta_personalizada_html5/index.html delete mode 100644 files/es/orphaned/web/html/elemento/tipos_de_elementos/index.html delete mode 100644 files/es/orphaned/web/html/global_attributes/dropzone/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/clear/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/delete/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/entries/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/foreach/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/get/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/has/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/keys/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/set/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/size/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/global_objects/map/values/index.html delete mode 100644 files/es/orphaned/web/javascript/reference/operators/pipeline_operator/index.html delete mode 100644 files/es/orphaned/web/reference/api/index.html delete mode 100644 files/es/orphaned/web/reference/index.html delete mode 100644 files/es/orphaned/web/svg/svg_en_firefox_1.5/index.html delete mode 100644 files/es/orphaned/xpinstall_api_reference/index.html 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 ---- -

{{page("/en-US/docs/Glossary/Doctype")}}

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

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}Esta es la cuarta sección del tutorial CSS Primeros pasos; que describe cómo interactúan las hojas de estilo en cascada, y cómo los elementos heredan el estilo de sus padres. Usted agrega a la hoja de estilos de ejemplo, utilizando la herencia para alterar el estilo de muchas partes del documento en un solo paso.

- -

Información: Cascada y herencia

- -

El estilo final para un elemento se puede especificar en muchos lugares diferentes, que pueden interactuar de una manera compleja. Esta interacción compleja hace el CSS poderoso, pero puede también hacer que sea confuso y difícil de depurar.

- -

Tres principales fuentes de información de estilo forman una cascada. Estas son:

- - - -

El estilo del usuario modifica el estilo por defecto del navegador. El estilo del autor del documento a continuación modifica el estilo un poco más. En este tutorial, usted es el autor del documento de ejemplo, y solo trabaja con hojas de estilo del autor.

- -
-
Ejemplo
- -

Cuando lea este documento en un navegador, parte del estilo que ves proviene por defecto de su navegador de HTML.

- -

Parte del estilo podría venir de los ajustes personalizados del navegador o de un archivo de definición de estilo personalizado. En Firefox, la configuración se puede personalizar en cuadro de diálogo Preferencias, o puede especificar estilos en un archivo denominado user Content.css, archivado en su perfil de navegador.

- -

Parte del estilo proviene de las hojas de estilo vinculadas al documento por el servidor wiki.

-
- -

Al abrir su documento de muestra en el navegador, los elementos {{ HTMLElement("strong") }} son más relevante que el resto del texto. Esto viene del estilo por defecto del navegador para HTML.

- -

El elemento {{ HTMLElement("strong") }} son rojos. Esto viene de la propia hoja de estilos de ejemplo.

- -

El elemento {{ HTMLElement("strong") }} también heredan gran parte del estilo del elemento {{ HTMLElement("p") }}, porque ellos son sus hijos. De la misma manera, los elementos {{ HTMLElement("p") }} heredan gran parte del estilo del elemento{{ HTMLElement("body") }}.

- -

Para los estilos en cascada, las hojas de estilo del autor tienen prioridad, ante las hojas de estilo del lector,  por defecto de tu navegador.

- -

Para los estilos heredados, el estilo propio de un nodo hijo tiene prioridad sobre estilo heredado de su padre.

- -

Estas no son las únicas prioridades que se aplican. En una página posterior de este tutorial se explica mas detalladamente.

- -
-
Más detalles
- -

El CSS también proporciona una forma para que el lector pueda anular el estilo del autor del documento, mediante el uso de la palabra clave! !important.

- -

Esto significa que, como autor del documento, no siempre se puede predecir con exactitud lo que sus lectores van a ver.

- -

Si quieres conocer todos los detalles de cascada y herencia mira Asignando propiedad de valores, cascada, y herencia en las especificaciones del CSS.

-
- -

Acción: El uso de la herencia 

- -
    -
  1. Edite su archivo  CSS de ejemplo.
    2. -
  2. Agrega esta línea copiando y pegando. Realmente no importa si usted la agrega por encima o por debajo de la línea que está. Sin embargo, añadirla en la parte superior es más lógico, porque en el documento el elemento {{ HTMLElement("p") }} es el elemento padre del elemento  {{ HTMLElement("strong") }} : - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. Ahora actualice el navegador para ver el efecto en su documento de muestra. El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} han heredado el estilo subrayado de su elemento padre {{ HTMLElement("p") }}.
    - -

    Pero los elementos {{ HTMLElement("strong") }} siguen siendo rojo. El color rojo es su estilo propio, por lo que tiene prioridad sobre el color azul de su elemento padre {{ HTMLElement("p") }} .

    -
    4. -
- - -
- - - - - - - - -
Antes
Cascading Style Sheets
- - - - - - - - -
Después
Cascading Style Sheets
- -
-
Problema
-Cambie su hoja de estilo de manera que aparecen subrayados sólo las letras rojas: - - - - - - - -
Cascading Style Sheets
- -
-
Possible solution
- -

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

- -
p {color: blue; }
-strong {color: red; text-decoration: underline;}
-
- -

 

-Hide solution
-Ver una solución al desafío.
- -

¿Y ahora qué?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}Su hoja de estilo de ejemplo especifica estilos para las etiquetas <p> y <strong>, cambiando el estilo de los elementos correspondientes en todo el documento. La siguiente sección describe cómo especificar el estilo de manera más selectiva.

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

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  CSS Getting Started ; se describen cómo se puede usar CSS para controlar el espacio que un elemento ocupa cuando se muestra. En su documento de ejemplo, se cambia el espacio y se agregan reglas decorativos.

- -

Información: Cajas

- -

Cuando el navegador muestra un elemento, el elemento ocupa un espacio. Hay cuatro partes en el espacio que ocupa.

- -

En el centro, existe el espacio que el elemento necesita para mostrar su contenido. Alrededor de eso, no hay relleno. En torno de est, hay un borde. En torno esto, hay un margen que separa este elemento de otros elementos.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

El gris pálido muestra partes del diseño.

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

Esto es lo que se ve en su navegador.

-
- -

El relleno, el borde y el margen pueden tener diferentes tamaños en la parte superior, derecha, inferior e izquierda del elemento. Alguno o todos estos tamaños pueden ser cero.

- -

Coloreando

- -

El relleno es siempre el mismo color que el elemento del fondo. Así que cuando se establece el color de fondo, se ve el color aplicado al elemento en sí y su relleno. El margen es siempre transparente.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

El elemento tiene un fondo verde .

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

Esto es lo que se ve en su navegador.

-
- -

Borders

- -

Puede utilizar los bordes para decorar elementos con líneas o cuadros.
-
- Para especificar la misma frontera todo alrededor de un elemento, utilice la propiedad {{cssxref ("border")}} . Especifique el ancho (por lo general en píxeles para la visualización en una pantalla), el estilo, y el color.
-
- Los estilos son:

- - - - - - - - - - - - - - - - -
-
solid
- 		-
dotted
- 		-
dashed
- 		-
double
-
-
inset
- 		-
outset
- 		-
ridge
- 		-
groove
-
- -

También puede establecer el estilo a none ( ninguno) o hidden (oculto),  para eliminar explícitamente la frontera (border ), o establecer el color como transparente para hacer la frontera invisible sin cambiar el diseño.

- -

Para especificar los bordes de uno en uno por separado, utilice las propiedades: {{cssxref ("border-top")}}, {{cssxref ("border-right")}}, {{cssxref ("border-bottom")} }, {{cssxref ("border-left")}}. Usted puede utilizar estas para especificar un borde  solo en un lado, o diferentes los bordes en diferentes lados.

- -
-
Ejemplo
- -


- Esta norma establece el color de fondo y el borde superior de los elementos de la etiqueta h3:

- -
h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-  }
-
- -

El resultado se ve así:

- - - - - - - -
-

Stylish heading

-
- -

Esta regla hace que las imágenes sean fáciles de ver, dándoles un borde gris medio a todo:

- -
img {border: 2px solid #ccc;}
-
- -

El resultado se ve así:

- - - - - - - - -
Image:Image:Blue-rule.png
-
- -

Márgenes y relleno

- -


- Use  márgenes y el relleno para ajustar las posiciones de los elementos 'y crear el espacio que les rodea.
-
- Utilice la propiedad {{cssxref ("margin")}} o la propiedad {{cssxref ("padding")}} para establecer los márgenes y el  relleno con sus anchuras respectivamente.
-
- Si especifica una anchura, que se aplica en todo el elemento (arriba, derecha, abajo y de izquierda).
-
- Si especifica dos anchos, la primera se aplica a la parte superior e inferior, la segunda a la derecha y la izquierda.
-
- Puede especificar los cuatro anchos en el orden: arriba, derecha, abajo, de izquierda.

- -
-
Ejemplo
- -


- Esta norma delimita párrafos con la  class remark, dándoles un borde rojo a su alrededor.
-
- El padding (relleno) separa un poco todo el borde del texto .
-
- A la izquierda una  sangría desde el margen del párrafo con respecto al resto del texto (margin-left ):

- -
p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-
- -

El resultado se ve así:

- - - - - - - -
-

A continuación es un párrafo normal.

- -

Aqui con la clase remark.

-
-
- -
-
Más detalles
- -

Cuando se utiliza márgenes y el relleno para ajustar la manera en que los elementos se disponen, sus reglas de estilo interactúan con los estilos de tu navegador por defecto y pueden ser muy complejas.
-
- Los distintos navegadores ponen que los elementos de manera diferente. Los resultados pueden ser similar ,hasta que nuestro hoja de estilos cambia las cosas. A veces esto puede hacer que sus hojas de estilo den resultados sorprendentes.
-
- Para obtener el resultado deseado, es posible que tenga que cambiar el marcado de su documento. La página siguiente de este tutorial tiene más información al respecto.
-
- Para obtener información detallada acerca de relleno, márgenes y bordes, consulte la página de referencia Modelo de caja.

-
- -

Acción: Agregar bordes

- -

Edite su archivo CSS , style2.css. Agrega esta regla para dibujar una línea a través de la página sobre cada encabezado:

- -
h3 {border-top: 1px solid gray;}
-
- -

Si usted tomó el cambio en la última página, modificara la regla que ha creado, de lo contrario agregar la nueva regla para añadir espacio debajo de cada ítem de la lista:

- -
li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-
- -

Actualice el navegador para ver el resultado:

- - - - - - - -
-

(A) The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
- -

(B) Numbered paragraphs

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -
-
El reto
- -


- Agrega una regla a la hoja de estilos, para que aparesca un amplio borde alrededor de los la lista de océanos, en un color que le recuerda al mar, algo como esto:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -

. . .

-
- -

 

- -

(No es necesario que coincida con el ancho y el color que se ve aquí exactamente.)

-
- -

Ver una solución a este desafío.

- -

What next?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}Al especificar márgenes y el relleno, se modificó el diseño del documento. En la página siguiente se cambia el layout de su documento de otra manera.

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

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta es la sección quinta del tutoriaCSS Getting Started ;En él se explica cómo se puede aplicar estilos de forma selectiva, y cómo los diferentes tipos de selectores tener diferentes prioridades. Agregar algunos atributos a las etiquetas en su documento de muestra, y utiliza estos atributos en su hoja de estilos de muestra.

- -

Información: Selectores

- -


- CSS tiene su propia terminología para describir el lenguaje CSS. Anteriormente en este tutorial, que ha creado una línea en su hoja de estilos como esta:

- -
strong {
-  color: red;
-}
-
- -

En la terminología de CSS, toda esta línea es una rule (regla). Esta regla comienza con strong, que es un selector. Permite seleccionar qué elementos en el DOM se aplica la regla.

- -
-
Más detalles
- -

La parte interior de las llaves es la declaración.

- -

 La palabra clave es color, que es una propiedad, y el rojo es el valor.

- -

El punto y coma después de el par propiedad-valor separa los posibles otros pares de  propiedad-valor en una misma declaración.

- -

 Este tutorial se refiere a un selector como strong como un selector de etiquetas. La especificación CSS se refiere a él como un selector de tipo ( type selector).

-
- -

En esta página del tutorial se explica más acerca de los selectores que se pueden utilizar en las reglas CSS.

- -

Además de añadir nombres a las etiquetas , puede usar valores en los atributos de los selectores. Esto permite que sus reglas sean más específicas.

- -

Dos atributos tienen un estatus especial para CSS. Son class e id.

- -

Class: Selectores de clase

- -

Utilice el atributo class para asignarle  a un elemento un nombre de clase (class). Depende del nombre que elijas como class. Múltiples elementos en un documento pueden tener el mismo valor de la clase.

- -

En su hoja de estilo, escriba un punto (.) antes del nombre de la clase, cuando se utiliza como un selector.

- -

Selectores ID

- -

Utilice el atributo id en un elemento para asignar un identificación para ese elemento. Depende de usted el nombre que elija para el ID. El nombre de ID debe ser único en el documento.
-  

- -

En su hoja de estilo, escriba un símbolo de almohadilla (#) ante el ID cuando se utiliza esto en un selector.

- -
-
Ejemplo
- -

Esta etiqueta HTML tiene un atributo class y un atributo id:

- -
<p class="key" id="principal">
-
- -

El valor de id es, principal, debe ser único en el documento; pero otras etiquetas del documento puede tener el mismo nombre de la class, Key.

- -

En una hoja de estilo CSS, esta regla hace que todos los elementos con la class key sean verdes . (Puede ser que no todos los sean {{HTMLElement ()} "p"} elementos.)

- -
.key {
-  color: green;
-}
-
- -

Esta regla hace que el único elemento de id principal este en negrita:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

Si más de una regla se aplica a un elemento y especifica la misma propiedad, entonces el CSS da prioridad a la regla que tiene el selector más específico. Un selector ID es más específico que un selector de class, que a su vez es más específico que un selector (tag) de etiquetas.

- -
-
Más detalles
- -

También se pueden combinar selectores, haciendo un selector más específico.
-
- Por ejemplo, el selector .key selecciona todos los elementos que tienen key como nombre de clase (class). El selector p.key selecciona sólo el elemento {{ HTMLElement("p") }} que tiene de nombre key.

- -

Usted no esta limitado a los dos atributos especiales, class e id.  Se puede especificar otros atributos mediante corchetes. Por ejemplo, el selector [type='button'] selecciona todos los elementos que tienen un atributo de tipo con el  valor button.

-
- -

Si la hoja de estilo tiene reglas en conflicto y son igualmente específicas, entonces el CSS da prioridad a la regla que está después en la hoja de estilos.

- -

Cuando usted tiene un problema con las reglas en conflicto, trate de resolverlo haciendo una de las normas más específicas, para que tenga prioridad. Si usted no puede hacer esto, trate de mover una de las reglas mas cerca del final de la hoja de estilos para que tenga la prioridad.

- -

Las pseudo-clases de los selectores

- -

Una pseudo-clase  pseudo-class es en  CSS una palabra clave añadida a los selectores, que especifica un estado especial del elemento a seleccionar. Por ejemplo {{Css Href (": hover")}} aplicará un estilo cuando el usuario se desplaza sobre el elemento especificado mediante el selector.

- -

Las Pseudo-classes, junto con los pseudo-elements, permiten aplicar un estilo a un elemento no sólo en relación con el contenido de la estructura del documento, sino también en relación a los factores externos, como la historia del navegador por ejemplo: ({{href css (": visited ")}}, ), el estado de su contenido (como {{ref css (": :checked")}} en algunos elementos de formulario), o la posición del ratón (como {{cssxref (":hover ")}} que le permite saber si el ratón está sobre un elemento o no). Para ver una lista completa de selectores, visite especificación CSS3 Selectores de trabajo CSS3 Selectors working spec.

- -
-
Sintaxis
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Listado de pseudo-classes:

- - - -

Información: Los selectores basados en relaciones (relationships)

- -

El CSS tiene algunas formas de seleccionar elementos en función de las relaciones entre los elementos. Usted puede utilizar estas para hacer selectores que sean más específicos.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Selectores comunes basados en relaciones
SelectorSelects
A ECualquier elemento E que es un descendiente de un elemento A (que es: un hijo o un hijo de un hijo etc.)
A > ECualquier elemento E que es un hijo de un elemento A
E:first-childCualquier elemento E que es el primer hijo de su padre
B + ECualquier elemento E que es el siguiente hermano de un elemento B (es decir: el próximo hijo del mismo padre)
- -

Usted puede combinarlas para expresar relaciones complejas.
-
- También puede utilizar el símbolo asterisco (*) para significar "cualquier elemento".

- -
-
Ejemplo
- -

Una tabla HTML tiene un atributo id, pero sus filas y las celdas no tienen identificadores individuales:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

Estas reglas hacen que la primera celda de cada fila sea en negrita, y la segunda celda de cada fila en  la familia de fuente  monoespaciado. Esto sólo afecta a una tabla concreta del documento:

- -
    #data-table-1 td:first-child {font-weight: bolder;}
-    #data-table-1 td:first-child + td {font-family: monospace;}
-
- -

El resultado se ve así:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
Más detalles
- -

La manera mas habitual es hacer que un selector sea más específico, entonces aumentara su prioridad.

- -

Si utiliza estas técnicas, se evita la necesidad de especificar la class o atributos ID en muchas etiquetas del documento. En su lugar, CSS hace este trabajo.

- -

En grandes diseños donde la velocidad es importante, usted puede hacer sus hojas de estilo más eficiente evitando reglas complejas que dependen de relaciones entre los elementos.

- -

Para más ejemplos sobre las tablas, ver Tables en la página CSS Reference.

-
- -

Action: Using class and ID selectors

- -
    -
  1. Edite su archivo HTML, y duplicar el párrafo copiando y pegando.
    2. -
  2. A continuación, agregue los atibutos  id y class a la primera copia, y un atributopara la segunda copia como se muestra a continuación. Alternativamente, copie y pegue el archivo entero de nuevo: - 
    <!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>
-
    -
    3. -
  3. Ahora edite su archivo CSS. Reemplazar todo el contenido con: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. Guarde los archivos y actualizar el navegador para ver el resultado: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    Puede intentar reordenar las líneas en el archivo CSS de mostrar de que el orden no efecta.

    - -

    Los selectores de class.carrot and .spinach tienen prioridad sobre el selector de etiquetas strong.

    - -

    El ID selector #first tiene prioridad sobre los selectores de clase y etiqueta.

    -
    5. -
- -
-
Desafíos
- -
    -
  1. Sin cambiar su archivo HTML, agregue una sola regla para su archivo CSS que mantenga todas las letras iniciales que mismo color que están ahora, pero hace que todo el otro texto en el segundo párrafo sea azul: - - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Ahora cambie la regla que acaba de agregar (sin cambiar nada más), para hacer que el primer párrafo sea azul también: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Possible solution
- -
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
-Hide solution
-See a solution for the challenge.
- -

Action: Using pseudo-classes selectors

- -
    -
  1. Cree un HTML como el siguiente: - - 
    <!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>
-
    -
    2. -
  2. Ahora edite su archivo CSS. Reemplace todo el contenido con: - 
    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;
-}
-
    -
    3. -
  3. Guarde los archivos y actualice el explorador para ver el resultado (poner el ratón sobre el siguiente enlace para ver el efecto): - - - - - - -
    Go to our Home page
    -
    4. -
- -

Acción: Uso de selectores basados en las relaciones y pseudo-clases

- -

Con selectores basados en las relaciones y pseudo-clases puede crear algoritmos complejos en cascada . Esto es una técnica común que se utiliza, por ejemplo, con el fin de crear menús desplegables en puro CSS (es decir sólo CSS, sin necesidad de utilizar JavaScript). La esencia de esta técnica es la creación de una regla como la siguiente:

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

Aplicararemos a una estructura de HTML como el siguiente:

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

Vea nuestro ejemplo completoCSS-based dropdown menu example para una posible referencia.

- -

¿Y ahora qué?

- -

Su hoja de estilos de muestra está empezando a parecer densa y complicada. La siguiente sección describe maneras de hacer CSS más fácil de leer. easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

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

{{ CSSTutorialTOC() }}

- -

- -

Esta es la sección octava de la CSS Introduccióntutorial; se explica cómo puede especificar el color en CSS. En su hoja de estilos de muestra, se introduce colores de fondo.

- -

Información: Color

- -

En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. CSS 2 soporta 17 colores con nombre absoluto. Algunos de los nombres puede que no sea el esperado:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
- -

 

- -
-
-
Detalles
- -

Su navegador puede soportar muchos más colores con nombre, como:

-
- - - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
- -

Para detalles de esta lista ampliada, consulte: SVG palabras clave de color en el módulo de colores CSS 3 . Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.

-
- -

Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres dígitos  hexadecimales entre los rangos  0 - 9, a - f. Las letras a - f representan los valores de 10 a 15:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
- -


- Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
- -

Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.

- -
-
-
Ejemplo
- -

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:

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Comience con el rojo puro: #f00
Para que sea más pálido, añadir un poco de verde y azul: #f77
Para hacerlo más naranja, añadir un poco de verde adicional: #fa7
Para oscurecer, reducir todos sus componentes: #c74
Para reducir su saturación, hacer que sus componentes más iguales: #c98
Si usted los pone exactamente iguales, se obtiene gris: #ccc
- -

Para un tono pastel como el azul pálido:

- - - - - - - - - - - - - - -
Comience con blanco puro: #fff
Reducir los otros componentes un poco: #eef
-
- -
-
-
Más detalles
- -

También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.

- -

Por ejemplo, este es de color granate (rojo oscuro)dark red:

-
- -
RGB (128, 0, 0)
- -

Para más detalles sobre cómo especificar los colores, ver: Colores en la Especificación CSS.

- -

Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: Sistema CSS2 Colores en la Especificación CSS.

-
- -

Propiedades de Color

- -

Ya ha utilizado la propiedad color  en el texto.

- -

También puede utilizar la propiedad background-color para cambiar fondos elementos.

- -

Los Fondos (Backgrounds ) se pueden establecer en transparent (transparentes) para eliminar explícitamente cualquier color, revelando fondo del elemento padre.

- -
-
-
Ejemplo
- -

Los ejemplos de cajas de este tutorial utilizan este fondo de color amarillo pálido:

- -
background-color : # fffff4 ;
- -
 
- -

Los Más detalles cajas utilizan este gris pálido:

- -
background-color : # F4F4F4 ;
-
-
- -

 

- -

Acción: El uso de códigos de color

- -
    -
  1. Edite su archivo CSS.
    2. -
  2. Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. (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.) - 
    /*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    -
    3. -
  3. Guarde el archivo y actualizar el navegador para ver el resultado.
    4. -
- - - - - - - -
- - - - - - - - - -
C ascading S tyle S heets
C ascading S tyle S heets
-
- -
-
-
Desafío
- -

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.

- -

(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.)

-Ver una solución para el desafío.
-
- -

¿Y ahora qué?

- -

En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.La siguiente sección explica cómo se puede hacer excepciones a esta estricta separación.

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

{{ CSSTutorialTOC() }}

- -

{{ 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.

- -

Informacion: Layout

- -

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.

- -

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.

- -

Esta página describe algunas técnicas sencillas que puedes probar.

- -

Estructura del documento

- -

Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.

- -

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.

- -
-
-

Ejemplo

- -

En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.

- -

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.

- -

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:

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

Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:

- -
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
- -

  El resultado se ve así: 

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
-
- -

Unidades de tamaño

- -

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.

- -

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.

- -
-
-

Ejemplo

- -

El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.

- -

El borde de la derecha tiene su tamaño especificado en ems.

- -

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:

-
- - - - - - - -
-
RESIZE ME PLEASE
-
-
- -
-
-

Más detalles

- -

Para otros dispositivos, otras unidades de longitud son apropiadas.

- -

Hay más información sobre esto en una página posterior de este tutorial.

- -

Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.

-
-
- -

Diseño del texto

- -

Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:

- -

{{Cssxref ('text-align')}}

- -


-   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar
- {{Cssxref ('texto-sangría')}}
-     Indente el contenido en una cantidad que especifique.

- -

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.

- -
-
-

Ejemplo

- -

Para centrar los títulos:

-
- -
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
- -

Resultado:

- - - - - - - -
-

(A) The oceans

-
- -

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.

-
- -

Floats

- -

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.

- -

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.

- -
-
-

Ejemplo

- -

En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.

- -

Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:

-
- -
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
- -

El resultado sería:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- -

(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)

- -

Posicionamiento

- -

Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.

- -

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.

- -

relativo

- -


-   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.
- fijo
-     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.
- absoluto
-     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.
- estático
-     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.

- -

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.

- -
-
-

Ejemplo

- -

Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:

-
- -
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
- -

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:

- -
#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;
-}
-
- -

El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:

- -
-

/

- -

\

-
- - - - - - - -
 
-
- -
-
-

Más detalles

- -

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.

- -

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.

-
-
- -

Action: Specifying layout

- -
    -
  1. 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.
    2. -
  2. En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.
    3. -
- -
-
-

Cambios

- -

Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.

-
- -
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
- -

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:

- - - - - - - -
Image:Yellow-pin.png
- -

Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.

- -

Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.

- -

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:

- -
-
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -

 

- -
Yellow map pin
-
-
-
- -

 See a solution to this challenge.

- -

What next?

- -

{{ 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.

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

 

-

Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.

-

Esta es la segunda sección del tutorial.

-

Sección anterior: Que es CSS
- Sección siguiente: How CSS works

-

Información: ¿Por qué usar CSS?

-

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 estilos. Si mantienes los estilos separados del contenido puedes:

- - - - - - - - -
- Ejemplo
-

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.

-

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.

-
-

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).

- - - - - - - -
- Más detalles
-

Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.

-

Por ejemplo en HTML puedes usar una etiqueta <b> para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <body>.

-

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.

-
-

Acción: Creando una hoja de estilos

-
    -
  1. Crea un archivo de texto en el mismo directorio anterior.  Este archivo será tu hoja de estilos. Nombrala como: style1.css
    2. -
  2. En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:
    3. -
  3. -
    - 
    strong {color: red;}
-
    -
    -
    4. -
-

Enlazando tu documento a tu hoja de estillos

-
    -
  1. Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:
    2. -
  2. -
    - 
    <!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>
-  <link rel="stylesheet" type="text/css" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    -
    3. -
  3. Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: - - - - - - -
    Cascading Style Sheets
    -
    4. -
- - - - - - - -
- Reto
En adición al rojo, CSS permite algunos otros nombres de colores. -

Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.

-
-

See a solution for the challenge. Ver la solución al reto.

-

¿Qué sigue?

-

Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de Discusión.

-

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: Como funciona CSS.

-

{{ CSSTutorialTOC() }}

-

{{ 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" } ) }}

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

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}Esta tercera parte del tutorial Empezando CSS explica cómo funciona el CSS en el navegador y la finalidad del Modelo de Objeto de Documento (DOM). Usted también aprenderá cómo analizar el documento de muestra.

- -

Información: Cómo funciona CSS

- -

Cuando un navegador muestra un documento, debe combinar el contenido del documento con la información de su estilo. Se procesa el documento en dos etapas:

- -
    -
  1. El navegador convierte el lenguaje de marcado (markup) y el CSS en el DOM (Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo.
    2. -
  2. El navegador muestra el contenido de la DOM.
    3. -
- -

Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina con '>'. La mayoría de los elementos tienen un par de etiquetas, una etiqueta de inicio y una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<' y '>'. Para la etiqueta final, coloque un '/' después de '<' y antes del nombre del elemento.

- -

Dependiendo del lenguaje de marcado, algunos elementos tienen sólo una etiqueta de inicio, o una sola etiqueta donde el '/' viene después del nombre del elemento. Un elemento también puede ser un contenedor e incluir otros elementos entre su etiqueta de inicio y la etiqueta de cierre. Sólo recuerda cerrar siempre las etiquetas dentro del contenedor.

- -

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo y extensión de texto en el lenguaje de marcado se convierte en un nodo de la estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son los padres de los nodos secundarios, y los nodos secundarios tienen hermanos.

- -

Comprender el DOM le ayuda a diseñar, depurar y mantener su CSS, porque el DOM es donde su CSS y el contenido del documento se reúnen.

- -
-
Ejemplo
-En el documento de ejemplo, las etiqueta <p> y su etiqueta de cierre </ p> crean un contenedor: - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Ejemplo en vivo

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

En el DOM, el nodo correspondiente P es uno de los padres. Sus hijos son los nodos STRONG y los nodos de texto. Los nodos STRONG son en sí mismos padres, con los nodos de texto como sus hijos:

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

Acción: Analizando un DOM

- -

El uso del Inspector DOM

- -

Para analizar un DOM, se necesita un software especial. Usted puede usar el complemento de  Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted sólo tendrá que instalar el complemento (ver más detalles abajo).

- -
    -
  1. Utilice el navegador Mozilla para abrir el documento en versión HTML.
    2. -
  2. Desde la barra de menú de su navegador, selecciona Herramientas> Inspector DOM, o Herramientas> Desarrollo Web> Inspector DOM. -
    -
    Más detalles
    - -

    Si el navegador Mozilla no tiene Domi, puede instalarlo del sitio de complementos y reiniciar el navegador. Luego regrese a este tutorial.

    - -

    Si no desea instalar Domi (o estás usando un navegador que no Mozilla), puede utilizar Web X-Ray Goggles, como se describe en la siguiente sección. O bien, puede omitir esta sección e ir directamente a la página siguiente. Saltarse esta sección no interfiere con el resto del tutorial.

    -
    -
    3. -
  3. En el Domi, expanda los nodos de su documento haciendo clic en las flechas. -

    Nota: El espaciado de su archivo HTML puede ocasionar que Domi muestre algunos nodos de texto vacíos, que se pueden pasar por alto.

    - -

    Parte del resultado podría tener este aspecto, según qué nodos has expandido:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    Cuando selecciona cualquiera de los nodos, puede usar panel de la derecha de  DOMi para averiguar más cosas sobre él. Por ejemplo, cuando se selecciona un nodo de texto, DOMi muestra el texto en el panel de la derecha.

    - -

    Cuando se selecciona un elemento nodo, DOMi analiza y ofrece una enorme cantidad de información en su panel de la derecha. La información de estilo es sólo una parte de la información que proporciona.

    -
    4. -
- -
-
Problema
- -

En el DOMi , haga clic en un nodo STRONG.

- -

Utilice el panel de la derecha de Domi para encontrar el nodo de color rojo, y donde su apariencia es más relevante que el texto normal.

- -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Ocultar solución
-Ver la solución para el problema.
- -

Utilizando Web X-Ray Goggles

- -

Web X-Ray Goggles muestra menos información que DOM Inspector, pero es más fácil de instalar y utilizar.

- -
    -
  1. Ir a la página principal de la Web X-Ray Goggles.
    2. -
  2. Arrastre el enlace bookmarklet en esa página a tu barra de herramientas del navegador.
    3. -
  3. Abra el documento en versión HTML.
    4. -
  4. Active Web X-Ray Goggles haciendo clic en el bookmarklet en la barra de herramientas.
    5. -
  5. Mueva el puntero del ratón por encima de su documento para comprobar los elementos en el documento.
    6. -
- -

¿Y ahora qué?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}Si tomaste el reto, usted vera que la información de estilo  interactúa en más de un lugar, para crear el estilo final de un elemento. La siguiente página explica más acerca de estas interacciones.

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

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.

- -

Esta es la primera sección del tutorial Como iniciar.
- Siguiente sección: Por qué usar CSS

- -

Información: ¿Qué es CSS?

- -

Cascading Style Sheets (CSS), traducido literalmente al español, como Hojas de estilo en cascada, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.

- -

Un documento (document) es una colección de información que está estructurada utilizando un lenguaje de formato (markup language).

- - - - - - - - -
Ejemplos
-
    -
  • Una página web como la que estás leyendo, es un documento.
    - 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).
    • -
- -
    -
  • Un cuadro de diálogo en una aplicación Mozilla es un documento.
    - 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).
    • -
-
- -

En este tutorial, los cuadros con titulo Más detalles, 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.

- - - - - - - - -
Más detalles
-

Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.

- -

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.

- -

Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:

- - - - - - - - - - - - - - - - - - - - -
HTMLpara páginas web
XMLpara documentos estrucurados, en general
SVGpara gráficas
XULpara interfaces de usuario de Mozilla
- -

En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.

-
- -

Presentar 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.

- - - - - - - - -
Más detalles
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 agente de usuarios (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. -

Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace Definiciones (en ingles) en la especificación CSS.

-
- -

Acción: Crear un documento

- -
    -
  1. Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. -
      -
    1. Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre doc1.html - -
      - 
      <!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>
-
      -
      -
      2. -
    -
    2. -
  2. En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. -

    Debe observar un texto con las letras iniciales en negrita, así:

    - - - - - - - -
    Cascading Style Sheets
    - -

    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.

    -
    3. -
- -

¿Qué sigue?

- -

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 Discusiones.

- -

El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: ¿Por qué utilizar CSS?

- -

{{ CSSTutorialTOC() }}

- -

{{ 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" } ) }}

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

Presentación

- -

Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).

- -

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. Está dividido en dos partes.

- - - - - -

El tutorial se basa en la Especificación CSS 2.1 .

- -

¿Quién debe usar este tutorial?

- -

Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.

- -

Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo. A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.

- -

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.

- -

Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.

- -

¿Qué se necesita antes de empezar?

- -

Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite). También debes saber cómo utilizarlos de forma básica.

- -

Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.

- -

Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla. Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas. El otro software de Mozilla al que hace referencia este tutorial incluye:

- - - -

Nota: CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él. Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.

- -

Cómo utilizar este tutorial

- -

Para utilizar este tutorial, lee las páginas con atención y en orden. Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.

- -

En cada página, utiliza la sección de Información para entender cómo funciona CSS. Usa la sección Acción para tratar de usar CSS en tu propio equipo.

- -

Para controlar que has comprendido los contenidos, acepta el reto al final de cada página. Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.

- -

Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título Más detalles. Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.

- -

Parte I del tutorial

- -

Una guía paso a paso básica para CSS.

- -
    -
  1. Qué es CSS
    2. -
  2. Por qué usar CSS
    3. -
  3. Cómo funciona CSS
    4. -
  4. Cascada y herencia
    5. -
  5. Selectores
    6. -
  6. CSS legibles
    7. -
  7. Estilos de texto
    8. -
  8. Color
    9. -
  9. Contenido
    10. -
  10. Listas
    11. -
  11. Cajas
    12. -
  12. Diseño
    13. -
  13. Tablas
    14. -
  14. Multimedia
    15. -
- -

Parte II del tutorial

- -

Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.

- -
    -
  1. JavaScript
    2. -
  2. Enlaces XBL
    3. -
  3. Interfaces de usuario XUL
    4. -
  4. Gráficos SVG
    5. -
  5. Datos XML
    6. -
- -

{{ 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" } ) }}

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

{{ CSSTutorialTOC() }}

- -

Esta es la sección séptima del tutorial CSS Introducción ; da más ejemplos de estilos de texto.Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.

- -

Los estilos de texto: Información

- -

CSS tiene varias propiedades de estilo de texto .

- -

Hay una propiedad abreviada conveniente, la fuente , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:

- - - -
-
-
Ejemplo
- -
p { fuente : cursiva 75% / 125% "Comic Sans MS" , cursive ; }
-
- -

Esta regla establece varias propiedades de la fuente, poniendo todos los párrafos en italic.

- -

El tamaño de fuente se establece en tres cuartas partes del tamaño en cada párrafo del elemento padre,  y el interlíneado se establece en 125% (un poco más separados de lo normal).

- -

El tipo de letra se establece en Comic Sans MS, pero si este tipo de letra no está disponible, el navegador utilizará por defecto tipografía cursiva (hand-written).

- -

La regla tiene el efecto colateral de desactivar las versalitas y negritas (estableciendo su valor en normal):

-
- -

Tipos de fuentes

- -

No se puede predecir qué tipografías tienen los lectores de nuestro documento . Así que cuando se especifica llos tipos de fuentes de las letras, es buena idea darle una lista alternativa en orden de preferencia.

- -

Finalice la lista con uno de los las tipografías por defecto: serif, sans-serif, cursive, fantasy or monospace.

- -

Si el tipo de letra no es compatible con alguna de los caracteres del documento, el navegador puede sustituirlos por una tipografía diferente. Por ejemplo, el documento puede contener caracteres especiales que el tipo de letra no admite. Si el navegador puede encontrar otro tipografía que tiene esos caracteres, entonces usará otro tipo de fuente

- -

Para especificar un tipo de letra por sí misma, utilizar el font-family propiedad.

- -

Los tamaños de la fuente

- -

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.

- -

Puede utilizar algunos valores incorporados para tamaños de fuentes,  like small, medium and large (pequeñas, medianas y grandes) . También puede utilizar valores relativos al tamaño de fuente del elemento padre, like: smaller, larger, 150% or 1.5em. ( más pequeño, más grande, 150% o 1.5em.). Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); así 1.5em es una vez y media el tamaño de la fuente del elemento padre.

- -

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

- -

Para especificar un tamaño de fuente por su cuenta, utilice el font-size propiedad.

- -

Altura de línea

- -

El interlíneado especifica el espacio entre líneas. Si el documento tiene párrafos largos con muchas líneas, una separación más grande de lo normal, hace que sea más fácil de leer, especialmente si el tamaño de la letra es pequeña.

- -

Para especificar una altura de línea por su cuenta, utilice la propiedad line-height .

- -

Decoración

- -

La propiedad independiente text-decoration puede especificar otros estilos, como el subrayado o tachado. Usted puede establecerlo en ninguno ( none )  para eliminar expresamente cualquier decoración.

- -

Otras propiedades

- -

Para especificar cursiva por su cuenta, use font-style : italic;
- Para especificar audaz por su cuenta, use font-weight : bold;
- Para especificar los pequeños capitales en su propio, el uso font-variant : small-caps;

- -

Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como normal o inherit.

- -
-
Mas detalles
- -

Puede especificar estilos de texto de diversas maneras.

- -

Por ejemplo, algunas de las propiedades mencionadas aquí tienen otros valores que se pueden utilizar.

- -

En una hoja de estilo compleja, evite utilizar la propiedad font shorthand, debido a sus efectos secundarios (resetean otras propiedades individuales).

- -

Para obtener mas detalles de las propiedades que se relacionan con las fuentes, ver las especificaciónes CSS , Fonts,. Si desea más detalles sobre la decoración de texto, ver Text .

- -

Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar @ font-face para especificar una fuente en línea. Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.

-
- -

Acción: Especificaciónes de las fuentes

- -

Para un simple documento, puede establecer la fuente del elemento  <body> y el resto del documento hereda la configuración.

- -
    -
  1. Edite su archivo CSS.
    2. -
  2. Agregue la siguiente regla para cambiar el tipo de letra en todo el documento. La parte superior del archivo CSS es el lugar lógico para esto, pero no tiene los mismos efectos donde usted lo ponga: - 
    body {font: 16px "Comic Sans MS", cursive;}
    - -
     
    -
    3. -
  3. Añada un comentario que explique la regla, y agregue un espacio en blanco para que coincida con su diseño preferido.
    4. -
  4. Guarde el archivo y actualice el explorador para ver el efecto. Si su sistema tiene Comic Sans MS, u otra fuente cursiva que no soporta italic, su navegador eligira un tipo de letra diferente para la primera línea del texto en italic: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. Desde la barra de menú de su navegador, elija Ver> Tamaño del texto> Aumentar (o Ver> Zoom> Acercar ). A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.
    6. -
- -
-
Desafío
- -

Sin modificar nada más, hacer las seis letras iniciales dos veces el tamaño de letra serif por defecto del navegador:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Possible solution
- -

Add the following style declaration to the strong rule:

- -
  font: 200% serif;
-
-If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. - -

 

-Hide solution
-Ver una solución para el desafío.
- -

¿Y ahora qué?

- -

El documento muestra ya utiliza varios colores con nombre. La siguiente sección enumera los nombres de los colores estándar y se explica cómo se puede especificar otros .

- -

 

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

Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.   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 widgets personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!

- -

Artículos

- -
    -
  1. Mi primer formulario HTML
    2. -
  2. Cómo estructurar un formulario HTML
    3. -
  3. Los widgets nativos de formulario
    4. -
  4. CSS para formularios HTML -
      -
    1. Aplicando estilos a formularios HTML
      2. -
    2. Estilos avanzados para formularios HTML
      3. -
    3. Tabla de compatibilidad de propiedades para widgets de formulario
      4. -
    -
    5. -
  5. Enviando y recibiendo datos
    6. -
  6. Validación de los datos del formulario
    7. -
  7. Cómo crear un widget de formulario personalizado
    8. -
  8. Enviando formularios mediante JavaScript -
      -
    1. Usando el objeto FormData
      2. -
    -
    9. -
  9. Formularios HTML en navegadores antiguos
    10. -
- -

Documentación HTML

- -

HTML Elements

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoInterfaz DOM relacionadaDescripción
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}El elemento  button representa un boton clickeable.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}El elemento datalist element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}El  fieldset se usa para agrupar distintos elementos dentro de un formulario.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}El elemento  form 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.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}El elemento   input es usado para crear controles interactivos para los formularios.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}El elemento keygen existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario HTML.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}El  label determina un título para un item de la interfaz del usuario.
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}El elemento legend  representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}EL elemento meter  representa un valor escalar dentro de un rango conocido, o un valor fraccional.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}} -

El elemento optgroup crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .

-
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}El elemento option 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") }} .
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}El elemento output representa un resultado de un calculo.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}El elemento progress es usado para mostrar el progreso de la realización de una tarea.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}El elemento select representa el control que presenta un menu de opciones.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}EL elemento textarea representa un campo multi-linea de edicion de text plano.
- -
-

Nota: Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.

-
- -

HTML Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nombre del atributoElementosDescripción
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos que acepta el servidor, típicamente un tipo de fichero.
accept-charset{{ HTMLElement("form") }}Lista de charsets (conjuntos de caracteres) aceptados.
action{{ HTMLElement("form") }}La URI del programa con el que procesar la información enviada a mediante el formulario.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si los controles en este formulario serán o no autocompletados por el navegador
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}El elemento debería poseer el foco automáticamente tras cargar  la página.
challenge{{ HTMLElement("keygen") }}Una cadena de comprobación que es enviada junto con la clave pública.
checked{{ HTMLElement("input") }}Indica si el elemento debe estar seleccionado (checked) tras cargar la página.
cols{{ HTMLElement("textarea") }}Define el número de columnas en un elemento de tipo textarea.
data{{ HTMLElement("object") }}Especifica la URL del recurso.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si el usuario puede o no interactuar con el elemento.
enctype{{ HTMLElement("form") }}Define el tipo de contenido del formulario cuando el método de envío es POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }} -

Establece una asociación con otros elementos

-
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica el elemento form que contiene este elemento.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Especifica el tipo de clave generada.
list{{ HTMLElement("input") }}Determina una lista de opciones predefinidas para sugerir al usuario.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el máximo valor permitido.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define el máximo número de caracteres permitidos en el elemento.
method{{ HTMLElement("form") }} -

Define qué método HTTP se usará al enviar el formulario. puede ser GET (por defecto) o POST

-
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el mínimo valor permitido.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.
novalidate{{ HTMLElement("form") }}Indica que el formulario no debería validarse al momento de ser enviado.
optimum{{ HTMLElement("meter") }}Indica el valor numérico óptimo.
pattern{{ HTMLElement("input") }}Establece la expresión regular con la que validar el valor del elemento.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si el elemento se puede o no editar.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defina la anchura del elemento (en píxeles). Si el elemento es de tipo text o password el ancho se referirá al número de caracteres.
src{{ HTMLElement("img") }}El URL del recurso
step{{ HTMLElement("input") }}Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Determina el tipo del elemento.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Establece el valor actual del elemento.
wrap{{ HTMLElement("textarea") }}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.
- -

Referencia a la normativa

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

 

-


- Cuando escribimos HTML en modo estándar, 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.

-

HTML 4.01

-

- - De la Recomendación del W3C HTML 4.01 Sección 3.2.4 - Comentarios: -

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

Ejemplos

-

Los siguientes son comentarios válidos en HTML.

-
<!-- comentario html válido -->
-<!-- comentario html válido -- >
-
-

El siguiente no es un comentario válido en HTML.

-
<!-- comentario html -- no válido -->
-
-

XML

-

- - De la Recomendación del W3C XML 1.0 Sección 2.5 - Comentarios: -

-
- {{ 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. - 
[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->'
-
-
-

Según lo descrito en la gramática de XML sobre comentarios, un comentario tiene la siguiente forma:

-
<!-- cualquier letra o signo, menos guiones seguidos -->
-
-

Ejemplos

-

El siguiente es un comentario válido en XML y XHTML.

-
<!-- comentario xml/xhtml válido -->
-
-

Los siguientes son comentarios no válidos en XML y XHTML.

-
<!-- comentario xml -- no válido -->
-<!-- comentario xml no válido --->
-<!-- comentario xml no válido -- >
-
-

Otras lecturas

- -
-

Original Document Information

- -
-

 

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

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.

- -

Insertando contenido multimedia

- -

Insertar contenido multimedia en tus documentos HTML es muy sencillo:

- -
-
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  Tu navegador no implementa el elemento <code>video</code>.
-</video>
- -

Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.

- -

Este es un ejemplo para insertar audio en tu documento HTML

- -
<audio src="/test/audio.ogg">
-<p>Tu navegador no implementa el elemento audio.</p>
-</audio>
-
- -

El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.

- -
-
<audio src="audio.ogg" controls autoplay loop>
-<p>Tu navegador no implementa el elemento audio</p>
-</audio>
-
- -

Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:

- - - -
-
<audio src="audio.mp3" preload="auto" controls></audio>
-
- -

El atributo preload es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:

- - - -

Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} con el fin de proporcionar vídeo o audio codificados en formatos diferentes para diferentes navegadores. Por ejemplo:

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

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 los formatos multimedia admitidos por los elementos audio y video en los diferentes navegadores.

- -

También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
-  Tu navegador no implementa el elemento <code>video</code>.
-</video>
- -

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.

- -

Si el atributo type no está especificado, el tipo de contenido multimedia se obtiene del servidor y se comprueba para ver si el navegador lo puede manejar; si no puede ser mostrado, se comprueba el siguiente source , si ninguno de los elementos source especificados pueden ser usados, un evento de error es enviado al elemento video. Si el atributo type 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 source se comprueba una vez.

- -

Mira los eventos del contenido multimedia para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira los formatos multimedia sportados por los elementos audio y video.

- -

Controlando la reproducción multimedia

- -

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:

- -
var v = document.getElementsByTagName("video")[0];
-v.play();
-
- -

La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método play() del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usada para implementar los elementos multimedia.

- -

Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.

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

Deteniendo la descarga de contenido multimedia

- -

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 a través de la recolección de basura.

- -

Aquí un truco para detener la descarga de una sola vez:

- -
var mediaElement = document.getElementById("myMediaElementID");
-mediaElement.pause();
-mediaElement.src = "";
-
- -

Estableciendo una cadena vacía al atributo src del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.

- -

Buscando a través de los medios

- -

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. Esto se hace estableciendo el valor de la propiedad horaActual en el elemento; ver HTMLMediaElement 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.

- -

Usted puede utilizar el elemento seekable 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 TimeRanges que enumera los rangos de veces que se puede tratar de:

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

Especificación del rango de reproducción

- -

Al especificar el URI de los medios de comunicación para un elemento <audio> o <video> , 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.

- -

Un intervalo de tiempo se especifica mediante la sintaxis:

- -
#t=[starttime][,endtime]
- -

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).

- -

Algunos ejemplos:

- -
-
- -
-
http://foo.com/video.ogg # t = 10,20
-
Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.
-
http://foo.com/video.ogg # t =, 10.5
-
Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.
-
http://foo.com/video.ogg # t =, 02:00:00
-
Especifica que el vídeo se reproducirá desde el principio a través de dos horas.
-
http://foo.com/video.ogg # t = 60
-
Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.
-
- -
-

{{ gecko_callout_heading("9.0") }}

-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). En este momento, esta es la única parte de la especificación de los medios de comunicación Fragmentos URIimplementado 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. - -

 

-
- -

Opciones de reserva

- -

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.

- -

Esta sección proporciona dos opciones de reserva para video. En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.

- -

Utilización de Flash

- -

Puede usar Flash para reproducir una película formato Flash si el <video> no se admite elemento:

- -
<video src="video.ogv" controls>
-    <object data="flvplayer.swf" type="application/x-shockwave-flash">
-      <param value="flvplayer.swf" name="movie"/>
-    </object>
-</video>
- -

Tenga en cuenta que no se debe incluir classid en el objeto tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.

- -

 

- -

 

- -

 

- -

Reproducción de vídeos Ogg utilizando un applet de Java

- -

Hay un applet de Java llamada Cortado 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:

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

Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el <p> 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.

- -

 

- -
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) - -

Gestión de errores

-
- -

 

- -

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 error sea enviado al elemento en sí, ahora se entrega a los elementos "hijos" <source> correspondientes a las fuentes que resultan en el error.

- -

Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este 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>
- -

Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los <source> elementos con el ID "mp4_src" y "3gp_src" recibirán error 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.

- -

Detectar si las fuentes no han cargado

- -

Para detectar qué todos los elementos <source> no han podido cargarse, se debe comprobar el valor de la propiedad NetworkState qué poseen todos los elementos de tipo multimedia. Si el valor es HTMLMediaElement.NETWORK_NO_SOURCE, se sabrá que las fuentes no se cargaron correctamente.

- -

Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento <source> como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.

- -

Mostrando contenido fallback cuando la fuente no puede ser cargada

- -

Otra forma de mostrar el contenido fallback 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 fallback:

- -
<video controls>
-  <source src="dynamicsearch.mp4" type="video/mp4"></source>
-  <a href="dynamicsearch.mp4">
-    <img src="dynamicsearch.jpg" alt="App de b&uaacute;squeda din&aacute;mica en Firefox OS">
-  </a>
-  <p>Clic en la im&aacute;gen para reproducir un v&iacute;deo demo de la app de b&uaacute;squeda din&aacute;mica</p>
-</video>
- -
var v = document.querySelector('video'),
-    sources = v.querySelectorAll('source'),
-    lastsource = sources[sources.length-1];
-lastsource.addEventListener('error', function(ev) {
-  var d = document.createElement('div');
-  d.innerHTML = v.innerHTML;
-  v.parentNode.replaceChild(d, v);
-}, false);
- -

 

- -

Véase también

- - - -

{{ HTML5ArticleTOC() }}

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

REDIRIGE Aprende

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

{{jsSidebar("Introductory")}}

- -

JavaScript 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.

- -

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.

- -

Revisión de JavaScript

- -

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: Una nueva introducción a JavaScript . También puedes consultar la Guía de JavaScript 1.5.

- -

Programación orientada a objetos

- -

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. Utiliza diversas técnicas de paradigmas previamente establecidas, incluyendo la modularidad, polimorfismo y encapsulamiento. 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).

- -

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. En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos. Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.

- -

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. 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. 2

- -

Terminología

- -
-
Clase
-
Define las características del Objeto.
-
Objeto
-
Una instancia de una Clase.
-
Propiedad
-
Una característica del Objeto, como el color.
-
Método
-
Una capacidad del Objeto, como caminar.
-
- -
-
Constructor
-
Es un método llamado en el momento de la creación de instancias.
-
Herencia
-
Una Clase puede heredar características de otra Clase.
-
- -
-
Encapsulamiento
-
Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.
-
Abstracción
-
La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.
-
Polimorfismo
-
Diferentes Clases podrían definir el mismo método o propiedad.
-
- -

Para una descripción más extensa de programación orientada a objetos, consulta Programación orientada a objetos en Wikipedia.

- -

Programación basada ​​en prototipos

- -

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. Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.

- -

El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación Self desarrollado por David Ungar y Randall Smith. 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. 2

- -

Programación orientada a objetos de JavaScript

- -

Namespace

- -

Un espacio de nombres 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.

- -
Un espacio de nombres es un objeto: 
- -

-Vamos a crear un objeto global llamado MIAPLICACION
- -
 
- -
// namespace global
-
-var MIAPLICACION = MIAPLICACION || {};
- -
 
- -
-

Nota: Para continuar con las mejores prácticas vamos a utilizar mayúsculas para los namespace.

-
- -
-
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.
- -
 
- -
También podemos crear Sub-espacios de nombres:
- -
 
- -
// Sub-namespace
-
-MIAPLICACION.event = {} ;
-
- -
A continuación se muestra el código para la creación de un espacio de nombre y cómo agregar variables, funciones y métodos:
- -
 
- -
// 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);
-
-
-
- -
-

Objetos básicos

-
- -

JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String. El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método random().

- -
alert (Math.random ());
-
- -
Nota: este y todos los demás ejemplos suponen que una función llamada alert (como el que se incluye en los navegadores web) se define de forma global. La función alert no es realmente parte de JavaScript.
- -

Consulta Core JavaScript 1.5 Reference:Global Objects para obtener una lista de los objetos básicos en JavaScript.

- -

Cada objeto en JavaScript es una instancia del objeto Object, por lo tanto, hereda todas sus propiedades y métodos.

- -

Objetos personalizados

- -

La clase

- -

JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java. Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase. En su lugar, JavaScript utiliza funciones como clases. Definir una clase es tan fácil como definir una función. En el ejemplo siguiente se define una nueva clase llamada Persona.

- -
function Persona() { }
-
- -

El objeto (ejemplo de clase)

- -

Para crear un nuevo ejemplo de un objeto obj utilizamos la declaración new obj , asignando el resultado (que es de tipo obj ) a una variable para tener acceso más tarde.

- -

En el siguiente ejemplo se define una clase llamada Persona y creamos dos instancias ( persona1 y persona2 ).

- -
function Persona() {
-}
-
-var persona1 = new Persona();
-var persona2 = new Persona();
- -
Por favor, consulta también Object.create para ver un método nuevo y alternativo de creación de ejemplos.
- -

El constructor

- -

El constructor es llamado en el momento de la creación de la instancia (el momento en que se crea la instancia del objeto). El constructor es un método de la clase. 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. Cada acción declarada en la clase es ejecutada en el momento de la creación de la instancia.

- -

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 métodos a clase y sus definiciones ya que se realiza utilizando una sintaxis diferente.

- -

En el siguiente ejemplo, el constructor de la clase Persona muestra un alerta que dice (Una instancia de persona) cuando se crea la instancia de la clase Persona.

- -
function Persona() {
-  alert('Una instancia de Persona');
-}
-
-var persona1 = new Persona();
-var persona2 = new Persona();
- -

La propiedad (atributo del objeto)

- -

Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades. Las propiedades deben establecerse a la propiedad prototipo de la clase (función), para que la herencia funcione correctamente.

- -

Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada this , que se refiere al objeto actual. El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis: NombreDeLaInstancia.Propiedad. Es la misma sintaxis utilizada por C++, Java y algunos lenguajes más. (Desde dentro de la clase la sintaxis es this.Propiedad que se utiliza para obtener o establecer el valor de la propiedad).

- -

En el siguiente ejemplo definimos la propiedad primerNombre de la clase Persona y la definimos en la creación de la instancia.

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

Los métodos

- -

Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones. Llamar a un método es similar a acceder a una propiedad, pero se agrega () al final del nombre del método, posiblemente con argumentos.

- -

En el siguiente ejemplo se define y utiliza el método diHola() para la clase Persona.

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

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". Considera el siguiente código de ejemplo:

- -
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"
- -
En el ejemplo se muestran todas las referencias que tenemos de la función diHola — una de ellas es persona1, otra en Persona.prototype, en la variable funcionSaludar, etc. — todas se refieren a la misma función. El valor durante una llamada a la función depende de como realizamos esa llamada. 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 — persona1.diHola().— Se establece en el objeto que tenemos en la función (persona1), razón por la cual persona1.diHola() utiliza el nombre "Alicia" y persona2.diHola() utiliza el nombre "Sebastian". Pero si realizamos la llamada de otra manera, se establecerá de forma diferente: Llamándola desde una variable  —funcionSaludar() — Este establece al objeto global (windows, en los navegadores). Desde este objeto (probablemente) no tiene a la propiedad primerNombre, por lo que finalizará con "Hola, Soy indefinido". (El cual se incluye en modo 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 funcionSaludar.call(persona1).
- -
 
- -
Consulta más información al respecto en Function.call y Function.apply
- -

Herencia

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

JavaScript no detecta la clase hija prototype.constructor (vea las propiedades del Core JavaScript 1.5 Reference:Global Objects:Object:prototype) así que debemos decírselo de forma manual.

-
- -

En el siguiente ejemplo definimos la clase Estudiante como una clase secundaria de Persona . Luego redefinimos el método diHola() y agregamos el método diAdios().

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

Con respecto a la línea Estudiante.prototype = Object.create(Persona.prototype); : Sobre los motores antiguos de JavaScript sin Object.create, 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:

- -
function crearObjeto(proto) {
-  function ctor() { }
-  ctor.prototype = proto;
-  return new ctor();
-}
-
-// uso:
-Estudiante.prototype = crearObjeto(Persona.prototype);
- -
-

Ver Object.create para conocer más sobre lo que hace, y complementar con los motores antiguos.

-
- -

Encapsulación

- -

En el ejemplo anterior, Estudiante no tiene que saber cómo se aplica el método caminar() de la clase Persona, pero, sin embargo, puede utilizar ese método. La clase Estudiante no tiene que definir explícitamente ese método, a menos que queramos cambiarlo. Esto se denomina la encapsulación, 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.

- -

Abstracción

- -

Un mecanismo que permite modelar la parte actual del problema de trabajo. Esto se puede lograr por herencia (especialización) o por composición. 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.

- -

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)

- -

 

- -
var foo = function() {};
-alert( 'foo es una Función: ' + (foo instanceof Function) );
-alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) );
-
- -

Polimorfismo

- -

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. 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).

- -

Notas

- -

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.

- -

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.

- -

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.

- -

Referencias

- -
    -
  1. Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide.
    2. -
  2. Wikipedia. "Programación orientada a objetos", http://es.wikipedia.org/wiki/Program...tada_a_objetos.
    3. -
  3. Descripción general de POO en JavaScript por Kyle Simpson.
    4. -
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 ---- -
{{MDNSidebar}}

¿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 Kuma en la que se construye el sitio web. La guía para el contribuyente de MDN 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.

-

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 Comenzando en MDN. Entre las posibles formas de ayudar se encuentran:

- -

Para más ideas acerca de cosas en las que puedes colaborar con MDN, vé nuestras Guías de cómo hacerlo. Puedes encontrar listas de páginas categorizadasque necesitan de tu ayuda en nuestra sección de  Estado de la Documentación.

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 ---- -
{{MDNSidebar}}

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.

-

{{SubpagesWithSummaries}}

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 ---- -
{{MDNSidebar}}

Por favor, consulte los Documentos de Instalacion de Kuma en GitHub hasta que podamos redactar una mejor guía de "Primeros pasos".

-

Solución de problemas

-

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.

-

Reprovision

-

La primera cosa a intentar es destruir y reconstruir su máquina virtual Kuma. Abra una terminal, pasar a la kuma directorio del proyecto y ejecute el siguiente comando:

-
vagrant destroy && vagrant provision
-

Si desea mantener la base de datos que ya tiene, asegúrese de hacer una copia de seguridad y restaurar después de reaprovisionamiento.

-

Vuelva a descargar la imagen de la VM

-

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

-
vagrant box remove kuma-ubuntu
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 ---- -
{{MDNSidebar}}

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.

-
-
-

Contribuir a Kuma

-
-
- Cómo empezar con Kuma
-
- Cómo bifurcar Kuma desde Github y configurar el entorno de desarrollo.
-
- Se busca ayuda
-
- Tenemos un montón de fallos registrados en Kuma. Este artículo se enumeran algunos, nos encantaría ver colaboradores que ayudan con.
-
-

Herramientas y tareas

-
-
- Errores
-
- 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.
-
- Notificar un error
-
- Si usted ha tenido un problema con Kuma, o tiene alguna idea para una manera de hacerlo mejor; usted puede presentar un error
-
- Cambio de registro
-
- Una lista de reciente de modificaciones impulsadas; este es un gran lugar para buscar, para ver lo que ha pasado recientemente.
-
-

 

-
-
-

MDN comunidad de desarrolladores

-

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!

-
    -
  • Únase a la conversación en el IRC: #mdndev
    • -
  • Lea el foro de desarrolladores MDN: {{DiscussionList("dev-mdn", "mozilla.dev.mdn")}}
    • -
-

Don't forget about the netiquette...

-
-
-

Ver todos ...

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

Introducción

- -

Este tutorial te guiará a través de los pasos requeridos para desarrollar una extensión muy básica - una que agrega un panel con una barra de estado con el texto "Hola, Mundo!" al navegador de Firefox.

- -
Nota: 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 The Essentials of an Extension de la XUL School.
- -

Desde Firefox 4 (y otras aplicaciones basadas en Mozilla 2) existen dos tipos de extensiones:

- - - -

Este artículo explica como construir una extensión tradicional para Firefox. Para información sobre bootstrapped extensions o sin reinicio, mira Bootstrapped extensions.

- -

Para un tutorial sobre construcción de extensiones para Thunderbird, mira Construyendo una extensión para Thunderbird.

- -

Inicio Rápido

- -

Una extensión Hola Mundo similar que puedes generar con el Extension Wizard es explicado línea por línea en otro tutorial desde la MozillaZine Knowledge Base (Base de Conocimiento MozillaZine).

- -

Configurando un Ambiente de Desarrollo

- -

Las extensiones son empaquetadas y distribuidas en archivos ZIP o Bundles, con la extensión de archivos XPI.

- -

Un ejemplo del contenido dentro de un archivo XPI típico :

- -
my_extension.xpi:                         //Igual a una carpeta llamada my_extension/
-          /install.rdf                    //Información general sobre tu extensión
-          /chrome.manifest                //Registra tu contenido con el motor Chrome
-          /chrome/
-          /chrome/content/                //Contenido de tu extensión, por ejemplo, archivos XUL and JavaScript
-          /chrome/icons/default/*         //Iconos por defecto de tu extensión
-          /chrome/locale/*                //Construyendo una Extensión# Localización
-          /defaults/preferences/*.js      //Construyendo una Extensión# Archivos por defecto
-          /plugins/*
-          /components/*
-          /components/cmdline.js
- -

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, C:\extensions\my_extension\ or ~/extensions/my_extension/). Dentro de la nueva carpeta para la extensión, crea otra carpeta llamada chrome, y dentro de la carpeta chrome, crea una carpeta llamada content.

- -

Dentro del directorio raíz de la carpeta de tu extensión, crea dos archivos de texto nuevos, llamados chrome.manifest e install.rdf. En el directorio chrome/content, crea un nuevo archivo de texto vacío llamado sample.xul.

- -

Deberías concluir con esta estructura de directorio:

- - - -

<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> Por favor lee la información adicional sobre configuración de un ambiente de desarrollo en el artículo Configurando un ambiente de desarrollo.

- -

{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named icon.png, 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 iconURL entry.") }}

- -

Crear el Manifiesto de Instalación

- -

Abre el archivo llamado install.rdf que creaste en el tope de la jerarquía de carpetas de tu extensión y agrega dentro lo siguiente:

- -
<?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>sample@example.net</em:id>
-    <em:version>1.0</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>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
-        <em:minVersion>1.5</em:minVersion>
-        <em:maxVersion>4.0.*</em:maxVersion>
-      </Description>
-    </em:targetApplication>
-
-    <!-- Front End MetaData -->
-    <em:name>sample</em:name>
-    <em:description>A test extension</em:description>
-    <em:creator>Your Name Here</em:creator>
-    <em:homepageURL>http://www.example.com/</em:homepageURL>
-  </Description>
-</RDF>
- - - -
Nota: si obtienes un mensajes que install.rdf está mal formado, es útil cargarlo en Firefox usando el comando Archivo->Abrir Archivo que reportará los errores XML para ti.
- -

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.*"

- -

Mira Manifiestos de Instalación para una lista completa de las propiedades requeridas y opcionales.

- -

Guarda el archivo.

- -

Extendiendo el Navegador con XUL

- -

La interfaz de usuario de Firefox está escrita en XUL y JavaScript. XUL 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.

- -

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.

- -

El navegador es implementado en un archivo XUL llamado browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contiene content/browser/browser.xul). En browser.xul podemos encontrar la barra de estado, que se parece a algo como esto:

- -
<toolbarpalette id="BrowserToolbarPalette">
- ... <toolbarbutton>s ...
-</toolbarpalette>
- -

<statusbar id="status-bar"> es un  "punto de fusión" para un XUL Overlay.

- -

XUL Overlays

- -

Los XUL Overlays 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.

- -

Ejemplo de un Documento XUL Overlay

- -
<?xml version="1.0"?>
-<overlay id="sample"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
- <toolbarpalette id="BrowserToolbarPalette">
-  <toolbarbutton id="my-button" label="Hello, World"  />
- </toolbarpalette>
-</overlay>
- -

La <toolbarpalette> llamada BrowserToolbarPalette especifica el "punto de fusión" que queremos enlazar dentro de la ventana del navegador.

- -

El hijo <toolbarbutton> es un nuevo widget que queremos insertar dentro de un punto de fusión.

- -

Copia el código de ejemplo anterior y guardalo en tu archivo llamado sample.xul dentro de la carpeta chrome/content que has creado.

- -

Para más información sobre fusionar widgets y modificar la interfaz de usuario usando Overlays, mira debajo.

- -

Chrome URIs

- -

Los archivos XUL son parte de "Paquetes Chrome" - envoltorios de componentes de interfaz de usuario que son cargados a través de URIs chrome://. En lugar de cargar el navegador desde el disco usando una URI file://  (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.

- -

La ventana del navegador es: chrome://browser/content/browser.xul. Prueba tipiando esta URL en la barra de navegación de Firefox!

- -

Las Chrome URIs constan de varios componentes:

- - - -

Así que, chrome://foo/skin/bar.png carga el archivo bar.png desde la sección skin del tema foo.

- -

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).

- -

Crea un Manifiesto Chrome

- -

Para más información de Manifiestos Chrome y las propiedades que soportan, mira Referencia de Manifiestos Chrome.

- -

Abre el archivo denominado chrome.manifest que has creado junto al directorio chrome en la raíz de la jerarquía de carpetas de tu extensión.

- -

Agrega este código:

- -
content     sample    chrome/content/
-
- -

(No te olvides de la barra, "/"! Sin ella, el paquete no será registrado.)

- -

Esto especifica:

- -
    -
  1. tipo de material dentro del paquete chrome.
    2. -
  2. 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") }})
    3. -
  3. ubicación de los archivos de paquetes chrome.
    4. -
- -


- Entonces, esta línea establece que para un paquete chrome sample, podremos encontrar sus archivos de contenido (content) en la ubicación chrome/content que es una dirección relativa a la ubicación del manifiesto chrome.manifest.

- -

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 chrome.

- -

Guarda el archivo. Cuando ejecutes Firefox con tu extensión (más adelante en este tutorial), esto va a registrar el paquete chrome.

- -

Registrar un Overlay

- -

Necesitas que Firefox fusione tu overlay (capa) con la ventana del navegador siempre que se despliegue una. Así que agrega esta linea al archivo chrome.manifest:

- -
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
-
- -

Esto le dice a Firefox que fusione sample.xul en browser.xul cuando se cargue browser.xul.

- -

Prueba

- -

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.

- -
    -
  1. Ubica tu carpeta de perfil y dentro el perfil con el que quieres trabajar (ej., Firefox/Profiles/<profile_id>.default/).
    2. -
  2. Abra la carpeta extensions/, creandola de ser necesario.
    3. -
  3. Crea un nuevo archivo de texto y coloca dentro la dirección completa de tu carpeta de desarrollo (ej., C:\extensions\my_extension\ or ~/extensions/my_extension/). Los usuarios de Windows deberían conservar la dirección de la barra, y todos deberían acordarse de incluir una barar de cierre y eliminar cualquier espacio.
    4. -
  4. Guarda el archivo con la id de tu extensión como su nombre (ej., sample@example.net). Sin extensión de archivo.
    5. -
- -

Ahora deberías estar listo opara probar tu extensión!

- -

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.

- -

Ahora puedes volver y hacer cambios al archivo .xul, cierra y reinicia Firefox, y deberían aparecer.

- -

Empaquetamiento

- -

Ahora que tu extensión funciona, puedes empaquetarla para su despliegue e instalación.

- -

Comprime (zip) los contenidos (contents) 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!

- -

En Mac OS X, puedes hacer click derecho en los contenidos (contents) 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.

- -

En Linux, podrías también usar la herramienta zip de linea de comandos.

- -

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.

- -

Ahora carga el archivo .xpi en tu servidor, asegúrate de que es servido como una application/x-xpinstall. 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.

- -

Instalando desde una página web

- -

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  método InstallTrigger para instalar XPIs, ya que provee la mejor experiencia a los usuarios.

- -

Usando addons.mozilla.org

- -

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!

- -

Visita http://addons.mozilla.org/developers/ para crearte una cuenta y comenzar a distribuir tus extensiones!

- -

Nota: 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.

- -

Instalando Extensiones Usando una Instalador Separado

- -

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  lnstalando extensiones para más información.

- -

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 Agregando Extensiones usando el Registro de Windows para más información.

- -

Más sobre XUL Overlays

- -

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:

- -
<toolbarbutton position="1" ...  />
-
-<toolbarbutton insertbefore="other-id" ...  />
-
-<toolbarbutton insertafter="other-id" ...  />
- -

Creando Nuevos Componentes de Interfaz de Usuario

- -

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.

- -

Mira la documentación XUL con más recursos para los desarrolladores XUL.

- -

Archivos por Defecto

- -

Los archivos por defecto que usas para sembrar un perfil de usuario deberían ser ubicados en defaults/ 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 defaults/preferences/ - 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 API de Preferencias.

- -

Un archivo de preferencia por defecto de ejemplo:

- -
pref("extensions.sample.username", "Joe"); //a string pref
-pref("extensions.sample.sort", 2); //an int pref
-pref("extensions.sample.showAdvanced", true); //a boolean pref
-
- -

Componentes XPCOM

- -

Firefox soporta componentes XPCOM en las extensiones. Puedes crear tus propios componentes fácilmente en JavaScript o en C++ (usando Gecko SDK).

- -

Ubica todos tus archivos .js o .dll en el directorio components/ - son registrados automáticamente la primera vez que se ejecute Firefox luego de que tu extensión es instalada.

- -

Para más información mira Cómo Construir un Componente XPCOM en Javascript, Cómo construir un componente XPCOM binario usando Visual Studio, y el libro Creando Componentes XPCOM.

- -

Línea de Comandos de la Aplicación

- -

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:

- -
 firefox.exe -myapp
-
- -

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(). Mira Chrome: Línea de Comandos y un foro de discusión para más detalles.

- -

Localización

- -

Para soportar más de un lenguaje, deberías separar los strings (cadenas de caracteres) de tu contenido usando entidades y envoltorios de strings. Es mucho más fácil hacer esto mientras estás desarrollando tu extensión, en lugar de volver y hacerlo después!

- -

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:

- -
locale sample en-US chrome/locale/en-US/
-
- -

Para crear valores de atributo localizables en XUL, puedes ubicar los valores en un archivo .dtd (sample.dtd para tu extensión de prueba). Este archivo debería ser ubicado en el directorio locale y se parece a esto:

- -
<!ENTITY  my-panel.label  "Hello, World">
-
- -

Luego incluyélo el comienzo de tu documento XUL (pero debajo de"<?xml version"1.0"?>"), como se ve a continuación:

- -
<?xml version="1.0"?>
-<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">
-...
- -

donde window es el valor localName (nombre local) del elemento raíz del documento XUL, y el valor de la propiedad SYSTEM es la URI chrome hacia el archivo de entidad.

- -

Para nuestra extensión de ejemplo, reemplaza window con overlay (elemento raíz), packagename con sample, y filename.dtd con sample.dtd.

- -

Para usar las entidades, modifica tu XUL para que se vea así:

- -
<statusbarpanel id="my-panel" label="&my-panel.label;"  />
-
- -

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.

- -

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:

- -
clave=valor
-
- -

y luego usa {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} o el tag {{ XULElem("stringbundle") }} para cargar valores en el script.

- -

Entendiendo el Navegador

- -

Usa el Inspector DOM para inspeccionar la ventana del navegador o cualquier otra ventana XUL que quieras extender.

- -

Nota: El Inspector DOM no es parte de la instalación Estándar de Firefox. Desde Firefox 3 Beta 4, el Inspector DOM está disponible desde Los Complementos de Firefox como una extensión por separado. Para versiones anteriores, debes reinstalar con la dirección de instalación Personalizada y seleccionar Inspector DOM (o Developer Tools en Firefox 1.5) si no hay un ítem "Inspector DOM" en el menú de herramientas de tu navegador.

- -

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.

- -

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 load en la ventana XUL maestra.

- -

Depurando Extensiones

- -

Herramientas Analíticas para Depuración

- - - -

Depuración con printf

- - - -

Depuración avanzada

- - - -

Más Información

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

{{draft}}

-
- -

Coming soon...

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 ---- -
- 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. 
-
-  
-
- 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. 
-
-  
-
- La Caja de herramientas se abrirá, con el Profiler seleccionado.
-
-  
-

Los perfiladores de muestreo

-

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.
-
- Por ejemplo, considere un programa como este:

-
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();
-

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. 

-

Todos están tomadas desde el interior doSomething(), pero los otros dos se encuentran dentro de la función logTheValue() llamado por doSomething(). Así que el perfil consistiría en tres seguimientos de pila, como este:

-
Sample A: doSomething()
-Sample B: doSomething() > logTheValue()
-Sample C: doSomething() > logTheValue()
-

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 logTheValue() es el cuello de botella en nuestro código.

-

Creación de un perfil

-

Haga clic en el botón del cronómetro (stopwatch) 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:

-

-

Una vez que haya hecho clic en "Stop", el nuevo perfil se abrirá de forma automática:

-

-

Este panel está dividido en dos partes:

- -

Analyzing a profile

-

The profile is split into two parts:

- -

Profile timeline

-

The profile timeline occupies the top part of the profile display:

-

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.

-

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 requestAnimationFrame and Workers.

-

You can examine a specific range within the profile by clicking and dragging inside the timeline:

-

-

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:

-


-

-

Profile details

-

The profile details occupy the bottom part of the profile display:

-

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.

-

-

Running time shows the total number of samples in which this function appeared1, 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 detectImage() function.

-

Self 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 simple example above, doSomething() would have a Running time of 3 (samples A, B, and C), but a Self value of 1 (sample A).

-

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.

-

Expanding the call tree

-

In a given row, if there are any samples taken while we were in a function called by this function (that is, if Running Time is greater than Self for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.

-

In the simple example above, the fully-expanded call tree would look like this:

- - - - - - - - - - - - - - - - - - -
Running TimeSelf 
3            100%1doSomething()
2              67%2logTheValue()
-

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 detectImage() function. But all of them were taken in functions called by detectImage() (the Self cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:

-

-

This tells us that 6 samples were taken when we were actually executing detectAtScale(), 12 when we were executing getRect() and so on.

-

Footnotes

-
    -
  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 forEach will appear multiple times in the call tree.
    2. -
-

 

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

Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant but some information may still be relevant.

-
-

Introduction

-

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.

-

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 representación del contexto WebGL

-

El contexto de representación 2D

-

Un ejemplo sencillo

-

Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.

-
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);
-}
-
- -

{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}

-

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.

-

El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo.   Para representar formas más complejas, se usan trayectorias.  

-

Usando trayectorias

-

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.

-
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();
-}
-
- -

{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}

-

Llamando fill() o stroke() causa que el trazo sea usado.   Para ser llenado o juntado otra vez, el trazo debe ser recreado.

-

Estado de gráficos

-

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.

-

Un ejemplo más complicado

-

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.

-
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();
-}
-
- -

{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}

-

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.

-

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 ().

-

Compatibilidad con Apple <canvas>

-

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í.

-

Etiqueta </canvas> requerida 

-

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.

-

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.

-

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).

-
canvas {
-  font-size: 0.00001px !ie;
-}
-

Caracteristicas adicionales  

-

Renderizando el contenido we dentro de un Canvas.

-
- Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome.   No esta permitido en paginas HTML normales. Porqué leer.
-

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:

-
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
-
-

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).

-

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.

-

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.

-

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.  

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

See also

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

{{APIRef("Web Crypto API")}}

- -

RandomSource 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.

- -

RandomSource is a not an interface and no object of this type can be created.

- -

Properties

- -

RandomSource neither defines nor inherits any property.

- -
-
- -

Methods

- -
-
{{ domxref("RandomSource.getRandomValues()") }}
-
Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.
-
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Initial definition
- -

Browser Compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
-
- -

[1] Although the transparent RandomSource is only available since Firefox 26, the feature was available in Firefox 21.

- -

See also

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

¿Qué es DOM?

- -

El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. 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.

- -

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.

- -

Es muy común usar DOM conjuntamente con JavaScript. 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 cualquier lenguaje.

- -

El Consorcio de World Wide Web establece un estándar para el DOM, llamado W3C DOM. Actualmente los navegadores más importantes lo soportan correctamente, ésto permite crear poderosas aplicaciones multi-navegador.

- -

¿Por qué es importante el soporte que Mozilla da al DOM?

- -

HTML dinámico (DHTML) 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 DOM FAQ). 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.

- -

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. (en inglés)

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

{{draft}}

-

The Document Object Model is an API for HTML and XML 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.

-

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (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.

-

The DOM is most often used in conjunction with JavaScript. 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 any language.

-

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

-

Why is the DOM important?

-

"Dynamic HTML" (DHTML) 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 W3C FAQ). 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.

-

Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

-

More about the DOM

-

{{LandingPageListSubpages}}

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 ---- -
- Acerca del Modelo de Objetos del Documento
- Un par de cosas básicas sobre DOM y Mozilla.
-
-

El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. 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.

-
-

DOM es un estándar del W3C

- - - - - - - -
-

Documentación

-
-
- Introducción a la manipulación DOM
-
- Introducción a los métodos de manipulación DOM mediante Javascript
-
-
-
- Especificación del DOM Nivel 1
-
- El objetivo de la especificación DOM es definir una interfaz programable para HTML y XML.
-
-
-
- Uso del núcleo del nivel 1 del DOM
-
- Es un potente modelo de objetos para modificar el árbol de contenidos de los documentos.
-
-
-
- Los niveles del DOM
-
- Una descripción de los niveles del DOM y el soporte ofrecido por Mozilla a cada uno de ellos.
-
-
-
- DHTML Demostraciones del uso de DOM/Style
-
- 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.
-
-
-
- The Document Object Model in Mozilla.org (en)
-
- Una versión más antigua acerca de DOM se encuentra en mozilla.org.
-
-

enlaces a ninguna parte: ; DOM y JavaScript: <small>"¿Qué está haciendo que? ¿En un script embebido en mi página web, el cual usa DOM y Javascript?"</small>  ; Modificando dinámicamente las interfaces de usuario en XUL: <small>Fundamentos de manipulación con XUL UI y métodos DOM.</small>  ; Espacios en blanco en el DOM: <small>Una solución al problema de ignorar los espacios en blanco cuando se interactúa con el DOM.</small>  ; Tablas HTML con JavaScript e interfaces DOM: <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 Ver todos

- 		-

Comunidad

-
    -
  • En la comunidad Mozilla... en inglés
    • -
-

{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}

-

Ver todos

-

Herramientas

- -

Ver todos

-

Temas relacionados

-
-
- • AJAX • CSS • XML • JavaScript •
-
-

 

-
-

fin de tabla

-

Categorías

-

Interwiki Language Links

-

{{ 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" } ) }} 

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

« Referencia DOM de Gecko

- -

Sobre Esta referencia

- -

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.

- -

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, La referencia al documento de DOM) 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.

- -

A quién va dirigida esta guía?

- -

El lector de Referencia DOM de Gecko 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 XML, los servidores o estándares Web y también con JavaScript, el lenguaje en el cual el DOM se hace accesible al lector. Al contrario, sí, supone de la familiaridad con HTML, el marcado, la estructura básica de las páginas Web, los navegadores y con las hojas de estilo.

- -

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 principiantes. En general y sin embargo se le puede considerar como un manual evolutivo del API.

- -

Qué es Gecko?

- -

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. 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)

- -

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, ventana - window) 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 (ochrome) del navegador.

- -

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. (commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user

- -

Sintaxis del API

- -

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.

- -

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 availHeight del objeto screen incluye la información siguiente:

- -
- -

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:

- -
- -

En general, el objeto cuyo miembro se está describiendo se pone en la declaración con un sólo tipo de dato:

- - - -

Utilización de ejemplos

- -

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 (callback) de JavaScript. Por ejemplo, la propiedad de window.document se puede probar dentro de la siguiente función, la cual es llamada por el botón acompañante:

- -
<html>
-
-<script>
-function testWinDoc() {
-
-  doc= window.document;
-
-  alert(doc.title);
-
-}
-</script>
-
-<button onclick="testWinDoc();">Prueba la propiedad del documento</button>
-
-</html>
-
- -

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 Probando el API del DOM en la introducción para una "prueba pesada" que permite probar varios API a la vez.

- -

{{ 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" } ) }}

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 ---- -
{{APIRef("DOM")}}
- -

The NonDocumentTypeChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.

- -

NonDocumentTypeChildNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.

- -

Properties

- -

There is no inherited property.

- -
-
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list prior to this node.
-
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list following this node.
-
- -

Methods

- -

There is neither inherited, nor specific method.

- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and NonDocumentTypeChildNode. The previousElementSibling and nextElementSibling are now defined on the latter.
- The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support (on {{domxref("CharacterData")}})1.0{{CompatGeckoDesktop("25.0")}} [1]9.010.04.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("1.9.1")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
Support (on {{domxref("CharacterData")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("25.0")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
-
- -

[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.

- -

See also

- - 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 ---- -
{{APIRef("DOM")}}{{obsolete_header}}
- -

La propiedad de solo lectura Nodo.namespaceURI 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.

- -
-

En DOM4 esta API fué movida desde Node a las interficies {{domxref("Element")}} y {{domxref("Attr")}}.

-
- -

Sintaxis

- -
namespace = node.namespaceURI
- -

Ejemplo

- -

En este fragmento, un nodo esá siendo examinado por su {{domxref("Node.localName")}} y namespaceURI. Si el namespaceURI devuelve el nombre de espaciosXUL y el localName devuelve "browser", entonces el nodo es entendido  a ser un XUL <browser/>.

- -
if (node.localName == "browser" &&
-    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // Este es un navegador XUL
-}
- -

Notas

- -

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.

- -

En Firefox 3.5 y anteriores, el espacio de nombres URI para los elementos HTML en los Documents HTML es null. En versiones psoteriores, en conformidad con HTML5, es https://www.w3.org/1999/xhtml como en XHTML. {{gecko_minversion_inline("1.9.2")}}

- -

Para nodos de cualquier {{domxref("Node.nodeType")}} distintos de ELEMENT_NODE y ATTRIBUTE_NODE el valor de namespaceURI es siempre null.

- -

Puedes crear un elemento con un namespaceURI concreto creando un método DOM de nivel 2 {{domxref("Document.createElementNS")}} y atributos con el método {{domxref("Element.setAttributeNS")}}.

- -

Para la especificación Namespaces in XML, 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.

- -

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.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}{{Spec2("DOM3 Core")}}Specifies the behavior when it's set to null.
{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}{{Spec2("DOM2 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}{{Spec2("DOM2 Core")}}Initial definition
- -

Compatibilidad de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}
- {{CompatNo}}46.0[1]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]
- {{CompatNo}} {{CompatGeckoDesktop("48.0")}}[1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]
- {{CompatNo}} {{CompatGeckoMobile("48.0")}}[1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Esta API fue movida a las APIs {{domxref("Element")}} y {{domxref("Attr")}} de acuerdo con el standard de DOM4.

- -

[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.

- -

Ver también

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

{{APIRef("Geolocation API")}}

- -

NavigatorGeolocation  contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.

- -

There is no object of type NavigatorGeolocation, but some interfaces, like {{domxref("Navigator")}} implements it.

- -

Properties

- -

The NavigatorGeolocation interface doesn't inherit any property.

- -
-
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
-
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
-
- -

Methods

- -

The NavigatorGeolocation interface neither implements, nor inherit any method.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}{{Spec2('Geolocation')}}Initial specification.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}910.60
- Removed in 15.0
- Reintroduced in 16.0		5
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
-
- -

See also

- - - -

 

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

 

-

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

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

{{ APIRef("DOM") }}

- -

Sumario

- -

name obtiene o establece la propiedad del nombre de un objeto DOM; sólo se aplica a los siguientes elementos: {{ 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") }}.

- -
-

Nota: La propiedad name no esixte para otros elementos; a diferencia de tagName y nodeName, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.

-
- -

name puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una configuración y con la colección de elementos de la configuración. cuando utilizamos una configuración o  elementos de una colección, puede devolver un solo elemento o una colección.

- -

Síntasix

- -
HTMLElement.name = string;
-var elName = HTMLElement.name;
-
-var fControl = HTMLFormElement.elementName;
-var controlCollection = HTMLFormElement.elements.elementName;
-
- -

Ejemplo

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

Notas

- -

En Internet Explorer (IE), la propiedad name de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada

- -

Especificaciones

- -

W3C DOM 2 HTML Specification:

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

{{ SeeCompatTable() }}

- -

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 DOM Storage 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.

- -

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 ;Conceptos básicos acerca de IndexedDB. Para más detalles, vea Usando IndexedDB.

- -

IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de Web Workers, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.

- -

API Asíncrono

- -

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 open() en el atributo indexedDB de un objeto window. 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.

- -
-

Nota: El objeto indexedDB se prefija en las versiones antiguas de los navegadores (propiedad mozIndexedDB para Gecko < 16, webkitIndexedDB en Chrome, y msIndexedDB en IE 10).

-
- - - -

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:

- - - -

Hay también una versión sincrónica de la API. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con WebWorkers.

- -

Límites de almacenamiento

- -

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:

- - - -

Ejemplo

- -

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 eLibri, una biblioteca y una aplicación de lectura de libros electrónicos.

- -

Compatibilidad de los navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
API asíncrono -

24.0
- 11.0 {{ property_prefix("webkit") }}

- 		-

{{ CompatGeckoDesktop("16.0") }}
- {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}

- 		10 {{ property_prefix("ms") }}{{ CompatNo() }}{{ CompatNo() }}
API síncrono
- (usado por WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
- Vea {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
API síncrono{{ CompatNo() }}{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

Para otra matriz de compatibilidad, vea también: Cuándo puedo usar IndexedDB

- -

También existe la posibilidad de usar IndexedDB en navegadores que soportan WebSQL por el uso de IndexedDB Polyfill.

- -

Ver también

- - 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 ---- -
-
{{APIRef("DOM")}}
-{{Non-standard_header}} - -

La propiedad de solo loctura de Nodo.nodePrincipal devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.

- -

{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}

- -

Sintaxis

- -
principalObj = element.nodePrincipal
-
- -

Notas

- -

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

- -

Especificación

- -

No hay especificaciones.

-
- -

 

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

La W3C Push API 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.

- -

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.

- -
-

Note: Early versions of Firefox OS used a proprietary version of this API called Simple Push. This is being rendered obsolete by the Push API standard.

-
- -

Demo: las bases de una simple app de servidor de chat

- -

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.

- -

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.

- -

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.

- -

- -

Para correr la demo, siga las instrucciones de push-api-demo README. 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.

- -

Visión de la tecnología

- -

Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.

- -

Los mensajes web push hacen parte de la familia tecnológica service workers; 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:

- -

Web Push messages are part of the service workers 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:

- - - -

A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.

- -
-

Nota: 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 NodeJS.

-
- -

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.

- -

Encryption

- -
-

Note: For an interactive walkthrough, try JR Conlin's Web Push Data Encryption Test Page.

-
- -

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 Message Encryption for Web Push 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 web-push library.

- -
-

Note: There is also another library to handle the encryption with a Node and Python version available, see encrypted-content-encoding.

-
- -

Push workflow summary

- -

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.

- -
    -
  1. Request permission for web notifications, or anything else you are using that requires permissions.
    2. -
  2. Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.
    3. -
  3. Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.
    4. -
  4. Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that getKey() is currently experimental and Firefox only.)
    5. -
  5. Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use Fetch.
    6. -
  6. If you are using the Channel Messaging API to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send port2 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.
    7. -
  7. 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.
    8. -
  8. To send a push message, you need to send an HTTP POST to the endpoint URL. The request must include a TTL 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 web-push module, which handles all the hard work for you.
    9. -
  9. Over in your service worker, set up a push event handler to respond to push messages being received. -
      -
    1. 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 port2 we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the onmessage handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the ports property, index 0. Once this is done, you can send a message back to port1, using {{domxref("MessagePort.postMessage()")}}.
      2. -
    2. 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.
      3. -
    -
    10. -
- -

Construyendo la demo

- -

Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.

- - - -

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.

- -

El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.

- - - -

El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.

- -

Variables y configuración inicial

- -

Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:

- -
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';
- -

Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.

- -

A continuación, tomamos una referencia al suscrito/no-suscrito {{htmlelement("button")}}, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)

- -

Las siguientes variables toman referencia a los trés elementos principales {{htmlelement("div")}} en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón envíar el mensaje de chat o el mensaje de chat aparezca en la lista de mensajes.)

- -

Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento {{htmlelement("input")}}, damos a la entrada un valor por defecto, y usamos preventDefault() para detener el envío del formulario cuando este es enviado pulsando return.

- -

A continuación, pedimos permiso para enviar las notificaciones web, usando {{domxref("Notification.requestPermission","requestPermission()")}}:

- -
Notification.requestPermission();
- -

Ahora ejecutamos una sección de código cuando se dispara el onload, 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 unsubscribe() si actualmente estamos suscritos (isPushEnabled is true), y subscribe() de la otra manera:

- -
window.addEventListener('load', function() {
-  subBtn.addEventListener('click', function() {
-    if (isPushEnabled) {
-      unsubscribe();
-    } else {
-      subscribe();
-    }
-  });
- -

A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando {{domxref("ServiceWorkerContainer.register()")}}, y ejecutando nuestra función initialiseState(). Si no es así, entregamos un mensaje de error a la consola.

- -
  // 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.');
-  }
-});
-
- -

La siguiente cosa en el código es la función initialiseState() — para el codigo completo comentado, mira en initialiseState() source on Github (no lo estamos repitiendo aquí por brevedad.)

- -

initialiseState() primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable  useNotifications 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.

- -

Finalmente, se usa {{domxref("ServiceWorkerContainer.ready()")}} 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 {{domxref("ServiceWorkerRegistration.pushManager")}}, que devuelve un objeto {{domxref("PushManager")}} cuando llamamos a {{domxref("PushManager.getSubscription()")}}. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (subBtn.disabled = false;), y verificamos que tenemos un objeto suscripsión para trabajar.

- -

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 isPushEnabled to true, toma el punto final de suscripsión desde {{domxref("PushSubscription.endpoint")}}, genera una public key usando {{domxref("PushSubscription.getKey()")}}, y ejecutando nuestra función updateStatus(), que como verá más adelante se comunica con el servidor.

- -

Como un bonus añadido, configuramos un nuevo {{domxref("MessageChannel")}} usando el constructor {{domxref("MessageChannel.MessageChannel()")}}, toma una referencia al service worker activo usando {{domxref("ServiceworkerRegistration.active")}}, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando {{domxref("Worker.postMessage()")}}. El contexto del navegador recive mensajes en {{domxref("MessageChannel.port1")}}; Cuando esto suceda, ejecutamos la función handleChannelMessage() para decidir que hacer con esos datos (mirar la sección {{anch("Handling channel messages sent from the service worker")}} ).

- -

Subscribing and unsubscribing

- -

Ahora regresamos la atención a las funciones subscribe() y unsubscribe() usadas para subscribe/unsubscribe al servicion de notificaciones push.

- -

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 updateStatus() function along with the update type (subscribe) to send the necessary details to the server.

- -

We also make the necessary updates to the app state (set isPushEnabled to true) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)

- -

The unsubscribe() 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()")}}.

- -

Appropriate error handling is also provided in both functions.  

- -

We only show the subscribe() code below, for brevity; see the full subscribe/unsubscribe code on Github.

- -
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';
-        }
-      });
-  });
-}
- -

Updating the status in the app and server

- -

The next function in our main JavaScript is updateStatus(), which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.

- -

The function does one of three different things, depending on the value of the statusType parameter passed into it:

- - - -

Again, we have not included the entire function listing for brevity. Examine the full updateStatus() code on Github.

- -

Handling channel messages sent from the service worker

- -

As mentioned earlier, when a channel message is received from the service worker, our handleChannelMessage() function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:

- -
channel.port1.onmessage = function(e) {
-  handleChannelMessage(e.data);
-}
- -

This occurs when the service worker sends a channel message over.

- -

The handleChannelMessage() function looks like this:

- -
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 = '';
-  }
-}
- -

What happens here depends on what the action property on the data object is set to:

- - - -
-

Note: 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 Using Service Workers for more details.

-
- -

Sending chat messages

- -

When the Send Chat Message button is clicked, the content of the associated text field is sent as a chat message. This is handled by the sendChatMessage() function (again, not shown in full for brevity). This works in a similar way to the different parts of the updateStatus() 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 statusType of chatMsg.

- -

The server

- -

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 NodeJS (server.js), which handles the XHR requests sent by our client-side JavaScript code.

- -

It uses a text file (endpoint.txt) to store subscription details; this file starts out empty. There are four different types of request, marked by the statusType 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:

- - - -

A couple more things to note:

- - - -

The service worker

- -

Now let's have a look at the service worker code (sw.js), 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 action property:

- - - -
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);
-  }
-});
- -

Next, let's look at the fireNotification() function (which is blissfully pretty simple).

- -
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
-  }));
-}
- -

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.)

- -

- -

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. waitUntil() will extend the life cycle of the service worker until everything inside this method has completed.

- -
-

Note: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as Clients.openWindow()) is properly implemented (see {{bug(1203324)}} for more details.)

-
- -

Handling premature subscription expiration

- -

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.

- -
self.addEventListener('pushsubscriptionchange', function() {
-  // do something, usually resubscribe to push and
-  // send the new subscription details back to the
-  // server via XHR or Fetch
-});
- -

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.

- -

Extra steps for Chrome support

- -

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.

- -

Setting up Google Cloud Messaging

- -

To get this set up, follow these steps:

- -
    -
  1. Navigate to the Google Developers Console  and set up a new project.
    2. -
  2. Go to your project's homepage (ours is at https://console.developers.google.com/project/push-project-978, for example), then -
      -
    1. Select the Enable Google APIs for use in your apps option.
      2. -
    2. In the next screen, click Cloud Messaging for Android under the Mobile APIs section.
      3. -
    3. Click the Enable API button.
      4. -
    -
    3. -
  3. Now you need to make a note of your project number and API key because you'll need them later. To find them: -
      -
    1. Project number: click Home on the left; the project number is clearly marked at the top of your project's home page.
      2. -
    2. API key: click Credentials on the left hand menu; the API key can be found on that screen.
      3. -
    -
    4. -
- -

manifest.json

- -

You need to include a Google app-style manifest.json file in your app, which references the project number you made a note of earlier in the gcm_sender_id parameter. Here is our simple example manifest.json:

- -
{
-  "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"
-}
- -

You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:

- -
<link rel="manifest" href="manifest.json">
- -

userVisibleOnly

- -

Chrome requires you to set the userVisibleOnly parameter to true when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be seen in action in our subscribe() function.

- -

See also

- - - -
-

Note: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in Push Notifications on the Open Web. Thanks for the awesome work, Matt!

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

{{ApiRef("Window")}}{{SeeCompatTable}}

- -

La propiedad Window.URL 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")}}.

- -

{{AvailableInWorkers}}

- -

Sintaxis

- -

Llamando a un método estático:

- -
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
- -

Construyendo un nuevo objeto:

- -
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Definición inicial
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
- {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
- 7.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
- {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
-
- -

[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar nsIDOMMozURLProperty. En la práctica, esto no hace ninguna diferencia.

- -

[2] Implementado bajo el nombre no estandar webkitURL.

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

{{ ApiRef() }}

-

Introducción

-

El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de características relacionadas con el almacenamiento introducidas en la especificación de aplicaciones web 1.0 y ahora detalladas por separado en su propia especificación W3C Web Storage. 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 Firefox 2 y Safari 4 .

-
- Nota: el almacenamiento DOM no es lo mismo que mozStorage (las interfaces XPCOM de Mozilla para SQLite) o la API para guardar sesiones (una utilidad de almacenamiento XPCOM usada por extensiones).
-

Descripción

-

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).

-

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 "userData behavior" que permite conservar datos entre múltiples sesiones.

-

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 cookies de los navegadores tienen una capacidad limitada y no implementan una forma de organizar datos persistentes y otros métodos (tales como almacenamiento local de Flash) necesitan un plugin externo.

-

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 halfnote (una aplicación para tomar notas) escrita por Aaron Boodman. 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.

-

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.

-

Referencia

-

Los siguientes objetos globales existen como propiedades de cada objeto window. Esto significa que se puede acceder a ellas como sessionStorage o window.sessionStorage (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).

-

Storage

-

Este es un constructor ( Storage ) para todos los objetos de almacenamiento ( sessionStorage y globalStorage[location.hostname]). Al hacer Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } podrías usar luego como atajo a la función removeItem("key") la forma localStorage.removeKey and sessionStorage.removeKey.

-

Los elementos globalStorage no son de tipo Storage , sino StorageObsolete .

-

Storage se define por la interfaz de almacenamiento WhatWG de la siguiente forma:

-
interface Storage {
-  readonly attribute unsigned long length;
-  [IndexGetter]key DOMString (in unsigned long index);
-  [NameGetter] DOMString GetItem (in DOMString key);
-  [NameSetter] void setItem (in DOMString key, in DOMString data);
-  [NameDeleter] void removeItem (in DOMString key);
-  void clear();
-};
-
-

 

-
- Nota: 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.
-
- Nota: ten en cuenta que todo lo que guardes en cualquiera de los almacenamientos (storages) descritos en esta página se convierte en una cadena a través de su método .toString almacenado anteriormente, por lo que al intentar almacenar un objeto común, se almacenará una cadena "[object Object]" 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.
-

sessionStorage

-

Este es un objeto global (sessionStorage) 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.

-
// 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"));
-
-

El objeto sessionStorage es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.

-

{{ 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.") }}

-

Ejemplos:

-

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.

-
 // 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);
-
-

Más información:

- -

globalStorage

-

 

-

{{ Non-standard_header() }} Este es un objeto global ( globalStorage ) 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) .

-
- Nota: globalStorage no es de tipo Storage, sino un objeto de tipo StorageList que contiene a su vez elementos StorageObsolete.
-
// 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?");
-
-

Específicamente, el objeto globalStorage 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 globalStorage en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:

- -

{{ 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 localStorage, que se implementa a partir de Firefox 3.5.") }}

-

Ejemplos:

-

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.

-

Recordar el nombre un usuario para un subdominio en particular que está siendo visitado:

-
 globalStorage['developer.mozilla.org'].setItem("username", "John");
-
-

Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio:

-
 // 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);
-
-

 

-

localStorage

-

localStorage es lo mismo que globalStorage[location.hostname], excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que localStorage es un elemento de tipo Storage a diferencia de globalStorage[location.hostname], que es de tipo StorageObsolete . Por ejemplo, http://example.com no es capaz de acceder al mismo objeto localStorage que https://example.com pero pueden acceder al mismo objeto globalStorage. localStorage es una interfaz estándar, mientras que globalStorage no es estándar. localStorage fue introducida en Firefox 3.5.

-

Ten en cuenta que establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage y extender Storage.prototype no afecta a los elementos globalStorage. Esto sólo se hace extendiendo StorageObsolete.prototype.

-
- Nota: 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; esta base de datos se vacía cuando se sale del modo de navegación privada.
-
-
Compatibilidad
-

Los objetos Storage 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 localStorage object en aquellas implementaciones que de forma nativa no lo admitan.

-

Este algoritmo es una imitación exacta del objeto localStorage, pero haciendo uso de cookies.

- 
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;
-  })());
-}
-
-
- Nota: el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones localStorage.setItem() y localStorage.removeItem() para agregar, cambiar o eliminar una clave. Usar los métodos localStorage.tuClave = tuValor; y delete localStorage.tuClave; para establecer o eliminar una clave no es muy seguro con este código. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.
-

Aquí tienes otra imitación, menos exacta, del objeto localStorage. Es mucho más simple  que el anterior, pero es compatible con los navegadores antiguos como Internet Explorer < 8. También usa cookies.

- 
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;
-}
-
-
- Nota: el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones localStorage.getItem(), localStorage.setItem() y localStorage.removeItem() para agregar, cambiar o eliminar una clave. Usar los métodos localStorage.tuClave para obtener, establecer o eliminar una clave no es muy seguro con este código. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.
-

Lugar de almacenamiento y borrado de datos

-

Los datos de almacenamiento DOM se guardan en el archivo webappsstore.sqlite de la carpeta del perfil.

- -

Consulta también borrar la caché de recursos en modo sin conexión .

-
-

Más información

- -

Ejemplos

- -

Compatibilidad de los navegadores

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
globalStorage{{ CompatNo() }}2{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
-

Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores.

-

Contenido relacionado

- -

{{ HTML5ArticleTOC () }}

-

 

-

 

-

{{ languages( { "en": "en/DOM/Storage", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

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

El RTC en WebRTC significa Real-Time Communications, 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.

-

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.

-
-

Nota: Parte de este contenido está desactualizado, pero se estará actualizando pronto.

-
-

¿Quieres descubrir WebRTC? ¡Mira este vídeo introductorio!

- - - - - - - -
-

Documentación sobre WebRTC

-
-
- Introducción a WebRTC
-
- Una guía de introducción sobre qué es WebRTC y cómo funciona.
-
- Using the Network Stream API
-
- Una guía para usar la API Network Stream para transmitir flujos de audio y vídeo.
-
- Comunicaciones peer-to-peer (P2P) con WebRTC
-
- Como realizar conexiones par a par usando las APIs de WebRTC.
-
-  
-
- Capturar fotografías con la cámara web
-
- Como capturar imágenes desde un Webcam con WebRTC.
-
- API de MediaStream
-
- Descripción de la API que soporta la creación y manipulación de flujos de medios.
-
- getUserMedia()
-
- La función del navegador que permite el acceso a dispositivos de medios del sistema.
-
-  
-
-

Ver todo...

-

Ejemplos

- - 		-

Obteniendo ayuda de la comunidad

-

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.

-
    -
  • Consulta el tópico Media en el foro: {{ DiscussionList("dev-media", "mozilla.dev.media") }}
    • -
-
    -
  • Pregunta en el canal IRC de Media de Mozilla: #media
    • -
-

No olvides la netiqueta...

-
- - -

Recursos

- -
-

 

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

{{ SeeCompatTable () }}

-

WebSockets es una tecnología que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor. Con esta API, puedes enviar mensajes a un servidor y recibir respuestas por eventos sin tener que consultar al servidor.

- -

Documentación

Cómo escribir aplicaciones para cliente WebSocket
Una guía tutorial sobre cómo escribir clientes WebSocket para ejecutarse en el navegador.
Referencia WebSockets
Una referencia a la API del lado del cliente WebSocket.
El protocolo WebSocket
Una referencia al protocolo de WebSocket.
Cómo escribir servidores WebSocket
Una guía sobre cómo escribir el código del lado del servidor para manejar el protocolo WebSocket.

Ver todas

Herramientas

 

AJAX , JavaScript
-

Consulta también

- -

Compatibilidad de los navegadores

-

{{ CompatibilityTable () }}

-
- -
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Compatibilidad con la versión -76 {{ obsolete_inline () }} 6 {{ CompatGeckoDesktop ("2.0") }} {{ CompatNo () }} 11.00 (desactivado) 5.0.1
Compatibilidad con el protocolo de la versión 7 {{ CompatNo () }}

{{ CompatGeckoDesktop ("6.0") }}

usa MozWebSocket .
 {{ CompatNo () }} {{ CompatNo () }} {{ CompatNo () }}
Compatibilidad con el protocolo de la versión 10 14

{{ CompatGeckoDesktop ("7.0") }}

usa MozWebSocket .
 HTML5 Labs {{ CompatUnknown () }} {{ CompatUnknown () }}
-
-
- -
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Compatibilidad con la versión -76 {{ obsolete_inline () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }}
Compatibilidad con el protocolo de la versión 7 {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }}
Compatibilidad con el protocolo de la versión 8 (borrador 10 de IETF) {{ CompatUnknown () }} {{ CompatGeckoMobile ("7.0") }} {{ CompatUnknown () }} {{ CompatUnknown () }} {{ CompatUnknown () }}
-
-

Notas para Gecko

-

El soporte de WebSockets en Firefox sigue de cerca el desarrollo de la especificación WebSocket. 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). Firefox Mobile recibió el soporte de WebSocket en Firefox móvil 7.0.

-
-

{{ gecko_callout_heading("6.0") }}

-

Antes de Gecko 6.0 {{ geckoRelease ("6,0 ") }}, hubo, incorrectamente, un objeto WebSocket que algunos sitios creyeron que implicaba que los servicios WebSocket no estaban prefijados. Este objeto se ha cambiado a MozWebSocket .

-
-
-

{{ gecko_callout_heading("7.0") }}

-

A partir de Gecko 7.0 {{ geckoRelease ("7,0 ") }}, la preferencia network.websocket.max-connections se usa para determinar el número máximo de conexiones WebSocket que pueden estar abiertas a la vez. El valor predeterminado es 200.

-
-
Advertencia: entre otras cosas, una razón clave por la que WebSockets está desactivado por defecto es el descubrimiento de un problema de seguridad en el diseño del protocolo. En este momento no se recomienda utilizar WebSockets en las versiones de Firefox en un entorno de producción. Si aun así deseas experimentar con WebSockets, puedes hacerlo abriendo about: config y estableciendo la preferencia network.websocket.enabled en true. 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.
-

{{ HTML5ArticleTOC () }}

-

{{ languages ( {"en": "en/WebSockets", "zh-tw": "zh_tw/WebSockets"} ) }}

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

localStorage (almacenamiento local) es lo mismo que sessionStorage (almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. localStorage se introdujo en la version Firefox 3.5.

- -
Nota: Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar datos de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.
- -
// Guardar datos al almacenamiento local actual
-localStorage.setItem("nombredeusuario", "John");
-
-// Acceder a datos almacenados
-alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));
- -

La persistencia de localStorage lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en este tutorial en Codepen.

- -

Compatibilidad

- -

Los objetos de Storage (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 scripts, permitiendo el uso de el objeto localStorage en implementaciones que no lo soportan de forma nativa.

- -

Este algoritmo es una imitación exacta del objeto localStorage, pero hace uso de cookies.

- -
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;
-  })());
-}
-
- -
Nota: 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 localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
- -
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se pasará a ser un sessionStorage polyfill en vez de un localStorage polyfill. 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  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
- -

Esta es otra imitación menos exacta de el objeto localStorage, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (probado y funcional incluso en Internet Explorer 6). También hace uso de cookies.

- -
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;
-}
-
- -
Nota: 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 localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
- -
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se volverá un sessionStorage polyfill en vez de un localStorage polyfill. 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  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
- -

Compatibilidad y relación con globalStorage

- -

localStorage es lo mismo que globalStorage[location.hostname], con la excepción de que tiene un ámbito de origen HTML5 (esquema + nombre del host + puerto no estandar), y localStorage es una instancia de Storage, al contrario que globalStorage[location.hostname], que es una instancia de StorageObsolete, como se explica más adelante. Por ejemplo, http://ejemplo.com no puede acceder al mismo objeto localStorage que https://ejemplo.com, pero los dos pueden acceder al mismo elemento de globalStorage. --localStorage es una interfaz estándar mientras que globalStorage no lo es, así que no se debe depender de ella.

- -

Nótese que al establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage, y al extender Storage.prototype no afecta a los elementos de globalStorage; sólo al extender StorageObsolete.prototype los afecta.

- -

El formato de Storage

- -

Las claves y valores de Storage se guardan en el formato UTF-16 DOMString, que usa 2 bytes por carácter.

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

{{APIRef}}

-

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

-

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.

-

Properties

-

This helper neither defines nor inherits any properties.

-

Methods

-

This helper does not inherit any methods.

-
-
- {{domxref("WindowBase64.atob()")}}
-
- Decodes a string of data which has been encoded using base-64 encoding.
-
- {{domxref("WindowBase64.btoa()")}}
-
- Creates a base-64 encoded ASCII string from a string of binary data.
-
-

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
-

Browser compatibility

-

{{CompatibilityTable}}

-
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
-

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

-

See also

- 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 ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers contains utility methods to set and clear timers.

- -

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.

- -

Properties

- -

This interface do not define any property, nor inherit any.

- -

Methods

- -

This interface do not inherit any method.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules the execution of a function each X milliseconds.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Sets a delay for executing a function.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

See also

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

WebAPI 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.

- -
-

Nota: 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 WebAPI doc status page, where we're tracking work on WebAPI docs.

-
- -
-
-

APIs DE COMUNICACIÓN

- -
-
API de información de la red
-
Provee información básica sobre la conexión de red actual, como la velocidad de conexión.
-
- -
-
Bluetooth
-
La API de  WebBluetooth provee acceso a bajo nivel  al hardware de Bluetooth del dispositivo.
-
API de conexión móvil {{NonStandardBadge}}
-
Expone información sobre la conectividad celular del dispositivo, como la fuerza de la señal, información del operador y así suscesivamente.
-
API de estadísticas de red
-
Monitorea la data usada y expone esta data a aplicaciones privilegiadas.
-
TCP Socket API
-
Proporciona sockets de bajo nivel y soporte SSL.
-
Telefonía {{NonStandardBadge}}
-
Permite a las apps contestar llamadas telefónicas y usar la interfaz de usuario de telefonía integrada.
-
WebSMS {{NonStandardBadge}}
-
Permite a las apps enviar y recibir mensajes de texto, así como también acceder y manejar los mensajes almacenados en el dispositivo.
-
API de información de WiFi
-
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.
-
- -

APIS de acceso a Hardware

- -
-
API de sensor de luz ambiental
-
Provee acceso al sensor de luz ambiental, el cual permite a una app detectar el nivel de luz ambiental proximos al dispositivo.
-
API de estado de batería
-
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.
-
- -
-
API de Geolocalización
-
Provee información sobre la ubicación física del dispositivo.
-
API de bloqueo de puntero
-
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.
-
- -
-
API de proximidad
-
Permite determinar la proximidad del dispositivo a objetos cercanos, como el rostro del usuario.
-
API de orientación del dispositivo
-
Provee notificaciones cuando la orientación del dispositivo cambia.
-
API de orientación de pantalla
-
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.
-
API de Vibración
-
Permite a las apps controlar la vibración de hardware del dispositivo para cosas como retroalimentación háptica en juegos. Esto no es pensado para cosas como vibraciones de notificaciones, para ello revisa la API de Alarma.
-
- -
-
API de Cámara {{NonStandardBadge}}
-
Permite a las apps tomar fotografías y/o grabar videos usaando la cámara integrada del dispositivo.
-
API de administración de energía {{NonStandardBadge}}
-
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.
-
- -

View All...

-
- -
-

APIs de administración de información

- -
-
- -
-
API de identificador de archivos
-
Provee soporte para escribir archivos con soporte de bloqueo.
-
IndexedDB
-
Almacenamiento de información estructurada del lado cliente con soporte para búsquedas de alto rendimiento.
-
- -

OtrAS APIs

- -
-
API de Alarma
-
Permite a las apps programar notificaciones.
-
También proporciona soporte para el lanzamiento de una aplicación de forma automática en un momento determinado.
-
Apps API
-
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.
-
API de navegador
-
Provee soporte para construir un navegador web usando tecnologías web completamente (en esencia, un navegador dentro de un navegador).
-
- -
-
Idle API
-
Permite a las apps recibir información cuando el usuario no está usando el dispositivo activamente.
-
API de permisos
-
Administra permisos de las apps en una ubicación central. Usado por la app de Ajustes.
-
Simple Push API
-
Permite a la plataforma enviar mensajes de notificación a aplicaciones específicas.
-
API de tiempo/reloj {{NonStandardBadge}}
-
Provee soporte para ajustar el tiempo actual. La zona horaria es establecida usando la API de ajustes.
-
Web Activities {{NonStandardBadge}}
-
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.
-
WebPayment API {{NonStandardBadge}}
-
Permite a contenido web iniciar pago y reembolsos por bienes virtuales.
-
- -

comunidad WebAPI

- -

Si necesitas ayuda con estas APIs, existen varias maneras en la que puedes hablar con otros desarrolladores que las utilizan.

- -
    -
  • Consulta en el foro de WebAPI: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • -
  • Visita el canal de IRC de WebAPI: #webapi
    • -
- -

Don't forget about the netiquette...

- - - - -
-
- -

 

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 ---- -
{{CSSRef}}
- -

Resumen

- -

El descriptor CSS height 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.

- -

Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* Un valor */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* Dos valores */
-height: 320px 200px;
-
- -

Valores

- -
-
auto
-
El valor a usar es calculado con los valores de otros descriptores CSS.
-
<length>
-
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
-
<percentage>
-
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.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Ejemplo

- -
@viewport {
-  height: 500px;
-}
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
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 ---- -
{{CSSRef}}
- -

Resumen

- -

El descriptor CSS width 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.

- -

Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* Ejemplo con un valor de viewport: */
-@viewport {
-    width: 320px;
-}
-
-/* Ejemplo con dos valores de viewport: */
-@viewport {
-    width: 320px, 120px;
-}
-
-
- -

 

- -

Valores

- -
-
auto
-
El valor a usar es calculado con los valores de otros descriptores CSS.
-
<length>
-
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
-
<percentage>
-
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.
-
- -

Sintaxis formal

- -{{csssyntax}} - -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
- -

 

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 ---- -
Nota: La pseudo-clase CSS :-moz-placeholder está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.
- -
Nota:  El CSSWG ha decidido introducir  :placeholder-shown. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}
- -
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La pseudo-clase :-moz-placeholder representa a cualquier elemento que muestre un  texto del marcador de posición (placeholder). 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).,

- -

Ejemplo

- -

Ejemplo básico

- -

Este ejemplo le da estilo a un placeholder (marcador de posición) haciendo que el color del texto sea verde.

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

{{EmbedLiveSample("Basic_example")}}

- -

Desbordamiento

- -

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 text-overflow: ellipsis para envolverlo.

- -
input[placeholder] { text-overflow: ellipsis; }
-::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
-input:-moz-placeholder { text-overflow: ellipsis; }
-
- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementado en {{bug("457801")}}.

- -

Ver además

- - 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 ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La  pseudo-clase propietaria y no estándar  :-ms-input-placeholder representa el  texto del marcador de posición (placeholder) 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.

- -

Ejemplo

- -

El siguiente ejemplo destaca con un estilo personalizado los campos "Branch" y código "ID". 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.

- -

HTML

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

CSS

- -
input {
-   background-color:#E8E8E8;
-   color:black; }
-/* placeholder only style */
-input.studentid:-ms-input-placeholder {
-   font-style:italic;
-   color: red;
-   background-color: yellow;
-}
- -

Resultado

- -

- -

Especificaciones

- -

No es parte de ninguna especificación aunque  Microsoft tiene una descripción en MSDN.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

- - 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 ---- -
{{Non-standard_header}}{{CSSRef}}
- -
Nota: El pseudo-elemento ::-moz-placeholder fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.
- -

Resumen

- -

El  pseudo-elemento ::-moz-placeholder sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  marcador de posición de texto (placeholder text) . 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).

- -

Ejemplo

- -

En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).

- -

Contenido HTML

- -
<input id="test" placeholder="Placeholder text!">
-
- -

Contenido CSS

- -
input::-moz-placeholder {
-  color: green;
-}
-
- -

Obtendremos el siguiente resultado:

- -

{{EmbedLiveSample("Example")}}

- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Firefox aplica un estilo por defecto de  {{cssxref("opacity")}}: 0.54 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.

- -

La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.

- -

Ver además

- - 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 ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

El  pseudo-elemento no estándar y propietario ::-webkit-input-placeholder representa el marcador de posición de texto (placeholder text) 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.

- -

Especificaciones

- -

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Ver además

- - 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 ---- -
{{CSSRef}}
- -

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño 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 float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

- -

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.

- -
Nota: 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 -webkit; 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.
- -

El concepto de "cajas flexibles"

- -

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.

- -

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.

- -

Vocabulario de "cajas flexibles"

- -

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 flex-direction de tipo row, 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.

- -

flex_terms.png

- -
-
Contenedor flexible (Flex container)
-
El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores flex o inline-flex en la propiedad display.
-
Elemento flexible (Flex item)
-
-

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.

-
-
Ejes
-
-

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.

- -
    -
  • La propiedad flex-direction establece el eje principal.
    • -
  • La propiedad justify-content define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.
    • -
  • La propiedad align-items define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.
    • -
  • La propiedad align-self define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por align-items.
    • -
-
-
Direcciones
-
-

Los lados inicio principal/fin principal (main start/main end) e inicio secundario/fin secundario (cross start/cross end) 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 writing-mode (izquierda-a-derecha, derecha-a-izquierda, etc.).

- -
    -
  • La propiedad order asigna elementos a grupos ordinales y determina qué elementos aparecen primero.
    • -
  • La propiedad flex-flow combina las propiedades flex-direction y flex-wrap para colocar los elementos flexibles.
    • -
-
-
Líneas
-
-

Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad flex-wrap, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.

-
-
Dimensiones
-
-

Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son tamaño principal (main size) and tamaño secundario (cross size), que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.

- -
    -
  • La propiedades min-height y min-width tienen un nuevo valor, auto que establece el tamaño mínimo de un elemento flexible.
    • -
  • La propiedad flex combina las propiedades flex-basis, flex-grow, y flex-shrink para establecer el grado de flexibilidad de los elementos flexibles.
    • -
-
-
- -

Diseñando una "caja flexible"

- -

Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad display así:

- -
display : flex
- -

o

- -
display : inline-flex
- -

Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor flex hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor inline-flex hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.

- -
Nota: Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, display : -webkit-flex.
- -

Consideraciones de los elementos flexibles

- -

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 display:none.

- -

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 inicio principal (main start) de su contenedor flexible.

- -

Actualmente, debido a un problema conocido, asignar visibility:collapse a un elemento flexible causa que sea tratado como si fuera display:none en vez de lo que se supone que debería ocurrir, es decir, como si fuera visibility:hidden. La alternativa mientras se resuelve este problema es usar visibility:hidden para elementos flexibles que deban comportarse como visibility:collapse.

- -

Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes auto se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver Aligning with 'auto' margins en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.

- -

Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa min-width:auto y/o min-height:auto. Para los elementos flexibles, el valor de atributo auto 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.

- -

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 align-, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades justify-, 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 justify-content 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 "centrado-basado-en-márgenes" en el eje principal al reemplazar la propiedad justify-content.

- -

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. 

- -

Propiedades de las "cajas flexibles"

- -

Propiedades que no afectan a las "cajas flexibles"

- -

Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.

- - - -

Ejemplos

- -

Ejemplo básico "flex"

- -

Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. 

- -
​<!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>
- -

Ejemplo de "Diseño del Santo Gríal"

- -

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.

- -

HolyGrailLayout.png

- -

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.

- -
​
-<!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>
- -

Área de juego

- -

Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:

- - - -

Cosas a tener en mente

- -

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".

- -

Las "cajas flexibles" se comportan en función del modo de escritura establecido. Esto siginifica que inicio principal (main start) y fin principal (main end) se disponen de según la posición de inicio (start) y fin (end).

- -

inicio secundario (cross start) y fin secundario (cross end) confían en la definición de la posición inicio (start) o antes (before) que depende del valor de direction.

- -

Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad break- lo permita. Las propiedades CSS3 break-after, break-before y break-inside así como las propiedades CSS 2.1 page-break-before, page-break-after y page-break-inside 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.

- -

Compatibilidad de Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaraterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
- {{ CompatGeckoDesktop("22.0") }}		21.0{{ property_prefix("-webkit") }}10{{ property_prefix("-ms") }}(partial)12.13.1{{ property_prefix("-webkit") }}(partial)
- 6.1{{ property_prefix("-webkit") }}
- 9
-
- -
- - - - - - - - - - - - - - - - - - - -
CaraterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
- {{ CompatGeckoMobile("22.0") }}		{{ CompatUnknown() }}10{{ property_prefix("-ms") }}(partial)
- 11		12.1 -

3.2{{ property_prefix("-webkit") }}(partial)
- 7.1{{ property_prefix("-webkit") }}
- 9.0

-
-
- -

Notas

- -

[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.

- -

[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 true.

- -

[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.

- -

[4] Mientras que en la implementación inicial en Opera 12.10 flexbox 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.

- -

[5] Hasta Firefox 29, especificar visibility: collapse en un elemento flex causaba que fuera tratado como si fuera display: none en vez del comportamiento pretendido, tratándolo como si fuera visibility: hidden. El método alternativo sugerido es usar visibility: hidden para los elementos flex que debieran comportarse como si huberan sido designados visibility: collapse. Para más información, ver {{bug(783470)}}.

- -

Ver también

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

{{CSSRef}}

- -

Usar flexbox 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")}}, el posicionamiento absoluto, y los hacks de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de CSS. Algunos ejemplos básicos de casos de uso:

- - - -

Este artículo sólo aborda el uso de flexbox 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 la guía más general para usar cajas flexibles de CSS.

- -

Conceptos básicos

- -

Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como flex y luego dando a la propiedad {{cssxref("flex-flow")}} el valor row, si deseas que los elementos fluyan horizontalmente, o el valor column, 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 wrap.

- -

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:

- - - -

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.

- -

Centrando un elemento en una página

- -

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.

- -

Contenido 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;
-}
-
- -

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

Resultado

- -

{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}

- -

Haciendo fluir verticalmente un conjunto de contenedores

- -

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 auto y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como none.

- -

Contenido CSS

- -
.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;
-}
-
- -

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

Contenido JavaScript

- -
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");
-}
- -

Resultado

- -

{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}

- -

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.

- -

Creando un contenedor que colapse horizontalmente

- -

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 wrap.

- -

Contenido CSS

- -
.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
- -

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

Contenido JavaScript

- -
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");
-}
-
- -

Resultado

- -

{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}

- -

Ver también

- - 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 ---- -
{{CSSRef}}{{obsolete_header}}
- -

¡No uses este valor!Don't use this value! Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.

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

Sumario

-

El valor normal 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.

-

Ejemplos

-

En la propiedad font-style: normal establece que el tipo de fuente no es italic ni oblique.

-

El la propiedad font-size: normalse establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.

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

-

<< Volver -

-

Resumen

-

Un valor computado automáticamente por el 'useragent.' -

Usando el valor auto en cualquier propiedad, dejamos al navegador que calcule el valor requerido.


-FIXME -

-

Ejemplos

-
div {
-   height: 600px;
-   border: 1px solid #000;
-}
-
-
div img {
-   height: auto;
-   border: 1px solid red;
-}
-
-

Se utiliza en

- -


-

-
-

Categorías -Interwiki Languages -

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

-

-
Guía Breve de Web Semántica
-Una magnífica introducción al tema.
-
-

El Desarrollo Web 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. -

-
- -
-

Documentación

-
Guía Breve de Independencia de Dispositivo -
"hacer la Web universal y accesible para cualquier persona, en cualquier sitio, en cualquier momento y usando cualquier dispositivo" -
-
Selección de modo en Mozilla -
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. -
-
El modo casi estándar de Gecko -
Además de los modos tradicionales, estándar y quirks, el motor gecko nos ofrece este modo intermedio. Puede que te interese. -
-
Mozilla Web Author FAQ (en) -
This document answers questions that Web authors ask frequently specifically in connection with Mozilla and other Gecko-based browsers such as Firefox. -
-

Ver más... -

-		 -

Comunidad

- -
  • En la comunidad Mozilla... en inglés -
-

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} -

Ver más... -

-

Herramientas

- -

Ver más... -

-

Temas relacionados

-
HTML, CSS, XHTML, XML, AJAX, JavaScript, Estándares Web -
-
-

Categorías -

Interwiki Language Links -

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

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.

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

Todos los elementos del estandar HTML5 están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al indice de elementos HTML 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.

- -

El simbolo This element was added as part of HTML5 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.

- -

Elemento raíz

- - - - - - - - - - - - -
ElementoDescripcion
{{HTMLElement("<!DOCTYPE html>")}}Define que el documento esta bajo el estandar de HTML 5
- - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("html")}}Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.
- -

Metadatos del documento

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("head")}}Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
{{HTMLElement("title")}}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.
{{HTMLElement("base")}}Define la URL base para las URLs relativas en la página.
{{HTMLElement("link")}}Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
{{HTMLElement("meta")}}Define los metadatos que no pueden ser definidos usando otro elemento HTML.
{{HTMLElement("style")}}Etiqueta de estilo usada para escribir CSS en línea.
- -

Scripting

- - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("script")}}Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
{{HTMLElement("noscript")}}Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.
- -

Secciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("body")}} -
Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
-
{{HTMLElement("section")}} This element has been added in HTML5Define una sección en un documento.
{{HTMLElement("nav")}} This element has been added in HTML5Define una sección que solamente contiene enlaces de navegación
{{HTMLElement("article")}} This element has been added in HTML5Define contenido autónomo que podría existir independientemente del resto del contenido.
{{HTMLElement("aside")}} This element has been added in HTML5Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
{{HTMLElement("header")}} This element has been added in HTML5Define 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.
{{HTMLElement("footer")}} This element has been added in HTML5Define 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.
{{HTMLElement("address")}}Define una sección que contiene información de contacto.
{{HTMLElement("main")}}This element has been added in HTML5Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.
- -

Agrupación de Contenido

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("p")}}Define una parte que debe mostrarse como un párrafo.
{{HTMLElement("hr")}}Representa un quiebre temático entre párrafos de una sección o articulo o cualquier contenido.
{{HTMLElement("pre")}}Indica que su contenido esta preformateado y que este formato debe ser preservado.
{{HTMLElement("blockquote")}}Representa un contenido citado desde otra fuente.
{{HTMLElement("ol")}}Define una lista ordenada de artículos.
{{HTMLElement("ul")}}Define una lista de artículos sin orden.
{{HTMLElement("li")}}Define un artículo de una lista enumerada.
{{HTMLElement("dl")}}Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
{{HTMLElement("dt")}}Representa un término definido por el siguiente <dd>.
{{HTMLElement("dd")}}Representa la definición de los términos listados antes que él.
{{HTMLElement("figure")}} This element has been added in HTML5Representa una figura ilustrada como parte del documento.
{{HTMLElement("figcaption")}} This element has been added in HTML5Representa la leyenda de una figura.
{{HTMLElement("div")}}Representa un contenedor genérico sin ningún significado especial.
- -

Semántica a nivel de Texto

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("a")}}Representa un hiperenlace, enlazando a otro recurso.
{{HTMLElement("em")}}Representa un texto enfatizado, como un acento de intensidad.
{{HTMLElement("strong")}}Representa un texto especialmente importante.
{{HTMLElement("small")}}Representa un comentario aparte, 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.
{{HTMLElement("s")}}Representa contenido que ya no es exacto o relevante.
{{HTMLElement("cite")}}Representa el título de una obra.
{{HTMLElement("q")}}Representa una cita textual inline.
{{HTMLElement("dfn")}}Representa un término cuya definición  está contenida en su contenido ancestro más próximo.
{{HTMLElement("abbr")}}Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
{{HTMLElement("data")}} This element has been added in HTML5Asocia un equivalente legible por máquina 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).
{{HTMLElement("time")}} This element has been added in HTML5Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
{{HTMLElement("code")}}Representa un código de ordenador.
{{HTMLElement("var")}}Representa a una variable, es decir, 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.
{{HTMLElement("samp")}}Representa la salida de un programa o un ordenador.
{{HTMLElement("kbd")}}Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.
{{HTMLElement("sub")}},{{HTMLElement("sup")}}Representan un subíndice y un superíndice, respectivamente.
{{HTMLElement("i")}}Representa un texto en una voz o estado de ánimo alterno, 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.
{{HTMLElement("b")}}Representa un texto hacia el cual se llama la atención para propósitos utilitarios.  No confiere ninguna importancia adicional y no implica una voz alterna.
{{HTMLElement("u")}}Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en chino.
{{HTMLElement("mark")}} This element has been added in HTML5Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
{{HTMLElement("ruby")}} This element has been added in HTML5 -

Representa contenidos a ser marcados con anotaciones ruby, 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 furigana japonés.

-
{{HTMLElement("rt")}} This element has been added in HTML5Representa el texto de una anotación ruby.
{{HTMLElement("rp")}} This element has been added in HTML5Representa los paréntesis 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.
{{HTMLElement("bdi")}} This element has been added in HTML5Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
{{HTMLElement("bdo")}}Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
{{HTMLElement("span")}}Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
{{HTMLElement("br")}}Representa un salto de línea.
{{HTMLElement("wbr")}} This element has been added in HTML5Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.
- -

Ediciones

- - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("ins")}}Define una adición en el documento.
{{HTMLElement("del")}}Define una remoción del documento.
- -

Contenido incrustado

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("img")}}Representa una imagen.
{{HTMLElement("iframe")}}Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
{{HTMLElement("embed")}} This element has been added in HTML5Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
{{HTMLElement("object")}}Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.
{{HTMLElement("param")}}Define parámetros para el uso por los plugins invocados por los elementos <object>.
{{HTMLElement("video")}} This element has been added in HTML5Representa un video, y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos. 
{{HTMLElement("audio")}} This element has been added in HTML5Representa un sonido o stream de audio.
{{HTMLElement("source")}} This element has been added in HTML5Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>.
{{HTMLElement("track")}} This element has been added in HTML5Permite a autores especificar una pista de texto temporizado para elementos multimedia como <video> o <audio>.
{{HTMLElement("canvas")}} This element has been added in HTML5Representa un área de mapa de bits  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
{{HTMLElement("map")}}En conjunto con <area>, define un mapa de imagen.
{{HTMLElement("area")}}En conjunto con <map>, define un mapa de imagen.
{{SVGElement("svg")}} This element has been added in HTML5Define una imagen vectorial embebida.
{{MathMLElement("math")}} This element has been added in HTML5Define una fórmula matemática.
- -

Datos tabulares

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("table")}}Representa datos con más de una dimensión.
{{HTMLElement("caption")}}Representa el título de una tabla.
{{HTMLElement("colgroup")}}Representa un conjunto de una o más columnas de una tabla.
{{HTMLElement("col")}}Representa una columna de una tabla.
{{HTMLElement("tbody")}}Representa el bloque de filas que describen los datos concretos de una tabla.
{{HTMLElement("thead")}}Representa el bloque de filas que describen las etiquetas de columna de una tabla.
{{HTMLElement("tfoot")}}Representa los bloques de filas que describen los resúmenes de columna de una tabla.
{{HTMLElement("tr")}}Representa una fila de celdas en una tabla.
{{HTMLElement("td")}}Representa una celda de datos en una tabla.
{{HTMLElement("th")}} -

Representa una celda encabezado en una tabla. 

-
- -

Formularios

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("form")}}Representa un formulario, consistiendo de controles que puede ser enviado a un servidor para procesamiento.
{{HTMLElement("fieldset")}}Representa un conjunto de controles.
{{HTMLElement("legend")}}Representa el título de un <fieldset>.
{{HTMLElement("label")}}Representa el título de un control de formulario.
{{HTMLElement("input")}}Representa un campo de datos escrito que permite al usuario editar los datos.
{{HTMLElement("button")}}Representa un botón.
{{HTMLElement("select")}}Representa un control que permite la selección entre un conjunto de opciones.
{{HTMLElement("datalist")}} This element has been added in HTML5Representa un conjunto de opciones predefinidas para otros controles.
{{HTMLElement("optgroup")}}Representa un conjunto de opciones, agrupadas lógicamente.
{{HTMLElement("option")}}Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
{{HTMLElement("textarea")}}Representa un control de edición de texto multilínea.
{{HTMLElement("keygen")}} This element has been added in HTML5Representa un control de par generador de llaves.
{{HTMLElement("output")}} This element has been added in HTML5Representa el resultado de un cálculo.
{{HTMLElement("progress")}} This element has been added in HTML5Representa el progreso de finalización de una tarea.
{{HTMLElement("meter")}} This element has been added in HTML5Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.
- -

Elementos interactivos

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementoDescripción
{{HTMLElement("details")}} This element has been added in HTML5Representa un widget desde el que un usuario puede obtener información o controles adicionales.
{{HTMLElement("summary")}} This element has been added in HTML5Representa un resumen, título o leyenda para un elemento <details> dado.
{{HTMLElement("command")}} This element has been added in HTML5Representa un comando que un usuario puede invocar.
{{HTMLElement("menu")}} This element has been added in HTML5Representa una lista de comandos .
- -

Ver también

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

Los Atributos Globales son {{glossary("attribute","atributos")}} que pueden ser usados en todos los {{glossary("element","elementos")}} (aunque a veces no tienen efecto en algunos de ellos).

- -

Algunos atributos se pueden utilizar en cualquier elemento HTML:

- - - -

Saber más

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

{{ 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. 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.

- -

Por defecto, se comprueban las áreas de texto y los documentos en designMode, 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.

- -

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.

- -

Si un sitio web desea recomendar si usar o no la corrección ortográfica para un elemento <input type="text"> concreto, se puede usar el atributo spellcheck, especificando el valor true para recomendar la activación del corrector, o false para desaconsejarla.

- -

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 layout.spellcheckDefault a "0". Si layout.spellcheckDefault tiene cualquier otro valor, el recomendaciones se tienen en cuenta.

- -

Por ejemplo, el siguiente código HTML recomienda el uso del corrector en un campo de texto simple:

- -
<input type="text" size="50" spellcheck="true">
-
- -

Del mismo modo, se puede desaconsejar la corrección en un área de texto con un código HTML como este:

- -
<textarea spellcheck="false"></textarea>
-
- -

Se puede controlar un documento en designMode (habitualmente usado para la edición de texto enriquecido), poniendo el atributo spellcheck en la etiqueta <body> de los documentos. N.T. Esto del designMode no me gusta

- -

También se puede usar el atributo spellcheck en otros elementos, como en los elementos <span> o <div>, en tal caso, cualquier elemento <input> contenido por estos elementos heredará ese atributo. Los elementos <input> que no tengan un atributo spellcheck lo heredarán de sus padres, y si estos tampoco lo tienen, se aplicará la configuración por defecto.

- -

Por ejemplo:

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

En este fragmento de código HTML, los dos primeros campos de texto se comprueban mientras que el tercero no.

- -

{{ h1_gecko_minversion("Controlar el idioma del corrector ortográfico", "9.0") }}

- -

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 lang, el atributo se busca en cada elemento padre sucesivamente y hacia arriba, hacia el nodo raíz hasta encontrar uno.

- -

De esta manera, si un usuario tiene a la vez instalados los diccionarios Frances e Ingles, y un elemento editable tiene lang="en", el diccionario Inglés se utilizará automáticamente para ese elemento.

- -

Por ejemplo:

- -
<html lang="en">
-<body>
-  <textarea></textarea>
-  <textarea lang="fr"></textarea>
-  <div lang="ru">
-    <textarea></textarea>
-  </div>
-</body>
-</html>
-
--- - -

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

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.

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

¿Cuál es el problema?

-

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

-

¿Cuándo ocurre esto?

-

La especificación 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. -

-

¿Qué puedo hacer para cambiar esto?

-

Debes comentar a los administradores del servidor que actualicen el archivo de configuración de tipo MIME en el servidor web. -

Esta cuestión, en los servidores web iPlanet/Netscape ya ha sido puesta en conocimiento por el vendedor, quien ha añadido una nota técnica en su base de conocimientos. -

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

-
AddType text/css .css
-

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

-

Conclusión

-

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á! -

-

Cambiando el tipo MIME en servidores iPlanet/Sun

-

Problema -

Los usuarios se encuentran con un dialogo de Salvar como con el tipo de contenido application/x-pointplus 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. -

Solución -

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

Para acceder a esta página, desde el admin server acceder a Preferencias del Servidor, MIME Types, y establece el tipo MIME a .css a text/css en vez de application/x-pointplus. -

Si el problema persiste, desactiva el keepalive añadiendo "KeepAliveTimeout 0" al magnus.conf -

Basado en: SunSolve, Sun Microsystems -

-

Fuentes adicionales

-

Configurar correctamente los tipos MIME del servidor -

Sobre garbled media -

-
-

Información original del documento

- -
-{{ 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 ---- -
{{gecko_minversion_header("2.0")}}
- -

Políticas de Seguridad de Contenido (CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo Cross-Site Scripting (XSS) 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.

- -

Aunque las Políticas de Seguridad de Contenido fueron incluidas desde Firefox 4, esa implementación, usando la cabecera X-Content-Security-Policy, es anterior a la existencia de una especificacion formal de CSP. Firefox 23 contiene una implementación actualizada de CSP que usa la cabecera Content-Security-Policy sin prefijo y las directivas como están descritas en la especificación W3C CSP 1.0.

- -

Tópicos de Políticas de Seguridad de Contenido

- -
-
Introducción a Políticas de Seguridad de Contenido
-
Un resumen de que es y como CSP puede hacer su sitio mas seguro.
-
Directivas de Políticas CSP
-
Una referencia de las directivas de políticas CSP.
-
Usando Políticas de Seguridad de Contenido
-
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.
-
Usando reportes de violación de CSP
-
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.
-
Restricciones CSP por defecto
-
Detalles acerca de las restricciones por defecto reforzadas por CSP.
-
- -

Ver también

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

{{ gecko_minversion_header("2") }}

- -

Políticas de Seguridad de Contenido (CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo Cross-Site Scripting (XSS) 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.

- -

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 política de mismo origen.

- -

Habilitar CSP tan fácil como configurar su servidor web para retornar la cabecera HTTP Content-Security-Policy. (Antes de Firefox 23, la cabecera X-Content-Security-Policy era usada). Ver Usando Políticas de Seguridad de Contenido para detalles de como configurar y habilitar CSP.

- -
Nota: El estándar de Políticas de Seguridad de Contenido especifica 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 bug 663570.
- -

Mitigando cross site scripting

- -

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.

- -

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).

- -

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.

- -

Mitigando ataques de packet sniffing

- -

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.

- -
Nota: 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.
- -
Nota: Los sitios pueden usar tambien la cabecera HTTP  Strict-Transport-Security para asegurarse de que los navegadores web se conecten solo a traves de un canal encriptado.
- -

Ver también

- - - -

Especificación

- - - -
-

{{ languages( { "ja": "ja/Introducing_Content_Security_Policy" } ) }}

-
- -

 

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

 

- -

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

- -

Fuentes de contenido

- -

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.

- -

Listas de fuentes

- -

Una lista de fuentes es un cadena que especifica uno o más hosts de internet o direcciones IP, así como un esquema de URL opcional y/o número de puerto. La dirección del sitio puede incluir un comodín líder (el carácter asterisco, '*'), y puedes usar un comodín (de nuevo, '*') como el número de puerto, indicando que todos los puertos legales son válidos para la fuente. Los hosts son delimitados por espacio.

- -

Las expresiones validas del host son:

- -
-
http://*.foo.com
-
Junta todos los intentos de carga desde cualquier subdominio de foo.com usando el sistema URL http:.
-
mail.foo.com:443
-
Junta todos los intentos de acceso al puerto 443 en mail.foo.com.
-
https://store.foo.com
-
Junta todos los intentos para acceder store.foo.com usando https:.
-
- -

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.

- -
-
- -

Palabras claves

- -

También existen algunas palabras claves disponibles para describir clases especiales de fuentes de contenido. Estas palabras son las siguientes:

- -
-
'none'
-
Se refiere al conjunto vacío, es decir, no hay URLs que coincidan. Las comillas simples son necesarias.
-
'self'
-
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 blob y filesystem de las políticas directivas. Sitios que necesitan permitir  este tipo de contenido puede especificarlos usando el Data attribute.
-
'unsafe-inline'
-
Permite el uso de recursos alineados como elementos alineados {{ HTMLElement("script") }} , javascript: URLs, controladores de eventos alineados e elementos alineados {{ HTMLElement("style") }} . Las comillas simples deben ser incluidas.
-
'unsafe-eval'
-
Permite el uso de eval()y métodos similares para la creación de códigos desde las cadenas de caracteres. Las comillas simples deben ser incluidas.
-
- -
Nota: 'unsafe-inline' y 'unsafe-eval' son inseguros y pueden hacer de tu página web vulnerable contra cross-site scripting.
- -

Ejemplo, puedes especificar que el contenido sea cargado desde el origen del documento, así como desde trustedscripts.foo.com de la siguiente manera:

- -
Content-Security-Policy: default-src 'self' trustedscripts.foo.com
-
- -
-
- -

Data

- -
Nota: 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.
- -
-
data:
-
Permite que data: URIs 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.
-
mediastream:
-
Permite que mediastream: URIs sea usada como fuente de contenido.
-
blob:
-
Permite que blob: URIs sea usada como fuente de contenido.
-
filesystem:
-
Permite que filesystem: URIs sea usada como fuente de contenido.
-
- -
Content-Security-Policy: default-src 'self'; img-src 'self' data: blob: filesystem:; media-src mediastream:
-
- -

Políticas directivas soportadas

- -

Las siguientes políticas directivas están disponibles para controlar la política de seguridad para varias ares de las políticas.

- -

base-uri

- -

La directiva >base-uri 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 base.

- -
base-uri source-list
- -

child-src

- -

La directiva child-src 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 frame-src, la cual es obsoleta. Para los trabajadores, las solicitudes no conformes son tratadas como errores de red fatales por el agente usuario.

- -
Nota: Si esta directiva no está presente, el agente usuario buscara la directiva por defecto default-src.
- -
​child-src source-list
- -

connect-src

- -

La directiva connect-src define fuentes válidas para fetch, XMLHttpRequest, WebSocket y conecciones EventSource.

- -
Nota: Si esta directiva no está presente, el agente usuario buscara la directiva por defecto default-src.
- -
Nota: 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 XMLHttpRequest.
- -
connect-src source-list
- -

default-src

- -

La directiva por defecto default-src 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:

- - - -
default-src source-list
- -

font-src

- -

La directivas font-src especifica las fuentes válidas para los tipos de letras cargadas usando {{ cssxref("@font-face") }}.

- -
Nota: Si esta directiva no está presente, el agente usuario buscara la directiva por defecto default-src.
- -
font-src source-list
- -

form-action

- -

La directiva form-action{{experimental_inline}} especifica criterios de valoración válidos para las sumisiones {{ HTMLElement("form") }}.

- -
form-action >source-list
- -

frame-ancestors

- -

La directiva frame-ancestors{{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 <meta> o por la cabecera Content-Security-Policy-Report-Only.

- -
frame-ancestors source-list
- -

frame-src {{obsolete_inline}}

- -

The frame-src directive specifies valid sources for web workers and nested browsing contexts loading using elements such as >{{ HTMLElement("frame") }} and {{ HTMLElement("iframe") }}.>

- -
-
Note: This directive is deprecated. Use child-src instead.
-
- -
frame-src source-list
- -

img-src

- -

The img-src directive specifies valid sources of images and favicons. 

- -
Note: If this directive is absent, the user agent will look for the default-src directive.
- -
img-src source-list
- -

manifest-src

- -

The manifest-src directive specifies which manifest can be applied to the resource.

- -
Note: If this directive is absent, the user agent will look for the default-src directive.
- -
manifest-src source-list
- -

media-src

- -

The media-src directive specifies valid sources for loading media using the {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements.

- -
Note: If this directive is absent, the user agent will look for the default-src directive.
- -
media-src source-list
- -

object-src

- -

The object-src directive specifies valid sources for the {{ HTMLElement("object") }}, {{ HTMLElement("embed") }}, and {{ HTMLElement("applet") }} elements. 

- -
Note: If this directive is absent, the user agent will look for the default-src directive.
- -
object-src source-list
- -

plugin-types

- -

The plugin-types directive specifies the valid plugins that the user agent may invoke.

- -
plugin-types type-list
- -

referrer

- -

The referrer directive specifies information in the referrer header for links away from a page.

- -
​referrer value
- -

reflected-xss

- -

The reflected-xss directive instructs a user agent to activate or deactivate any heuristics used to filter or block reflected cross-site scripting attacks. Valid values are allow, block, and filter. This directive is not supported in the <meta> element.

- -
Note: This directive is ignored if it is contained in a meta element.
- -
reflected-xss value
- -

report-uri

- -

The report-uri directive instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of JSON documents sent via an HTTP POST request to the specified URI. See Using CSP violation reports for details. This directive is not supported in the <meta> element.

- -
report-uri uri
- -

sandbox

- -

The sandbox 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 <meta> element or by the Content-Security-policy-Report-Only header field.

- -
sandbox value
- -

script-src

- -

The script-src directive specifies valid sources for JavaScript. When either the script-src or the default-src directive is included, inline script and eval() are disabled unless you specify 'unsafe-inline' and 'unsafe-eval', respectively.

- -
Note: If this directive is absent the user agent will look for the default-src directive.
- -
script-src source-list
- -

style-src

- -

The style-src directive specifies valid sources for stylesheets. This includes both externally-loaded stylesheets and inline use of the {{ HTMLElement("style") }} element and HTML style attributes. Stylesheets from sources that aren't included in the source list are not requested or loaded. When either the style-src or the default-src directive is included, inline use of the {{ HTMLElement("style") }} element and HTML style attributes are disabled unless you specify 'unsafe-inline'.

- -
Note: If this directive is absent, the user agent will look for the default-src directive.
- -
style-src source-list
- -
Note: Firefox currently requires using the same URL scheme and port for the report-uri as the content being protected by Content Security Policy.
- -

upgrade-insecure-requests

- -

The upgrade-insecure-requests 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. 

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ specName("Upgrade Insecure Requests")}}{{Spec2('Upgrade Insecure Requests')}}Adds upgrade-insecure-requests.
{{ specName("CSP 1.1") }}{{Spec2('CSP 1.1')}}Adds base-uri, child-src, form-action, frame-ancestors, plugin-types, referrer, reflected-xss, and report-uri. Deprecates frame-src.
{{ specName("CSP 1.0") }}{{Spec2('CSP 1.0')}}Defines connect-src, >default-src, >font-src, >frame-src, >img-src, >media-src, >objects-src, >report-uri,>sandbox, >script-src, and >style-src.>
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
{{CompatUnknown}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChrome{{ref("2")}}Firefox (Gecko)Internet ExplorerOperaSafari
Basic support -

{{CompatChrome(14.0)}} (X-Webkit-CSP)

- -

{{CompatChrome(25.0)}}

- 		-

{{CompatGeckoDesktop("2.0")}} (X-Content-Security-Policy)

- -

{{CompatGeckoDesktop("23.0")}}

- 		Edge15 -

6 (X-Webkit-CSP)

- -

7

-
base-uri{{CompatChrome(40.0)}}{{CompatGeckoDesktop("35.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
child-src{{CompatChrome(40.0)}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
connect-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
default-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
font-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
form-action{{CompatChrome(40.0)}}{{CompatGeckoDesktop("36.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
frame-ancestors{{CompatChrome(40.0)}}{{CompatGeckoDesktop("33.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
frame-src{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
img-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
manifest-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
media-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
object-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
plugin-types{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
referrer{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
reflected-xss{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
report-uri{{CompatChrome(40.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
script-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
style-src{{CompatVersionUnknown}}{{CompatGeckoDesktop("23.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-

upgrade-insecure-requests

- 		-

{{CompatChrome(43.0)}}

- 		{{CompatGeckoDesktop("42.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid Browser{{ref("1")}}Android Webview{{ref("2")}}Firefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Mobile{{ref("2")}}
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}iOS 7.1{{CompatVersionUnknown}}
base-uri{{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("35.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
child-src{{CompatNo}}{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
connect-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
default-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
font-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
form-action {{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("36.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
frame-ancestors {{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("33.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
frame-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
img-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
manifest-src{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
media-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
object-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
plugin-types{{CompatNo}}{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
referrer{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
reflected-xss{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
report-uri{{CompatNo}}{{CompatChrome(40.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(40.0)}}
sandbox{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
script-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
style-src{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
upgrade-insecure-requests{{CompatGeckoMobile(42)}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
-
- -

 

- -

Notes

- -

{{ref("1")}} Deprecated since Android 4.0.

- -

{{ref("2")}} Starting with version {{CompatChrome(45.0)}}, Chrome excludes blob and filesystem from source directives. Sites needing to allow these content types can specify them using the Data attribute.

- -

See also

- - 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 ---- -
{{JSRef}}
- -

La propiedad ArrayBuffer.prototype representa el prototipo para el objeto {{jsxref("ArrayBuffer")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descripción

- -

Las instancias de ArrayBuffer heredan de ArrayBuffer.prototype. Como con todos los constructores, puedes modificar el prototipo del constructor para aplicar cambios sobre todas las instancias de ArrayBuffer.

- -

Propiedades

- -
-
ArrayBuffer.prototype.constructor
-
Especifica la función que se encarga de crear el prototipo del objeto. El valor inicial es el constructor incluido en el estándar ArrayBuffer.
-
{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
-
El tamaño, en bytes, del array. Este valor se establece al construir el objeto y no se puede modificar. Sólo lectura.
-
- -

Métodos

- -
-
{{jsxref("ArrayBuffer.prototype.slice()")}}
-
Retorna un nuevo ArrayBuffer cuyo contenido es una copia los bytes de este ArrayBuffer desde begin, incluido, hasta  end, no incluido. Si begin o end son negativos, éstos hacen referencia a un índice que comienza a partir del final del array.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -

{{Compat("javascript.builtins.ArrayBuffer.prototype")}}

- -
 
- -

Ver también

- - 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 ---- -
- {{JSRef("Objetos_globales", "Date")}}
-

Resumen

-

Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.

-
- {{js_property_attributes(0,0,1)}}
-

Propriedades

-
-
- Date.prototype.constructor
-
-  
-
-
- {{ jsOverrides("Object", "properties", "constructor") }}
-

Métodos

-
-
- {{jsxref("Date.prototype.getDate()")}}
-
- Devuelve el día del mes de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getDay()")}}
-
- Devuelve el día de la semana de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getFullYear()")}}
-
- Devuelve el año de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getHours()")}}
-
- Devuelve la hora de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getMilliseconds()")}}
-
- Devuelve los milisegundos de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getMinutes()")}}
-
- Devuelve los minutos de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getMonth()")}}
-
- Devuelve el mes de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getSeconds()")}}
-
- Devuelve los segundos de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.getTime()")}}
-
- Devuelve el valor numérico correspondiente a la hora especificada según la hora universal.
-
- {{jsxref("Date.prototype.getTimezoneOffset()")}}
-
- Devuelve la diferencia horaria en minutos para la zona geográfica actual.
-
- {{jsxref("Date.prototype.getUTCDate()")}}
-
- Devuelve el día del mes de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getUTCDay()")}}
-
- Devuelve el día de la semana de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getUTCFullYear()")}}
-
- Devuelve el día el año de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getUTCHours()")}}
-
- Devuelve las horas de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getUTCMilliseconds()")}}
-
- Devuelve los milisegundos de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getUTCMinutes()")}}
-
- Devuelve los minutos de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getUTCMonth()")}}
-
- Devuelve el mes de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getUTCSeconds()")}}
-
- Devuelve los segundos de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.getYear()")}} {{ deprecated_inline() }}
-
- Devuelve el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.getFullYear()")}} a cambio.
-
- {{jsxref("Date.prototype.setDate()")}}
-
- Establece el día del mes de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.setFullYear()")}}
-
- Establece el año completo de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.setHours()")}}
-
- Establece las horas de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.setMilliseconds()")}}
-
- Establece los milisegundos de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.setMinutes()")}}
-
- Establece los minutos de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.setMonth()")}}
-
- Establece el mes de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.setSeconds()")}}
-
- Establece los segundos de la fecha especificada según la hora local.
-
- {{jsxref("Date.prototype.setTime()")}}
-
- Establece el valor del objeto Date según la hora local.
-
- {{jsxref("Date.prototype.setUTCDate()")}}
-
- Establece el día del mes de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.setUTCFullYear()")}}
-
- Establece el año completo de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.setUTCHours()")}}
-
- Establece la hora de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.setUTCMilliseconds()")}}
-
- Establece los milisegundos de la fecha especificada según la hora universal..
-
- {{jsxref("Date.prototype.setUTCMinutes()")}}
-
- Establece los minutos de la fecha especificada según la hora universal..
-
- {{jsxref("Date.prototype.setUTCMonth()")}}
-
- Establece el mes de la fecha especificada según la hora universal.
-
- {{jsxref("Date.prototype.setUTCSeconds()")}}
-
- Establece los segundos de la fecha especificada según la hora universal..
-
- {{jsxref("Date.prototype.setYear ()")}}{{deprecated_inline}}
-
- Establece el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.setFullYear()")}} a cambio.
-
- {{jsxref("Date.prototype.toGMTString()")}} {{ deprecated_inline}}
-
- Convierte una fecha en una cadena, usando las convenciones de Internet GMT. Utilice {{jsxref("Date.prototype.toUTCString()")}} a cambio.
-
- {{jsxref("Date.prototype.toLocaleString()")}}
-
- Convierte una fecha en una cadena, usando las reglas de la localización actual. Sobreescribe el método {{jsxref("Object.toLocaleString()")}}.
-
- {{jsxref("Date.prototype.toLocaleDateString()")}}
-
- Devuelve la porción fecha (sin la hora) de una fecha como una cadena, usando las reglas de la localización actual.
-
- {{jsxref("Date.prototype.toLocaleTimeString()")}}
-
- Devuelve la porción hora (sin la fecha) de una fecha como una cadena, siguiendo las reglas de la localización actual.
-
- {{jsxref("Date.prototype.toSource()")}}
-
- Devuelve un literal que representa al objeto Date especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.toSource()")}}.
-
- {{jsxref("Date.prototype.toString()")}}
-
- Devuelve una cadena representando el objeto Date especificado. Sobreescribe el método {{jsxref("Object.toString()")}}.
-
- {{jsxref("Date.prototype.toUTCString()")}}
-
- Convierte una fecha en una cadena, usando las reglas horarias universales.
-
- {{jsxref("Date.prototype.valueOf()")}}
-
- Devuelve el valor primitivo de un objeto Date. Sobreescribe el método {{jsxref("Object.valueOf()")}}.
-
-

{{ 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") }}

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 ---- -
{{JSRef}}
- -

La propiedad Error.prototype representa el prototipo del constructor {{jsxref("Error")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descripción

- -

Todas las instancias de {{jsxref("Error")}} e instancias de {{jsxref("Global_Objects/Error", "errores no genéricos", "#Error_types", 1)}}, heredan de Error.prototype. 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.

- -

Properties

- -

Propiedades estándar

- -
-
Error.prototype.constructor
-
Especifica la función que crea una instancia del prototipo.
-
{{jsxref("Error.prototype.message")}}
-
Mensaje de error.
-
{{jsxref("Error.prototype.name")}}
-
Nombre del error.
-
- -

Extensiones específicas del proveedor

- -
{{non-standard_header}}
- -

Microsoft

- -
-
{{jsxref("Error.prototype.description")}}
-
Descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.
-
{{jsxref("Error.prototype.number")}}
-
Número de error.
-
- -

Mozilla

- -
-
{{jsxref("Error.prototype.fileName")}}
-
Ruta del archivo que lanzó el error.
-
{{jsxref("Error.prototype.lineNumber")}}
-
Número de fila en el archivo que lanzó el error.
-
{{jsxref("Error.prototype.columnNumber")}}
-
Número de columna en el archivo que lanzó el error.
-
{{jsxref("Error.prototype.stack")}}
-
Seguimiento de la pila.
-
- -

Métodos

- -
-
{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
-
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()")}}.
-
{{jsxref("Error.prototype.toString()")}}
-
Devuelve una cadena que representa el objeto. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial. Implementado en JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Ver también

- - 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 ---- -
{{JSRef("Objetos_globales", "Function")}}
- -

Resumen

- -

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.

- -

Descripción

- -

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.

- -

Propiedades

- -
-
{{jsxref("Function.arguments")}} {{Deprecated_inline}}
-
Una matriz correspondiente a los argumentos pasados a una función. Como propiedad de una Function, este uso está obsoleto. Se recomenda el uso del objeto {{jsxref("Functiones/arguments", "arguments")}}.
-
{{jsxref("Function.arity")}} {{obsolete_inline}}
-
Especifica el número de argumentos que espera la función. Se recomienda, no obstante, utilizar la función {{jsxref("Function.length", "length")}}.
-
{{jsxref("Function.caller")}}
-
Especifica la función que invoca la ejecución de la función actual (no estándar).
-
{{jsxref("Function.constructor")}}
-
Especifica la función que crea un prototipo de objeto.
-
{{jsxref("Function.length")}}
-
Specifica el número de argumentos esperados por la función.
-
{{jsxref("Function.name")}}
-
El nombre de la función (no forma parte del estándar).
-
{{jsxref("Function.prototype")}}
-
Permite añadir propiedades a los objetos función (ambos, los construidos usando Function y los declarados usando una declaración de función o una expresión de función).
-
- -
{{ jsOverrides("Object", "properties", "arguments", "arity", "caller", "constructor", "length", "name", "displayName") }}
- -

Métodos

- -
-
{{jsxref("Function.prototype.apply()")}}
-
Le permite aplicar el método de otro objeto en el contexto de un objeto diferente (el objeto llamado).
-
{{jsxref("Function.prototype.call()")}}
-
Le Permite llamar (ejecutar) a un método de otro objeto en el contexto de un objeto diferente (el objeto que llama).
-
{{jsxref("Function.prototype.toSource()")}}
-
Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.
-
{{jsxref("Function.prototype.toString()")}}
-
Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.
-
- -
{{ jsOverrides("Object", "methods", "apply", "call", "toSource", "toString") }}
- -
-
 
-
- -

Vea También

- - 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 ---- -
{{JSRef}}
- -

La propiedad Map.prototype  representa el prototipo del constructor {{jsxref("Map")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descripción

- -

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 Map.

- -

Propiedades

- -
-
Map.prototype.constructor
-
Devuelve la función que creó el prototipo de una instancia. Esta es la función de {{jsxref("Map")}} por defecto.
-
{{jsxref("Map.prototype.size")}}
-
Devuelve el número de conjuntos de llave/valor en el objeto Map.
-
- -

Métodos

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Elimina todos los conjuntos de llave/valor del objeto Map.
-
{{jsxref("Map.delete", "Map.prototype.delete(key)")}}
-
Elimina cualquier valor asociado a la llave y devuelve el valor que  Map.prototype.has(key) tenía previamente. Después  Map.prototype.has(key) devolverá false.
-
{{jsxref("Map.prototype.entries()")}}
-
Devuelve un nuevo objeto  Iterador que contiene un array de [llave, valor] para cada elemento en el objeto  Map en orden de inserción.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Llama a la callbackFn una vez por cada conjunto llave/valor presentes en cada objeto  Map, en orden de inserción. Si se le proporciona un parámetro thisArg a forEach, se usará como valor "this" para cada callback.
-
{{jsxref("Map.get", "Map.prototype.get(key)")}}
-
Devuelve el valor asociado a la  llave, o undefined si no tiene ninguno.
-
{{jsxref("Map.has", "Map.prototype.has(key)")}}
-
Devuelve un booleano que indica si un valor se ha asociado a la llave en el objeto Map o no se ha asociado.
-
{{jsxref("Map.prototype.keys()")}}
-
Devuelve un nuevo objeto  Iterador que contiene las llaves para cada elemento en el objeto Map en orden de inserción.
-
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
-
Establece un valor para la llave en el objeto Map. Devuelve el objeto  Map.
-
{{jsxref("Map.prototype.values()")}}
-
Devuelve un nuevo objeto  Iterador que contiene los valores para cada elemento en el objeto  Map en orden de inserción.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Devuelve un nuevo objeto  Iterador que contiene un array de [llave, valor] para cada elemento en el objeto Map en orden de inserción.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico38{{CompatVersionUnknown}}{{ CompatGeckoDesktop("13") }}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}38{{CompatVersionUnknown}}{{CompatGeckoMobile("13")}}{{CompatNo}}{{CompatNo}} -

8

-
-
- -

Vea también

- - 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 ---- -
- {{JSRef("Objetos_globales", "Number")}}
-

Resumen

-

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.

-
-  
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 ---- -
{{JSRef("Objetos_globales", "Object")}}
- -

Resumen

- -

La propiedad Object.prototype representa al objeto prototipo de {{jsxref("Object")}}.

- -

{{js_property_attributes(0,0,0)}}

- -

Descripción

- -

Todos los objetos en JavaScript provienen de {{jsxref("Global_Objects/Object", "Object")}}; todos los objetos heredan métodos y propiedades de Object.prototype, aunque pueden ser sobrecargados. Sin embargo, un Object  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")}}).

- -

Cambios en el prototipo de {{jsxref("Object")}} son vistos por todos 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.

- -

Propiedades

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Especifica la función que crea el prototipo de un objeto.
-
{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{Non-standard_inline}}
-
Apunta al objeto que se usó como prototipo cuando fue instanciado.
-
{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{Non-standard_inline}}
-
Permite a una función ser definida que sera ejecutada cuando un miembro del objeto es llamado como un metodo.
-
{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline()}}
-
Se utiliza para devolver el número de propiedades enumerables directamente en un objeto definido por el usuario, pero que ha sido eliminado.
-
{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline()}}
-
Apunta al contexto de un objeto. Ha sido borrado.
-
- -

Métodos

- -
-
{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
-
Asocia una función con una propiedad que, cuando se accede a ella, ejecuta esa función y devuelve su valor de retorno.
-
{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
-
Asocia una función con una propiedad que al establecerse ejecuta esa función que modifica la propiedad.
-
{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
-
Devuelve la función asociada con la propiedad indicada por el método {{jsxref("Object.defineGetter", "__defineGetter__")}}.
-
{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}
-
Devuelve la función asociada con la propiedad indicada en el método {{jsxref("Object.defineSetter", "__defineSetter__")}}.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
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.
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Devuelve una indicación booleana cuando el objeto especificado está en la cadena de prototipos del objeto sobre el cuál éste método es llamado.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Devuelve un valor lógico (boolean) indicando si el attributo ECMAScript [[Enumerable]] está definido.
-
{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline}}
-
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.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Llama a {{jsxref("Object.toString", "toString()")}}.
-
{{jsxref("Object.prototype.toString()")}}
-
Devuelve la cadena de texto (string) que representa al objeto.
-
{{jsxref("Object.prototype.unwatch()")}} {{Non-standard_inline}}
-
Remueve un punto de mira de una propiedad del objeto.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Devuelve el valor primitivo del objeto indicado.
-
{{jsxref("Object.prototype.watch()")}} {{Non-standard_inline}}
-
Agrega un punto de mira a una propiedad del objeto.
-
{{jsxref("Object.prototype.eval()")}} {{ obsolete_inline()}}
-
Se utiliza para evaluar una cadena de código JavaScript  en el contexto del objeto especificado, pero que ha sido removido.
-
- -

Ejemplos

- -

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.

- -

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.

- -
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);
-  }
-}
- -

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:

- -
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();
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservación
{{SpecName('ES1')}}{{Spec2('ES1')}} -

Definición inicial.Implementado en  JavaScript 1.0.

-
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} -

 

-
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -

{{Compat("javascript.builtins.Object.prototype")}}

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 ---- -
{{JSRef}}
- -

La propiedad Promise.prototype representa el prototipo del constructor de {{jsxref("Promise")}}

- -
{{js_property_attributes(0,0,0)}}
- -

Descripción

- -

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 Promise.

- -

Propiedades

- -
-
Promise.prototype.constructor
-
Retorna la función que creó el prototipo de una instancia. Esta es la función por defecto de {{jsxref("Promise")}}.
-
- -

Métodos

- -
-
{{jsxref("Promise.catch", "Promise.prototype.catch(alRechazarse)")}}
-
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.
-
{{jsxref("Promise.then", "Promise.prototype.then(alCumplirse, alRechazarse)")}}
-
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 determinación (settled) original si la promesa no fue manejada (p.ej. si el manejador relevante alCumplirse o alRechazarse no es una función).
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad de navegadores

- - - -

{{Compat("javascript/promise","Promise.prototype")}}

- -

Ver también

- - 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 ---- -
{{JSRef}}
- -

La propiedad RangeError.prototype representa el prototipo de {{jsxref("RangeError")}}.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Descripción

- -

Todas las instancias de {{jsxref("RangeError")}} heredan de RangeError.prototype. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias.

- -

Propiedades

- -
-
RangeError.prototype.constructor
-
Especifica la función que crea instancias del prototipo.
-
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
-
Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("RangeError")}} debe procurar su propio message, en SpiderMonkey, se hereda de {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
-
Nombre del error. Heredada de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
-
Ruta al fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
-
Número de línea en el fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
-
Número de columna de la línea en la que se produjo. Heredada de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
-
Pila de llamadas. Heredada de {{jsxref("Error")}}.
-
- -

Métodos

- -

Aunque el prototipo del objeto {{jsxref("RangeError")}} no contiene métodos propios, las instancias de {{jsxref("RangeError")}} heredan algunos a través de la cadena de prototipos.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoCommentario
{{SpecName('ES3')}}{{Spec2('ES3')}}Definición inicial.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Definido como NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Definido como NativeError.prototype.
- -

Compatibilidad de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vea también

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

{{JSRef("Objetos_globales", "String")}}

- -

Resumen

- -

The String.prototype 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.

- -
{{js_property_attributes(0,0,0)}}
- -

Propiedades

- -
-
String.prototype.constructor
-
Especifica la función que crea un prototipo de objeto.
-
{{jsxref("String.prototype.length")}}
-
Refleja la longitud de la cadena.
-
- -
{{ jsOverrides("Object", "properties", "constructor", "length") }}
- -

Métodos

- -

Métodos no relacionados con HTML

- -
-
{{jsxref("String.prototype.charAt()")}}
-
Devuelve el carácter en el índice especificado.
-
{{jsxref("String.prototype.charCodeAt()")}}
-
Devuelve el número que indica el valor Unicode del carácter en el índice especificado.
-
{{jsxref("String.prototype.concat()")}}
-
Combina el texto de dos cadenas y devuelve una nueva cadena.
-
{{jsxref("String.prototype.indexOf()")}}
-
Devuelve el índice dentro del objeto String que realiza la llamada de la primera ocurrencia del valor especificado, o -1 si no lo encuentra.
-
{{jsxref("String.prototype.lastIndexOf()")}}
-
Devuelve el índice dentro del objeto String que realiza la llamada de la última ocurrencia del valor especificado, o -1 si no lo encuentra.
-
{{jsxref("String.prototype.match()")}}
-
Se usa para emparejar una expresión regular con una cadena.
-
{{jsxref("String.prototype.replace()")}}
-
Se usa para emparejar una expresión regular con una cadena, y reemplezar la subcadena emparejada con una nueva subcadena.
-
{{jsxref("String.prototype.search()")}}
-
Realiza una búsqueda de una expresión regular en una cadena especificada.
-
{{jsxref("String.prototype.slice()")}}
-
Extrae una sección de una cadena y devuelve una nueva cadena.
-
{{jsxref("String.prototype.split()")}}
-
Divide un objeto String en un arreglo de cadenas, separando la cadena en subcadenas.
-
{{jsxref("String.prototype.substr()")}}
-
Devuelve los caracteres de una cadena comenzando en la localización especificada y hasta el número de caracteres especificado.
-
{{jsxref("String.prototype.substring()")}}
-
Devuelve los caracteres de una cadena entre dos índices dentro de la cadena.
-
{{jsxref("String.prototype.toLowerCase()")}}
-
Devuelve el valor de la cadena que realiza la llamada en minúsculas.
-
{{jsxref("String.prototype.toSource()")}}
-
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()")}}.
-
{{jsxref("String.prototype.toString()")}}
-
Devuelve una cadena que representa el objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("String.prototype.toUpperCase()")}}
-
Devuelve el valor de la cadena que realiza la llamada en mayúsculas.
-
{{jsxref("String.prototype.valueOf()")}}
-
Devuelve el valor primitivo del objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Métodos de encapsulado HTML

- -

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>".

- -
-
{{jsxref("String.prototype.anchor()")}}
-
<a name="name"> (Ancha Hipertexto)
-
{{jsxref("String.prototype.big()")}}
-
{{HTMLElement("big")}}
-
{{jsxref("String.prototype.blink()")}}
-
{{HTMLElement("blink")}}
-
{{jsxref("String.prototype.bold()")}}
-
{{HTMLElement("b")}}
-
{{jsxref("String.prototype.fixed()")}}
-
{{HTMLElement("tt")}}
-
{{jsxref("String.prototype.fontcolor()")}}
-
<font color="color">
-
{{jsxref("String.prototype.fontsize()")}}
-
<font size="size">
-
{{jsxref("String.prototype.italics()")}}
-
{{HTMLElement("i")}}
-
{{jsxref("String.prototype.link()")}}
-
<a href="url"> (Enlace a URL)
-
{{jsxref("String.prototype.small()")}}
-
{{HTMLElement("small")}}
-
{{jsxref("String.prototype.strike()")}}
-
{{HTMLElement("strike")}}
-
{{jsxref("String.prototype.sub()")}}
-
{{HTMLElement("sub")}}
-
{{jsxref("String.prototype.sup()")}}
-
{{HTMLElement("sup")}}
-
- -

Estos métodos son de uso limitado, ya que sólo están disponibles un subconjunto de etiquetas HTML y atributos.

- -

{{ 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") }}

- -

Vea también

- - - -
-
 
-
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 ---- -
{{JSRef}}
- -

La propiedad SyntaxError.prototype representa el prototipo para el constructor {{jsxref("SyntaxError")}}.

- -

Descripción

- -

Todas las instancias de {{jsxref("SyntaxError")}} son heredadas de SyntaxError.prototype. Puedes usar el prototipo para agregar propiedades o metodos a todas las instancias.

- -

Propiedades

- -
-
SyntaxError.prototype.constructor
-
Especifica la funcion que creó una instancia del prototipo.
-
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
-
Mensaje de error. A pesar de que ECMA-262 especifica que {{jsxref("SyntaxError")}} debe proveer su propia propiedad message , en SpiderMonkey, es heredada de {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
-
Error name. Inherited from {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
-
Ruta al archivo que produjo el error. Heredada de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
-
Numero de linea en el archivo que produjo el error. Heredada de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
-
Numero de columna en la linea que produjo el error. Heredada de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
-
Stack trace. Heredada de {{jsxref("Error")}}.
-
- -

Metodos

- -

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.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Defined as NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Defined as NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Defined as NativeError.prototype.
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Véase también

- - 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 ---- -
{{JSRef}}
- -

La propiedad WeakMap.prototype representa el prototipo para el constructor {{jsxref("WeakMap")}}.

- -
{{js_property_attributes(0,0,0)}}
- -

Descripción

- -

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  WeakMap.

- -

WeakMap.prototype por si mismo es solamente un objeto ordinario:

- -
Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
- -

Propiedades

- -
-
WeakMap.prototype.constructor
-
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.
-
- -

Métodos

- -
-
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
-
Remueve cualquier valor asociado a la clave. Después de esto WeakMap.prototype.has(key) retornará falso.
-
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
-
Retorna el valor asociado a la clave, o undefined si no hay ninguno.
-
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
-
Retorna un valor booleano indicando si hay un valor asociado a la clave en el objeto the WeakMap object o no.
-
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
-
Asigna el valor para la clave en el objeto WeakMap. Retorna el objeto WeakMap.
-
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
-
Remueve todas los pares clave/valore del objeto WeakMap. Notese que es posible implementar un objeto parecido al WeakMap que posea un método .clear(), encapsulando el objeto WeakMap que no lo tiene (ver ejemplo en la página {{jsxref("WeakMap")}})
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico36{{CompatGeckoDesktop("6.0")}}11237.1
Objeto ordinario{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}8
Objeto ordinario{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Ver también

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

 

- -

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:

- -

Reserved keywords as of ECMAScript 6

- -
- -
- -

Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:

- - - -

Las siguientes estan reservadas como palabras futuras cuando se encuentre el modo correcto para su estructura de codigo:

- -
- -
- -

Futuras Palabras Reservadas en estandares antiguos

- -

Las siguientes estan reservadas como palabras futuras por la antigua especificación ECMAScript (ECMAScript 1 hasta 3).

- -
- -
- -

Adicionalmente, los literales "null", "true", y "false" estan reservadas en ECMAScript para usos normales.

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 ---- -
{{jsSidebar("Operators")}}
- -

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 (/).

- -

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:

- -

{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}

- -

Suma o adición (+)

- -

La operación suma se produce mediante la suma de número o strings concatenados.

- -

Sintaxis

- -
Operador: x + y
- -

Ejemplos:

- -
// 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"
-
- -

Resta o sustracción (-)

- -

La resta se produce cuando se sutraen el resultado de los operadores, produciendo su diferencia.

- -

Sintaxis

- -
Operador: x - y
- -

Ejemplos

- -
5 - 3     // 2
-3 - 5     // -2
-'foo' - 3 // NaN
-
- -

División (/)

- -

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.

- -

Sintaxis

- -
Operador: x / y
- -

Ejemplos

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

Multiplicación (*)

- -

El operador multiplicación produce el producto de la multiplicación de los operandos.

- -

Sintaxis

- -
Operador: x * y
- -

Ejemplos

- -
2 * 2 // 4
--2 * 2 // -4
-Infinito * 0 // NaN
-Infinito * Infinito // Infinito
-'foo' * 2 // NaN
- -

Resto o Residuo  (%)

- -

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 modulo incorporada para producir el resultado, que es el resto entero de dividir var1 por var2 - por ejemplo - var1 modulo var2. Existe una propuesta para obtener un operador de módulo real en una versión futura de ECMAScript, con la diferencia de que el resultado del operador de módulo tomaría el signo del divisor, no el dividendo.

- -

Sintaxis

- -
Operador: var1 % var2
- -

Ejemplos

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

Exponenciación (**)

- -

El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia. es decir, var1var2, en la declaración anterior, donde var1 y var2 son variables. El operador de exponenciación es asociativo a la derecha. a ** b ** c es igual a a ** (b ** c).

- -

Sintaxis

- -
Operador: var1 ** var2
- -

 

- -

Notas

- -

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 (+/-/~/!/delete/void/typeof) inmediatamente antes del número de base.

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

Ejemplos

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

Para invertir el signo del resultado de una expresión de exponenciación:

- -
-(2 ** 2) // -4
- -

Para forzar la base de una expresión de exponenciación a ser un número negativo:

- -
(-2) ** 2 // 4
- -
-

Nota: JavaScript también tiene un operador bit a bit ^ (logical XOR). ** y ^ son diferentes (por ejemplo: 2 ** 3 === 8 cuando 2 ^ 3 === 1.)

-
- -

 

- -

Incremento (++)

- -

 

- -

El operador de incremento incrementa (agrega uno a) su operando y devuelve un valor.

- - - -

Sintaxis

- -
Operador: x++ o ++x
- -

Ejemplos

- -
// Postfijo
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Prefijo
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Decremento (--)

- -

El operador de decremento disminuye (resta uno de) su operando y devuelve un valor.

- - - -

Sintaxis

- -
Operador: x-- o --x
- -

Ejemplos

- -
// Postfijo
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Prefijo
-var a = 2;
-b = --a; // a = 1, b = 1
- -

 

- -

Negación unaria (-)

- -

El operador de negación unaria precede su operando y lo niega.

- -

Sintaxis

- -
Operador: -x
- -

Ejemplos

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

Unario más (+)

- -

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 true, false y null. 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 NaN.

- -

Sintaxis

- -
Operador: +x
- -

Ejemplos

- -
+3     // 3
-+'3'   // 3
-+true  // 1
-+false // 0
-+null  // 0
-+function(val){  return val } // NaN
- -

 

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}} -

Definido en varias secciones de la especificación: Operadores aditivos, Operadores multiplicativos, Expresiones Postfijas, Operadores unarios.

-
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}} -

Definido en varias secciones de la especificación: Operadores aditivos, Operadores multiplicativos, Expresiones Postfijas, Operadores unarios.

-
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Operador de exponenciación agregado.
{{SpecName('ES2017', '#sec-postfix-expressions')}}{{Spec2('ES2017')}} 
{{SpecName('ESDraft', '#sec-additive-operators')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -

{{Compat("javascript.operators.arithmetic")}}

- -

Ver también

- - - -

 

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 ---- -
{{jsSidebar("Operators")}}
- -

El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).

- -

Sintaxis

- -

Llamadas a funciones:

- -
f(...iterableObj);
-
- -

Arrays literales:

- -
[...iterableObj, 4, 5, 6]
- -

Desestructuración destructuring:

- -
[a, b, ...iterableObj] = [1, 2, 3, 4, 5];
- -

Ejemplos

- -

Un mejor método apply

- -

Ejemplo: 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:

- -
function f(x, y, z) { }
-var args = [0, 1, 2];
-f.apply(null, args);
- -

Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:

- -
function f(x, y, z) { }
-var args = [0, 1, 2];
-f(...args);
- -

Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación spread, donde además puede ser usada varias veces.

- -
function f(v, w, x, y, z) { }
-var args = [0, 1];
-f(-1, ...args, 2, ...[3]);
- -

Un array literal mas poderoso

- -

Ejemplo: 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 push, splice, concat, etc. Con la sintaxis de propagación spread esta tarea resulta mucho mas concisa:

- -
var parts = ['shoulder', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes'];
- -

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.

- -

Combinación del método apply y el operador new

- -

Ejemplo: En ES5 no es posible combinar new y apply (en ES5  el método apply crea un [[Call]] y no un [[Construct]]). En ES6 la sintaxis de propagación spread soporta esto de forma natural:

- -
var dateFields = readDateFields(database);
-var d = new Date(...dateFields);
- -

Un método push mejorado

- -

Ejemplo: {{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:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// Agregar todos los elementos de arr2 a arr1
-Array.prototype.push.apply(arr1, arr2);
- -

Usando el operador de propagación spread de ES6, este sería el resultado:

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1.push(...arr2);
- -

Solo funciona para iterables

- -
var obj = {"key1":"value1"};
-function myFunction(x) {
-    console.log(x); // undefined
-}
-myFunction(...obj);
-var args = [...obj];
-console.log(args, args.length) //[] 0
- -

Operador Rest

- -

El operador Rest es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, Rest es lo contrario de spread. Spread 'expande' un array en sus elementos, y Rest recoge múltiples elementos y los 'condensa' en uno solo.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoCommentario
-

{{SpecName('ES6', '#sec-array-initializer', 'Array Initializer')}}
- {{SpecName('ES6', '#sec-argument-lists', 'Argument Lists')}}

- 		{{Spec2('ES6')}} -
    -
  • 12.2.4 Array Initializer
    • -
  • 12.3.6 Argument Lists
    • -
-
- -

Compatibilidad en navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Operación de spread en arrays literales{{CompatNo}}
- v8 issue 3018		{{ CompatGeckoDesktop("16") }}
- {{ CompatGeckoDesktop("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}7.1
Operación de spread en llamadas a funciones{{CompatNo}}{{ CompatGeckoDesktop("27") }}
- {{ CompatGeckoDesktop("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}7.1
Operación de spread en desestructuración
- destructuring		{{CompatUnknown}}{{ CompatGeckoDesktop("34") }}
- {{ CompatGeckoDesktop("36") }} (Symbol.iterator)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Operación de spread en arrays literales{{CompatNo}}{{ CompatGeckoMobile("16") }}
- {{ CompatGeckoMobile("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}iOS 8
Operación de spread en llamadas a funciones{{CompatNo}}{{ CompatGeckoMobile("27") }}
- {{ CompatGeckoMobile("36") }} (Symbol.iterator)		{{CompatNo}}{{CompatNo}}iOS 8
Operación de spread en desestructuración
- destructuring		{{CompatUnknown}}{{ CompatGeckoDesktop("34") }}
- {{ CompatGeckoMobile("36") }} (Symbol.iterator)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Temas relacionados

- - 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 ---- -
{{jsSidebar("Operators")}}
- -

JavaScript tiene comparaciones estrictas y de conversión de tipos. Una comparación estricta (por ejemplo, ===) 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, ==) convierte los operandos al mismo tipo antes de hacer la comparación. Para las comparaciones abstractas relacionales (p. Ej., <=), Los operandos primero se convierten en primitivos, y luego en el mismo tipo, antes de la comparación.

- -

Las cadenas se comparan en base al orden lexicográfico estándar, utilizando valores Unicode.

- -
console.log(1 == 1)
-// Esperamos True
-
-console.log("1" == 1 )
-// Esperamos true
-
-console.log( 1 === 1)
-// Esperamos true
-
-console.log( "1" === 1)
-// Esperamos false
-
- -

Características de las comparaciones:

- - - -

Operadores de igualdad

- -

Igualdad (==)

- -

El operador de igualdad convierte los operandos si no son del mismo tipo, luego aplica una comparación estricta. Si ambos operandos son objetos, entonces JavaScript compara las referencias internas que son iguales cuando los operandos se refieren al mismo objeto en la memoria.

- -

Sintaxis

- -
x == y
-
- -

Ejemplos

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

Desigualdad (!=)

- -

El operador de desigualdad devuelve verdadero si los operandos no son iguales. Si los dos operandos no son del mismo tipo, JavaScript intenta convertir los operandos a un tipo apropiado para la comparación. Si ambos operandos son objetos, entonces JavaScript compara las referencias internas que no son iguales cuando los operandos se refieren a diferentes objetos en la memoria.

- -

Sintaxis

- -
x != y
- -

Ejemplos

- -
1 !=   2     // true
-1 !=  '1'    // false
-1 !=  "1"    // false
-1 !=  true   // false
-0 !=  false  // false
-
- -

Identidad / igualdad estricta (===)

- -

El operador de identidad devuelve verdadero si los operandos son estrictamente iguales (ver arriba) sin conversión de tipo.

- -

Sintaxis

- -
x === y
- -

Ejemplos

- -
3 === 3   // true
-3 === '3' // false
-var object1 = {'key': 'value'}, object2 = {'key': 'value'};
-object1 === object2 // false
- - - -

Sin identidad / desigualdad estricta (!==)

- -

El operador sin identidad devuelve verdadero si los operandos no son iguales y / o no del mismo tipo.

- -

Sintaxis

- -
x !== y
- -

Ejemplos

- -
3 !== '3' // true
-4 !== 3   // true
-
- -

Operadores relacionales

- -

Cada uno de estos operadores llamará a la función valueOf() en cada operando antes de realizar una comparación.

- -

Operador mayor que (>)

- -

El operador mayor que, devuelve verdadero si el operando izquierdo es mayor que el operando derecho.

- -

Sintaxis

- -
x > y
- -

Ejemplos

- -
4 > 3 // true
-
- -

Operador mayor o igual (>=)

- -

El operador mayor o igual que, devuelve verdadero si el operando izquierdo es mayor o igual que el operando derecho.

- -

Sintaxis

- -
 x >= y
- -

Ejemplos

- -
4 >= 3 // true
-3 >= 3 // true
-
- -

Operador menor que (<)

- -

El operador menor que devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.

- -

Sintaxis

- -
 x < y
- -

Ejemplos

- -
3 < 4 // true
-
- -

Operador menor o igual (<=)

- -

El operador menor o igual devuelve verdadero si el operando izquierdo es menor o igual que el operando derecho.

- -

Sintaxis

- -
 x <= y
- -

Ejemplos

- -
3 <= 4 // true
-
- -

Usando los operadores de igualdad

- -

Los operadores de igualdad estándar (== y !=) utilizan el Algoritmo de Comparación de Igualdad Abstracta 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 5 == '5', la cadena de la derecha se convierte a {{jsxref("Number")}} antes de realizar la comparación.

- -

Los operadores de igualdad estricta (=== y !==) usan el Algoritmo de Comparación de Igualdad Estricta 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 false, entonces 5 !== '5'.

- -

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.

- -

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:

- - - -
Nota: 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:
- -
// 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'
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial. Implementado en JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}} -

Agrega === y !== operadores. Implementado en JavaScript 1.3

-
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}} -

Definido en varias secciones de la especificación: Operadores Relacionales, Operadores de Igualdad

-
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}} -

Definido en varias secciones de la especificación: Operadores Relacionales, Operadores de Igualdad

-
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}} -

Definido en varias secciones de la especificación: Operadores Relacionales, Operadores de Igualdad

-
- -

Compatibilidad con navegadores

- - - -

{{Compat("javascript.operators.comparison")}}

- -

Ver también

- - 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 ---- -
{{jsSidebar("Operators")}}
- -

Los operadores a nivel de bit tratan sus operandos como una secuencia de 32 bits (unos y ceros) en lugar de números 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.

- -

La siguiente tabla resume los operadores a nivel de bit de JavaScript:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperadorUsoDescripción
AND binarioa & bDevuelve un uno en cada posición en la que ambos operandos sea uno.
OR binario a | bDevuelve un uno en cada posición en la que uno o ambos operandos sea uno.
Bitwise XORa ^ bDevuelve un uno en cada posición en la que los bits correspondientes en cada uno de los operandos, pero no en ambos, es uno. 
Bitwise NOT~ aInvierte los bits del operando.
Left shifta << bDesplaza en representación binaria b (< 32) bits a la izquierda, desplazando en ceros desde la derecha.
Sign-propagating right shifta >> bDesplaza en representación binaria b (< 32) bits a la derecha, descartando los bits desplazados fuera.
Zero-fill right shifta >>> bDesplaza en representación binaria b (< 32) bits a la derecha, desplazando en ceros desde la izquierda.
- -

Enteros con signo de 32 bits

- -

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:

- -
00000000000000000000000100111010
-
- -

A continuación se codifica ~314 como complemento a uno de 314:

- -
11111111111111111111111011000101
-
- -

Por último, se codifica -314 como complemento a dos de 314:

- -
11111111111111111111111011000110
-
- -

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 bit de signo.

- -

El número 0 es el entero compuesto íntegramente por bits en 0.

- -
0 (base 10) = 00000000000000000000000000000000 (base 2)
-
-
- -

El número -1 es el entero compuesto íntegramente por bits de 1.

- -
-1 (base 10) = 11111111111111111111111111111111 (base 2)
-
- -

El número -2147483648 (representación hexadecimal: -0x80000000) es el entero compuesto íntegramente por bits de 0 excepto el de más a la izquierda.

- -
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-
- -

El número 2147483647 (representación hexadecimal: 0x7fffffff) es el entero compuesto íntegramente por bits de 1 excepto el de más a la izquierda. 

- -
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-
- -

Los números -2147483648 and 2147483647 son el mínimo y el máximo entero que se pueden representar con signo de 32 bits.

- -

Operadores lógicos a nivel de bit

- -

Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:

- - - -

& (Bitwise AND o AND a nivel de bits)

- -

Corresponde al operador lógico & o "Y". Ejecuta la operación AND en cada par de bits, a AND b es 1 sólo si tanto a como b son 1. La tabla de verdad del operador AND es:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba AND b
000
010
100
111
- -
     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
-
- -

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. 

- -

| (Bitwise OR o  OR a nivel de bits)

- -

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba OR b
000
011
101
111
- -
     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
-
- -

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.

- -

^ (Bitwise XOR o XOR a nivel de bits)

- -

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba XOR b
000
011
101
110
- -
     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
-
- -

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

- -

~ (Bitwise NOT o Negación a nivel de bits)

- -

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:

- - - - - - - - - - - - - - - - -
aNOT a
01
10
- -

 

- -
 9 (base 10) = 00000000000000000000000000001001 (base 2)
-               --------------------------------
-~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
-
- -

 

- -

Ejecutar la operación NOT sobre cualquier número x devuelve -(x+1). Por ejemplo -5 devuelve 4.

- -

Ejemplo con indexOf:

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

Operadores de desplazamiento a nivel de bit

- -

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.

- -

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.

- -

<< (Desplazamiento a la izquierda)

- -

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.

- -

Por ejemplo, 9 << 2 devuelve 36:

- -
     9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
-
- -

Desplazar a la izquierda cualquier número x por y bits da por resultado x * 2^y.

- -

>> (Desplazamiento a la derecha con propagación de signo o Desplazamiento aritmético a la derecha)

- -

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".

- -

Por ejemplo, 9 >> 2 devuelve 2:

- -
     9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

Igualmente, -9 >> 2 devuelve-3, porque se mantiene el signo:

- -
     -9 (base 10): 11111111111111111111111111110111 (base 2)
-                   --------------------------------
--9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
-
- -

>>> (Desplazamiento a la derecha con relleno de ceros o Desplazamiento lógico )

- -

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. 

- -


- Para números no negativos, el desplazamiento lógico y arítmetico dan el mismo resultado. Por ejemplo, 9 >>> 2 da 2, al igual que 9 >> 2:

- -
      9 (base 10): 00000000000000000000000000001001 (base 2)
-                   --------------------------------
-9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

Sin embargo, no es el caso para números negativos. Por ejemplo, -9 >>> 2 da 1073741821, que es diferente de  -9 >> 2 (que da -3):

- -
      -9 (base 10): 11111111111111111111111111110111 (base 2)
-                    --------------------------------
--9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
-
- -

Ejemplos

- -

Banderas y máscaras de bits

- -

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).

- -

Supongamos que hay 4 banderas:

- - - -

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:

- -
var flags = 5;   // binary 0101
-
- -

Este valor indica:

- - - -

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.

- -

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:

- -
var FLAG_A = 1; // 0001
-var FLAG_B = 2; // 0010
-var FLAG_C = 4; // 0100
-var FLAG_D = 8; // 1000
-
- -

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:

- -
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
-
- -

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:

- -
// if we own a cat
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // do stuff
-}
-
- -

Una máscara de bits con varios indicadores establecidos actúa como un "either/or". Por ejemplo, los siguientes dos son equivalentes:

- -
// 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
-}
-
- -
// 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
-}
-
- -

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:

- -
// yes, we own a cat and a duck
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

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:

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

La máscara también podría haberse creado con ~ FLAG_A & ~ FLAG_C (ley de De Morgan):

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

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:

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

Finalmente, todas las banderas se pueden voltear con el operador NOT:

- -
// entering parallel universe...
-flags = ~flags;    // ~1010 => 0101
-
- -

Fragmentos de conversión

- -

Convert a binary String to a decimal Number:

- -
var sBinString = "1011";
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-
- -

 

- -

Convierte una cadena binaria a un número decimal:

- -

 

- -
var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-
- -

Automatiza la creación de una máscara.

- -

Si tiene que crear muchas máscaras a partir de algunos valores booleanos, puede automatizar el proceso:

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

Algoritmo inverso: una matriz de valores booleanos de una máscara

- -

Si desea crear una matriz de valores booleanos a partir de una máscara, puede usar este código:

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

Puedes probar ambos algoritmos al mismo tiempo ...

- -
var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-
- -

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:

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

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Definicion inicial
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}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
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}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
- -

Compatibilidad del navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Bitwise NOT (~){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise AND (&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise OR (|){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise XOR (^){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Left shift (<<){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Right shift (>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Unsigned right shift (>>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Bitwise NOT (~){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise AND (&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise OR (|){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Bitwise XOR (^){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Left shift (<<){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Right shift (>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Unsigned right shift (>>>){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Ver también

- - 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 ---- -
{{jsSidebar("Operators")}}
- -

Un operador de asignacion asigna un valor al operando de la izquierda basado en el valor del operando de la derecha.

- -

Visión general

- -

El operador de asignación basico es el igual (=), 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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NombresAbreviacionesSignificado
Asignaciónx = yx = y
Asignación de adiciónx += yx = x + y
Asignación de sustracciónx -= yx = x - y
Asignación de multiplicaciónx *= yx = x * y
Asignación de divisiónx /= yx = x / y
Asignación de Restox %= yx = x % y
Asignación de exponenciaciónx **= yx = x ** y
Asignación de desplazamiento a la izquierdax <<= yx = x << y
Asignación de desplazamiento a la derechax >>= yx = x >> y
Asignación sin signo de desplazamiento a la derechax >>>= yx = x >>> y
Asignacion ANDx &= yx = x & y
Asignacion XORx ^= yx = x ^ y
Asignacion ORx |= yx = x | y
- -

Asignación

- -

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.

- -

Sintaxis

- -
Operador: x = y
-
- -

Ejemplos

- -
// Asumiendo las siguientes variables
-//  x = 5
-//  y = 10
-//  z = 25
-
-
-x = y     // x es 10
-x = y = z // x, y, z son todas 25
-
- -

Asignación de Adición

- -

El operador de asignación de suma agrega 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.

- -

Sintaxis

- -
Operador: x += y
-Significado:  x  = x + y
-
- -

Ejemplos

- -
// 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"
-
- -

Asignación de Sustracción

- -

El operador de asignación de sustracción sustrae 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.

- - - -

Sintaxis

- - - -
Operador: x -= y
-Significado:  x  = x - y
-
- -

Ejemplos

- -
// Asumiendo las siguientes variables
-//  bar = 5
-
-bar -= 2     // 3
-bar -= "foo" // NaN
-
- -

Asignación de Multiplicación 

- -

El operador de asignación de multiplicación multiplica 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.

- -

Sintaxis

- -
Operador: x *= y
-Significado:  x  = x * y
-
- -

Ejemplos

- -
// Asumiendo la siguiente variable
-//  bar = 5
-
-bar *= 2     // 10
-bar *= "foo" // NaN
-
- -

Asignación de división

- -

El operador de asignación de división divide 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.

- -

Sintaxis

- -
Operador: x /= y
-Significado:  x  = x / y
-
- -

Ejemplos

- -
// Asumiendo la siguiente variable
-//  bar = 5
-
-bar /= 2     // 2.5
-bar /= "foo" // NaN
-bar /= 0     // Infinity
-
- -

Asignación  de resto

- -

El operador de asignación de resto divide la variable por el valor del operador derecho y asigna el resto a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de resto", "#Remainder", 1)}} para mas detelles.

- -

Sintaxis

- -
Operador: x %= y
-Significado:  x  = x % y
-
- -

Ejemplos

- -
// Asumiendo la siguiente variable
-//  bar = 5
-
-bar %= 2     // 1
-bar %= "foo" // NaN
-bar %= 0     // NaN
-
- -

Asignación de exponenciación

- -

El operador de asignación de exponente evalua el resultado de elevar primero el operando a la potencia del segundo operando. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de exponenciación", "#Left_shift", 1)}}para mas detalles

- -

Sintaxis

- -
Operador: x **= y
-Significado:  x  = x ** y
-
- -

Ejemplos

- -
// Asumiendo la siguiente variable
-//  bar = 5
-
-bar **= 2     // 25
-bar **= "foo" // NaN
- -

Asignación de desplazamiento a la izquierda

- -

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.

- -

Sintaxis

- -
Operador: x <<= y
-Significado:  x   = x << y
-
- -

Ejemplos

- -
var bar = 5; //  (00000000000000000000000000000101)
-bar <<= 2; // 20 (00000000000000000000000000010100)
-
- -

Asignación de desplazamiento a la derecha

- -

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.

- -

Sintaxis

- -
Operador: x >>= y
-Significado:  x   = x >> y
-
- -

Ejemplos

- -
var bar = 5; //   (00000000000000000000000000000101)
-bar >>= 2;   // 1 (00000000000000000000000000000001)
-
-var bar -5; //    (-00000000000000000000000000000101)
-bar >>= 2;  // -2 (-00000000000000000000000000000010)
-
- -

Asignación sin signo de desplazamiento a la derecha

- -

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.

- -

Sintaxis

- -
Operador: x >>>= y
-Significado:  x    = x >>> y
-
- -

Ejemplo

- -
var bar = 5; //   (00000000000000000000000000000101)
-bar >>>= 2;  // 1 (00000000000000000000000000000001)
-
-var bar = -5; // (-00000000000000000000000000000101)
-bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
- -

Asignación AND

- -

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.

- -

Sintaxis

- -
Operador: x &= y
-Significado:  x  = x & y
-
- -

Ejemplo

- -
var bar = 5;
-// 5:     00000000000000000000000000000101
-// 2:     00000000000000000000000000000010
-bar &= 2; // 0
-
- -

Asignación XOR

- -

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

- -

Sintaxis

- -
Operador: x ^= y
-Significado:  x  = x ^ y
-
- -

Ejemplo

- -
var bar = 5;
-bar ^= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

Asignación OR

- -

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

- -

Sintaxis

- -
Operador: x |= y
-Significado:  x  = x | y
-
- -

Ejemplo

- -
var bar = 5;
-bar |= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

Ejemplos

- -

Operador izquierdo con otros operadores de asignación

- -

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:

- -
a[i++] += 5         // i es evaluado una vez
-a[i++] = a[i++] + 5 // i es evaluado dos veces
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ESDraft', '#sec-assignment-operators', 'Operadores de asignación')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-assignment-operators', 'Operadores de asignación')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.13', 'Operadores de asignación')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.13', 'Operadores de asignación')}}{{Spec2('ES1')}} -

Definición inicial

-
- -

Compatibilidad de Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Vea tambien

- - 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 ---- -
{{jsSidebar("Operadores_lógicos")}}
- -

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.

- -

Descripción

- -

Los operadores lógicos se describen en la tabla siguiente:

- - - - - - - - - - - - - - - - - - - - - - - - -
OperadorUsoDescripción
AND (&&) lógicoexpr1 && expr2 -

Regresa expr1 si tal puede convertirse a false; de lo contrario, regresa expr2. De esta forma, cuando se usa con valores Boolean, && regresa true si ambos operandos son verdaderos; de lo contrario regresa false.

-
OR (||) lógicoexpr1 || expr2 -

Regresa expr1 si tal puede convertirse a true; de lo contrario, regresa expr2. De esta forma, cuando se usa con valores Boolean, || regresa true si cualquier operando es verdadero; pero si ambos son falsos, regresa "false".

-
NOT (!) lógico!expr -

Regresa false si su único operando puede convertirse a true; de lo contrario, regresa true.

-
- -

Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que evalúan a null, 0, un string vacío (""), o undefined.

- -

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.

- -

Evaluación contra "corto circuitos"

- -

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:

- - - -

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).

- -

Por ejemplo, las siguientes dos expresiones son equivalentes.

- -
function shortCircuitEvaluation() {
-  doSomething() || doSomethingElse()
-}
-
-function equivalentEvaluation() {
-  var flag = doSomething();
-  if (!flag) {
-    doSomethingElse();
-  }
-}
-
- -

Sin embargo, las siguientes expresiones no son equivalentes debido a la precedencia de operadores, 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).

- -
false && true  || true      // regresa true
-false && (true || true)     // regresa false
- -

AND (&&) lógico

- -

El siguiente código muestra ejemplos del operador && (AND lógico).

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

OR (||) lógico

- -

El siguiente código muestra ejemplos del operador || (OR lógico).

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

Logical NOT (!)

- -

El siguiente código muestra ejemplos del operador ! (NOT lógico).

- -
n1 = !true              // !t regresa false
-n2 = !false             // !f regresa true
-n3 = !"Cat"             // !t regresa false
-
- -

Reglas de conversión

- -

Convertir de AND a OR

- -

la siguiente operación que involucra Booleans:

- -
bCondition1 && bCondition2
- -

siempre es igual a:

- -
!(!bCondition1 || !bCondition2)
- -

Convertir de OR a AND

- -

la siguiente operación que involucra Booleans:

- -
bCondition1 || bCondition2
- -

siempre es igual a:

- -
!(!bCondition1 && !bCondition2)
- -

Convertir entre operadores NOT

- -

la siguiente operación que involucra Booleans:

- -
!!bCondition
- -

siempre es igual a:

- -
bCondition
- -

Eliminando paréntesis anidados

- -

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.

- -

Eliminando operadores AND anidados

- -

La siguiente operación compleja que involucra Booleans:

- -
bCondition1 || (bCondition2 && bCondition3)
- -

siempre es igual a:

- -
bCondition1 || bCondition2 && bCondition3
- -

Eliminando operadores OR anidados

- -

La siguiente operación compleja que involucra Booleans:

- -
bCondition1 && (bCondition2 || bCondition3)
- -

siempre es igual a:

- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}} -

Definido en varias secciones de la especificación: Logical NOT Operator, Binary Logical Operators

-
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Definido en varias secciones de la especificación: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Definido en varias secciones de la especificación: Logical NOT Operator, Binary Logical Operators
- -

Compatibilidad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
AND (&&) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
OR (||) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
NOT (!) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
AND (&&) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
OR (||) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
NOT (!) lógico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Ver también

- - 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 ---- -
{{jsSidebar("Sentencias")}}
- -

La palabra clave default, en JavaScript puede ser usada en dos situaciones: dentro una sentencia {{jsxref("Sentencias/switch", "switch")}}, o con un sentencia{{jsxref("Sentencias/export", "export")}}.

- -
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
- - - -

Sintaxis

- -

Dentro de una sentencia {{jsxref("Sentencias/switch", "switch")}}:

- -
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;]
-}
- -

Con una sentencia {{jsxref("Sentencias/export", "export")}}:

- -
export default nameN
- -

Descripción

- -

Para mas detalles vea las paginas:

- - - -

Ejemplos

- -

Usando default en una sentencia switch

- -

En el siguiente ejemplo, si se evalua expr  como "Naranjas" o "Manzanas", el programa coincide los valores en cada caso: "Naranjas" o "Manzanas", y ejecuta la declaración correspondiente. La palabra clave default ayudara en algun otro caso y ejecuta la declaración asociada.

- -
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 + '.');
-}
- -

Usando default con export

- -

Si queres exportar un solo valor o necesitas reservar un valor para un modulo, puedes usar una exportación por defecto:

- -
// modulo "mi-modulo.js"
-let cube = function cube(x) {
-  return x * x * x;
-};
-export default cube;
- -

Entonces, en otro script, sera sencillo de importar el valor del modulo:

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

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- - - -

{{Compat("javascript.statements.default")}}

- -

Vea tambien

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

Las etiquetas {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} proporcionan apoyo para la reproducción de audio y video sin necesidad de plug-ins. Codecs de vídeo y codecs de audio se utilizan para manejar vídeo y audio, y los diferentes codecs ofrecen diferentes niveles de compresión y calidad. Un formato de contenedor se utiliza para almacenar y transmitir el vídeo y el audio codificado juntos. Muchos codecs y formatos de contenedor existe, e incluso hay más combinaciones de ellos. Para su uso en la web, sólo un puñado de combinaciones son relevantes.

- -

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.)

- -

Para hacer un vídeo de HTML5, que trabaja en las nuevas versiones de los principales navegadores, puede usar el elemento {{HTMLElement("source")}} para reproducir en formatos WebM o el formato AAC MPEG H.264, usando el elemento de origen de esta manera:

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

WebM

- -

El formato WebM se basa en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audio Vorbis. WebM es soportado nativamente en Gecko (Firefox), Chrome y Opera, y el soporte para el formato se puede agregar a Internet Explorer y Safari mediante la instalación de un add-on.

- -

Declaración de Microsoft sobre por qué IE9 no tiene soporte WebM nativo.

- -

El formato WebM, específicamente el códec de vídeo VP8, habría sido acusado de infracción de derechos de patente por un grupo de empresas de responder a una llamada por la MPEG LA para la formación de un consorcio de patentes, pero MPEG LA se ha comprometido a licenciar las patentes de Google bajo "transferible y de licencia gratuita". Esto significa, efectivamente, que todas las patentes conocidas en el formato WebM tienen licencia para todo el mundo de forma gratuita.

- -

Gecko reconoce los siguientes tipos MIME para los archivos WebM:

- -
-
video/webm
-
Un archivo WebM que es capaz de reproducir video (y es posible audio también)
-
audio/webm
-
Un archivo WebM que contiene audio unicamente.
-
- -

Ogg Theora Vorbis

- -

El formato contenedor Ogg con el códec de vídeo Theora y el códec de audio Vorbis es compatible con Gecko (Firefox), Chrome y Opera, y el soporte para el formato se puede agregar a Safari mediante la instalación de un add-on. El formato no es compatible en Internet Explorer.

- -

WebM es preferente, generalmente sobre Theora Ogg Vorbis cuando esté disponible, ya que proporciona una mejor relación de compresión para la calidad y se apoya en más navegadores. El formato Ogg sin embargo, puede ser utilizado para apoyar versiones de los navegadores más antiguos, en los que aún no se dispone de soporte para WebM.

- -

La situación de las patentes de Theora es similar a la de WebM.

- -

Usted puede aprender más sobre la creación de medios Ogg leyendo the Theora Cookbook.

- -

Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:

- -
-
audio/ogg
-
Un archivo Ogg que contiene sólo audio.
-
video/ogg
-
Un video que contiene el archivo ogg (y posiblemente audio también).
-
application/ogg
-
Un archivo Ogg con el contenido especificado. Utilizando uno de los otros dos tipos MIME es preferido, pero se puede usar esta opción si usted no sabe lo que el contenido del fichero es.
-
- -

Ogg Opus

- -

El contenedor Ogg también puede contener audio codificado con el códec Opus. El apoyo a esta disponible en Gecko 15.0 {{ geckoRelease("15.0") }} y superior.

- -

MP4 H.264 (AAC o MP3)

- -

El formato contenedor MP4 con el códec de vídeo H.264 y, o bien el códec de audio AAC o el códec de audio MP3 es nativamente compatible con Internet Explorer, Safari y Chrome, pero Chromium y Opera no son compatibles con el formato. Firefox pronto admite el formato, pero sólo cuando un decodificador de terceros esté disponible.

- -

Los formatos MPEG están cubiertos por patentes, que no tienen licencia libre. Todas las licencias necesarias se pueden comprar de MPEG LA. Desde H.264 no está en un formato libre de regalías, no es apto para la plataforma web de código abierto, de acuerdo con Mozilla [1, 2], Google [1, 2] y Opera. Sin embargo, los formatos libres no son compatibles con Internet Explorer y Safari, Mozilla ha decidido apoyar el formato de todos modos, y Google no cumplió su promesa de eliminar el soporte para él en Chrome.

- -

WAVE PCM

- -

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".

- -
Nota: Consulte RFC 2361 para el registro códec WAVE.
- -

Gecko reconoce los siguientes tipos MIME en archivos de audio WAVE:

- - - -

Compatibilidad en navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support3.0{{ CompatGeckoDesktop("1.9.1") }}9.010.503.1
<audio>: WAVE, PCM{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}{{ CompatNo() }}3.1
<audio>: WebM, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}10.603.1 (must be installed separately)
<audio>: Ogg, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (must be installed separately, e.g. XiphQT)
<audio>: MP4, MP3 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		-

Partial (see below)

- 		9.0{{ CompatNo() }}3.1
<audio>: MP4, AAC -

{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)

- 		-

Partial (see below)

- 		9.0{{ CompatNo() }}3.1
<audio>: Ogg, Opus27.0{{ CompatGeckoDesktop("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
<video>: WebM, VP8, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}9.0 (must be installed separately, e.g. WebM MF)10.603.1 (must be installed separately, e.g. Perian)
<video>: Ogg, Theora, Vorbis{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatNo() }}10.503.1 (must be installed separately, e.g. XiphQT)
<video>: MP4, H.264, MP3 -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (see below)9.0{{ CompatNo() }}3.1
<video>: MP4, H.264, AAC -

{{ CompatVersionUnknown() }} (Not in Chromium)

- 		Partial (see below)9.0{{ CompatNo() }}3.1
any other format{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.1 (plays all formats available via QuickTime)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Para evitar problemas de patentes, el apoyo a MPEG 4, H.264, MP3 y AAC no está integrado directamente en Firefox. En su lugar, se basa en el apoyo del sistema operativo o hardware. Firefox soporta estos formatos en las siguientes plataformas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PlataformaVersión de Firefox
Windows 7+21.0
Windows Vista22.0
Android20.0
Firefox OS15.0
OS X 10.722.0
- - - -

Véase también

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

Firefox permite que código JavaScript instale plugins de motores de búsqueda, y soporta dos formatos de plugin de motores de búsqueda: OpenSearch, y Sherlock. -

-
Nota: a partir de Firefox 2, OpenSearch es el formato preferido de búsqueda para Firefox.
-

Cuando código JavaScript intenta instalar un plugin de búsqueda, Firefox presenta una alerta pidiendo permiso al usuario para instalar el plugin. -

-

Instalando plugins de OpenSearch

-

Para instalar un plugin de OpenSearch, necesita utlilizar el métodowindow.external.AddSearchProvider() DOM . El síntaxis de éste método es: -

-
window.external.AddSearchProvider(engineURL);
-
-

Donde engineURL es la URL absoluta del archivo XML para el plugin del motor de búsqueda. -

-
Nota: El soporte de OpenSearch esta sólo disponible en Firefox 2 y posterior.
-

Instalando plugins de Sherlock

-

Para instalar un plugin de Sherlock, necesitará llamar window.sidebar.addSearchEngine(), el síntaxis para el mismo es: -

-
window.sidebar.addSearchEngine(engineURL, iconURL, suggestedName, suggestedCategory);
-
- -

Para detalles de Sherlock, visite http://developer.apple.com/macosx/sherlock/ -

-

Detección de la capacidad del motor de búsqueda del navegador

-

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

-
function installSearchEngine() {
- if (window.external && ("AddSearchProvider" in window.external)) {
-   // Firefox 2 and IE 7, OpenSearch
-   window.external.AddSearchProvider("http://example.com/search-plugin.xml");
- } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) {
-   // Firefox <= 1.5, Sherlock
-   window.sidebar.addSearchEngine("http://example.com/search-plugin.src",
-                                  "http://example.com/search-icon.png",
-                                  "Search Plugin", "");
- } else {
-   // Sin soporte para motores de búsqueda (IE 6, Opera, etc...).
-   alert("Sin soporte para motores de búsqueda");
- }
-}
-
-
-
-{{ 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 ---- -

Como reacción a los problemas asociados con la estrategia de desarrollar sitios web separados para los móviles y los escritorios, una idea relativamente nueva — aunque de hecho es bastante vieja— 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 diseño web adaptable —o «responsivo»—. Al igual que la estrategia de sitios separados, el diseño web adaptativo tiene aspectos positivos y negativos.

-

Las ventajas

-

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.

-

Se ahorra tiempo y dinero, ya que no es necesario mantener sitios web separados para los diferentes dispositivos.

-

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 .

-

El diseño adaptativo no se preocupa por los agentes de usuario.

-

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.

-

Las desventajas

-

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.

-

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.

-

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.

-

Cuándo es adecuado elegir esta opción

-

teixido_responsive-300x177.pngComo 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!

-

Ejemplos

-

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:

- -

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  crear primero un diseño de pantalla pequeñ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 aquí.

-

Métodos de desarrollo web para móviles

-

Consulta los siguientes artículos de antecedentes y otros enfoques para el desarrollo de plataformas móviles.

- -

Véase también

- -
-

Original document information

-

Originally published on 27 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 3 - Responsive Design", by Jason Grlicky.

-
-

 

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

Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.

- - - -

Reconocible

- -

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.

- -

Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en la web mediante tecnologías patentadas como Open Graph, que proporciona un formato para especificar metadatos similares en el <head> de HTML usando metaetiquetas.

- -

El estándar web relevante aquí es el Manifiesto de aplicación web, 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.

- - - -

Instalable

- -

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.

- -

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ñadir a la página de inicio.

- -

Enlazable

- -

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.

- -

Independencia de la red

- -

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:

- - - -

Esto se logra mediante una combinación de tecnologías: Service Workers para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la Cache API 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 Web Storage y IndexedDB para almacenar datos de la aplicación sin conexión.

- -

Progresiva

- -

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 mejora progresiva.

- -

Reconectable

- -

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 Service Workers para controlar páginas, el Web Push API para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker, y la API de notificaciones para generar notificaciones del sistema para ayudar a atraer a los usuarios cuando no están en el navegador.

- -

Adaptable

- -

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.

- -

Seguro

- -

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 (ejemplo).

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

Los Custom Elements son una característica que permite crear tus propios elementos HTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los Web Components, pero también pueden ser utilizados independientemente.

- -
-

Nota: Los Custom elements 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.

-
- -

Puede no estar claro por qué se creó la nueva capacidad de elementos personalizados, ya que ya era posible crear una etiqueta como <mytag> y aplicarle estilo con CSS, luego utilizar scripts para darle comportamiento. Una ventaja que tienen los custom elements son las reacciones de ciclo de vida (lifecycle reactions), 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.

- -

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 <button>,  utilizando la sintaxis  <button is="my-button">;  estos se llaman elementos integrados personalizados.

- -

Métodos de custom element

- -

Los Custom elements tienen los siguientes métodos que dictan su comportamiento:

- -
-
constructor()
-
Llamado cuando el elemento es creado o actualizado
-
connectedCallback()
-
Llamado cuando el elemento se es insertado en el documento, incluyéndose en un árbol shadow
-
disconnectedCallback()
-
Llamado cuando el elemento es eliminado de un documento
-
attributeChangedCallback(nombreDelAtributo, antiguoValor, nuevoValor, dominio)
-
Llamado cuando un atributo es cambiado, concatenado, eliminado o reemplazado en el elemento. Sólo llamado sobre atributos observados.
-
adoptedCallback(antiguoDocumento, nuevoDocumento)
-
Llamado cuando un elemento es adoptado en otro nuevo documento
-
- -

Ejemplo

- -

Los custom elements necesitan usar la sintaxis de clase introducida en las versiones modernas de JavaScript.

- -

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

Archivo JS:

- -
// Declaración de un custom element que hereda de HTMLElement
-class XProduct extends HTMLElement {
-  constructor() {
-    // Siempre debe llamarse primero al constructor padre
-    super();
-
-    // Se crea el shadow root
-    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);
-
- -

Archivo 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;
-}
-
- -

A continuación se muestra el ejemplo en vivo de lo anterior:

- -

{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}

- -

Atributos Observados

- -

Para ser notificado cuando un atributo cambia, se debe definir una lista de atributos observados al inicializar el elemento, poniendo un getter estático observedAttributes en la clase del elemento que devuelve un array de nombre de atributos.

- -

Archivo 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);
-
- -

Archivo HTML:

- -
<hello-element name="Anita"></hello-element>
- -

A continuación está el ejemplo en vivo de lo anterior:

- -

{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}

- -

Especificaciones

- -

Los Custom Elements están definido en la siguiente especificación:

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
The HTML Standard: Custom elementsLS 
- -

Recursos

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

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.

- -

Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es un empuje al campo maxVersion en el manifiesto de instalación, y la extensión está disponible en el servidor addons.mozilla.org, ¡no necesitas actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para ajustar maxVersion. De esta manera, puedes evitar el trabajo de tener que volver a revisar tu extensión.

- -

Paso 1: Actualiza el manifiesto de instalación

- -

El primer paso —y para muchas extensiones, el único que será necesario— es actualizar el archivo install.rdf dentro del manifiesto install manifest para indicar la compatibilidad con Firefox 3.

- -

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:

- -
 <em:maxVersion>2.0.*</em:maxVersion>
-
- -

Cámbiala para indicar compatibilidad con Firefox 3:

- -
 <em:maxVersion>3.0.*</em:maxVersion>
-
- -

A continuación, reinstala la extensión.

- -

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.*".

- -
-

Nota: 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 maxVersion 3.0.* a los usuarios, hasta que salgan las versiones RC (release candidate). Durante el periodo Beta, deberías usar maxVersion 3.0b5.

-
- -

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.

- -
-

Nota: Si tu extensión aún usa un script Install.js en lugar de un install manifest, necesitas hacer la transición a un manifiesto de instalación ahora. Firefox 3 ya no implementa scripts install.js en archivos XPI.

-
- -

Agregar localizaciones al manifiesto de instalación

- -

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 Localizing extension descriptions para más detalles.

- -

Paso 2: Asegúrate de suministrar actualizaciones seguras

- -

Si tienes la extensión en tu propio servidor y no en un servidor seguro como addons.mozilla.org, 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 Securing Updates para más información.

- -

Paso 3: Debes estar al tanto de los cambios en las API

- -

Muchas API han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:

- -

DOM

- - -

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they - can be inserted into the current document. For more on the Node.ownerDocument issues, see the - W3C DOM FAQ.

- -

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.

- -

Marcadores e Historial

- -

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 Catálogo. Ver Guía para la migración a catálogo para más detalles de cómo actualizar tus extensiones en el uso de las API de catálogo.

- -

Administrador de descargas

- -

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 Storage. 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 nsIDownloadManager, nsIDownloadProgressListener, y Monitoring downloads para más información.

- -

Administrador de contraseñas

- -

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.

- - - -

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 Creating a Login Manager storage module para más detalles.

- -

Ventanas emergentes (Menús, Menús contextuales, Tooltips y Paneles)

- -

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 using Popups, detallando cómo funciona este sistema. Una cosa a tener en cuenta, es que se desaconseja el uso de popup.showPopup en favor de los nuevos popup.openPopup y popup.openPopupAtScreen.

- -

Autocompletado

- -

El método handleEnter() del interfaz nsIAutoCompleteController 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.

- -

Analizador del DOM (DOMParser)

- - - -

Interfaces eliminados

- -

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:

- - - -

Paso 4: Comprueba los cambios importantes en el chrome

- -

Ha habido un cambio pequeño en el chrome que puede requerir cambis en tu código. Se ha añadido un nuevo vbox 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.

- -

Por ejemplo, si has recubierto algún elemento del chrome antes de la barra de estado de esta manera:

- -
<window id="main-window">
-  <something insertbefore="status-bar" />
-</window>
-
- -

Debes cambiar tu código a algo como:

- -
<vbox id="browser-bottombox">
-  <something insertbefore="status-bar" />
-</vbox>
-
- -

O usar la siguiente técnica para hacer que el recubrimiento funciones tanto en Firefox 2 como Firefox 3:

- -
<window id="main-window">
-  <vbox id="browser-bottombox" insertbefore="status-bar">
-    <something insertbefore="status-bar" />
-  <vbox>
-</window>
-
- -
-

Nota: Este cambio es efectivo a partir de Firefox 3 beta 4.

-
- -

Otros cambios

- -

Añade los cambios sencillos que tengas que realizar al actualizar tu extensión para que funciones con Firefox 3.

- - - -

Es necesario documentar los interfaces a y los relacionados con sus hilos.

- - diff --git "a/files/es/orphaned/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" "b/files/es/orphaned/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" deleted file mode 100644 index 37200af055..0000000000 --- "a/files/es/orphaned/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_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 ---- -

 

-

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).

-

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:

- -

Descargar el ejemplo

-

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.

- -

Actualizar el manifiesto de instalación

-

El primer paso es revisar el manifiesto de instalación para indicar que puede ser instalado en Thunderbird y Sunbird. Esto se hace añadiendo nuevas etiquetas <targetApplication> al fichero install.rdf, como esta:

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

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.

-

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.

-

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 manifiesto chrome entra en acción.

-

Actualizar el manifiesto chrome

-

¿Recuerdas el primer artículo de la serie 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.

-

Para Firefox, sobrecargamos el browser.xul, que describe la ventana del navegador de Firefox. Necesitamos añadir líneas al manifiesto para Thunderbird y Sunbird, así:

-
# Thunderbird
-overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul
-
-# Sunbird
-
-overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul
-
-

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 stockwatcher2.xul.

-

Con estos dos simples giros, esta extensión funcionará en las tres aplicaciones y lo harà exactamente de la misma forma en todas ellas.

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\303\261as_del_navegador/index.html" "b/files/es/orphaned/code_snippets/pesta\303\261as_del_navegador/index.html" deleted file mode 100644 index cbb4016861..0000000000 --- "a/files/es/orphaned/code_snippets/pesta\303\261as_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 ---- -

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.

-

Cada fragmento normalmente incluye algún código para ejecutarse al inicio, esto se implementa mejor usando un "listener" al cargar la página. 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 Trabajando con ventanas en código chrome para más detalles.

-

Múltiples significados para la palabra "browser"

-

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.

diff --git "a/files/es/orphaned/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" "b/files/es/orphaned/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" deleted file mode 100644 index c53b748bc7..0000000000 --- "a/files/es/orphaned/creaci\303\263n_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 ---- -

-

« AnteriorSiguiente »

-
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. XXX mediawiki...XXX sucks

- -

Creación de Componentes en C++

- -

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 DLL en un sistema Windows o una DSO en Unix).

- -

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.

- -

Un Componente en la Plataforma XPCOM

- -

Image:component-internals-framework.png

- -

Cuando construyes un componente o un módulo y lo compilas dentro de una biblioteca, debe exportar un método llamado NSGetModule. Esta función NSGetModule 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.

- -

Como ilustra Un Componente en la Plataforma XPCOM, además del punto de acceso NSGetModule, están las interfaces nsIModule y nsIFactory 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 XPCOM Glue). 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.

- -
-

¿Pero Dónde Están los Componentes?

- -

Los componentes residen en módulos y esos módulos son definidos en bibliotecas compartidas típicamente situadas en el directoriocomponents de una aplicación XPCOM.

- -

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.

- -

Otra vista aún más básica de esta relación de componentes a archivos e interfaces que los definen se muestra en Vista de Papel Cebolla de la creación del Componente XPCOM 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.

-
- -

Inicialización de XPCOM

- -

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 puedeinicializar 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.

- -

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 directoriocomponents inspecciona cuando busca componentes XPCOM. Así es como se usa el API, por ejemplo, en elGecko Runtime Environment (GRE).

- -
-

Inicialización de XPCOM

- -

Los seis pasos básicos para arrancar XPCOM son los siguientes:

- -
    -
  1. La aplicación inicia XPCOM.
    2. -
  2. XPCOM envía una notificación que inicia el arranque.
    3. -
  3. XPCOM encuentra y procesa elmanifiesto del componente (ve Manifiestos de Componentes abajo).
    4. -
  4. Si hay nuevos componentes, XPCOM los registra: -
      -
    1. XPCOM llama el arranque del autoregistro.
      2. -
    2. XPCOM registra los nuevos componentes.
      3. -
    3. XPCOM llama el fin del autoregistro.
      4. -
    -
    5. -
  5. Arranque completo de XPCOM: XPCOM notifica que ha iniciado.
    6. -
- -

Los manifiestos de Componentes y bibliotecas de tipos son descritos en la siguiente sección, Registro de Manifiestos de XPCOM.

-
- -

Registro de Manifiestos de XPCOM

- -

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:

- -
Manifiestos de Componente
- -

Cuando XPCOM inicia por primera vez, busca elmanifiesto de componentes 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 compreg.dat y existe en el directoriocomponents, 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.

- -
-

Manifiestos de Componentes

- -

El manifiesto de componente es una correlación de archivos a componentes y de componentes a clases. Especifica la siguiente información:

- - - -

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).

-
- -
Manifiestos de Bibliotecas de Tipos
- -

Otro archivo importante que lee XPCOM es elmanifiesto de bibliotecas de tipos. Este archivo tambien se localiza en el directoriocomponents y se llama xpti.dat. 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.

- -
-

Manifiestos de Bibliotecas de Tipos Los manifiestos de bibliotecas de tipos contienen la siguiente información:

- - -
- -

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.

- -

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.

- -

Métodos de Registro en XPCOM

- -
-

What Is XPCOM Registration?

- -

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 regxpcom program, or you can use the autoregistration methods in the Service Manager to find and register components in a specified components directory:

- - - -

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.

-
- -

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 useXPInstall, 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 regxpcom, which is built as part of Mozilla and is also available in the Gecko SDK. regxpcom registers your component in the default component registry.

- -

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 regxpcom, nsIComponentRegistrar. 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.

- -

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 nsIObserver interface that handles this notification is discussed in Starting WebLock.

- -

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 XPCOM Initialization section in this chapter describes registration in more detail.

- -

Autoregistro

- -

The termautoregistration is sometimes used synonymously with registration in XPCOM. In the What Is XPCOM Registration? note, we describe the three ways you can register components with XPCOM. Sometimes, applications use the nsIComponentRegistrar 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 asautoregistration. You should always know what the installation and registration requirements are for the applications that will be using your component.

- -

El Proceso de Paro

- -

When the application is ready to shutdown XPCOM, it calls NS_ShutdownXPCOM. When that method is called, the following sequence of events occurs:

- -
    -
  1. XPCOM fires a shutdown notification to all registered observers.
    2. -
  2. XPCOM closes down the Component Manager, the Service Manager and associated services.
    3. -
  3. XPCOM frees all global services.
    4. -
  4. NS_ShutdownXPCOM returns and the application may exit normally.
    5. -
- -
-

The Unstoppable Shutdown

- -

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., startShutdown()) which allows for cancellation.

- -

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 nsIServiceManager 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.

-
- -

Component Loaders

- -

Components can be written in many languages. So far this book has been focusing on "native components," shared libraries exporting a NSGetModule symbol. But if there is acomponent loader for Javascript installed, then you can also write a JavaScript component.

- -

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 nsIModule interface on behalf of each component. It is the Component Loader's responsibility to provide scriptable component support.

- -

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.

- -

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.

- -

Tres Partes de una Biblioteca de Componentes XPCOM

- -

XPCOM is like an onionor a parfait! Everybody likes parfaits. XPCOM components have at least three layers. From the innermost and moving outward these layers include:

- - - -

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.

- -

One layer above the core object is the factory code. The factory object provides a basic abstraction of the core XPCOM object. An Overview of XPCOM 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.

- -

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, NSGetModule(). This point of entry may fan out to any number of factories, and from there, to any number of XPCOM objects.

- -

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 nsIFactory interface. The module layer is represented by the nsIModule interface. Most component libraries only need these two interfaces, along with the nsISupports interface, to have XPCOM load, recognize, and use their core object code.

- -

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.

- -

XPCOM Glue

- -

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 AVL trees. Instead of writing your own linked list, it's tempting to reuse nsVoidArray or another publicly available class, but this might be a fatal mistake. At any time the class can change and give you unexpected behavior.

- -

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.

- -

La Biblioteca Glue

- -

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.

- -

The smart pointer class, nsCOMPtr, for example, which can make reference counting a lot less tedious and error-prone, is not actually frozen, and neither are nsDebug, a class for aiding in tracking down bugs, or nsMemory, 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.

- -

XPCOM Glue and Tools

- -

Image:xpcom-glue-tools.png

- -

This is the glue library. It provides a bridge, or "glue" layer, between your component and XPCOM.

- -

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.

- -

Clases de Cadenas de XPCOM

- -

The base string types that XPCOM uses are nsAString and nsACString. These classes are described in the Mozilla String Guide (see Gecko Resources).

- -

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). nsEmbedString and nsEmbedCString 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 nsAString/nsACString string classes.

- -

In your own component, you can go "slim" and restrict yourself to the nsEmbedString or go "hog wild" and use all of the functionality of the other strings. WebLock restricts itself to using the simple nsEmbedString family of classes.

- -

String Classes and XPCOM

- -

Image:strings-in-xpcom.png

- -

The glue library provides stub functions for the public functions that XPCOM provides (see xpcom/build/nsXPCOM.h). 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.

-

« AnteriorSiguiente »

-

-

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 Open Publication License, 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.

-

diff --git "a/files/es/orphaned/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" "b/files/es/orphaned/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" deleted file mode 100644 index f9b6448f60..0000000000 --- "a/files/es/orphaned/creaci\303\263n_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 ---- -

Este es un libro acerca de Gecko, y cómo crear componentes XPCOM 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. -

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

-

Quién debe leer este Libro

-

Creación de Componentes XPCOM está dirigido a desarrolladores C++. Aunque puedes crear componentes XPCOM en Javascript y otros lenguajes y aunque tal vez puedas seguir el libro como programador C, el código de implementación está escrito en C++ y mucha de la discusión de cómo hacer tu código dentro 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. -

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

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 En lo que Estaremos Trabajando de este tutorial. -

-
-

A pesar de lo que dice la documentación, XPCOM no debe ser usado para hacer NPAPI plugins 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 Scripting plugins. -

-
-

Organización del Tutorial

-

La siguiente lista da una reseña de de los pasos que seguiremos para crear un componente XPCOM llamado Weblock, 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. -

- -

Continuando con los Ejemplos

-

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

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 Weblock 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). -

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, Configurar el Gecko SDK. -

-

Convenciones

-

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

- -
Formato Descripción
bold nombres de componentes aparecen en negro en el texto
monospace referencias al código, nombres de interfaces y miembros de interfaces (ejm. createInstance()) aparecen en letra monospaced. Líneas de código aparecen en cajas separadas. También nombres de archivos y directorios aparecen en letra monospaced.
itálica variables 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.
link Referencias a otras secciones, imágenes y tablas también son links a esas secciones.
-

Agradecimientos

-

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

diff --git "a/files/es/orphaned/creando_una_extensi\303\263n/index.html" "b/files/es/orphaned/creando_una_extensi\303\263n/index.html" deleted file mode 100644 index ec7320a54c..0000000000 --- "a/files/es/orphaned/creando_una_extensi\303\263n/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 ---- -

Introducción

-

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

-
-

Nota Este tutorial sobre el desarrollo de una extensión es para la versión 1.5 de Firefox . Existen otros para versiones anteriores.

-
-

Preparando el Entorno de Desarrollo

-

Las extensiones se distribuyen en archivos comprimidos en formato ZIP, o en paquetes, con extensión xpi (se pronuncia “zippy”). Los archivos XPI contienen el siguiente código:

-
extension.xpi:
-              /install.rdf
-              /components/*
-              /components/cmdline.js
-              /defaults/
-              /defaults/preferences/*.js
-              /plugins/*
-              /chrome.manifest
-              /chrome/icons/default/*
-              /chrome/
-              /chrome/content/
-
-
-

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 Addons de Firefox 1.5.

-

Aclarado esto comenzamos. Crea una carpeta para tu extensión en algún lugar de tu disco duro, e.j. C:\extensions\my_extension\ o ~/extensions/my_extension/. (Nota: usa todos los caracteres en minúscula) Dentro de esta carpeta creamos otra carpeta llamada chrome, dentro de chrome creamos otra carpeta llamada content. (En sistemas Unix podemos crear los 3 directorios con el siguiente comando mkdir -p chrome/content dentro del directorio de raíz de la extensión.)

-

Dentro de la raíz de la carpeta extensión, junto a la carpeta chrome, creamos dos archivos de textos vacíos, uno llamado chrome.manifest y el otro install.rdf.

-

Deberías tener algo así:

-
<carpeta extension>\
-          install.rdf
-          chrome.manifest
-          chrome\
-             content\
-
-

Puedes encontrar más tips (ideas) sobre la configuración del ambiente de desarrollo en Mozillazine Knowledge Base.

-

Crear el manifiesto de la instalación

-

Abre el archivo llamado install.rdf que creaste en la carpeta raíz de tu extensión y escribe lo siguiente en él:

-
<?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>sample@foo.net</em:id>
-    <em:version>1.0</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>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
-        <em:minVersion>1.0+</em:minVersion>
-        <em:maxVersion>1.5.0.*</em:maxVersion>
-      </Description>
-    </em:targetApplication>
-
-    <!-- Front End MetaData -->
-    <em:name>¡Ejemplo!</em:name>
-    <em:description>Una extensión de prueba</em:description>
-    <em:creator>Tu nombre aquí</em:creator>
-    <em:homepageURL>http://www.foo.com/</em:homepageURL>
-  </Description>
-</RDF>
-
- - -

Mira Instalar el manifest para una relación completa de las propiedades tanto obligatorias como opcionales.

-

Guarda el archivo.

-

Ampliando el navegador con XUL

-

La interfaz de usuario de Firefox está escrita en XUL y Javascript. XUL 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.

-

El navegador está definido en un archivo XUL llamado browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar que incluye content/browser/browser.xul). En el archivo browser.xul podemos encontrar la barra de estado, definida en aproximadamente estos términos:

-
<statusbar id="status-bar">
- ... <statusbarpanel>s ...
-</statusbar>
-
-

<statusbar id="status-bar"> es un "punto de anclaje" para una capa XUL.

-

Capas XUL

-

Capas XUL 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.

-

Ejemplo de documento de capa XUL

-
<?xml version="1.0"?>
-<overlay id="sample"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
- <statusbar id="status-bar">
-  <statusbarpanel id="my-panel" label="Hello, World"/>
- </statusbar>
-</overlay>
-
-

El <statusbar> llamado status-bar indica el punto de anclaje dentro de la ventana del navegador donde lo queremos incluir.

-

El <statusbarpanel> hijo es un nuevo elemento que queremos insertar en el punto de anclaje.

-

Copia el código de ejemplo arriba mostrado y guardaló en un archivo llamado sample.xul dentro de la carpeta chrome/content que creó.

-

Para más información sobre elementos de inserción y modificar la interfaz de usuario empleando Capas, mira más abajo.

-

Chrome URIs

-

Los archivos XUL forman parte de "Chrome Packages" - paquetes de componentes de interfaz del usuario, los cuales se cargan a través de la dirección chrome:// URIs. Más que cargar el navegador desde el disco utilizando un (archivo) file:// 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.

-

La ventana del navegador es: chrome://browser/content/browser.xul ¡Prueba a teclear esta dirección URL en la barra de navegación de Firefox!

-

Los Chrome URIs constan de varios componentes:

- -

Por lo tanto, chrome://foo/skin/bar.png carga el archivo bar.png de la sección skin, del tema foo.

-

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).

-

Creando un Chrome manifest

-

Para más información sobre el Chrome manifest y las propiedades que soporta, mira la referencia Chrome Manifest.

-

Abre el archivo llamado chrome.manifest que creaste en el directorio chrome en la raìz de la jerarquía de la carpeta orìgen de la extensión

-

Agrega este código:

-
content     sample    chrome/content/
-
-

(¡No te olvides de la barra oblicua, "/"! sin ella, la extensión no se cargará.)

-

Esto especifica lo siguiente:

-
    -
  1. Tipo de material dentro de un paquete chrome.
    2. -
  2. 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) }})
    3. -
  3. Localización de los archivos del paquete chrome.
    4. -
-

Esta línea dice que para obtener una muestra del paquete chrome, debemos encontrar los archivos de content en la ruta chrome/content, la cual es relativa a la ruta de chrome.manifest.

-

Nótese que el contenido, los archivos de idioma y los del skin, deben mantenerse dentro de carpetas llamadas content (para contenido), locale (para idioma) y skin dentro de tu subdirectorio chrome.

-

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.

-

Registrar un Overlay

-

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 chrome.manifest:

-
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
-
-


- Esto le dice a Firefox que fusione sample.xul con browser.xul cuando browser.xul se cargue.

-

Pruebas

-

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.

-
    -
  1. Abre tu carpeta Profiles y adentrate en el perfil con el que deseas trabajar (e.g. Firefox/Profiles/<profile_id>.default/).
    2. -
  2. Abre la carpeta extensions (creala si ésta no existe)
    3. -
  3. Crea un nuevo archivo de texto, y añade la ruta de la carpeta que contiene tu extensión, e.g. C:\extensions\my_extension\ o ~/extensions/my_extension. Guarda el archivo con el identificador de tu extensión como nombre de archivo, e.g. sample@foo.net
    4. -
-

¡¡Ahora estás preparado para comprobar tu extensión!!

-

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.

-

Ahora puedes retornar al archivo .xul y realizar cambios, reinicia Firefox y éstos se verán reflejados.

-<center> -

Image:Helloworld_tools_menu.PNG

-

Image:Helloworld_extensions_wnd.PNG

-</center> -

Empaquetado

-

Ahora que tu extensión funciona, puedes empaquetarla para su distribución e instalación.

-

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á.

-

Ahora sube el archivo .xpi a tu servidor, asegurándote de que se sirve con el tipo mime application/x-xpinstall. Haciendo un hipervínculo al archivo puedes permitir a la gente que descargue e instale tu extensión en Firefox.

-

Usando addons.mozilla.org

-

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!

-

¡Visita http://addons.mozilla.org/developers/ para crear una cuenta y comenzar a distribuir tu extensión!

-

Nota: Tu extensión será aceptada y descargada más rápidamente si tiene una buena descripción y algunas imágenes en uso.

-

Colocación de extensiones en el registro de Windows

-

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 Agregar una Extensión usando el Registro de Windows para más información.

-

Más sobre las capas XUL

-

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:

- -
<statusbarpanel position="1" .../>
-
-<statusbarpanel insertbefore="other-id" .../>
-
-<statusbarpanel insertafter="other-id" .../>
-
-

Creando nuevos componentes de la interfaz de usuario

-

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.

-

Ver la guía XUL contiene más recursos para desarrolladores XUL.

-

Archivos por defecto

-

Los archivos por defecto son utilizados para crear un perfil de usuario y se crean en la carpeta defaults/ que se encuentra dentro de la carpeta raíz de tu extensión. Los archivos .js se deben almacenar dentro de defaults/preferences/ - 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 Preferences API.

-

Componente XPCOM

-

Firefox soporta el uso del componente XPCOM en extensiones. Puedes crear tus propios componentes fácilmente usando JavaScript o C++ (usando el Gecko SDK).

-

Coloca todos tus archivos .js o .dll en el directorio components/- para que sean automáticamente registrados la primera vez que inicie Firefox después de instalada la extensión.

-

Para más información revisa How to Build an XPCOM Component in Javascript y el libro Creating XPCOM Components.

-

Comandos de la aplicación

-

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:

-
 firefox.exe -myapp
-
-

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(). Ver Chrome: Command Line o visitar forum discussion para más detalles.

-

Ubicación

-

Para permitir más de un lenguaje, debes separar las cadenas del contenido usando entities y string bundles. ¡Es mucho más fácil de hacer esto cuando estás desarrollando tu extensión que volver y hacerlo luego!

-

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:

-
locale sample sampleLocale chrome/locale/
-
-

Para crear valores de atributos ubicables en XUL, pones los valores en un archivo .ent (o un .dtd), el cual deberá ponerse en el directorio locale y verse así:

-
<!ENTITY  button.label     "Clickeame!">
-<!ENTITY  button.accesskey "C">
-
-

Y entonces inclúyelo en la parte superior del documento XUL (pero debajo de: "<?xml version"1.0"?>") quedando asi:

-
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">
-
-

Donde window es el localName del elemento raíz del documento XUL, y el valor de la propiedad SYSTEM es la URI de chorme al archivo entity. Para nuestra extensión de ejemplo, el elemento de la raíz es overlay.

-

Para usar entities, tu XUL debe verse asi:

-
<button label="&button.label;" accesskey="&button.accesskey;"/>
-
-

El registro de Chrome se asegurara que el archivo entity ha sido cargado del paquete correspondiente a la localizacion elegida.

-

Para las lineas que usarás en tu script, crea un archivo .properties; un archivo de texto que contendrá estas líneas:

-
key=value
-
-

Entonces usa el tag nsIStringBundleService/nsIStringBundle o el tag <stringbundle> para cargar los valores en el script.

-

Comprender el navegador

-

Utiliza DOM Inspector (no es parte de la instalación Estandar de Firefox, debes reinstalar seleccionando instalación personalizada y elegir Herramientas de Desarrollo 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.

-

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.

-

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.

-

Depurar extensiones

-

Herramientas analitícas para Depurar (Debugging)

- -

printf debugging

- -

dump("string") (ver el enlace para detalles)

- -

Depuración avanzada

- - -

Guía Rápida

-

Otro tutorial desde MozillaZine Knowledge Base, también puedes bajar este archivo para usarlo como base en la creación de tus extensiones helloworld.zip.

diff --git "a/files/es/orphaned/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" "b/files/es/orphaned/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" deleted file mode 100644 index 2cca183f1b..0000000000 --- "a/files/es/orphaned/crear_una_extensi\303\263n_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 ---- -

 

- -
Nota: 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.
- -

Existe una infinidad de documentación sobre la creación de extensiones para Firefox. Sin embargo, actualmente todos esos documentos asumen que estás desarrollando tu extensión utilizando únicamente XUL y JavaScript. 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:

- - - -

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.

- -

También debería enfatizar que no 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 XPCOM o dos, este artículo será algo excesivo y puede que te interese mirar esta guí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.

- -

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.

- -

Y Bambi y Mozilla se encontraron...

- -

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.

- -

Plataformas Windows

- -

La primera vez que compilé Mozilla utilicé esta guí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 guía comprensiva rápida, 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.

- -

Otras plataformas

- -

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 aquí.

- -

Estructurar tu proyecto

- -

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 extensions de Firefox y así sucesivamente. Así pues, lo mejor para nosotros es aprovecharnos de esta infraestructura para construir nuestra extensión.

- -

Antes que nada, elige un nombre con gancho para tu extensión y crea un directorio con ese nombre bajo el directorio /mozilla/extensions/. Utiliza sólo minísculas. Deberías ver un montón de otros directorios (inspector/, reporter/, etc...) al mismo nivel del árbol de directorios.

- -

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 Makefile.in. 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.

- -

Anatomía de una simple extensión en C++

- -

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.

- -

El caso más simple ocurre cuando un componente va a consistir en un único directorio principal con dos subdirectorios, public/ y src/. El directorio principal y cada subdirectorio deben contener un Makefile.in (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.

- -

Así pues, aquí tienes el makefile principal más básico y simplón que te puedas encontrar (Makefile.in en el directorio principal de la extensión):

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

La descripción detallada del proceso de creación, describiendo las opciones clave de este makefile pueden ser encontradas aquí. Tanto MODULE como XPI_NAME 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). INSTALL_EXTENSION_ID 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 XPI_PKGNAME 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 (/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/).

- -

Toda extensión debe incluir un fichero install.rdf 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:

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

Existe una descripción detallada del formato del fichero install.rdf. Utiliza la variable DIST_FILES del makefile para decirle a make que copie el fichero en el directorio de la extensión y (opcionalmente) el fichero XPI.

- -

Interfaces públicas

- -

El directorio public/ contiene todas las interfaces necesarias para que otros módulos puedan utilizarlas. Éstas pueden ser ficheros IDL que describan interfaces XPCOM, 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.

- -

El makefile en el directorio public/ debería parecerse a este modelo:

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

XPIDL_MODULE es el nombre del fichero XPT generado que contiene información de tipos sobre tus interfaces IDL. Si tienes múltiples módulos, asegúrate de que utilizas un valor diferente de XPIDL_MODULE para cada uno. En caso contrario, el fichero XPT del primer módulo será sobrescrito por el segundo y obtendrás errores del tipo NS_ERROR_XPC_BAD_IID cuando intentes acceder a sus interfaces IDL desde el código. Los ficheros bajo EXPORTS son copiados directamente al directorio /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/ siendo así accesibles desde otros módulos (el valor de MOZ_OBJDIR se define en /mozilla/.mozconfig). 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 components/ de tu extensión.

- -

Ficheros fuente

- -

Ahora es cuando hay que crear el makefile y los ficheros-fuente en el subdirectorio src/. 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 src/ y ejecutando make sólo en el directorio public/. Esto serà explicado en breve.

- -

Luego abre el fichero de cabecera generado para tu interfaz en /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/. 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.

- -

A continuación se muestra un ejemplo del makefile que necesitas colocar en tu directorio src.

- -
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)
-
-# NOTA: si estás codificando contra la versión 1.8.0 branch (no 1.8 branch o trunk),
-# la línea anterior no funcionará debido a problemas de modificadores del enlazador.
-# 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.
-
- -

La sección REQUIRES le dice a make qué módulos utilizan tus componentes. Esto provoca que los subdirectorios relevantes de /mozilla/$(MOZ_OBJDIR)/dist/include/ 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í. CPPSRCS enumera los ficheros fuente que necesitan ser compilados.

- -

En este ejemplo, los dos primeros ficheros contienen la implementación de los dos componentes de la extensión. El fichero final myExtension.cpp contiene el código necesario para registrar dichos componentes, como se describirá en la siguiente sección.

- -

Registrar tus componentes

- -

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 nsIModule 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.

- -

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 #defines según convenga) en la cabecera de cada componente que tenga que ser instanciado utilizando el administrador de componentes:

- -
// {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"
-
- -

Obviamente necesitas completar el CID con un GUID real. Bajo Windows puede ser generado utilizando guidgen.exe. Los Unixeros pueden utilizar uuidgen (viene de modo predeterminado en la mayoría de distribuciones de Unix y Linux).

- -

Ahora crea el fichero myExtension.cpp así:

- -
#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)
-
- -

La macro NS_IMPL_NSGETMODULE crea el objeto de módulo apropiado suministrando acceso a todos los componentes listados en el array nsModuleComponentInfo.

- -

Compilación

- -

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 firefox.exe funcional. Creo que es una casilla del monopoly: Do not pass go. Do not collect $200.

- -

¿Sigues ahí? Bien, ahora vamos a modificar tu .mozconfig (en el directorio raíz /mozilla/ para que tu extensión se compile junto con Mozilla. Añade la siguiente línea al final del fichero:

- -
ac_add_options --enable-extensions=default,myextension
-
- -

Ahora ejecuta make en el directorio raíz de Mozilla:

- -
make -f client.mk build
-
- -

Incluso aunque hayas compilado una versión actualizada de Firefox, tendrás que esperar un momento para que make 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 /mozilla/$(MOZ_OBJDIR)/:

- - - -

Gran parte de este material no será creado en la primera pasada ya que make 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 make. Quizá haya excepciones a esta regla, pero si estás cambiando los ficheros generados directamente muy probablemente estás metiendo la pata.

- -

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:

- -
../build/autoconf/make-makefile extensions/myextension
-
- -

Si tu $(MOZ_OBJDIR) está ubicado fuera de tu $(TOPSRCDIR), necesitarás hacer:

- -
$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
-
- -

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).

- -

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 /mozilla/$(MOZ_OBJDIR)/extensions/myextension/ 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 /mozilla/$(MOZ_OBJDIR)/dist/bin/extensions (si algo va mal, averigua qué es, corrígelo y luego vuelve aquí y añádelo a este artículo).

- -

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 MOZ_NO_REMOTE 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:

- -
firefox -P desarrollo
-
- -

Donde desarrollo 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.

- -

No hay nada como estar en chrome

- -

¡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 JavaScript y XUL. En este punto sería de mucha utilidad tener algo de experiencia escribiendo extensiones "normales" (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.

- -

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 chrome/ 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 content/, locale/ y skin/ 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 chrome/ o el que sea. ¡Viva la libertad!

- -

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 manifiesto JAR. Para nuestro ejemplo de extensión simple este fichero podría tener este aspecto:

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

Pon este código en un fichero llamado jar.mn 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:

- -
USE_EXTENSION_MANIFEST = 1
-
- -

Esto le dice a make que cree un único fichero de manifiesto llamado chrome.manifest en lugar de crear manifiestos separados con nombres tontos para cada paquete.

- -

Ahora ejecuta make de nuevo. Deberías ver un subdirectorio chrome en tu extensión (/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/myextension@mycompany.com/). Observa que el directorio chrome contiene un fichero JAR (o sea, ZIP) con todos los ficheros chrome listados en jar.mn 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.

- -

Manteniéndolo complejo

- -

Si estás desarrollando extensiones realmente complejas con un montón de componentes XPCOM, probablemente desees dividir tu código en módulos más pequeños.

- -
Extensiones moderadamente complejas
- -

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 base/ que define un manojo de componentes XPCOM básicos y un módulo advanced/ 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í:

- - - -

Más allá de eso, nada cambia. Los makefiles en los directorios base/ y advanced/ deberían tener más o menos el mismo aspecto que el makefile original del directorio raíz, sin olvidar cambiar la variable DEPTH 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 DIST_FILES porque va a estar en el makefile de nivel superior. Cada makefile que genere algo debería definir la variable XPI_NAME para asegurarse que los archivos generados van dentro de tu extensión y no dentro del directorio global components/. Define esto en cada makefile para asegurarte. Puedes usar el mismo MODULE para ambos casos, base/ y advanced/, y así todos los archivos include generados irán al mismo directorio, pero asegúrate de no usar el mismo XPIDL_MODULE en los dos directorios public/ o una de las bibliotecas de componentes (es decir, archivos XPT) sobrescribirá al otro y todo se echará a perder.

- -

Cada módulo debe tener también un valor diferente para la variable LIBRARY_NAME. Éste es el nombre de la biblioteca dinámica generada, así que si llamamos a las bibliotecas "myBase" y "myAdvance" entonces tendremos los archivos myBase.dll y myAdvance.dll (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 myExtension.cpp 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.

- -

En cuanto al makefile de nivel superior, ahora tendrá este aspecto:

- -
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
-
- -
Extensiones realmente complejas
- -

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.

- -

Para dividir un módulo en submódulos primero debes crear un directorio para cada submódulo. Luego debes crear un directorio adicional llamado build/. Cada submódulo será configurado para crear una biblioteca estática y el directorio build/ las unirá para crear una sola biblioteca dinámica. ¿Confundido? Aquí hay un ejemplo mostrando la subrama advanced/ del directorio myextension/:

- - - -

Como puedes ver, hemos dividido advanced/ dentro de dos submódulos: intrincate/ y multifarious/ y hemos añadido un directorio build/ adicional. Hemos dejado los directorios chrome directamente bajo advanced/, los cuales no están enlazados a ningún submódulo específico. Esto significa que jar.mn estará en el mismo lugar.

- -

Los makefiles intricate/ y multifarious/ lucirán casi igual al makefile original advanced/, pero necesitamos modificarlos un poquito. Como siempre, debemos ajustar la variable DEPTH porque el makefile está más profundo en la estructura de directorios. Y deberíamos cambiar LIBRARY_NAME 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 FORCE_STATIC_LIB para que quede un makefile que comience más o menos así:

- -
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í...
-
- -

El makefile build une las bibliotecas estáticas generadas por los submódulos y crea una única biblioteca dinámica de componentes:

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

El makefile en el directorio advanced/ debería listar los directorios intricate/, multifarious/ y build/ en su variable DIRS. Asegúrate de que build/ esté al final porque no puede crear la biblioteca hasta que los otros makefiles hayan sido completados.

- -

Otros temas

- -

Agregar archivos de datos a tus extensiones

- -

En algunos casos, puedes desear incluir archivos adicionales en tus extensiones que no pertenecen al subdirectorio chrome/. 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.

- -
Copiar archivos de datos al directorio de destino
- -

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 stats/ 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:

- -
libs::
-	if test ! -d $(FINAL_TARGET)/stats; then \
-		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
-	fi
-	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
-
- -
Acceder a ficheros de datos desde los componentes
- -

El truco para acceder a los ficheros es averiguar dónde está el directorio home de tu extensión. Los rumores dicen que en el futuro esto será posible a través del interface nsExtensionManager 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 __LOCATION__ (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.

- -

Este artículo 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í:

- -
interface myILocation : nsISupports
-{
-    readonly attribute nsIFile locationFile;
-};
-
- -

Sitúa el fichero IDL en el directorio public/ del proyecto o subproyecto. En el directorio src/ 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 home de la extensión.

- -
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;
-  }
-}
-
- -

Esto asume que el componente se encuentra en un subdirectorio del directorio de la extensión (por convenio, este directorio se llama components/). La propiedad parent de __LOCATION__ devuelve components/, y el valor parent de éste es el directorio de la extensión.

- -

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.

- -
libs::
-	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
-
- -

Ahora puedes instanciar este componente y usar la propiedad locationFile para obtener un interface nsIFile que apunte al directorio home de tu extensión.

- -

Usar otras bibliotecas

- -

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.

- -

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 db/sqlite. 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.

- -

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 acmelib se usa dentro del subproyecto multifarious/ en el ejemplo de arriba, se colocaría como un subdirectorio bajo ese proyecto (en el mismo nivel que public/ y src/).

- -

Por supuesto, esto significa que tendrás que compilar acmelib 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.

- -

Compilar para múltiples plataformas

- -

Información del Documento Original

- -
- -
- -

 

diff --git "a/files/es/orphaned/css_din\303\241mico/index.html" "b/files/es/orphaned/css_din\303\241mico/index.html" deleted file mode 100644 index af44e82910..0000000000 --- "a/files/es/orphaned/css_din\303\241mico/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 ---- -

-

-

Introducción

-

Tradicionalmente las páginas web se han dividido en dos categorías: estáticas y dinámicas. Hemos leído muchas veces que con XHTML y CSS 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. -

Si teniamos DHTML (html dinámico), ahora tenemos CDSS (Css Dinámico Sin Scripts). 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.

Las pseudo-clases 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: -

-
a:link { ... }
-a:active { ... }
-a:visited { ... }
-
-

¡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. -

-

Poco a poco

-

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.

Empecemos por el uso tradicional: -

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

Soltamos amarras, levamos 'anclas' y... -

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

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

-

La cosa da mucho juego

-

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

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

Pero esto no es todo, aún hay más.

-

Jugando con los selectores podemos relacionar unos elementos con otros. -

Por ejemplo: al posicionarnos sobre p cambiamos las propiedades de a, y al posicionarnos sobre a cambiamos las propiedades de em. -

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

Bueno, despues de unos ejemplos simples, uno un poco más complejo: -

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

Tipos de relaciones familiares

-

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

-
Padre → hijo
-

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

-
<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>
-
-
Padre → descendiente
-

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

-
<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>
-
-
Hermano → hermano (adyacente)
-

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

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


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

-
<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>
-
-
Otros parentescos
-

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?

-
Seleccionando un nieto -
No tiene mayor complicación, al fin y al cabo, un nieto no es más que un hijo de un hijo. -
-
<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>
-
-
Seleccionando un sobrino. -
No hay problema, un sobrino no es más que un hijo de un hermano. -
-
<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>
-
-
Limitaciones
-

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

-
  1. Descendente - Un elemento y sus descendientes. -
  2. Horizontal - Un elemento y sus hermanos. -
  3. Mixta - Una combinación de las anteriores. -
-

Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto el siquiente ejemplo ni funciona ni debe hacerlo: -

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

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

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

Los navegadores pueden dividirse en dos grupos: IE y el resto.

-

Referencia

-

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 el estándar CSS-2. Además, curiosamente, los dos pilares que sostienen esta funcionalidad (pseudoclases y selectores), están explicados en la misma página: el capítulo 5.

-

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:

-
Sobre los selectores por parentesco, sub-capítulos: 5.5, 5.6, 5.7
Sobre las pseudo-clases, sub-capítulo: 5.11
-

CSS-3

-

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, CSS-3 traerá muchas más pseudo-clases y muchos más selectores, en definitiva, muchas más posibilidades de hacer cosas interesantes. -

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). -

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

Notas finales

- - -

Categorías -

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

¿Quieres echar una mano corrigiendo bugs, pero no sabes por dónde empezar?

-

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.

- -

Documentación

Descargar el código fuente de Mozilla
El código fuente de Mozilla puede obtenerse descargando el archivo con el código fuente o usando el cliente CVS (Concurrent Versioning System).
Hackeando Firefox
Participa en el desarrollo de front-end de Firefox.
Documentación para la compilación
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.
Hacking documentation on mozilla.org (en)
Another page with hacking-related documentation. We're working on this.
Preguntas frecuentes sobre depuración.
Los consejos de depuración son específicos para cada plataforma. Elija: Windows, Linux, o Mac OS X.

enlaces en rojo: ; Creando un parche: <small>Consejos para crear parches que permitan que tus cambios se incluyan.</small> Ver más...

Comunidad

  • En la comunidad Mozilla... en inglés

{{ DiscussionList("dev-general", "mozilla.dev.general") }}

Ver más...

Herramientas

Ver más...

Temas Relacionados

Garantía de Calidad, Seguridad
-

Categorías

-

Interwiki Language Links

-

 

- -

{{ 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" } ) }}

diff --git "a/files/es/orphaned/detectar_la_orientaci\303\263n_del_dispositivo/index.html" "b/files/es/orphaned/detectar_la_orientaci\303\263n_del_dispositivo/index.html" deleted file mode 100644 index d414a35732..0000000000 --- "a/files/es/orphaned/detectar_la_orientaci\303\263n_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 ---- -

{{ gecko_minversion_header ("1.9.1") }}

-

Cada vez más, los dispositivos habilitados para la web son capaces de determinar su orientación, 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. 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.

-

Hay dos maneras de tratar la información de orientación en Gecko. La primera es la consulta a medios de orientación . 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).

-

La segunda manera de administrar la información de orientación, , es el evento MozOrientation, agregado en Gecko 1.9.2 (Firefox 3.6). Este evento se envía cuando el acelerómetro detecta un cambio en la orientación del dispositivo. Al recibir y procesar los datos reportados por los eventos MozOrientation, es posible responder de forma interactiva a los cambios de elevación y rotación causados por el movimiento del dispositivo.

-

Ajuste de diseño cuando cambia la orientación

-

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. Por ejemplo, tal vez desees que una barra de botones se extienda a lo largo de la pantalla del dispositivo. Si utilizas una consulta multimedia, puede hacer esto fácilmente y de forma automática.

-

Construir el CSS para cada orientación

-

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).

- -
Vertical Horizontal

#toolbar {
  width: 100%;
}

 #toolbar {
  min-height: 500px;
  width: 125px;
  margin-right: 8px;
  float: left;
}
-

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. En el modo horizontal, la barra de herramientas se extiende verticalmente por el lado izquierdo del documento.

-

La aplicación del CSS correcto en función de la orientación actual

-

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. Esto es sencillo:

-
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
-<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
-
-

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.

Procesamiento de eventos de orientación

-

{{ gecko_minversion_header("1.9.2") }}

-

Firefox 3.6 (Gecko 1.9.2) introdujo el evento MozOrientation, al que puedes prestar atención con el fin de recibir las actualizaciones mientras el usuario ajusta la orientación del dispositivo.

-

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.

-

Lo único que tienes que hacer para comenzar a recibir los eventos de orientación es lo siguiente:

-
window.addEventListener("MozOrientation", handleOrientation, true);
-

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.

-

El evento de orientación contiene tres valores:

- -
Campo Tipo Descripción
x double La cantidad de inclinación a lo largo del eje X.
y double La cantidad de inclinación a lo largo del eje Y.
z double El importe de la inclinación a lo largo del eje Z.
-

Los valores de x , y y z pueden variar desde -1 a 1, donde 0 significa que el dispositivo está en equilibrio sobre ese eje.

-

La función de controlador o manejador de eventos puede ser algo así:

-
function handleOrientation(orientData) {
-  var x = orientData.x;
-  var y = orientData.y;
-  var z = orientData.z;
-
-  // Haz cosas con los datos de orientación nuevos
-}
-
-

Los valores del acelerómetro explicados

-

El valor indicado para cada acceso indica la cantidad de la aceleración a lo largo de ese eje que está teniendo lugar actualmente.

-
Nota: en esta sección se describe cómo estos valores funcionan en la actualidad, sin embargo, esto está sujeto a cambios en un futuro.
-

El eje X representa la cantidad de inclinación de derecha a izquierda. 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.

-

El eje Y representa la cantidad de inclinación de adelante hacia atrás. 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).

-

El eje Z representa la aceleración vertical. El valor es 1 cuando el dispositivo está pasando por la gravedad terrestre estándar (9.8m/sec 2), pero no en movimiento. Al mover el dispositivo hacia arriba hace que el valor descienda. El valor es 0 si el dispositivo está en caída libre (ingrávido o precipitándose como consecuencia de una caída).

-

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.

Consulta también

- -

{{ languages ( { "en": "en/Detecting_device_orientation" } ) }}

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

-

Proyecto de ejemplos DOM Mozilla -

Esta página 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. -

Animación y manipulación de elementos de texto -

- -

Animación 3D en tiempo real -

Esta demostración muestra cómo usar JavaScript y DOM para animar un conjunto de imágenes para crear un efecto de animación 3D. -

-

Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2)

-

Estilo DOM: Recortar y posicionar elementos con la interfaz JavaScript DOM -

Esta demostración 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. -

Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM -

Esta muestra requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla. -

DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos -

Esta demo 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. -

-

Controles multiplataforma

-

Windowing API: La ventana DHTML de BrainJar -

BrainJar's DHTML Windows es un control (widget) que muestra cómo añadir ventanas DHTML dinámicas en una aplicación DHTML. -

Stock Ticker -

Stock Ticker 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. -
-

-

Recursos adicionales para aprender DOM

-

Cruzando una tabla HTML con JavaScript e Interfaces DOM -

Una visión 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. -

DOM Central -

Aprenda más acerca de W3C DOM. -

Visita GetElementById.com -

GetElementById.com contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la demo Zoom Intro y otras magníficas demostraciones y scripts DOM. -

La categoría W3C DOM en DMOZ.ORG -

Esta categoría contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM. -

{{ 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\303\241ficos_con_canvas/index.html" "b/files/es/orphaned/dibujando_gr\303\241ficos_con_canvas/index.html" deleted file mode 100644 index 4d21cc8162..0000000000 --- "a/files/es/orphaned/dibujando_gr\303\241ficos_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 ---- -

v

diff --git "a/files/es/orphaned/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" "b/files/es/orphaned/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" deleted file mode 100644 index 9c1572605e..0000000000 --- "a/files/es/orphaned/estructura_de_directorios_de_c\303\263digo_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 ---- -

El código para todos los proyectos de la familia Mozilla (como Firefox, Thunderbird, etc.) 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).

-

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 http://mxr.mozilla.org/mozilla-central/source/).

-

Para modificar el código fuente, tienes que adquirirlo, ya sea descargando una instantánea de las fuentes o revisando las fuentes actuales de Mercurial.

-

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.

-

Esto no está del todo actualizado. Mira la descripción general de los directorios del código fuente para una versión algo diferente (antigua) de la misma información. También mira la descripción más detallada de las partes de Gecko.

-

accessible

-

Archivos para la accesibilidad (por ejemplo, los archivos de soporte MSAA (Microsoft Active Accessibility) y ATK (Accessibility Toolkit, usado por GTK+ 2)). Ver Accesibilidad de Mozilla  Accesibilidad.

-

browser

-

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 xpfe/.

-
-

build

-

Archivos varios, utilizados en el proceso de compilación. Véase también config/.

-
- -
-

calendar

-

Implementación de Calendar, creado originalmente por OEone. Véase también extensions/lightning/.

-

caps

-

Gestión de la seguridad de la página web basada en capabilities.

-

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 seguridad de componentes.

-
-

chrome

-

Registro chrome utilizado con toolkit/. Estos archivos fueron originalmente copias de los archivos de rdf/chrome/.

-
-
-

composer

-

El código (XUL y JavaScript) de la parte del usuario (front-end) para la aplicación standalone Composer.

-
-
-

config

-

Más archivos utilizados por el proceso de compilación, incluidos normalmente para los makefiles, etc. Véase también build/.

-

content

-

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.

-

Este directorio también contiene el código para XUL, XBL, XTF, <canvas>, así como el código de la implementación XSLT y manejo de eventos.

-

db

-

Contenedor para los módulos de acceso a las bases de datos. Actualmente contiene mork y sqlite.

-

db/mdb, db/mork, and db/morkreader

- Implementación de Mork, un formato de texto para bases de datos. Este se utiliza por ejemplo para almacenar la historia global.
-

morkreader es un analizador simple para mork usado para migrar los datos antiguos a las nuevas bases de datos basadas en sqlite.

-
-

db/sqlite3

-

La base de datos SQLite, usada por storage. Reemplaza a mork en Firefox 3.

-
-
-

dbm

-

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.

-
-
-

directory

-

Soporte LDAP para Mozilla. Utilizado en las noticias por correo.

-
-
-

docshell

-

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 webshell/.

-
-
-

dom

-

Contiene:

-
    -
  • Definiciones IDL 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 content/).
    • -
  • 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 js/src/xpconnect/.)
    • -
  • Las implementaciones de algunos de los principales objetos "DOM nivel 0", tales como window, window.navigator, window.location, etc.
    • -
-
-
-

editor

-

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.

-

Contains:

-
    -
  • The backend for HTML and text editing. This is not only used for the mail composer and the page editor composer, but also for rich text editing inside webpages. Textarea and input fields are using such an editor as well (in the plaintext variant). See Mozilla Editor.
    • -
  • The frontend for the HTML editor that is part of SeaMonkey.
    • -
-
-
-

embedding

-

XXX this needs a description. See Embedding.

-
-
-

extensions

- Contains several extensions to mozilla, which can be enabled at compile-time using the --enable-extensions configure argument.
-

Note that some of these are now built specially and not using the --enable-extensions option. For example, disabling xmlextras is done using --disable-xmlextras.

-
-

extensions/auth

-

Implementation of the negotiate auth method for HTTP and other protocols. Has code for SSPI, GSSAPI, etc. See Integrated Authentication.

-
-
-

extensions/content-packs

-

Content- and locale-pack switching user interface.

-
-
-

extensions/cookie

-

Permissions backend for cookies, images etc, as well as the user interface to these permissions and other cookie features.

-
-
-

extensions/cview

-

Component viewer, which allows to view the currently registered components and interfaces.

-
-
-

extensions/datetime

-

Support for the datetime protocol.

-
-
-

extensions/finger

-

Support for the finger protocol.

-
-
-

extensions/gnomevfs

-

Interface to gnome-vfs to allow using all protocols supported by gnome-vfs inside of mozilla.

-
-
-

extensions/help

-

Help viewer and help content. See Mozilla Help Viewer Project.

-
-
-

extensions/irc

-
-

Edit section

-
-

This is ChatZilla, the IRC (Internet Relay Chat) component. See ChatZilla.

-
-
-

extensions/java

-
-

Edit section

-
-

XPCOM<->Java bridge ("JavaXPCOM", formerly known as Javaconnect). Unrelated to the code in java/.

-
-
-

extensions/layout-debug

-
-

Edit section

-
-

Layout debugger. Intended as replacement for "viewer". Can be used to run layout regression tests and has support for other layout debugging features.

-
-
-

extensions/lightning

-
-

Edit section

-
-

The Lightning project, "an extension to tightly integrate calendar functionality (scheduling, tasks, etc.) into Thunderbird." See Lightning.

-
-
-

extensions/mono

-
-

Edit section

-
-

A two-way bridge between the CLR/.NET/Mono/C#/etc. world and XPCOM.

-
-
-

extensions/p3p

-
-

Edit section

-
-

Implementation of W3C's Platform for Privacy Preferences standard. See Platform for Privacy Preferences (P3P).

-
-
-

extensions/pref

-
-

Edit section

-
-

Preference-related extensions:

-
-
-

extensions/python

-
-

Edit section

-
-

Support for implementing XPCOM components in python. See PyXPCOM.

-
-
-

extensions/reporter

-
-

Edit section

-
-

An extension to report problems with web pages. Client-side part. See Mozilla Reporter.

-
-
-

extension/schema-validation

-
-

Edit section

-
-

Allows to validate XML trees according to specified XML Schemas.

-
-
-

extension/spatialnavigation

-
-

Edit section

-
-

Spatial navigation, navigating between links of a document according to their on-screen position. See Spatial Navigation.

-
-
-

extensions/spellcheck

-
-

Edit section

-
-

Spellchecker for mailnews and composer.

-
-
-

extensions/sql

-
-

Edit section

-
-

Support for accessing SQL databases from XUL applications. See SQL Support in Mozilla.

-
-
-

extensions/sroaming

-
-

Edit section

-
-

Session roaming, i.e. support for storing a profile on a remote server.

-
-
-

extensions/transformiix

-
-

Edit section

-
-

XSLT support. XSL Transformations is a language used to transform XML documents into other XML documents. See XSL Transformations.

-
-
-

extensions/tridentprofile

-
-

Edit section

-
-

Support for importing profiles from MSIE.

-
-
-

extensions/typeaheadfind

-
-

Edit section

-
-

Find As You Type allows quick web page navigation when you type a succession of characters in the body of the displayed page. See Find As You Type.

-
-
-

extensions/universalchardet

-
-

Edit section

-
-

Universal character set detector.

-
-
-

extensions/venkman

-
-

Edit section

-
-

The JavaScript Debugger.

-
-
-

extensions/wallet

-
-

Edit section

-
-

Password and Form Manager.

-
-
-

extensions/webdav

-
-

Edit section

-
-

WebDAV code; exposes special APIs for accessing WebDAV servers. Used by the Calendar project.

-
-
-

extensions/webservices

-
-

Edit section

-
-

Support for Webservices. See Web Services.

-
-
-

extensions/xforms

-
-

Edit section

-
-

Code for the XForms extension. See XForms.

-
-
-

extensions/xmlextras

-
-

Edit section

-
-

Several XML-related extensions. See XML Extras.

-
-
-

extensions/xml-rpc

-
-

Edit section

-
-

XML Remote Procedure Calls. Unowned these days. See XML-RPC in Mozilla.

-
-
-

extensions/xmlterm

-
-

Edit section

-
-

XMLTerm, a terminal implemented using mozilla technology. Only available on GTK builds.

-
-
-
-

gc

-
-

Edit section

-
-

Container for garbage collection libraries, currently only boehm GC.

-
-
-

gfx

-
-

Edit section

-
-

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.

-

It is also the home of the new graphics architecture based on cairo (via a C++ wrapper called thebes). See NewGFXAPIs and GFXEvolution.

-
-
-

image

-
-

Edit section

-
-

Image rendering library. Contains decoders for the image formats mozilla supports.

-
-
-

intl

-
-

Edit section

-
-

Internationalization and localization support. See Internationalisation Projects.

-
-
- bidi
-
- Obsolete.
-
- chardet
-
- Code for "sniffing" the character encoding of Web pages.
-
- ctl
-
- Code for dealing with Complex Text Layout, related to shaping of south Asian languages (not built by default, needs --enable-ctl).
-
- locale
-
- Code related to determination of locale information from the operating environment.
-
- lwbrk
-
- Code related to line breaking and word breaking.
-
- strres
-
- Code related to string resources used for localization.
-
- uconv
-
- Code that converts (both ways: encoders and decoders) between UTF-16 and many other character encodings.
-
- unicharutil
-
- Code related to implementation of various algorithms for Unicode text, such as case conversion.
-
-
-
-

ipc

-
-

Edit section

-
-

Container for implementations of IPC (Inter-Process Communication) mechanisms.

-
-
-

ipc/ipcd

-
-

Edit section

-
-

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).

-
-
-

jpeg

-
-

Edit section

-
-

Source code of libjpeg, used by the mozilla image library.

-
-
-

js/src

-
-

Edit section

-
-

The JavaScript engine, also known as SpiderMonkey. See also JavaScript.

-
-
-

js/jsd

-
-

Edit section

-
-

JavaScript debugging library. See JavaScript Debugging.

-
-
-

js/src/xpconnect

-
-

Edit section

-
-

Support code for calling JavaScript code from C++ code and C++ code from JavaScript code, using XPCOM interfaces. See XPConnect].

-
-
-

js/src/liveconnect

-
-

Edit section

-
-

Liveconnect, the bridge between JavaScript and Java. See LiveConnect Overview.

-
-
-

l10n

-
-

Edit section

-
-

Basically empty and not used by the mozilla build.

-
-
-

layout

-
-

Edit section

-
-

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 documentation and other information.

-
-
- base
-
- Code that deals with the rendering tree.
-
- generic
-
- The basic rendering object interface and the rendering tree objects for basic CSS boxes.
-
- forms
-
- Rendering tree objects for HTML form controls.
-
- tables
-
- Rendering tree objects for CSS/HTML tables
-
- mathml
-
- Rendering tree objects for MathML.
-
- svg
-
- Rendering tree objects for SVG.
-
- xul
-
- Additional rendering object interfaces for XUL and the rendering tree objects for XUL boxes.
-
-
-
-

lib

-
-

Edit section

-
-

Mostly unused; might be used on mac?

-
-
-

mail

-
-

Edit section

-
-

Thunderbird frontend files. Note that many thunderbird files are shared with Mozilla Mailnews and can be found under mailnews/.

-
-
-

mailnews

-
-

Edit section

-
-

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.

-
-
-

modules/libimg

-
-

Edit section

-
-

Contains libpng, used by the image library for PNG Image decoding.

-
-
-

modules/libjar

-
-

Edit section

-
-

Code to read zip files, used for reading the .jar files that contain the files for the mozilla frontend.

-
-
-

modules/libpref

-
-

Edit section

-
-

Library for reading and writing preferences.

-
-
-

modules/libreg

-
-

Edit section

-
-

Library for reading the netscape binary registry files, used for the ~/.mozilla/appreg file (registry.dat on windows).

-
-
-

modules/oji

-
-

Edit section

-
-

Support for the Java plugin (a bridge for plugging-in generic Java VMs). See Open JVM Integration (OJI).

-

Note: OJI may be removed from Mozilla 2.0 according to this post by Josh.

-
-
-

modules/plugin

-
-

Edit section

-
-

Plugin support. Implements the Netscape Plugin API (NPAPI). See Plugins.

-
-
-

modules/staticmod

-
-

Edit section

-
-

Helper files for static mozilla builds.

-
-
-

modules/zlib

-
-

Edit section

-
-

Source code of zlib, used at least in the networking library for compressed transfers.

-
-
-

netwerk

-
-

Edit section

-
-

Networking library, also known as Necko. Responsible for doing actual transfers from and to servers, as well as for URI handling and related stuff. See also Network library documentation.

-
-
-

nsprpub

-
-

Edit section

-
-

Netscape Portable Runtime. Used as an abstraction layer to things like threads, file I/O and socket I/O. See Netscape Portable Runtime.

-
-
-

other-licenses

-
-

Edit section

-
-

Contains libraries that are not covered by the MPL but used in some mozilla code.

-
-
-

parser/expat

-
-

Edit section

-
-

Copy of the expat source code, which is the XML parser used by mozilla.

-
-
-

parser/htmlparser

-
-

Edit section

-
-

Contains the html parser used by Mozilla, which parses HTML source code and calls the appropriate methods on a content sink.

-
-
-

profile

-
-

Edit section

-
-

Code for profile handling, the profile manager backend and frontend.

-
-
-

rdf

-
-

Edit section

-
-

RDF handling APIs. See RDF and RDF.

-

Also contains the chrome registry code used by SeaMonkey, although toolkit apps (such as Firefox and Thunderbird) use the copy forked into chrome.

-
-
-

security

-
-

Edit section

-
-

Contains NSS and PSM, to support cryptographic functions in mozilla (like S/MIME, SSL, etc). See Network Security Services (NSS) and Personal Security Manager (PSM).

-
-
-

storage

-
-

Edit section

-
-

Storage: XPCOM wrapper for sqlite. Wants to unify storage of all profile-related data. Supersedes mork. See also Unified Storage.

-
-
-

suite

-
-

Edit section

-
-

Newer parts of SeaMonkey-specific code. Older parts live in xpfe/.

-
-
-

themes

-
-

Edit section

-
-

Contains the themes shipped with SeaMonkey. Classic and Modern at the time of this writing.

-
-
-

toolkit

-
-

Edit section

-
-

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 xpfe/).

-
-
-

tools

-
-

Edit section

-
-

Some tools which are optionally built during the mozilla build process, mostly used for debugging.

-
-
-

uriloader/base

-
-

Edit section

-
-

Content dispatch in Mozilla. Used to load uris and find an appropriate content listener for the data. Also manages web progress notifications. See Document Loading: From Load Start to Finding a Handler and The Life Of An HTML HTTP Request.

-
-
-

uriloader/exthandler

-
-

Edit section

-
-

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.

-
-
-

uriloader/prefetch

-
-

Edit section

-
-

Service to prefetch documents in order to have them cached for faster loading.

-
-
-

view

-
-

Edit section

-
-

View manager. Contains cross-platform code used for painting, scrolling, event handling, z-ordering, and opacity. Soon to become obsolete, gradually.

-
-
-

widget

-
-

Edit section

-
-

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. view/ and content/, the latter of which converts many of the messages to yet another API, the DOM event API).

-
-
-

xpcom

-
-

Edit section

-
-

Cross-Platform Component Object Model. Also contains data structures used by the rest of the mozilla code. See also XPCOM Project.

-
-
-

xpfe

-
-

Edit section

-
-

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 browser/ and toolkit/ for use in Firefox, Thunderbird, etc.

-
-

xpfe/components

-
-

Edit section

-
-

Components used by the Mozilla frontend, as well as implementations of interfaces that other parts of mozilla expect.

-
-
-

xpfe/bootstrap

-
-

Edit section

-
-

Startup code for Mozilla. This contains the main/WinMain function. (Not used by "new toolkit" apps; for those, see toolkit/xre and the "app" directory for each specific app).

-
-
-
-

xpinstall

-
-

Edit section

-
-

The installer, which contains code for installing Mozilla and for installing XPIs/extensions. This directory also contains code needed to build installer packages. See XPInstall and the XPInstall project page.

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

{{ gecko_minversion_header("1.9.1") }}

-

En Firefox 3.5 se ha incorporado la posibilidad de usar las etiquetas para los elementos  audio y video, 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.

-

Insertar medios

-

Insertar medios en su documento HTML es sencillo:

-
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
-  Your browser does not support the <code>video</code> element.
-</video>
-
-

Este ejemplo reproduce un video del sitio web de Theora.

-

Se pueden agregar múltiples archivos usando el elemento source para especificar diferentes archivos con diferentes formatos para distintos navegadores. Por ejemplo:

-
<video autoplay>
-  <source src="foo.ogg" type="video/ogg">
-  <source src="foo.mov">
-  Your browser does not support the <code>video</code> element.
-</video>
-
-

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.

-
Nota: El elemento source todavía no es completamente funcional en Firefox. Mire el {{ bug(449363) }} para más detalles.
-

Controlar la reproducción de los archivos

-

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

-
var v = document.getElementsByTagName("video")[0];
-v.play();
-
-

La primera línea localiza el elemento en el documento y la segunda usa el método play() del mismo, como está definido en la interface {{ interface("nsIDOMHTMLMediaElement") }} que se usa para implementar los elementos de medios.

-

Eventos en medios

-

Muchos eventos son enviados cuando se manejan medios:

- -
Nombre del evento Descripción
abort 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.
canplay 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 CAN_PLAY readyState.
canplaythrough Se envía cuando el estado cambia a CAN_PLAY_THROUGH, lo que indica que puede reproducirse completamente el archivo sin interrupciones, asumiendo que la tasa de descaraga se mantendrá en el nivel actual.
canshowcurrentframe El cuadro actual fue cargado y puede mostrarse. Este se corresponde a CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Se envía cuando el estado cambia a DATA_UNAVAILABLE.
durationchange 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.
emptied 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 load() para recargarlo.
empty Se envía cuando hay un error y el archivo está vacío.
ended Se envía cuando se termina la reproducción.
error Se envía cuando hay un error. El atributo error del elemento contiene más información.
load El archivo se descargó completamente.
loadedfirstframe El primer cuadro del archivo se terminó de descargar.
loadedmetadata Los metadatos del archivo se terminaron de descargar, todos los atributos contienen la mayor cantidad de información posible.
loadstart Se envía cuando comienza la carga del archivo.
pause Se envia cuando se pone en pausa la reproducción.
play Se envía cuando se comienza la reproducción o cuando se reinicia.
ratechange Se envía cuando cambia la velocidad de reproducción.
seeked Se envía cuando se completa la operación de búsqueda.
seeking Se envía cuando comienza la operación de búsqueda.
timeupdate El tiempo indicado por el atributo currentTime del elemento cambió.
volumechange Se envía al cambiar el volumen del audio (cuando el volumen es elegido y cuando cambia el atributo muted).
waiting 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).
-

Fácilmente puede vigilar estos eventos, si usa un código parecido al siguiente:

-
var v = document.getElementsByTagName("video")[0];
-
-v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
-v.currentTime = 10.0;
-
-

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 play() del elemento, que comenzará la reproducción.

-

En la línea 4, se configura el atributo currentTime 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 seeking cuando comienza la operación, después un evento seeked se enviara cuando la búsqueda se haya completado.

-

En otras palabras, en este ejemplo se busca la marca de los 10 segundos en el archivo, y luego comienza la reproducción.

-

Vea también

- -

 {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}

-

 {{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox" } ) }}

diff --git "a/files/es/orphaned/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" "b/files/es/orphaned/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" deleted file mode 100644 index 1cd77f0677..0000000000 --- "a/files/es/orphaned/extensiones/actualizaci\303\263n_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 ---- -

Este artículo ofrece detalles sobre aquellos cambios en Firefox 4 que pueden afectar a las extensiones existentes.

-

Cambios en XPCOM

-

Se han llevado a cabo una serie de cambios que afectan a los complementos/agregados y las aplicaciones que incluyen componentes XPCOM. Consulta los cambios de XPCOM en Gecko 2 para obtener más detalles.

-

Desempaquetado de XPI

-

Firefox 4 ya no extrae XPIs 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 <em:unpack>  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.

-

Si tu complemento/agregado sólo contiene estos tipos de archivos, no es necesario que realices ningún cambio::

- -

Si tu complemento/agregado contiene alguno de los siguientes tipos de archivos, tendrás que incluir <em:unpack> en el install.rdf:

- -

Si el código de tu complemento/agregado tiene acceso a otros archivos que has empaquetado en el XPI, entonces tendrás que incluir <em:unpack> 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 Addon.getResourceURI(), devolverá un {{ interface("nsIURI") }} que apunta al archivo solicitado. Si la extensión o el agregado está sin empaquetar, entonces será un file:// URI. Si la extensión o el agregado está empaquetada/o, será un jar:// 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.

-

Se han eliminado los HWND secundarios

-

Afectará a un número muy reducido de desarrolladores. En las versiones anteriores de Firefox, los HWND 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.

-

Lamentablemente, las pocas extensiones que han tenido acceso y han manipulado directamente estos HWND 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.

-

Si mantienes una extensión que usa componentes nativos que dependen de unos HWND que ya no existen, tendrás que actualizar tu extensión. Existen dos formas de hacer esto.

-

La primera, y la mejor, solución es dejar de acceder a los HWND 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.

-

Si ves que no funciona y sigues teniendo que acceder directamente a los HWNDs, tal vez tu única solución sea escribir un plugin NPAPI para que haga el trabajo. Puede suponer mucho trabajo pero debería funcionar. Por supuesto, no te servirá si los HWND específicos que usabas ya no existen.

-

{{ languages( { "en": "en/Extensions/Updating_extensions_for_Firefox_4" } ) }}

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

Esta página es una recopilación de preguntas frecuentes sobre Incrustrando Mozilla . -

Lista de correo (en inglés): mozilla-embedding@mozilla.org -

-
  1. Introducción a Gecko e inscrustación -
    1. ¿Qué es Gecko? -
    2. ¿Qué es Mozilla? -
    3. ¿Qué es el GRE? -
    4. ¿Qué es XPCOM? -
    5. ¿Qué significa "incrustar" Gecko? -
    6. ¿Cuales son los términos de licencia para incrustar Gecko? -
    7. ¿Hay disponible un SDK? -
    8. ¿Cuál es la última versión? ¿Que versión debería usar? -
    9. ¿Quién está usando Gecko actualmente? -
    -
  2. Incrustando Gecko -
    1. ¿Qué archivos necesito para poder incrustar? -
    2. ¿Cómo se lleva a cabo a la distribución de la incrustación? -
    3. ¿Por qué necesito incluir archivos XPT en mi aplicación? -
    4. ¿Cómo me mantengo al tanto con los cambios en la interfaz de Gecko? -
    5. ¿Esto significa que mi compilación será compatible con todas las versiones futuras de GRE/Gecko/Mozilla? -
    6. ¿Qué plataformas son soportadas? -
    7. ¿Admite la versión incrustada protocolos seguros como HTTPS? -
    8. ¿Cómo se comunica mi aplicación con Gecko? -
    9. ¿Puedo incrustar_sin ... -
    10. Puedo incrustar el editor mozilla de HTML? -
    11. ¿Qué herramienta de creación de wigdets emplea Mozilla? -
    12. Tiene el mozilla incrustado soporte para Java? -
    13. ¿Puedo incrustar en mozilla de alguna otra manera? -
    -
  3. Cómo hago ... -
    1. ¿Cómo incrusto Gecko? -
    2. ¿Qué es un servicio? -
    3. ¿Cómo cargo una página? -
    4. ¿Cómo bloqueo una carga? -
    5. ¿Cómo vigilo/interrumpo una carga antes de que ocurra? -
    6. Cómo copio elementos al portapapeles? -
    7. ¿Cómo grabo un documento o dato en el disco? -
    8. ¿Cómo grabo/cuelgo un archivo/dato a un sitio web o un servidor ftp? -
    9. ¿Cómo sé cuando una grabación ha concluido, vigilo el progreso etc.? -
    10. ¿Cómo imprimo una página? -
    11. Cómo creo la vista preliminar de una página? -
    12. Cómo consigo que los elementos emergentes fucionen? -
    13. Necesito que el Javascript dentro de la ventana del navegador se comunique con mi cliente incrustado. Cómolohago? -
    14. Cómo establezco otras ubicaciones para archivos como components.reg? -
    15. ¿Cómo establezco otras ubicaciones para los perfiles? -
    16. ¿Cómo cambio la cadena de identificación? -
    17. ¿Cómo muestro mi propio mensaje, alertas y ventanas de aviso? -
    18. ¿Cómo obtengo el archivo DOM del objeto navegador? -
    19. ¿Qué es el docshell? -
    20. ¿Cómo establezco menus contextuales? -
    21. ¿Cómo establezco los tool tips? -
    22. ¿Cómo hago para ver tool tips para nodos con attributos ALT? -
    23. ¿Cómo hago para configurar el proxy? -
    -
  4. Problemas comunes -
    1. ¡El TestGTKEmbed no funciona! -
    2. ¿Cómo compilo MFCEmbed? -
    3. ¿Cómo depuro MFCEmbed? -
    4. ¿Por qué no funciona el FTP? -
    5. ¿Por qué es mi compilación tan grande? -
    -
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 ---- -
- {{ Draft() }}
-

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

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

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

-

Introducción

-

Si estás leyendo esta guía, probablemente has utilizado firefox antes. Tal vez la primera vez que viste firefox, es posible que te hayas sorprendido al ver que tiene una estructurara mucho más simple que otros navegadores con muchas funciones, como Opera o Safari.

-

¿Qué características son consideradas estándar para los navegadores en estos días? Tal vez cosas como controles de pestañas, movimientos del ratón, barras de herramientas y botones, un lector de feed, integración con una variedad de aplicaciones web, o herramientas sofisticadas para ayudar al diseño web. Pero nosotros no teníamos la intención de crear un navegador todo-en uno que pueda satisfacer a todos

-

En cambio, Firefox puede soportar estas características a través de las extensiones. El núcleo del navegador se limita a las funciones básicas, algo que puede hacer sentirse cómodo a un principiante, pero los usuarios que quieren algo más pueden instalar las extensiones.

-

Acerca de las extensiones

-

Administrador de complementos

-

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

-

-

El Administrador de complementos se encarga de las siguientes tareas:

- -

Características del entorno de desarrollo

-

Inicialmente, no había suficiente documentación disponible, y los desarrolladores de extensiones quedaron en gran medida a su suerte; sin embargo, ahora hay un cuantioso depósito de conocimiento.

-

Debido a que Firefox y sus extensiones están diseñadas para soportar multiples idiomas, excelentes extensiones vienen de todo el mundo, y pueden ser localizadas rápidamente por cualquier persona que esté interesada.

-

Ésto facilita el uso y el desarrollo de extensiones; este hecho, combinado con la popularidad creciente de firefox, ha creado un búcle de realimentación positiva, y un crecimiento explosivo del número de usuarios  y desarrolladores de las extensiones. Hay ahora más de 7000 extensiones y temas publicados en la página web de complementos de firefox. (https://addons.mozilla.org).

-

¿Qué podemos hacer con las extensiones?

-

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

-

Extensiones solo con una función.

-

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

-

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

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

Feature enhancing extensions

-

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

-

These extensions enhance features that already exist in Firefox.

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

Web application integration extensions

-

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

-

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

-

Forecastfox.png

-

New feature extensions

-

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

-

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

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

Application level extensions

-

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

-

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

-

Firebug.gif

-

One-trick gag extensions

-

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

-

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

-

Shiitake Mushroom (1).png

-

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

-

Table 1: Advanced customization methods for Firefox

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

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

- 		-

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

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

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

- 		-

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

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

Vamos a construir una extensión

-

La tabla 1 muestra varias opciones de personalización disponibles para un usuario en firefox. Los usuarios tienen opciones de personalicación Flexibles, usando CSS en las hojas de estilo del usuario y javaScript/DOM en los script del usuario.

-

En adición a CSS y Javascript, las extensiones pueden tomar ventajas de las tecnologías XUL y XPCOM para características más sofisticadas. Temas, los cuales pueden alterar la apariencia de firefox, son un tipo de complemento.

-

Para crear una extension, necesitas una idea y sólo un poco de abilidad programando. Los siguientes capítulos explicaremos con detalles las tecnicas para escribir extensiones.

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

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

diff --git a/files/es/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 ---- -

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

-

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

-

Antes de sumergirse en una explicación, rápidamente nos introduciremos en las tecnologías utilizadas para desarrollar extensiones en firefox. Nosotros también conoceremos los conocimientos míminos que se necesitan para desarrollar una extensión para firefox.

-

Tecnologías utilizadas para desarrollar extensiones para Firefox

-

Firefox y sus extensiones están ambos basados en el desarrollo con tecnologías ampliamente usadas en la web. Su estructura es similar a la de HTML dynamico usado en algunas páginas webs, or el HTML de aplicaciones usado en Windows. Si tienes experiencia desarrollando HTML dinamico, Tú probablemente lo encontrarás relativamente fácil desarrollar una extensión para Firefox.

-

El rol de cada tecnología

-

Firefox está construido en gran parte con cuatro tecnologías: XUL, CSS, Javascript y XPCOM. Las extensiones también están construidas usando esas cuatros tecnologías.

-

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

-

-

En addition a esas tecnologías, el desarrollo de una extensión requerira que aprendas sobre como otorgar priviligos para vence priviligios de restricciones de seguridad en el código que escribistes, y como insertar tu codigo dentro de Firefox UI. Estos errores son discutidos en el Capítulo 5.

-

Conocimientos básicos requeridos

-

En el interest de brevedad, Vamos a omitir explicaciones de tecnologías, y nos enfocaremos en la introducción de nuevas tecnologías que necesitarás entender para desarrollar para Firefox. Asumimos que tu tienes esperiencia desarrollando con HTML dinamico, así como de los temas a continuación.
- Para más información sobre estas tecnologías, por favor consulte otras fuentes.

- -

XML: A text-based structural language

-

 XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de datos, siendo útil cuando varias aplicaciones se deben comunicar entre sí o integrar información. (Bases de datos Silberschatz).

-

Listing 1: XML syntax

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

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

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

An element can include other elements as well as text in its content, and all information is structured as a tree. As in all trees, elements can have children (elements contained within them) and parents (elements that contain them). Attributes can also be added to opening tags, each with a value.

-

As the "extensible" part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a "namespace URI" identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is "http://www.w3.org/1999/xhtml" ; for SVG is it "http://www.w3.org/2000/svg".

-

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

-

Like XML, Cascading Style Sheets (CSS) is a technical specification established by the W3C; it is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data can be reused better than it is when structural and stylistic markup are both embedded in HTML.

-

There are three CSS specifications (Level 1 through Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.

-

Listing 2: CSS code sample

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

JavaScript: The world's most misunderstood language

-

JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.

-

Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.

-

Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed AJAX (Asynchronous JavaScript and XML); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.

-

JavaScript is a prototype-based object-oriented language, and as shown in Listing 3, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.

-

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

-

Listing 3: An example of a class definition in JavaScript

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

DOM: An API for manipulating XML documents

-

The Document Object Model (DOM) is a technical standard promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the innerHTML property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript's object-oriented nature.

-

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

-

There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.

-

With the DOM, the contents of an XML document are handled as a "DOM tree," a collection of element nodes and other nodes. Listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.

-

We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the MDC documentation.

-

Listing 4: An example manipulation using the DOM

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

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

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

{{ gecko_minversion_header("1.9.1") }}

-

Gecko 1.9.1 admite los elementos HTML 5 audio y video, 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 .

-

Formatos multimedia compatibles

-

Actualmente Gecko admite audio en formato WAVE así como contenedores Ogg con audio codificado en Vorbis y/o video Theora.

-
-

{{ gecko_callout_heading("2.0") }}

-

A partir de Gecko 2.0 se admite también el formato de medios WebM. WebM usa el códec V8 para video y Vorbis para audio.

-
-

Contenedores WAVE

-

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) .

-
Nota: Consulta RFC 2361 para el registro de códecs WAVE.
-

Tipos MIME reconocidos para audio WAVE

-

Gecko reconoce que los siguientes tipos MIME representan archivos de audio WAVE.

- -

{{ h2_gecko_minversion("WebM", 2) }}

-

WebM 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 Matroska.

-

Tipos MIME reconocidos para medios WebM

-

Gecko reconoce que los siguientes tipos MIME representan archivos de medios WebM.

-
video/webm
Un archivo de medios WebM que contiene video (y posiblemente audio también).
audio/webm
Un archivo de medios WebM que contiene solamente audio.
-
-

Contenedores Ogg

-

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 OggYUV para video.

-

Puedes saber más acerca de la creación de medios Ogg si lees el Theora Cookbook.

-

Tipos MIME reconocidos para medios Ogg

-

Gecko reconoce que los siguientes tipos MIME son archivos Ogg.

-
audio/ogg
Un archivo Ogg que contiene sólo audio.
video/ogg
Un archivo Ogg que contiene video (y posiblemente audio también).
application/ogg
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.
-
-

Consulta también

- -

{{ languages( { "en": "en/Media_formats_supported_by_the_audio_and_video_elements" } ) }}

diff --git "a/files/es/orphaned/fragmentos_de_c\303\263digo/index.html" "b/files/es/orphaned/fragmentos_de_c\303\263digo/index.html" deleted file mode 100644 index 72cd88c7e1..0000000000 --- "a/files/es/orphaned/fragmentos_de_c\303\263digo/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 ---- -

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.

-

Estos ejemplos demuestran cómo lograr tareas básicas que podrían no ser evidentes a simple vista.

-

Código orientado al Navegador

-
Código del navegador con pestañas (Firefox/SeaMonkey)
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.
-
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 ---- -

Aquí necesitamos una lista completa de Funciones de XPCOM, algo parecido a la lista de Interfaces. -

diff --git "a/files/es/orphaned/generaci\303\263n_de_guids/index.html" "b/files/es/orphaned/generaci\303\263n_de_guids/index.html" deleted file mode 100644 index e4b63d6da7..0000000000 --- "a/files/es/orphaned/generaci\303\263n_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 ---- -
(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)
-

Los GUIDs 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 Interfaces XPCOM (en este caso, la GUID es llamada IID), los componentes (CID), y los "agregados" (add-ons), como extensiones y temas; no obstante, los "agregados" (add-ons) pueden (y debieran) ser identificados mediante IDs (identificadores) de la forma nombreextension@nombreorganizacion.tld a partir de Firefox 1.5.

-

Forma canónica de una GUID

-

La forma usual de una GUID es xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx, donde cada x 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:

-

Herramientas en línea

- -

Windows

-

Los usuarios de Windows pueden emplear el utilitario GuidGen de Microsoft para obtener una GUID. (esta utilidad de parte de MS Visual C++)

-

Linux

-

Usar /usr/bin/uuidgen. Se encuentra en el paquete libuuid1 (Debian).

-

Mac OS X

-

Usar /usr/bin/uuidgen.

-

Perl

-

jkeiser's Mozilla tools incluye un generador UUID con salidas en los estilos C++ e IDL.

-

nsIUUIDGenerator

-

Se puede generar un identificador UUID desde código, contando con privilegios de ejecución en Mozilla, utilizando los métodos del objeto nsIUUIDGenerator. Ver la página enlazada para obtener detalles.

-

Formato COM/XPCOM

-

Cuando se declaran IIDs y CIDs mediante enunciados  #define en código C++ para Mozilla, suele emplearse el siguiente formato:

-
// xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
-#define NS_...ID \
-{ 0xXXXXXXXX, 0xXXXX, 0xXXXX, \
-  { 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX } }
-
-

Para generar código en este formato puede emplearse alguna de las siguientes herramientas.

-

Utilidades en línea

- -

guidgen

-

guidgen.exe, hace parte de Microsoft Visual Studio, genera UUIDs en este formato.

-
(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)
-

bash

-

You can put the following into your .bashrc file:

-
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} } }"
-}
-
-

Perl

-
#!/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";
-
-

{{ languages( { "fr": "fr/G\u00e9n\u00e9ration_de_GUID", "ja": "ja/Generating_GUIDs", "pl": "pl/Generowanie_GUID" } ) }}

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

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.

diff --git "a/files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" "b/files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" deleted file mode 100644 index 5b5ec3c4f5..0000000000 --- "a/files/es/orphaned/gu\303\255a_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 ---- -


-{{ Next("Firefox addons developer guide/Introduction to Extensions") }}

-

Capítulo 1: Introducción a las extensiones

-

Capítulo 2: Tecnologías usadas para el desarrollo de extensiones
-

-

Chapter 3: Introduction to XUL—How to build a more intuitive UI

-

Chapter 4: Using XPCOM—Implementing advanced processes

-

Chapter 5: Let's build a Firefox extension 

-

Chapter 6: Firefox extensions and XUL applications

-

License and authors

-

{{ Next("Guía para el desarrollador de agregados para Firefox/Introducción a las extensiones") }}

-

{{ languages( { "de" : "de/Firefox_addons_developer_guide", "en" : "en/Firefox_addons_developer_guide" }) }}
-

-


-

diff --git "a/files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" "b/files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" deleted file mode 100644 index 4fa2fbf7f4..0000000000 --- "a/files/es/orphaned/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_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 ---- -

{{ Draft() }}

- -

{{ 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") }}

- -
Nota: Si desea contribuir en este documento, por favor siga las directivas de la página de Contribución.
- -

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

- -

Introducción

- -

Si estás leyendo esta guía, probablemente 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.

- -

¿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.

- -

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.

- -

Acerca de las extensiones

- -

Manejo usando el administrador de complementos

- -

El administrador de complementos de Firefox es una excelente forma de manejar las extensiones, y es un gran avance es facilidad de uso.

- -

- -

El administrador de complementos se encarga de las siguientes tareas:

- - - -

Comodidades para el entorno de desarrollo

- -

Inicialmente, no había disponible una documentacíon adecuada, y los desarrolladores de extensiones quedaban en gran medida a su suerte1; sin embargo, ahora hay una considerable acumulación de conocimientos.

- -

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.

- -

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

- -

Qué puedes hacer con extensiones

- -

Let's look at what features extensions can add, and some actual examples of extensions.

- -

Extensiones de una sola función

- -

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

- -

These are relatively simple extensions that add a single feature.

- -
-
Text Link
-
Makes it so that double-clicking on an unlinked URL follows that URL.
-
Undo Closed Tabs Button
-
Adds a toolbar button to re-open the most recently closed tabs to the History menu.
-
- -
-
1211576231.png
-
- -
-
Locationbar
-
Separa el dominio y la ruta de la URL en la barra de localización para una lectura más fácil.
-
locationbar.png
-
- -

Feature enhancing extensions

- -

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

- -

Estas extensiones amplían características ya disponibles en Firefox.

- -
-
Tab Mix Plus
-
Ofrece configuración detallada sobre las pestañas.
-
PrefBar
-
Ofrece acceso a numerosas preferencias sobre la barra de herramientas.PrefBar.png
-
NoScript
-
Enables and disables JavaScript execution on a site-by-site basis.
-
- -

Extensiones de integración con aplicaciones web

- -

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

- -

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

- -

Forecastfox.png

- -

New feature extensions

- -

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

- -

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

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

Application level extensions

- -

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

- -

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

- -

Firebug.gif

- -

One-trick gag extensions

- -

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

- -

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

- -

Shiitake Mushroom (1).png

- -

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

- -

Tabla 1: Métodos avanzados de personalización para Firefox

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Método de personalización¿Funciona en sitios web?¿Funciona en Firefox?
Hojas de estilo de usuario (cambia la apariencia a través de CSS) -

Sí; puedes cambiar el archivo userContent.css, o usar la extensión Stylish.

- 		-

Sí; puedes cambiar el archivo userChrome.css,o usar la extensión Stylish.

-
Usar scripts (cambia la apariencia y funcionalidad a través de JavaScript) -

Sí; puedes usar la extensión GreaseMonkey o "bookmarklets."

- 		-

Sí; puedes cambiar userChrome.js para agregar funcionalidades a través de JavaScript.

-
Extensiones (pueden hacer cualquier cosa)SíSí
Temas (cambian la apariencia del explorador)NoSí
- -

Construyamos una extensión

- -

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 userChrome.js).

- -

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.

- -

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.

- -
-
1 Uno de los autores de esta edición especial, Piro, es mundialmente conocido como uno de los desarrolladores originales.
-
- -
-
- -

{{ 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") }}

diff --git "a/files/es/orphaned/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" "b/files/es/orphaned/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" deleted file mode 100644 index 461e300343..0000000000 --- "a/files/es/orphaned/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/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 ---- -

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

-

Visión general

-

Catálogo 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. -

-

Marcadores

-

El servicio del toolkit marcadores es {{ Source("toolkit/components/places/public/nsINavBookmarksService.idl", "nsINavBookmarksService") }}: -

-
var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"].
-                getService(Ci.nsINavBookmarksService);
-
-

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") }}. -

- -

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:

- -

Creación

-

Crear un Marcador -

-
// 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.
-
-

Crear una carpeta -

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

Crear un separador -

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

Crear un marcador dinámico -

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

Lectura

-

Propiedades de los elementos

-

Para todos los elementos: -

- -

Para marcadores: -

- -

Para carpetas: -

- -

Contenido de las carpetas

-

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

-
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.
-
-  }
-}
-
-

Hay documentación sobre otros tipos de nodo disponible en IDL. -

-

Búsqueda

-

Actualización

-

Para todos los elementos: -

- -

Para marcadores: -

- -

Borrado

- -

Observar

-

Importar/Exportar en formato HTML

-

Respaldo/Restauración

-

Nuevo

- -

Historia

-

Agregar

-

Consultas

-

Observar

-

Nuevo

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

 

- -

Desarrollo web

Extensiones
Venkman
El depurador JavaScript proporciona un potente entorno de depuración de JavaScript para navegadores basados ​​en Mozilla.
Inspector DOM
Una herramienta de desarrollo utilizada para inspeccionar, examinar y modificar el DOM de documentos - normalmente páginas web o ventanas XUL.
Firebug
Integra una gran cantidad de herramientas de desarrollo para editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web ( detalles )
Web Developer
Agrega un menú y una barra de herramientas al navegador con varias herramientas de desarrollo web. ( detalles )
Aardvark
Revela los elementos DOM mientras se mueve el ratón/mouse sobre una página. ( detalles )
Más sobre Firefox Add-ons
Validadores
Lista de validadores
Software de creación
Herramientas de creación que cumplen con los estándares
HTMLTidy
Una herramienta para limpiar HTML

JavaScript

Borrador{{ gecko_minversion_inline ("6.0") }}
Un editor de texto integrado en Firefox que te permite editar y ejecutar código JavaScript.
Consola de errores
Venkman
JSLint
JSDoc
herramienta para la generación de documentación (generalmente HTML) a partir de los comentarios de código (similar a JavaDoc).

DOM

Inspector DOM
MODI
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.

Localización

Herramientas de localización y aprovechamiento

Gestión de árboles y ramas

cross-commit script

Herramientas de perfil de usuario

MXR (si utilizas vim, mxr-vim acelera el proceso)

DXR
-

Categorías

-

Interwiki Language Links

-

{{ languages( { "en": "en/Tools", "fr": "fr/Outils", "ja": "ja/Tools", "pl": "pl/Narz\u0119dzia" } ) }}

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

Redirigir datalist

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

a

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

DEFINICIÓN:

-
- -

La etiqueta section proviene del idioma inglés y se traduce al español como sección.

- -

 

- -
-

ETIQUETAS: 

-
- -

<section></section>

- -

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).

- -

 

- -
-

ATRIBUTOS:

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Atributo

- 		-

Valor

- 		-

Descripción

-
-

Genéricos

-
title TextoImplícitoTítulo consultivo del elemento.
style Declaraciones de estiloImplícitoInformación de estilo en línea.
id Un 'nombre'ImplícitoIdentificador único a nivel de documento.
class Lista de clases CSSimplícitoIdentificador a nivel de documento.
dir Uno de los siguientes: "ltr" o "rtl"ImplícitoDirección del texto.
lang Código de idiomaImplícitoInformación sobre el idioma.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
-

Específicos

-
Eventos: onload, onunload.
-

De transición

-
-

atributo

- 		-

valor

- 		-

descripción

-
background Una direcciónImplícitoDirección de la imagen que se usará como fondo.
bgcolor Un colorImplícitoColor del fondo.
text Un colorImplícitoColor del texto.
link Un colorImplícitoIndica el color inicial de los enlaces
alink Un colorImplícitoIndica el color de los enlaces cuando están activos.
vlink Un colorImplícitoIndica el color de los enlaces que han sido visitados.
- -

Ejemplos

- -

-   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
-    <html>
-      <head>
-           <title>Documento html básico</title>
-      </head>
-
-      <body>
-
-        <section>
-          <article>
-             <p>Ejemplo de texto1</p>
-          </article>
-         <article>
-             <p>Ejemplo de texto2</p>
-          </article>
-        </section>
-
-        <section>
-         <article>
-             <p>Ejemplo de texto3 en un segundo artículo </p>
-          </article>
-       </section>
-      </body>
-    </html>
-
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 ---- -

este comentario considero esta fuera dl tema pero queria saber  si hay proceso para instala firefox os en iphone

- -

 

diff --git "a/files/es/orphaned/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" "b/files/es/orphaned/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" deleted file mode 100644 index 764197c8ac..0000000000 --- "a/files/es/orphaned/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_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 ---- -

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

Cuando el código JavaScript intenta instalar un plugin de búsqueda, Firefox muestra una alerta que pide al usuario permiso para instalarlo. -

-

Instalación de plugins MozSearch y OpenSearch

-

Para instalar plugin MozSearch o OpenSearch, es necesario usar el método DOM window.external.AddSearchProvider(). La sintaxis para este método es: -

-
window.external.AddSearchProvider(engineURL);
-
-

Donde engineURL es el URL del archivo XML del plugin del motor de búsqueda. -

-
Nota: el soporte a OpenSearch y MozSearch está disponible sólo en Firefox 2 y superior.
-

Para más detalles sobre MozSearch, lease Creación de plugins MozSearch. -

-

Instalación de plugins Sherlock

-

Para instalar un plugin Sherlock, hay que llamar a window.sidebar.addSearchEngine(), la sintaxis para hacerlo es: -

-
window.sidebar.addSearchEngine(engineURL, iconURL, suggestedName, suggestedCategory);
-
- -

Para más detalles sobre Sherlock, visite http://developer.apple.com/macosx/sherlock/ -

Categorías -

interwiki links -

{{ 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 ---- -
{{LearnSidebar}}
- -


- Si estás aqui, es probable que sea porque estas interesado en contribuir al área de aprendizaje de MDN. ¡Una noticia estupenda!

- -

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 principiante, desarrollador web, o profesor.

- -
-

Nota: Si ya eres colaborador de MDN, no dudes en volver a revisar la página de status de la documentación para mantener un seguimiento del trabajo que se ha realizado y observar cuáles son nuestras prioridades de escritura.

-
- -
-

Nota: Los colaboradores usan tableros de Trello para organizar sus actividades. Si quieres usarlos, no tienes más que crearte una cuenta de Trello y avisar a Jeremie para que te deje editar el tablero.

-
- -

Soy principiante

- -

¡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.

- -

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 nuestra lista de correo o nuestro canal IRC (ve al final de la página para más detalles).

- -

A continuación puedes encontrar algunas formas de las que puedes contribuir:

- -
-
Añade etiquetas a nuestros artículos (5 min)
-
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 entradas del glosario y a los artículos de aprendizaje sin etiquetas para comenzar.
-
Lee y revisa una entrada de glosario (15 min)
-
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 a través de nuestra lista de correo.
-
Escribe una nueva entrada de glosario (1 hora)
-
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!
-
Lee y revisa un artículo de aprendizaje (2 horas)
-
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.
-
- -

Soy desarrollador web

- -

¡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.

- -
-
Lee y revisa una entrada de glosario (15 min)
-
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 a nuestra lista de correo o al canal IRC.
-
Escribe una nueva entrada de glosario (1 hora)
-
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 muchos términos indefinidos que necesitan tu atención. Escoge uno y listo.
-
Lee y revisa un artículo de aprendizaje (2 horas)
-
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.
-
- -
-
Escribe un nuevo artículo de aprendizaje (4 horas)
-
En MDN hacen falta artículos sencillos y prácticos sobre el uso de tecnologías web (HTML, CSS, JavaScript, 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.
-
Crea ejercicios, ejemplos de código o herramientas de aprendizaje interactivo (? horas)
-
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 JSFiddle o similares, hasta crear contenido interactivo completamente hackeable con Thimble. ¡Libera tu creatividad!
-
- -

Soy profesor

- -

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.

- -
-
Lee y revisa una entrada en el glosario (15 min)
-
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 lista de correo  or Canal de chat IRC.
-
Escribir una nueva entrada de glosario (1 hora)
-
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. Su experiencia como educador puede ayudar a crear excelentes entradas de glosario; tenemos  muchos terminos indefinidos que necesitan de su atención. Escoge uno y ve por él.
-
Añadir ilustraciones y/o esquemas a los artículos (1 hora)
-
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 artículos que le falan contenido ilustrativo y escoge uno al que te gustaría crearle los gráficos.
-
Leer y revisar un artículo de aprendizaje (2 horas)
-
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 .
-
Escribir un nuevo artículo de aprendizaje (4 horas)
-
Necesitamos artículos simples y directos sobre el ecosistema web y otros temas funcionales a su alrededor. 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.
-
Crear ejercicios, cuestionarios o herramientas interactivas de aprendizaje (? horas)
-
Todos nuestros artículos de aprendizaje requieren lo que llamamos materiales de "aprendizaje activo". Dichos materiales son ejercicios o contenido interactivo que ayudan al usuario a aprender a usar y ampliar los conceptos detallados en un artículo. Aquí puede hacer muchas cosas, desde crear concursos hasta crear contenido interactivo completamente pirateable con  Thimble. Da rienda suelta a tu creatividad!
-
Crea rutas de aprendizaje (? horas)
-
Con el fin de proporcionar tutoriales progresivos y comprensibles, tenemos que dar forma a nuestro contenido en rutas. Es una forma de recopilar contenido existente y descubrir lo que falta para crear un artículo de aprendizaje para escribir .
-
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 ---- -

{{ gecko_minversion_header("2") }}

-

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.

-

Este documento describe los elementos nuevos o modificados que están disponibles en Gecko/Firefox.

-

El elemento <input>

-

El elemento {{ HTMLElement("input") }} tiene nuevos valores para el atributo {{ htmlattrxref("type", "input") }}.

- -

El elemento {{ HTMLElement("input") }} también tiene nuevos atributos:

- -

El elemento <form>

-

El elemento {{ HTMLElement("form") }} tiene un nuevo atributo:

-

El elemento <datalist>

-

El elemento {{ HTMLElement("datalist") }} representa la lista de elementos {{ HTMLElement("option") }} como sugerencias cuando se llena un campo {{ HTMLElement("input") }}.

-

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.

-

El elemento <output>

-

El elemento {{ HTMLElement("output") }} representa el resultado de un cálculo.

-

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.

El atributo placeholder

-

El atributo {{ htmlattrxref("placeholder", "input") }} en elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} 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.

El atributo autofocus

-

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 autofocus, que es booleano. Este atributo puede ser aplicado a los elementos {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}. La excepción es que autofocus no puede aplicarse a un elemento <input> si el atributo {{ htmlattrxref("type", "input") }} hidden está seleccionado (es decir, no puede enfocar automáticamente un elemento escondido).

La propiedad label.control del DOM

-

La interface HTMLLabelElement DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento {{ HTMLElement("label") }} de HTML. La propiedad control 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.

Validación restringida

-

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.

-

Si se ajusta el atributo title al elemento {{ HTMLElement("input") }}, esa cadena se mostrará en una ventana emergente de ayuda cuando falle la validación. Si title se ajusta a una cadena vacía, no se mostrará ninguna ventana emergente. Si el atributo title 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 setCustomValidity()).

-
Note: 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") }}.
-

Sintaxis de HTML para la validación restringida

-

Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.

- -

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 submit o image). Estos atributos indican que el formulario no será validado cuando se envie.

API de validación restringida

-

Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:

- -

{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5"}) }}

-

{{ HTML5ArticleTOC() }}

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

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.
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.
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.
Para aprender acerca de las actualizaciones y cambios del proyecto Narro vista el proyecto Narro y el sitio de la herramienta basada en web. A continuación encontrarás que son un requisito previo para localizar en Narro.

-

 

-

Registrándose en Narro

-

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.

Para nuestros ejemplos, vamos a llamar a nuestra nueva localización  X-prueba. Realiza los siguientes pasos para configurar tu nueva localización.

-


Alternativamente, si tu localización no existe, ponte en contacto con tu comunidad l10n y pregunta acerca de cómo puedes participar!

-
  1. Contacta con los administradores de l10n Mozilla l10n utilizando la lista de distribución dev-l10n para preguntar si  tu localización ya existe.
  2. Si no existe, envía un correo electrónico a  dev-l10n lista de correo 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:
    •        tu nombre de usuario.
    •        tu idioma.
    •        un regalo. Los productos recién horneados son siempre un buen regalo ;).
    Alternativamente, si tu localización no existe, ponte en contacto con tu comunidad l10n y pregunta acerca de cómo puedes participar!
  3. 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.
  4. Después de recibir estos derechos, salir y entrar de nuevo para activarlos.
    5. -
-

La imagen de abajo es la pantalla que verá una vez que se conecte a activar sus derechos de mantenimiento.

-

-

 

-

Importar

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

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.

Ahora vamos a repasar cómo configurar la utilidad de importación en tu proyecto.

-

 

-
  1.  Verás una lista de enlaces de proyectos inactivos con varios nombres (Firefox Aurora, Firefox Release, etc.) Hazle clic en el enlace del proyecto que tu quieras activar. En este caso le hacemos clic en Firefox Aurora.
  2. Por defecto, está tomada la pestaña de descripción del proyecto. Navega a la etiqueta Import para encontrar la utilidad de importación.
  3. Una vez ahí, encontarás estas secciones de importación:
    •  Texts.- Para importar los archivos fuentes (por ejemplo desde en-US).
    • Translations.- Para la importación de proyectos ya existentes.
    • Options.- Casillas de verificación para configurar la importación.
    • Operation log.- Descripción de la función de Importación que está siendo ejecutada.
  4. Por ahora nos vamos a centrar solo en las secciones Texts y Options. En la sección Texts 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 Options están destiqueadas para esta importación.
  5. Clic en el botón Import. El Operation log mostrará un mensaje una vez que la importación haya sido completada satisfactoriamente.
    6. -
-

En la imágen de abajo es lo que deberás ver cuando se complete la importación.

-

-

¡¡Ahora ya estás listo para comenzar a traducir tu proyecto!!

-

 

-

Traducción

-

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 Translate 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.
Irónicamente, la primera vez que comienzas a traducir podrás ver las primeras entradas algunos de los archivos region.properties ese archivo no debe ser traducido 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:

- -

Cualquier cadena que no caiga dentro de esas dos categorias es traducible. Avanzar con las cadenas traducibles para iniciar la traducción.

-

-


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.

-

Ejemplo 1: Los archivos DTD, "searchbar.dtd"

-

Narro te permite buscar cadenas en particular. Para este ejemplo buscaremos el archivo DTD (a menudo se llama una entidad) llamado searchbar.dtd que contiene la cadena Manage Search Engines... Tu puedes 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 Manage Search Engines...

-

-

Así es como podrás usar Narro para traducir el elemento Manage Search Engines...

-

1. Navega en la pestaña Translate dentro del proyecto Firefox Aurora.

-

2. Ingresa la cadena “Manage Search Engines... ” en el campo Search for y da clic en Search.

-


Después de ingresar en la cadena y haciendo clic en “Search”, Narro te muestra la cadena que estabas buscando.

-

-

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.
4. Entra en la traducción y presiona el botón save.

-

En el ejemplo de abajo verás el elemento  Manage Search Engines... que ha sido traducido a MANAGE SEARCH ENGINES.

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.

-

-

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.

-

Ejemplo 2: Los Archivos Property, "search.properties"

-

Los archivos Properties search.properties contienen la cadena Add %S. Puedes encontrar facilmente esta cadena en la interfaz del navegador visitando un sitio web que procea de un plugin de búsqueda (como http://developer.mozilla.org/) 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 Add %S, donde %S es reemplazado por el nombre del sitio.

-

-

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.

-

Exportando un paquete de idioma .xpi

-

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.
La utilidad de exportación en la pestaña Export 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

-
  1. Ir a la pestaña Export. En la siguiente imágen se ilustra lo que verás cuando estés en esta pestaña

     

  2. Seleccionar la opción Approved suggestion del menú desplegable Export translations using
  3. Clic en el botón Export.
  4. 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.
    5. -
-

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.

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.

-
Aviso: No usar el comando hg push ya que esto es sólo para pruebas locales.
-

Para saber como probar tu reciente paquete de idioma exportado, visita el tema Testing your language pack  en la wiki deCreate a new localization

-

 

-

Exportación Final

-

Una vez que has completado tu traducción, revísala y pruébala 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 lista de correo dev-l10n o al administrador global de Narro pidiendo asistencia.

-
Por favor ten en cuenta que el Mozilla l10n-drivers ha producido el l10n dashboard para seguir el progreso de todas las localizaciones de Mozilla. Esto está basado en una poderosa herramienta llamadaCompare-Locales. 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.
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 ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/es/docs/MDN")}}
- -
-

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.

-
- -

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:

- -
    -
  1. Crear cuenta MDN.
    2. -
  2. Join in conversations (aun no disponible en español).
    3. -
  3. Siga lo que está pasando.
    4. -
- -

Cómo funciona la comunidad

- -

Aquí encontraras más artículos que describen a la comunidad de MDN.

- -
-
-
-
Community roles
-
No disponible en español por el momento.
-
Doc sprints
-
No disponible en español por el momento
-
Siga lo que está pasando
-
MDN es auspiciado por  La comunidad de la red de desarrolladores de Mozilla. Aquí encontraras algunas maneras por las cuales compartimos información acerca de lo que estamos haciendo.
-
- -
-
-
- -
-
-
MDN community conversations
-
no disponible en español por el momento
-
Trabajar con nuestra comunidad
-
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.
-
-
-
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 ---- -
{{MDNSidebar}}
- -

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.

- -

Reglas generales de comportamiento.

- -

Aquí encontraras algunas reglas generales de conducta para cuando trabajes en la comunidad Mozilla.

- - - -

Se cortés

- -

Siempre se diplomático y respetuoso cuando te comuniques con los demás.

- -

Señalando errores cortésmente

- -

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'.

- -

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) :

- -
-

Hola, MrBigglesworth, he notado sus contribuciones a la documentación de la API de Wormhole, ¡y es fantástico contar con su ayuda! Me gusta especialmente la forma en que equilibraste tu nivel de detalle con la legibilidad. Dicho esto, sin embargo, podría hacer que estos artículos sean aún mejores y más útiles si agrega las etiquetas correctas a las páginas sobre la marcha.

- -

Consulte la guía de etiquetado de MDN (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) para obtener más detalles.

- -

Gracias de nuevo y espero sus futuras contribuciones.

-
- -

Intercambiando conocimiento

- -

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.

- -

Canales de comunicación

- -

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.

- -

Discourse (en Inglés)

- -

El foro MDN Discourse es un buen lugar para hacer preguntas generales sobre la contribución a MDN y empezar discusiones.

- -

Chat (en Inglés)

- -

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 MDN Web Docs  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.

- -

GitHub (en Inglés)

- -

Si encuentras un problema en MDN, o deseas hacer una pregunta, ¡puedes presentar un problema en nuestro repo de GitHub! Luego serán evaluados y procesados en algún momento en el futuro.

- -

Bugzilla

- -

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 guía de comportamiento Bugzilla en mente todo el tiempo!

- -

Email

- -

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.

- -
-

Nota: 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.

-
- -

Estado del contenido

- -

Tenemos varias herramientas útiles que te proporcionan información sobre el estado de la documentación.

- -
-
Tablero de revisión
-
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).
-
Visión general del estado de la documentación
-
Nuestra pagina de vista del estado de documentación 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.
-
Los planes del proyecto de documentación
-
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.
-
MDN Taiga (en Inglés)
-
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  wiki de Mozilla.
-
- -

La comunidad de desarrollo

- -

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!

- -

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.

- -

En una nota relacionada, una gran manera de encontrar a la persona adecuada para hablar es mirar la lista de propietarios del módulo.

- -

La comunidad de escritura

- -

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.

- -

Mira el articulo Únete a la comunidad para mas información acerca de la comunidad MDN.

- -

 El lugar donde más frecuentemente podrás interactuar directamente con otros escritores es en el foro Discourse.

- -

Teniendo en cuenta la {{anch("Guía general de comportamiento")}} , usted notará que las cosas salen bien por lo general.

- -

Mira también

- - 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 ---- -
{{MDNSidebar}}
- -

Para editar contenido en MDN, necesitas un perfil MDN. No es necesario un perfil si solo quieres buscar y leer los documentos de MDN:

- -
    -
  1. En la parte superior de cada página en MDN encontrarás el botón de  Registrarse. 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.
    2. -
  2. 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.
    3. -
  3. Sigue las indicaciones de GitHub o de Gmail para conectar tu cuenta a MDN.
    4. -
  4. 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. 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.
    5. -
  5. Click en Crear mi perfil MDN.
    6. -
  6. 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ó.
    7. -
- -

¡Listo! ¡Ya tienes una cuenta MDN y puedes editar páginas inmediatamente!

- -

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.

- -
-

Nota: 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!

-
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 ---- -
{{MDNSidebar}}

La revisión técnica consiste en revisar la precisión técnica y lo completo que se encuentra un artículo, 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.

- -

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.

- - - - - - - - - - - - - - - - -
¿Dónde hay que hacerla?En artículos específicos marcados requiriendo revisión técnica.
¿Qué necesitas saber para hacer la tarea? -
    -
  • Conocimiento experto del tema del artículo que estás revisando.
    • -
  • Habilidad para editar un artículo wiki en MDN.
    • -
-
¿Cuáles son los pasos para hacerlo? -
    -
  1. Vé a la lista de páginas que necesitan revisiones técnicas. Ésta lista todas las páginas para las cuales se solicitó revisión técnica.
    2. -
  2. Elige una página con cuyo tema estés muy familiarizado.
    3. -
  3. Haz click en el enlace del artículo para cargar la página.
    4. -
  4. Una vez cargada la página, haz click en el botón  EDITAR (EDIT) 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.
    5. -
  5. Mientras lees el artículo, corrige cualquier información técnica que no esté correcta y agrega cualquier información importante que falte.
    6. -
  6. 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 "Revisión Técnica: descripciones de parámetros arregladas".
    7. -
  7. Haz click en el botón GUARDAR LOS CAMBIOS (SAVE CHANGES).
    8. -
  8. Una vez que corregiste el artículo aparece en la pantalla después que el editor se haya cerrado, chequea la entrada Técnica al costado, debajo de Las siguientes revisiones han sido solicitadas (The following reviews have been requested) y haz click en ENVIAR REVISIÓN (SUBMIT REVIEW).
    9. -
  9. Y listo!
    10. -
-
- -

 

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 ---- -
{{MDNSidebar}}
- -

La revisión editorial consiste en reparar errores tipográficos y de ortografía, 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.

- - - - - - - - - - - - - - - - - - - - -
¿Cuál es la tarea? Verificar y corregir la gramática, ortografía y contexto de los artículos.
¿Dónde hay que hacerla?Dentro de artículos específicos que están marcados como que requieren una revisión editorial.
¿Qué necesitas saber para hacer la tarea?Necesitas tener buen manejo de la gramática española y su ortografía.
¿Cuáles son los pasos para hacerlo? -
    -
  1. Elige un artículo: -
      -
    1. Ve a la lista de artículos que necesitan revisión editorial.  Esto lista todas las páginas para las que se solicitó una revisión editorial.
      2. -
    2. Elige una página que tenga un título en español y cuya ruta no empiece con Template:.
      3. -
    3. Haz click en el enlace del artículo para cargar la página.
      4. -
    -
    2. -
  2. Una vez cargada la página, haz click en el boton editar (EDIT) 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.
    3. -
  3. Corrige todos los errores tipográficos y ortográficos, gramática, o de uso que veas.
    4. -
  4. Ingresa un Comentario Revisión en la parte superior del artículo; algo como "Revisión editorial: errores de tipografía, gramática y ortografía reparados."
    5. -
  5. Haz click en el boton GUARDAR LOS CAMBIOS (SAVE CHANGES).
    6. -
  6. Una vez que el artículo corregido aparezca en la pantalla después de haberse cerrado el editor, marca la entrada Editorial al costado debajo de Se han solicitado las siguientes revisiones (The following reviews have been requested) y haz click en ENVIAR REVISION (SUBMIT REVIEW).
    7. -
  7. -

    ¡Listo!

    -
    8. -
-
- -

 

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 ---- -
{{MDNSidebar}}
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. 
-Los comentarios en cursiva son información  sobre cómo usar parte de la plantilla
- -
{{CSSRef}}
- -
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.
- -
{{non-standard_header}}
- -
 
- -
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.
- -
{{SeeCompatTable}}
- -

 

- -

Desripción de la propiedad. Debe comenzar por "La propiedad xyz 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.

- -

{{note("Para cualquier mensaje especial")}} Pero no agregue varias notas. Estas deben ser realmente importantes, ¡o ser parte de la decripción!

- -

{{cssinfo}}

- -

Sintaxis

- -
/* 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;
-
- -

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.

- -

Valores

- -

Cada elemento de la sintaxis formal debe ser explicado

- -
-
valor_1
-
Es una palabra clave que significa...
-
valor_2 {{ Non-standard_inline() }} {{experimental_inline()}}
-
Es una palabra clave que significa
-
- -

Sintaxis formal

- -

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.

- -{{csssyntax}} - -

Ejemplos

- -

Agregue esto solo si hay un ejemplo. Sin enlace roto aqui.

- -

CSS

- -
elementName {
-  property: value;
-  estoes: "ejemplo";
-  dream: 10000000mm;
-  amor: "peligro";
-}
- -

HTML

- -
<elementName>foo bar</elementName>
- -

Resultado

- -

{{EmbedLiveSample("Examples")}}

- -

Especificaciones

- -

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.

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}Sin cambios desde CSS 2.1
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Definición inicial
- -

Compatibilidad del navegador

- -

(Ver Tablas de compatibilidad para más información)

- -

Ver también

- - 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 ---- -
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Las páginas en MDN pueden incluirmacrosKumaScriptpara 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.

- -

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.

- -
-

Advertencia: ya no recomendamos usarSeeCompatTable. 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.

-
- -

Aquí está la definición de experimental del artículo MDN Definitions and Conventions:

- -

¿Dónde debe hacerse esta tarea?

- -

Páginas en las siguientes listas:

- -
-
- -
-
¿Qué necesitas saber para hacer la tarea?
-
Conocimiento del estado de estandarización o implementación del elemento relevante.
-
¿Cuáles son los pasos para hacer la tarea?
-
-
    -
  1. Revise la página para ver con qué elemento o elementos está asociada la macro.
    2. -
  2. 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.
    3. -
  3. 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")}}.
    4. -
  4. Guarde la página con un comentario sobre lo que hizo.
    5. -
  5. 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.
    6. -
-
-
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 ---- -
{{MDNSidebar}}
- -
-
{{IncludeSubnav("/en-US/docs/MDN")}}
- -
-

En este artículo te mostraremos cómo configurar el resumen SEO (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:

- -
    -
  • Lo utilizan Google y otros motores de búsqueda para ayudar a catalogar e indexar páginas.
    • -
  • 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.
    • -
  • 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.
    • -
  • 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í.
    • -
- -

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.

-
-
- -

El resumen predeterminado

- -

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:

- - - -

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.

- -

Estableciendo el resumen

- -

Veamos cómo configurar el resumen de una página.

- -

¿Cuál es la tarea?

- -

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.

- -

¿Dónde necesita ser hecho?

- -

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.

- -

¿Qué necesitas saber para hacer la tarea?

- -

Necesitas saber usar el editor MDN. También necesitas buenas habilidades de escritura y familiaridad con el tema de la página a resumir.

- -

¿Cuáles son los pasos para hacerlo?

- -
    -
  1. Elige una página a la que quieras colocarle un resumen: -
      -
    1. En la página de estado de la documentación MDN, haz clic en el enlace debajo de  Secciones (Sections) para un tema en el que tengas conocimientos (por ejemplo, HTML).
      -
      2. -
    2. En la página de estado de la documentación del tema, haz clic en la cabecera Páginas (Pages) de la tabla Resumen (Summary). 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.
      -
      3. -
    3. Elige una página en la que falte el resumen o que tenga uno pobre.
      -
      4. -
    4. Haz clic en el enlace para ir a esa página.
      5. -
    -
    2. -
  2. Haz clic en Editar (Edit) para abrir la página en el editor MDN.
    3. -
  3. 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.
    4. -
  4. Selecciona el texto a usar como resumen.
    5. -
  5. En el widget Estilos (Styles) de la barra de herramientas del editor selecciona Resumen SEO (SEO Summary). (En el código fuente de la página, esto crea un elemento  {{HTMLElement("span")}} con class="seoSummary" encerrando el texto seleccionado).
    -
    6. -
  6. Guarda tus cambios con un comentario de revisión como "Coloqué el resumen a la página".
    7. -
- -

Elaboración de un buen resumen

- -

El resumen se utiliza en diversos escenarios entre los que se pueden incluir:

- - - -

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.

- -
-

Nota: 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.

-
- - - -

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.

- -

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.

- -

Ver también

- - 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 ---- -
{{MDNSidebar}}

Etiquetar 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.

- - - - - - - - - - - - - - - -
¿Dónde hay que hacerlo?Dentro de páginas específicas relacionadas con JavaScript que aún no tengan etiquetas
¿Qué necesitas saber para hacer esta tarea? -
    -
  • Conocimiento básico de código JavaScript, como saber qué es un método o una propiedad.
    • -
-
¿Cuáles son los pasos para hacerla? -
    -
  1. Elige una de las páginas del la lista que se encuentra en el enlace anterior.
    2. -
  2. Haz Click en el enlace del artículo para cargar la página.
    3. -
  3. Una vez cargada la página, haz click en el botón EDIT cerca de la parte superior ( esto te coloca en el editor MDN).
    4. -
  4. Cómo mínimo se debería agregar la etiqueta JavaScript. Aquí hay otras etiquetas que se pueden agregar:
    5. -

  5. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TagWhat pages to use it on
    Methodmétodos
    Propertypropiedades
    prototypeprototipos
    Object type namemétodos de un objeto; por ejemplo String.fromCharCode debería llevar la etiqueta String
    ECMAScript6 and Experimentalcaracterísticas agregadas en una nueva versión ECMAScript
    Deprecatedcaracterísticas desaprobadas (cuyo uso está desaconsejado pero aún tiene soporte)
    Obsoletecaracterísticas obsoletas (que ya no tienen soporte en los navegadores modernos)
    othersVer Mestándares de etiquetado MDN para otras etiquetas posibles a aplicar
    -
    6. -
  6. Guarda con un comentario.
    7. -
  7. ¡Y Listo!
    8. -
-
-

 

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

{{MDNSidebar}}{{Draft}}

- -

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

- -

Macros actuales de las barras laterales de MDN

- -

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.

- -
-
{{TemplateLink("AddonSidebar")}}
-
Inserts a sidebar for navigating the add-ons documentation; this is primarily content about creating browser extensions.
-
{{TemplateLink("APIRef")}}
-
Inserts a sidebar used within API interface reference pages and subpages.
-
{{TemplateLink("CanvasSidebar")}}
-
Inserts a sidebar used within the HTML/DOM Canvas documentation.
-
{{TemplateLink("DefaultAPISidebar")}}
-
Inserts a default sidebar that can be used on the API overview page of an API that doesn't have its own sidebar type.
-
{{TemplateLink("FirefoxSidebar")}}
-
Inserts a sidebar used on the documentation that's specific to Firefox.
-
{{TemplateLink("GamesSidebar")}}
-
Inserts a sidebar for navigating MDN's content about developing games using web technologies.
-
{{TemplateLink("HTMLSidebar")}}
-
Inserts the sidebar used within MDN's HTML documentation.
-
{{TemplateLink("HTTPSidebar")}}
-
Inserts a sidebar for use on pages within MDN's HTTP documentation.
-
{{TemplateLink("JSSidebar")}}
-
Inserts a sidebar for use within the JavaScript documentation.
-
{{TemplateLink("LearnSidebar")}}
-
Inserts the Learning Area sidebar.
-
{{TemplateLink("MDNSidebar")}}
-
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.
-
{{TemplateLink("ServiceWorkerSidebar")}}
-
Inserts a sidebar for use within documentation about Service Workers.
-
{{TemplateLink("SpiderMonkeySidebar")}}
-
Inserts a sidebar for use on pages documenting SpiderMonkey, Mozilla's JavaScript engine.
-
{{TemplateLink("ToolsSidebar")}}
-
Inserts a sidebar listing pages about Firefox developer tools.
-
{{TemplateLink("WebAssemblySidebar")}}
-
Inserts a sidebar containing links related to WebAssembly.
-
{{TemplateLink("WebExtAPISidebar")}}
-
Inserts a sidebar used to navigate the API reference documentation about browser e3dtensions (WebExtensions).
-
{{TemplateLink("WebGLSidebar")}}
-
Inserts a sidebar that provides navigation of WebGL-related content.
-
{{TemplateLink("WebRTCSidebar")}}
-
Inserts a sidebar whose contents provide navigation of WebRTC documentation on MDN.
-
{{TemplateLink("XSLTRef")}}
-
Inserts a sidebar with documentation for XSLT, EXSLT and XPath.
-
- -

Using sidebars

- -

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>\{{MDNSidebar}}</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.

- -

If there's already a {{HTMLElement("p")}} block with macro calls at the top of the page, such as those that create banners like \{{Non-standard_Header}}, you can put the sidebar macro inside the same {{HTMLElement("p")}}, like this:

- -
<p>\{{HTTPSidebar}}\{{Non-standard_Header}}</p>
- -

Creating sidebars

- -

details coming

- -

Talk about {{TemplateLink("SidebarUtilities")}}.

- -

There are some macros that can be used to help build sidebars:

- -
-
{{TemplateLink("ListSubpagesForSidebar")}}
-
Creates a tree of links structured for use in a sidebar, using the subpages of the specified page.
-
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 ---- -
{{MDNSidebar}}
- -

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.

- -

Este artículo explica cómo escribir páginas para el Área de aprendizaje.

- -

Cómo escribir un artículo en el Área de aprendizaje

- -

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 tablero de Trello de nuestro equipo.

- -
Escribe un nuevo artículo
- -

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 contáctanos.

- -

Paso 1: Escribe en dos líneas

- -

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:

- -
-

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.

-
- -

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.

- -

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!

- -

Paso 2: Agregar un cuadro superior

- -

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 "Entendiendo las URLs y su estructura". Puedes usar este artículo como modelo cuando escribas tu propio artículo.

- - - - - - - - - - - - -
Requisitos previos:Primero necesitas saber cómo funciona Internet, qué es un servidor web  y los conceptos detras de los enlaces de la web.
Objetivo:Aprenderás qué es una URL y cómo funciona en la web.
- -
-
Requisitos previos
-
¿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).
-
Objetivos
-
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.
-
- -
-

Nota: 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 learn-box además de la clase predeterminada standard-table.Para hacer esto, cuando crees o edites las propiedades de la tabla, ve al panel "Avanzado" y configura el campo Stylesheet Classes a "standard-table learn-box".

-
- -

Paso 3: Escribir una descripción completa

- -

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!

- -

Paso 4: Cavar más profundo

- -

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 guía de estilo). ¡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!

- -

Como guía, aquí hay algunos consejos de escritura para principiantes:

- - - -

Eche un vistazo a las primeras secciones de nuestras Funciones - Bloques de código reutilizables para algunas buenas secciones descriptivas.

- -

Paso 5: Proporcionar material de "aprendizaje activo"

- -

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.

- -

Puede elegir incluir los ejemplos directamente en la página como muestras en vivo, o vincularlos si realmente no funcionan como una muestra en vivo. Si está interesado en ayudar a crear estos valiosos materiales, lea el artículo Cree un ejercicio interactivo para ayudar a aprender la web.

- -

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.

- -

Eche un vistazo a Aprendizaje activo: seleccione diferentes elementos para un ejercicio de aprendizaje interactivo en vivo, o Aprendizaje activo juegue con posibilidades para un estilo diferente de ejercicio que les exija descargar una plantilla localmente y modificarla siguiendo los pasos proporcionados.

- -

Paso 6: Obtenga el artículo revisado y póngalo en el menú de navegación del Área de aprendizaje

- -

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 Contáctenos para conocer las mejores maneras de comunicarse.

- -

En el menú de navegación principal del Área de aprendizaje. Este menú es generado por la macro Barra de aprendizaje, que necesita privilegios especiales para editar, así como una vez más, hable con uno de nuestro equipo sobre cómo agregarlo.

- -

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.

- -

Artículos sugeridos

- -

¿Así es que quieres contribuir?

- -

El equipo del Área de Aprendizaje Mantiene ONU Tablero de Trello las ideas Con de Artículos para Escribir. ¡Siéntete libre de elegir uno y ponte a trabajar!

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 ---- -
{{MDNSidebar}}
- -

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.

- -

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.

- -

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")}}).

- -

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.

- -

Siga los siguientes pasos para habilitar la regeneración automática:

- -
    -
  1. Cambia el idioma del editor a inglés.
    2. -
  2. Haga clic en el botón Edit en la página para ingresar al modo de edición.
    3. -
  3. Debajo del título de la página, haga clic en Edit page title and properties ubicados cerca del título de la página. Aparecen los campos de metadatos de la página.
    4. -
  4. Establezca un valor para Rendering max age . 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.
    5. -
  5. 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".
    6. -
- -

La página se regenerará automáticamente en el horario que especificó.

- -
-

Nota: La opción Edit page title and properties no está disponible al crear una nueva página; tendrás que volver a abrir el editor después de tu primer guardado.

- -

La opción Edit page title and properties no está disponible de momento en otros idiomas que no sean inglés.

-
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 ---- -
{{MDNSidebar}}

En MDN, las plantillas escritas en KumaScript son usadas para automatizar la generación de contenido y la personalización de las páginas. Cada plantilla es un archivo separado del directorio de macros del repositorio GitHub KumaScript.

- -

Cualquiera que edite páginas wiki de MDN puede invocar plantillas utilizando macros en los artículos MDN.  Cuaquiera puede crear y editar plantillas vía el repositorio GitHub KumaScript GitHub 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). 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.

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

Introducción

-

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 <layer> 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.

-

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:

- -

Trucos generales para la programación multinavegador

-

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.

-

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.

-

Dado que los diferentes navegadores utilizan a veces diferentes APIs para una misma funcionalidad, es muy posible que encuentres múltiples bloques if() else() 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:

-
. . .
-
-var elm;
-
-if (ns4)
-  elm = document.layers["myID"];
-else if (ie4)
-  elm = document.all["myID"]
-
-

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.

-

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 if() else(), 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.

-
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;
-}
-
-

El código de arriba sigue arrastrando el problema del browser sniffing o el proceso de detección para saber qué navegador está utilizando el usuario. El browser sniffing es detectado generalmente gracias al parámetro useragent, como:

-
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
-
-

Mientras que la utilización del parámetro useragent 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.

-

Si el tipo de navegador no importa (supongamos que se ha bloquado el acceso a la aplicación web a navegadores no soportados), será mucho mejor y más fiable detectar las capacidades del navegador o el soporte de objetos en particular. Generalmente se puede hacer esto probando la funcionalidad requerida en JavaScript, por ejemplo, en lugar de:

-
if (isMozilla || isIE5)
-
-

Se debería de usar:

-
if (document.getElementById)
-
-

Esto permitiría a otros navegadores que soportan ese método estandar del W3C (tales como Opera o Safari) funcionar sin ningún cambio.

-

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.

-

JavaScript también permite sentencias condicionales en línea, lo que ayuda a la legibilidad:

-
var foo = (condicion) ? condicionEsTrue : condicionEsFalse;
-
-

Por ejemplo, para obtener un elemento se debería usar:

-
-function getElement(aID){
-  return (document.getElementById) ? document.getElementById(aID)
-                                   : document.all[aID];
-}
-
-

Diferencias entre Mozilla e Internet Explorer

-

Primero se discutirán las diferencias en la forma en la que se comporta el HTML en Mozilla y en Internet Explorer.

-

Títulos emergentes

-

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.

-

Los navegadores antiguos introdujeron los títulos emergentes en el HTML mostrándolos en enlaces y usando el valor del atributo alt como contenido del título. La última especificación de W3C para HTML creó el atributo title, pensado para contener una descripción detallada del enlace. Los navegadores modernos utilizan el atributo title para mostrar títulos emergentes y Mozilla sólo muestra dichos títulos basándose en el ese atributo y no en el atributo alt.

-

Entidades

-

El marcado HTML puede contener varias entidades definidas por el departamento de estándares web del W3C. 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 &#160 o con su referencia alfabética correspondiente &nbsp;.

-

Algunos navegadores antiguos, como Internet Explorer, son tan fulleros que permiten usar entidades reemplazando el carácter ; (punto y coma) al final con contenido normal de texto.

-
&nbsp Foo
-&nbsp&nbsp Foo
-
-

Internet Explorer visualizará los &nbsp mostrados anteriormente como espacios en blanco, pese a que va en contra de la especificación del W3C. El navegador no analizará un &nbsp si va inmediatamente seguido por más caracteres. Por ejemplo:

-
&nbsp12345
-
-

Este código no funcionará en Mozilla, dado que va en contra de los estándares del W3C. Es mejor usar la forma correcta (&nbsp;) para evitar discrepancias entre navegadores.

-

Diferencias en el DOM

-

El Modelo de Objetos de Documento (DOM) es la estructura en árbol que contiene los elementos del documento. 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.

-

Accediendo a los elementos

-

Para referenciar un elemento usando una técnicas multinavegador, debe de usarse document.getElementById(id), 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.

-

Mozilla no soporta el acceso a elementos a través de document.elementName, ni siquiera a través del nombre del elemento; algo que Internet Explorer permite (llamado también global namespace polluting). Mozilla tampoco soporta el método document.layers de Netscape ni el document.all de Internet Explorer. Mientras que document.getElementById permite referenciar un único elemento, puedes usar document.layers y document.all para obtener una lista de todos los elementos del documento con un nombre determinado, como todos los elementos <div>.

-

El método del DOM nivel 1 del W3C que permite referenciar a todos los elementos con el mismo nombre de etiqueta es getElementsByTagName(). Este método devuelve un vector en JavaScript y puede ser invocado desde el elemento document 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 getElementsByTagName("*").

-

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 <layer>(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 <div>, algo que Internet Explorer también utiliza y que está presente en la especificación HTML.

- - - - - - - - - - - - - - - - -
- Tabla 1. Métodos usados para acceder a elementos
MétodoDescripción
document.getElementById( unId )Devuelve una referencia al elemento cuyo atributo id coincide con el pasado como parámetro.
document.getElementsByTagName( unNombre )Devuelve un vector de elementos cuyo nombre de etiqueta coincide con el pasado como parámetro.
-

Recorrer el DOM

-

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 children.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tabla 2. Métodos usados para recorrer el DOM
Propiedad/MétodoDescripción
childNodesDevuelve un vector con todos los nodos hijos del elemento.
firstChildDevuelve el primer nodo hijo del elemento.
getAttribute( nombre )Devuelve el valor del atributo cuyo nombre se pasa como parámetro.
hasAttribute( nombre )Devuelve un valor booleano que indica si el nodo actual tiene un atributo definido con el nombre especificado.
hasChildNodes()Devuelve un valor booleano que indica si el nodo actual tiene al menos un elemento hijo.
lastChildDevuelve el último nodo hijo del elemento.
nextSiblingDevuelve el nodo que sigue inmediatamente al actual.
nodeNameDevuelve el nombre del nodo actual como una cadena de texto.
nodeTypeDevuelve un valor numérico que indica el tipo del nodo actual. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValorDescripción
1Nodo elemento
2Nodo atributo
3Nodo de texto
4Nodo de sección CDATA
5Nodo de referencia a entidad
6Nodo entidad
7Nodo de instrucción de proceso
8Nodo comentario
9Nodo documento
10Nodo tipo de documento
11Nodo fragmento de documento
12Nodo anotación
-
nodeValueDevuelve 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á null.
ownerDocumentDevuelve el objeto document que contiene al nodo actual.
parentNodeDevuelve el nodo padre del nodo actual.
previousSiblingDevuelve el nodo inmediatamente anterior al nodo actual.
removeAttribute( nombre)Elimina el atributo especificado del nodo actual.
setAttribute( nombre, valor )Establece el valor de un atributo.
-

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 nodeType 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:

-
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
-    };
-  };
-
-

Generar y manejar contenidos

-

Mozilla soporta los métodos heredados para añadir contenido al DOM dinámicamente, tales como document.write, document.open y document.close. Mozilla también soporta el método de Internet Explorer innerHTML el cual puede ser llamado desde casi cualquier nodo. Sin embargo no soporta el método outerHTML (que añade marcado alrededor de un elemento y no tiene un equivalente estándar) ni innerText (el cual establece el valor alfabético de su nodo y que puede usarse en Mozilla usando textContent).

-

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 getAdjacentElement y insertAdjacentHTML. 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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tabla 3. Métodos usados por Mozilla para manipular contenidos
MétodoDescripción
appendChild( nodo )Crea un nuevo nodo hijo. Devuelve una referencia al nuevo nodo hijo.
cloneNode( profundidad )Crea y devuelve una copia del nodo sobre el que se hace la llamada. Si profundidad es true, copia el sub-árbol completo del nodo.
createElement( tipo )Crea y devuelve un nuevo nodo huérfano de tipo igual al especificado por tipo.
createTextNode( valor )Crea y devuelve un nuevo nodo de texto huérfano asignándole el valor especificado por valor.
insertBefore( nuevoNodo, nodoHijo )Inserta el nodo nuevoNodo antes de nodoHijo, el cual debe ser un hijo del nodo actual.
removeChild( nodoHijo )Elimina el nodo nodoHijo y devuelve una referencia a él.
replaceChild( nuevoNodo, nodoHijo )Reemplaza el nodo nodoHijo con el nodo nuevoNodo y devuelve una referencia al nodo eliminado.
-

Fragmentos de documento

-

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, getElementById no existe pero appendChild sí. Además se pueden anexar fácilmente fragmentos de documento a los ya existentes.

-

Mozilla crea fragmentos de documento a través de document.createDocumentFragment(), el cual devuelve un fragmento de documento vacío.

-

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.

-

Diferencias en JavaScript

-

Buscar traducción adecuada para hooks DOM. "timing related" traducido como "duración de la ejecución"

-

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.

-

Diferencias en las fechas de JavaScript

-

La única diferencia en el objeto Date es el método getYear. Para la especificación ECMAScript (que es la que sigue JavaScript), el método no es compatible con el efecto 2000 y al ejecutar new Date().getYear() en 2004 se obtendrá un valor igual a "104". Para la especificación ECMAScript, getYear devuelve el año menos 1900 lo cual devolvía "98" para 1998. getYear quedó obsoleto en la versión 3 de ECMAScript y fue reemplazado por getFullYear. Internet Explorer cambió la implementación de getYear para que funcionara como getFullYear y fuese así compatible con el efecto 2000, mientras que Mozilla mantuvo el comportamiento estándar.

-

Diferencias de ejecución en JavaScript

-

Diferentes navegadores ejecutarán JavaScript de modo distinto. Por ejemplo, el siguiento código asume que el nodo div ya existe en el DOM en el momento en el que el bloque script se ejecuta:

-
...
-<div id="foo">Cargando...</div>
-
-<script>
-  document.getElementById("foo").innerHTML = "Cargado.";
-</script>
-
-

Sin embargo esto no está garantizado. Para asegurarnos de que todos los elementos existen se debería usar el manejador de evento onload en la etiqueta <body>:

-
<body onload="doFinish();">
-
-<div id="foo">Cargando...</div>
-
-<script>
-  function doFinish() {
-    var element = document.getElementById("foo");
-    element.innerHTML = "Cargado.";
-  }
-</script>
-...
-
-

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 window.open, el cual abre una nueva ventana:

-
<script>
-  function doOpenWindow(){
-    var myWindow = window.open("about:blank");
-    myWindow.location.href = "http://www.ibm.com";
-  }
-</script>
-
-

El problema con el código es que window.open 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 window.open antes de que la nueva ventana haya terminado de cargarse. Se puede lidiar con esto poniendo un manejador onload en la nueva ventana y luego llamar desde ahí a la ventana padre (usando window.opener).

-

Diferencias en la generación HTML de JavaScript

-

JavaScript puede generar, a través de document.write, 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 <script>) y genera HTML que contiene una etiqueta <script>. Si el documento está en modo estricto de visualización, entonces se analizará la etiqueta </script> que se halla dentro de la cadena como la etiqueta de cierre de la etiqueta <script> que la contiene. El siguiente código ilustra mejor esto:

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

Dado que la página está en modo estricto, el analizador de Mozilla verá el primer <script> y lo analizará hasta que encuentre la etiqueta de cierre correspondiente, que será cuando encuentre el primer </script>. 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:

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

Depurando JavaScript

-

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ú Herramientas -> Desarrollo web -> Consola JavaScript, en Firefox 2.0 (el navegador ligero de Mozilla) en Herramientas -> Consola de errores.

-

Figura 1. Consola JavaScript

-

Javascript Console

-

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.

-

La consola además permite evaluar JavaScript. Para probar la sintaxis de JavaScript introducida, se puede escribir 1+1 en el campo de entrada y pulsar Evaluar, como muestra la figura 2.

-

Figure 2. Evaluación en la consola de JavaScript

-

JavaScript Console evaluating

-

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 Herramientas -> Desarrollo web -> Depurador Javascript. En Firefox, el navegador no viene incluido. En lugar de eso, se puede descargar e instalar desde la página del proyecto Venkman. Además se pueden encontrar tutoriales en la página de desarrollo, ubicada en la página de desarrollo de Venkman.

-

Figura 3. Depurador de JavaScript de Mozilla

-

Mozilla's JavaScript debugger

-

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.

-

Diferencias en CSS

-

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.

-

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.

-

Tipos MIME (cuando no se aplican a los ficheros CSS)

-

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 text/css. 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.

-

CSS y las unidades

-

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.

-
<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>CSS y unidades - Ejemplo</title>
-  </head>
-  <body>
-    // funciona en modo estricto
-    <div style="width: 40px; border: 1px solid black;">
-      Text
-    </div>
-
-
    // peta en modo estricto
-    <div style="width: 40; border: 1px solid black;">
-      Text
-    </div>
-  </body>
-</html>
-
-

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.

-

JavaScript y CSS

-

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 style:

-
<div id="myDiv" style="border: 1px solid black;">
-  Text
-</div>
-
-<script>
-  var myElm = document.getElementById("myDiv");
-  myElm.style.width = "40px";
-</script>
-
-

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 .style.width, 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 parseFloat("40px").

-

Diferencias en la propiedad CSS overflow

-

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 div es mayor que la altura del propio div. El estándar CSS indica que en caso de rebosamiento, si no se ha establecido dicho comportamiento, el contenido del div debe de rebosar.

-

Sin embargo, Internet Explorer no cumple esto y alargará el div más allá de su altura hasta que pueda albergar correctamente su contenido. Más abajo hay un ejemplo que muestra esta diferencia:

-
<div style="height: 100px; border: 1px solid black;">
-  <div style="height: 150px; border: 1px solid red; margin: 10px;">
-    a
-  </div>
-</div>
-
-

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 div 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.

-

Figura 4. Rebosamiento DIV

-

DIV Overflow

-

Diferencias con la pseudoclase :hover

-

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 a:hover en Internet Explorer coincide con <a href="">...</a> pero no con <a name="">...</a>, el cual establece los anclajes en HTML. El cambio de texto ocurre porque los autores encapsulan áreas con el etiquetado de anclajes:

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

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:

- -

Modo quirks vs. modo estándar

-

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 Ver -> Información de página (o Ctrl+I) y Firefox lo hace en Herramientas -> Información de la página. El modo en el que una página es visualizada depende de su doctype.

-

Los doctypes (contracción inglesa para las declaraciones de tipos de documento) tiene este aspecto:

-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

-

La parte azul es llamada identificador público, la verde es el identificador de sistema que es un URI.

-

Modo estándar

-

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:

- -

Modo casi estándar

-

Mozilla introdujo el modo casi 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.

-

Figura 5. Hueco en imágenes

-

Image Gap

-

El modo casi 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.

-

Mozilla utiliza el modo casi estándar bajo las siguientes condiciones:

- -

Para más información, véase el problema de los huecos con imágenes

-

Modo quirks

-

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 quirks, 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.

-

Mozilla utiliza este modo cuando encuentra las siguientes condiciones:

- -

Para más información, véase Mozilla Quirks Mode Behavior and Mozilla's DOCTYPE sniffing.

-

Diferencias en eventos

-

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 event a través de window.event. En cambio Mozilla pasa un objeto event 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:

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

A veces, esto no funciona ya que Internet Explorer coge el parámetro evento, 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:

-
<div onclick="handleEvent(event);">Click me!</div>
-
-<script>
-  function handleEvent(aEvent) {
-    var myEvent = window.event ? window.event : aEvent;
-  }
-</script>
-
-

Las propiedades y funciones que el objeto event muestra son nombradas con frecuencia de forma diferente entre Mozilla e Internet Explorer, como muestra la tabla 4:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tabla 4. Diferencias entre las propiedades de eventos entre Mozilla e Internet Explorer
Nombre en Internet ExplorerNombre en MozillaDescripción
altKeyaltKeyPropiedad booleana que indica si la tecla alt estaba pulsada durante el evento.
cancelBubblestopPropagation()Usado para evitar que el evento sea propagado hacia los elementos ancestros en el árbol.
clientXclientXCoordenada X del evento, relativa al viewport.
clientYclientYCoordenada Y del evento, relativa al viewport.
ctrlKeyctrlKeyPropiedad booleana que indica si la tecla Ctrl estaba pulsada durante el evento.
fromElementrelatedTargetPara eventos de ratón, es el elemento desde el que partió el cursor del ratón.
keyCodekeyCodePara eventos de teclado, es el número que representa a la tecla que estaba pulsada. 0 para los eventos de ratón.
returnValuepreventDefault()Usado para evitar que se ejecute la acción por defecto del evento.
screenXscreenXCoordenada X del evento, relativa a la pantalla.
screenYscreenYCoordenada Y del evento, relativa a la pantalla.
shiftKeyshiftKeyPropiedad booleana que indica si la tecla shift estaba pulsada durante el evento.
srcElementtargetEl elemento que provocó el evento.
toElementcurrentTargetPara eventos de ratón, es el elemento al que el ratón se dirigió cuando terminó el mismo.
typetypeDevuelve el nombre del evento.
-

Añadir manejadores de eventos

-

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 click hay que pasar una referencia a dicha función manejadora a la propiedad onclick del objeto.

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

Mozilla soporta al 100% la forma estándar del W3C para añadir escuchadores a los nodos del DOM: usando los métodos addEventListener() y removeEventListener(); 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 captura. Si el booleano es puesto a false, sólo capturará los eventos en la fase burbuja. Los eventos del W3C tienen tres fases: captura, objetivo y burbuja. Cada objeto event tiene un atributo eventPhase 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 captura. Cuando el evento alcanza al objetivo, el evento está en la fase objetivo. Tras alcanzar el objetivo, regresa por el árbol hasta alcanzar de nuevo el nodo más exteriormente situado. Esta es la fase burbuja. 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.

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

Una ventaja de addEventListener() y removeEventListener() 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.

-

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 for y event (véase tabla 5). Tampoco suporta los métodos attachEvent ni detachEvent. En vez de eso, se deberían de usar los métodos addEventListener y removeEventListener. Internet Explorer no soporta la especificación de eventos del W3C.

- - - - - - - - - - - - - - - - - - - -
- Tabla 5. Diferencias en los métodos de eventos entre Mozilla e Internet Explorer
Método de Internet ExplorerMétodo de MozillaDescripción
attachEvent(tipoEvento, referenciaFuncion)addEventListener(tipoEvento, referenciaFuncion, usarCaptura)Añade un manejador de evento a un elemento del DOM
detachEvent(tipoEvento, referenciaFuncion)removeEventListener(tipoEvento, referenciaFuncion, usarCaptura)Elimina un manejador de evento a un elemento del DOM
-

Edición de texto enriquecido

-

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 innerHTML o editores de texto enriquecido, al no existir los equivalentes del W3C.

-

Con Mozilla 1.3 se introdujo una implementación de la característica designMode de Internet Explorer, la cual convierte a un documento HTML en un editor de texto enriquecido.

-

Una vez se ha cambiado al editor, los comandos pueden ser ejecutados en el documento a través del comando execCommand. Mozilla no soporta el atributo contentEditable de Internet Explorer para hacer editable cualquier control. Se puede usar un iframe para crear un editor de texto enriquecido.

-

Diferencias en el texto enriquecido

-

Mozilla soporta el método estándar del W3C para acceder al objeto document del iframe a través de IFrameElmRef.contentDocument mientras que Internet Explorer lo hace a través de document.frames{{ mediawiki.external('\"IframeName\"') }} y luego accede al document resultante.

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

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 useCSS del execCommand cambiándolo entre true y false. Internet Explorer siempre usa el marcado HTML.

-
Mozilla (CSS):
-  <span style="color: blue;">Azul</span>
-
-Mozilla (HTML):
-  <font color="blue">Azul</font>
-
-Internet Explorer:
-  <FONT color="blue">Azul</FONT>
-
-

Más abajo hay una lista de comandos soportados por execCommand en Mozilla:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tabla 6. Comandos del editor de texto enriquecido.
NombreDescripciónArgumentos
boldAlterna el modo en negrita de la selección.---
createlinkGenera un enlace HTML a partir del texto seleccionado.URL a usar para el enlace
deleteBorra la selección.---
fontnameCambia la fuente del texto seleccionado.Nombre de la fuente (por ejemplo, Arial)
fontsizeCambia el tamaño del texto seleccionado.Tamaño de la fuente
fontcolorCambia el color de la fuente del texto seleccionado.Color a usar
indentIndenta el bloque donde el se encuentra el cursor.---
inserthorizontalruleInserta un elemento <hr> en la posición del cursor.---
insertimageInserta una imagen en la posición del cursor.URL de la imagen
insertorderedlistInserta un elemento de lista ordeanda (<ol>) en la posición del cursor.---
insertunorderedlistInserta un elemento de lista no ordenada (<ul>) en la posición del cursor.---
italicAlterna el modo en cursiva de la selección.---
justifycenterCentra el contenido de la línea actual.---
justifyleftAlinea el contenido de la línea actual a la izquierda.---
justifyrightAlinea el contenido de la línea actual a la derecha.---
outdentElimina la indentación del bloque donde se halla el cursor.---
redoRehace el anterior comando deshecho.---
removeformatElimina todo el formato de la selección.---
selectallSelecciona todo el texto del editor.---
strikethroughAlterna el modo tachado del texto seleccionado.---
subscriptConvierte la selección actual a subíndice.---
superscriptConvierte la selección actual a superíndice.---
underlineAlterna el modo subrayado del texto seleccionado.---
undoDeshace el último comando ejecutado.---
unlinkElimina toda la información sobre enlaces de la selección.---
useCSSAlterna el uso de CSS en el marcado generado.Valor booleano
-

Para más información, véase Rich-Text Editing in Mozilla

-

Diferencias en XML

-

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.

-

Cómo manejar XMLs

-

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 XMLNode.childNodes[] no contendrá estos nodos de espacios en blanco. En Mozilla, estos nodos se incluirán en el vector.

-
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);
-
-

La primera línea de JavaScript carga el documento XML y accede a su elemento ráiz (myXMLDoc) recuperando el documentElement. 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 myXMLdoc tiene tres hijos: un nodo de texto que contiene un retorno de carro y dos espacios, el nodo myns:foo, 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 myns:foo Por elli, para recorrer los nodos hijos y desechar los nodos de texto se deben distinguir tales nodos del resto.

-

Como se mencionó antes, cada nodo tiene un atributo nodeType 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).

-
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
-    };
-  };
-
-

Islas de datos XML

-

Internet Explorer posee una peculiaridad no estándar llamada islas de datos XML (XML data islands), que permite incrustar XML dentro de un documento HTML usando la etiqueta HTML no estándar <xml>. 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.

-

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 DOMParser 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 Microsoft.XMLDOM genera y posee el método un método llamado loadXML que acepta una cadena de texto y genera un documento a partir de ella. El siguiente código muestra su funcionamiento:

-

 

-
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);
-  }
-
-

Peticiones HTTP para XML

-

Internet Explorer permite el envío y recuperación de ficheros XML usando la clase de MSXML XMLHTTP, instanciada a través de ActiveX usando new ActiveXObject("Msxml2.XMLHTTP") o new ActiveXObject("Microsoft.XMLHTTP"). Dado que no hay un método estándar para hacer esto, Mozilla proporciona la misma funcionalidad en el objeto global XMLHttpRequest de JavaScript. El objeto genera peticiones asíncronas de modo predeterminado.

-

Tras instanciar el objeto usando new XMLHttpRequest() se puede usar el método open 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 onload una referencia a una función que será invocada una vez la petición ha sido completada.

-

Petición síncrona:

-
  var myXMLHTTPRequest = new XMLHttpRequest();
-  myXMLHTTPRequest.open("GET", "data.xml", false);
-
-  myXMLHTTPRequest.send(null);
-
-  var myXMLDocument = myXMLHTTPRequest.responseXML;
-
-

Petición asíncrona:

-
  var myXMLHTTPRequest;
-
-  function xmlLoaded() {
-    var myXMLDocument = myXMLHTTPRequest.responseXML;
-  }
-
-  function loadXML(){
-    myXMLHTTPRequest = new XMLHttpRequest();
-
-    myXMLHTTPRequest.open("GET", "data.xml", true);
-
-    myXMLHTTPRequest.onload = xmlLoaded;
-
-    myXMLHTTPRequest.send(null);
-  }
-
-

La tabla 7 muestra una lista de métodos y propiedades disponibles para el objeto XMLHttpRequest de Mozilla.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tabla 7. Métodos y propiedades XMLHttpRequest
NombreDescripción
void abort()Detiene la petición si ésta aún está en curso.
string getAllResponseHeaders()Devuelve todas las cabeceras de respuesta como una única cadena.
string getResponseHeader(string headerName)Devuelve el valor de la cabecera especificada.
functionRef onerrorLa función que se le asigne será invocada cuando ocurran errores durante una petición.
functionRef onloadLa 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.
void open (string HTTP_Method, string URL)
-
- void open (string HTTP_Method, string URL, boolean async, string userName, string password)		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 send() tras la inicialización. Si async 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 send() method after initialization. If async is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.
int readyStateEstado de la petición. Valores posibles: - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValorDescripción
0UNINITIALIZED - open() aún no ha sido llamado.
1LOADING - send() aún no ha sido llamado.
2LOADED - send() ha sido llamado y las cabeceras y el estado están disponibles.
3INTERACTIVE - Descargando. responseText contiene datos parciales.
4COMPLETED - Todas las operaciones han sido completadas.
-
string responseTextCadena que contiene la respuesta.
DOMDocument responseXMLDocumento DOM que contiene la respuesta.
void send(variant body)Realiza la petición. Si body está definido, será enviado como el cuerpo de la petición POST. body puede ser un documento XML o una cadena conteniendo un XML serializado.
void setRequestHeader (string headerName, string headerValue)Establece una cabecera de petición HTTP para usarla en la petición HTTP. Ha de ser llamada tras invocar al método open().
string statusEl código de estado de la respuesta HTTP.
-

Diferencias en XSLT

-

Mozilla soporta las transformaciones XSL 1.0 (XSLT). Además permite a JavaScript realizar tanto transformaciones XSLT como consultas XPath sobre un documento.

-

Mozilla necesita que se le pase el fichero XML y XSLT que contiene la hoja de estilos con un tipo MIME XML (text/xml o application/xml). 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.

-

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 http://www.w3.org/1999/XSL/Transform mientras que el espacio de nombres del borrador es http://www.w3.org/TR/WD-xsl. Internet Explorer 6 soporta el borrador por razones de compatibilidad hacia atrás. Mozilla no soporta dicho borrador, sólo la recomendación final.

-

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".

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

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 XSLTProcessor. XSLTProcessor necesita que se carge el XML y los ficheros XSLT ya que necesita sus documentos DOM. El documento XSLT importado por XSLTProcessor permite manipular los parámetros XSLT. XSLTProcessor puede generar un documento independiente utilizando transformToDocument() o puede crear un fragmento de documento utilizando transformToFragment() para poder ser anexado fácilmente a otro documento DOM. Más abajo se muestra un ejemplo:

-
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);
-
-

Tras crear un objeto XSLTProcessor, hay que cargar el fichero XSLT a través de XMLHttpRequest. El miembro responseXML del XMLHttpRequest contiene el documento XML del fichero XSLT, el cuas es pasado a importStylesheet. Luego hay que usar de nuevo XMLHttpRequest para cargar el documento XML que va a ser transformado. Ese documento es entonces pasado al método transformToDocument de XSLTProcessor. La tabla 8 muestra una lista con los métodos de XSLTProcessor.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tabla 8. Métodos de XSLTProcessor
MétodoDescripción
void importStylesheet(Node styleSheet)Importa la hoja de estilo XSLT. El argumento styleSheet es el nodo ráiz del documento DOM de la hoja de estilos XSLT.
DocumentFragment transformToFragment(Node source, Document owner)Transforma el nodo source aplicando la hoja de estilos importada con el método importStylesheet y genera un DocumentFragment. owner especifica a qué documento DOM debe anexarse el DocumentFragment, haciéndolo compatible con ese documento DOM.
Document transformToDocument(Node source)Transforma el nodo source aplicando la hoja de estilos importada a través del método importStylesheet y devuelve un documento DOM independiente.
void setParameter(String namespaceURI, String localName, Variant value)Establece un parámetro en la hoja de estilos XSLT importada.
Variant getParameter(String namespaceURI, String localName)Obtiene el valor de un parámetro en la hoja de estilos XSLT importada.
void removeParameter(String namespaceURI, String localName)Elimina todos los parámetros establecidos para la hoja de estilos XSLT importada y establece sus valores a los predeterminados para el XSLT.
void clearParameters()Elimina todos los parámetros establecidos y establece sus valores a los predeterminados en la hoja de estilos XSLT.
void reset()Elimina todos los parámetros y hojas de estilos.
-
-

Original Document Information

- -
-

 

diff --git "a/files/es/orphaned/modo_casi_est\303\241ndar_de_gecko/index.html" "b/files/es/orphaned/modo_casi_est\303\241ndar_de_gecko/index.html" deleted file mode 100644 index 712f8d57dd..0000000000 --- "a/files/es/orphaned/modo_casi_est\303\241ndar_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 ---- -

 

-

 

-

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".

-

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 "Imágenes, tablas y huecos misteriosos" para una explicación detallada de cómo son tratados estos diseños en el modo "estándar".

-

Salvo esta diferencia, el modo "casi estándar" y el "estándar" son exactamente iguales en términos de maquetación y otros comportamientos.

-

Activando el modo "casi estándar"

-

Los DOCTYPEs que activan el modo "casi estándar" son los que contienen:

- -

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:

-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-			"http://www.w3.org/TR/html4/loose.dtd">
-

Tiene dos partes:

- -

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".

-

Recomendaciones

- -

Más en MDC

- -

Enlaces relacionados

- 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 ---- -
{{AddonSidebar}}
- -
-

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 debugging extensions using WebExtension APIs before Firefox 50.

-
- -

Este artículo explica cómo se pueden usar las herramientas de desarrollo de Firefox para depurar extensiones creadas con las WebExtension APIs.

- -

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.

- - - -

El Depurador de Add-on

- -

Para la mayor parte de este artículo utilizaremos el Depurador de Add-on. Para abrir el Depurador de Add-on:

- - - -

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.

- -

{{EmbedYouTube("HMozipAjrYA")}}

- -

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:

- -

- -

En este artículo usaremos tres herramientas de depuración:

- - - -

Depurando scripts en segundo plano

- -
-

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 webextensions-examples.

-
- -

Los scripts en segundo plano 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 "background" en “manifest.json”.

- -

Se pueden depurar scripts en segundo plano usando el Depurador de Add-ons.

- -

En la Consola del Depurador de Add-ons se puede ver un registro de las salidas, incluidas las llamadas a console.log() 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.

- -

Por ejemplo, la extensión de ejemplo notify-link-clicks-i18n registra un mensaje de su script en segundo plano cuando recibe un mensaje de uno de sus otros scripts:

- -

{{EmbedYouTube("WDQsBU-rpN0")}}

- -

Usando la línea de comandos de la Consola, se pueden acceder y modificar los objetos creados por los scripts en segundo plano.

- -

Por ejemplo, aquí se hace un allamada a la función notify() definida en el script en segundo plano de la extensión:

- -

{{EmbedYouTube("g-Qgf8Mc2wg")}}

- -

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 todo lo que es posible hacer en un depurador.

- -

{{EmbedYouTube("MNeaz2jdmzY")}}

- -

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 Dividir la Consola para más información.

- -

Depurando páginas de opciones

- -

Las páginas de opciones 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").

- -

Para depurar páginas de opciones:

- - - -

Cualquier archivo fuente en JavaScript que incluya será listado en el Depurador:

- -

{{EmbedYouTube("BUMG-M8tFF4")}}

- -
-

Este vídeo usa el ejemplo de WebExtension favourite-colour.

-
- -

También se verá cualquier mensaje registrado por el código en la Consola del Depurador de Add-on.

- -

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:

- -

Ahora al cambiar a la pestaña Inspector se podrá examinar y editar el HTML y CSS para la página:

- -

 

- -

{{EmbedYouTube("-2m3ubFAU94")}}

- -

Depurando ventanas emergentes

- -

Las ventanas emergentes 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 Depurador de Add-on para depurar su código.

- -

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:

- -

- -

Ahora, al abrir una ventana emergente esta continuará abierta hasta que se pulse Escape.

- -

 

- -
-

Es importante señalar que esta opción está disponible para ventanas emergentes desarrolladas para el navegador, como el menú de hamburguesa ( ), así como a ventanas emergentes propias de la add-on.

- -

También es importante notar que el cambio es persistente, incluso aunque el navegador se reinicie. Estamos trabajando en solucionar esto en el bug 1251658, pero hasta entonces puede ser mejor permitir de nuevo la ocultación automática volviendo a hacer clic en el botón antes de cerrar la Caja de Herramientas del Navegador.

- -

Internamente, este botón simplemente cambia la preferencia ui.popup.disable_autohide, lo que se puede hacer manualmente usando about:config.

-
- -

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:

- -

{{EmbedYouTube("hzwnR8qoz2I")}}

- -
-

Este vídeo usa la extensión de ejemplo beastify.

-
- -

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:

- -

- -

Ahora al cambiar a Inspector se podrán examinar y editar el HTML y el CSS de la ventana emergente:

- -

{{EmbedYouTube("6lvdm7jaq7Y")}}

- -

Depurando scripts de contenido

- -

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 Firefox multiproceso, los scripts de contenido se ejecutan en un proceso distinto del de otras partes de la add-on.

- -

Para depurar scripts de contenido adjuntos a una página web, se deben usar las herramientas de desarrollo web normales para esa página:

- - - -

{{EmbedYouTube("f46hMLELyaI")}}

- -

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 console.log() 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.

- -

{{EmbedYouTube("Hx3GU_fEPeo")}}

- -
-

Este video usa el ejemplo notify-link-clicks-i18n de WebExtension.

-
- -
-

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.

-
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 ---- -
{{AddonSidebar}}
- -

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: addons.mozilla.org (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.

- -

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.

- -

En resumen, este es el proceso para publicar una extensión:

- -
    -
  1. Comprime los archivos de tu extension en un zip
    2. -
  2. Crea una cuenta en AMO
    3. -
  3. Sube tu zip a AMO para firmarlo y revisarlo y selecciona una opción
    4. -
  4. Soluciona los problemas encontrados en la revisión
    5. -
  5. Si seleccionas no publicar la extension en AMO, puedes obtener la extension firmada y publicala por tu cuenta
    6. -
- -

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 addons.mozilla.org, 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.

- -

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 applications en tu manifest.json, con el atributo update_url apuntando a un update manifest file.

- -
-
-

Las extensiones empaquetadas de Firefox son "archivos XPI", que son simplemente un .ZIP con otra extensión

- -

No tienes que usar la extensión .XPI para subirla a AMO.

-
-
- -

1. Comprime los archivos en un zip

- -

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.

- -

Es importante saber que el .zip deber crearse seleccionando todos los archivos de la extensión, no su carpeta contenedora.

- -

Windows

- -
    -
  1. Abre la carpeta que contenga los archivos de tu extensión.
    2. -
  2. Selecciona todos los archivos (CTRL+E o CTRL+A, depende del idioma).
    3. -
  3. Click derecho en Enviar a → Carpeta comprimida (en zip).
    4. -
- -

- -

Mac OS X

- -
    -
  1. Abre la carpeta que contenga los archivos de tu extensión.
    2. -
  2. Selecciona todos los archivos.
    3. -
  3. Click derecho y selecciona Comprimir n Items.
    4. -
- -

- -
-
Ver http://www.info-zip.org/mans/zip.html.
-
- -

Linux / Mac OS X Terminal

- -
    -
  1. cd path/to/my-extension/
    2. -
  2. zip -r -FS ../my-extension.zip *
    3. -
- -
 
- -

2. Crea una cuenta en addons.mozilla.org

- -

Visita https://addons.mozilla.org/. Si ya tienes una Cuenta Firefox, puedes utilizarla para iniciar sesión. Si no, haz click en "Registrar" y se te exigirá crear una cuenta.

- -

3. Sube tu zip

- -

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 tutorial disponible para guiarte durante el proceso de envío. Sería conveniente que también veas Enviando a AMO para más detalles sobre el proceso.

- -
-

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.

- -

En otras palabras: portar a partir de sistemas de extensiones heredadas para usar APIs WebExtension es un camino de ida.

- -

Antes de subirla, asegurate de que el ZIP contiene sólo los archivos necesarios para la extensión.

-
- -

4. Soluciona los problemas detectados en la revisión

- -

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.

- -

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.

- -

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.

- -

5. Publica tu extensión

- -

Si seleccionas no publicarla en AMO, obten la extensión firmada y públicala por tu cuenta.

- -

 

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 ---- -
{{AddonSidebar}}
- -

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 API de extensiones 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 API de extensiones se admiten a través de funciones de devolución de llamada bajo el espacio de nombres chrome, al igual que Chrome. Las únicas API que no se admiten bajo el espacio de nombres chrome 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 browser. El proceso de conversión de extensiones de Chrome u Opera es el siguiente:

- -
    -
  1. Revise su utilización de funciones de manifest.json y API de WebExtensions con respecto a la referencia de incompatibilidades con Chrome. 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: https://www.extensiontest.com/.
    2. -
  2. Instale su extensión en Firefox y póngala a prueba.
    3. -
  3. Si experimenta problemas, póngase en contacto con nosotros a través de la lista de correo «dev-addons» o el canal #webextensions en IRC.
    4. -
  4. Envíe su complemento a AMO para su firma y distribución.
    5. -
- -

Si dependía de la opción de consola de Chrome para cargar extensiones no empaquetadas, eche un vistazo a la herramienta web-ext, la cual automatiza la instalación temporal en Firefox para permitir el desarrollo.

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

Empaquetando tu extensión

- -
-

Mozilla actualmente esta considerando implementar una aplicación con interfaz visual para empaquetar y cargar extensiones. Mira el Bug 1185460 para más información. Hasta entonces, sigue los pasos que aparecen a continuación.

-
- -

Las extensiones para Firefox son empaquetadas como archivos XPI, los cuales son solamente archivos ZIP, con extensión "xpi".

- -

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.

- -

Windows

- -
    -
  1. Abre la carpeta que contiene los archivos de tu extensión.
    2. -
  2. Selecciona todos los archivos.
    3. -
  3. Con clic derecho elige Enviar a  → Carpeta comprimida (zip).
    4. -
  4. Cambia el nombre del archivo resultante de something.zip a something.xpi.
    5. -
- -

Screenshot of the Windows Explorer context menu showing Send to compressed (zipped) folder

- -

Mac OS X

- -
    -
  1. Abre la carpeta que contiene los archivos de tu extensión.
    2. -
  2. Selecciona todos los archivos.
    3. -
  3. Con clic derecho elige Comprimir n elementos.
    4. -
  4. Cambia el nombre del archivo resultante de something.zip a something.xpi.
    5. -
- -

Screenshot of the Finder context menu showing the Compress 15 Items option

- -

Linux / Mac OS X Terminal

- -
    -
  1. cd path/to/my-extension/
    2. -
  2. zip -r ../my-extension.xpi *
    3. -
- -

Instalando tu extensión

- -
    -
  1. Navega a about:addons
    2. -
  2. Arrastra y suelta el XPI dentro de la página, o abre el menú de opciones y escoge "Instalar complemento desde archivo..."
    3. -
  3. Da clic en "Instalar" en el diálogo que aparecerá
    4. -
- -

Instalando tu extensión en Firefox OS

- -

Tu puedes instalar tu extensión desde WebIDE en un escritorio conectado vía USB o Wifi. Abre path/to/my-extension/ como una Aplicación empaquetada en WebIDE.

- -

Cuando la validación de manifest.json es correcta podrás instalar y ejecutar tu extensión en el dispositivo con Firefox OS conectado.

- -

Para instalar extensiones debe tener habilitada la opción en Configuración->Complementos del dispositivo con Firefox OS.

- -

Resolución de problemas

- -

Aquí están algunos de los problemas más comunes que podrías encontrarte:

- -

"Este complemento no puede ser instalado porque no ha sido verificado."

- - - -

"Este complemento no puede ser instalado porque para estar corrupto."

- - - -

No pasa nada

- - diff --git "a/files/es/orphaned/m\303\263dulos_javascript/index.html" "b/files/es/orphaned/m\303\263dulos_javascript/index.html" deleted file mode 100644 index c0fb25c792..0000000000 --- "a/files/es/orphaned/m\303\263dulos_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 ---- - - -

Firefox 3 introduce el método Components.utils.import() , que provee una sencilla forma de importar código JavaScript desde un módulo externo. Existe información sobre cómo configurar y usar módulos JavaScript. Los Módulos de JavaScript pueden también ser usados para compartir datos en extensiones.

- -

Además de ofrecer este método para importar módulos, Firefox incluye dos módulos por defecto:

- -
-
XPCOMUtils
-
El módulo XPCOMUtils.jsm provee facilidades para componentes de JavaScript cargados mediante el cargador de componentes de JavaScript.
-
JSON
-
El módulo JSON.jsm provee facilidades para manipular datos JSON.
-
PluralForm
-
El módulo PluralForm.jsm provee herramientas para pluralizar correctamente palabras en múltiples localizaciones.
-
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 ---- -

Resumen

-

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.

-
 ClassID:    f00152d0-b40b-11d3-8c9c-000064657374
- ContractID: @mozilla.org/file/directory_service;1
-
-

Interfaces soportados

-

nsIProperties, nsIDirectoryService

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

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.

- -

Temas generales

Guía para desarrolladores de Mozilla
Consejos y guías sobre desarrollo para contribuir al código base de Mozilla.
Código fuente de Mozilla
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.
Elaborar documentación
Información acerca de cómo construir proyectos de Mozilla, incluyendo Firefox y Thunderbird. Esta página necesita limpieza.
La plataforma Mozilla
Información sobre la plataforma Mozilla, incluyendo todos sus APIs y tecnologías, así como la forma de utilizarlas en tus propios proyectos.
Documentar Mozilla
Ayuda a crear y mejorar nuestra documentación para Mozilla y para la Web abierta.
Depuración (Debugging)
Consejos útiles y pautas a seguir para depurar el código de Mozilla.
Aseguramiento/Control de calidad
Información sobre pruebas y control de errores.
Localización
Documentación en múltiples idiomas sobre traducción de los proyectos de Mozilla, documentación y otros muchos aspectos.
Glosario
Términos y definiciones utilizadas por los hackers de Mozilla.

Páginas sobre proyectos

Thunderbird
Cliente de correo Mozilla
Sunbird
Proyecto de calendario de Mozilla

Herramientas

Bugzilla
La base de datos Bugzilla se usa para rastrear los problemas o incidencias relacionados con los proyectos de Mozilla.
MXR
Navega y busca en el repositorio de código fuente de Mozilla en la Web.
Bonsai
La herramienta Bonsai te permite saber quién cambió qué archivo en el repositorio y cuándo lo hicieron.
Tinderbox
Tinderbox muestra el estado del árbol (si actualmente se construye o no con éxito).  Compruébalo antes de proteger (check in) o desplegar (check out) y asegúrate de que estás trabajando con un árbol de trabajo.
Seguimiento de errores
Información sobre los sistemas de notificación de fallos Socorro y Talkback.
Seguimiento del rendimiento
Consulta la información de rendimiento para los proyectos de Mozilla.
Foros para desarrolladores
Una lista de temas específicos de foros de discusión, donde puedes hablar sobre cuestiones de desarrollo de Mozilla.
-

  {{ 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"}) }}

diff --git "a/files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" "b/files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" deleted file mode 100644 index e5a0fe2999..0000000000 --- "a/files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_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\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" "b/files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" deleted file mode 100644 index d8704e6489..0000000000 --- "a/files/es/orphaned/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/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 ---- -

-

-

Sección 1: Introducción a Gecko e incrustación

-

¿Qué es Gecko?

-

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

Gecko tiene una ligeramente desactualizada sección de preguntas frecuentes of its own. -

-

¿Qué es Mozilla?

-

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

-

¿Qué es the GRE?

-

El GRE (anteriormente conocido como MRE) es Gecko Runtime Environment un entorno de ejecución que muchas aplicaciones pueden compartir. Actualmente se ha esta desarrollando como un proyecto independiente llamado XULRunner. -

-

¿Qué es XPCOM?

-

XPCOM es una tecnología de objetos (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. -

Puede encontrar más información aquí. -

-

¿Qué significa Gecko “incrustado”?

-

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

-

¿Cuales son los términos de licencia para incrustar Gecko?

-

Los mismos que para el resto de Mozilla. Mire página MPL fpara más información. -

-

¿Hay disponible un SDK?

-

Estamos trabajando lentamente para crear un SDK. De momento le recomendamos que obtenga el código fuente y compile desde ahí. -

Las versiones de desarrollo del SDK para Win32 pueden ser encontradas aquí. -

-

¿Cuál es la última versión? ¿Que versión debería usar?

-

Versiones incrustadas y el código fuente se generan con frecuencia y pueden descargarse aquí. Si desea estabilidad se recomienda emplear versiones Mozilla de la rama 1.7.x. -

-

¿Quién está usando Gecko actualmente?

-

Mire aquí para ver la creciente lista de programas que incrustan Gecko. -

diff --git "a/files/es/orphaned/principios_b\303\241sicos_de_los_servicios_web/index.html" "b/files/es/orphaned/principios_b\303\241sicos_de_los_servicios_web/index.html" deleted file mode 100644 index f94847ecf5..0000000000 --- "a/files/es/orphaned/principios_b\303\241sicos_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 ---- -

-

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

-

Los fundamentos

-

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

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 (Introducción a XML). -

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

-

Ejemplos de servicios Web en acción

-

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

-

Introducción a XML-RPC

-

XML-RPC es un tipo de servicio Web que ha existido desde 1998 y aunque no es un estándar oficial W3C,es utilizado extensamente. XML-RPC fue desarrollado por Useful Inc, junto con Microsoft. -

-

Introducción a SOAP

-

SOAP, un servicio Web, está listado como un estándar W3C, y es similar de diversas formas a XML_RPC. SOAP está respaldado por IBM, así como por Microsoft. -

-

¿SOAP 0 XML-RPC?

-

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

-
-

Información sobre el documento

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

Firefox 3 implementa en gran parte el soporte HTML 5 para la memoriacache (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).

- -

El cache de la aplicación

- -

{{ Note("Firefox no gestiona actualmente ningún control de versión en el cache de aplicación.") }}

- -

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 unestado de actualización conjunto. El estado de actualización es uno de los siguientes:

- -
-
idle
-
El cache de aplicación no está descargando actualizaciones.
-
checking
-
El cache está comprobando su propio manifiesto de recursos, para ver si hay uno más reciente.
-
downloading
-
El cache está actualizando su manifiesto de recursos con información nueva, ya que el anterior fue modificado.
-
- -

{{ 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.") }}

- -

Recursos

- -

El cache siempre incluye al menos un recurso, identificado por su URI, de al menos una de las siguientes categorías:

- -
-
Entradas implícitas (Implicit entries)
-
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 manifest.
-
El manifiesto (manifest)
-
Este es el manifiesto de recurso en sí mismo, cargado desde la URI especificada en una entrada de html implícita con el atributo manifest. 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.
-
Entradas explícitas (Explicit entries)
-
Son recursos listados en el manifiesto del cache.
-
Entradas de restitución/recuperación (Fallback entries)
-
Son recursos que fueron listados en el manifiesto del cache como entradas "fallback". No admitido aún en Firefox.
-
Entradas oportunistas (Opportunistically cached entries)
-
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. No admitido aún en Firefox.
-
Entradas dinámicas (Dynamic entries)
-
Son recursos añadidos por programa, con el método add().
-
- -

La lista blanca en línea

- -

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.

- -

{{ 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.") }}

- -

El manifiesto

- -

Los archivos de manifiesto deben darse con el tipo MIME text/cache-manifest, 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.

- -

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.

- -

El resto del manifiesto debe estar compuesto por ninguna , alguna o todas las líneas siguientes:

- -
-
Línea vacía
-
Podemos utilizar líneas vacías (sin nada) o con caracteres de espacio o tabulador.
-
Comentario
-
Los comentarios son formados por un sólo carácter "#", seguido por nada o con el texto del comentario, si se quiere se puede poner espacio/s antes (por ejemplo: # Aquí va mi comentario ). Los comentarios sólo se pueden escribir en sus propias líneas y no se pueden añadir en otras líneas.
-
Cabecera de sección
-
Las cabeceras de sección especifican qué sección del manifiesto se está manipulando. Hay tres posibles cabeceras de sección:
-
- -
- - - - - - - - - - - - - - - - - - - -
Cabecera de secciónDescripción
CACHE:Pasa a la sección explícita. Esta es la sección por defecto.
FALLBACK:Pasa a la sección de recuperación ("fallback"). -

{{ Note("Esta sección no está aún implementada en Firefox y será ignorada.") }}

-
NETWORK:Pasa a la sección de la lista blanca en línea. -

{{ 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.") }}

-
-
- -
-
La línea de cabecera de sección puede contener espacios vacíos, pero es obligatorio incluir el carácter ":" después del nombre.
-
Datos para la sección activa.
-
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.
-
- -

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.") }}

- -

Un manifiesto de ejemplo

- -

Este es un manifiesto simple para una página web imaginaria cuyo sitio es foo.com.

- -
CACHE MANIFEST
-# v1
-# Esto es un comentario.
-http://www.foo.com/index.html
-http://www.foo.com/header.png
-http://www.foo.com/blah/blah
-
- -

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.

- -

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 header.png 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.

- -

Para indicar a Firefox que use aplicaciones en modo desconectado (almacenadas en el cache) para un sitio determinado, el sitio debe utilizar el atributo manifest en el elemento html, de forma parecida a:

- -
<html manifest="http://www.foo.com/cache-manifest">
-  ...
-</html>
-
- -

El proceso de actualización

- -
    -
  1. Cuando Firefox visita un documento que incluye el atributo manifest, envía un evento checking al objeto window.applicationCache, 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 noupdate a la applicationCache, y el proceso de actualización está completado.
    2. -
  2. Si el archivo del manifiesto no ha cambiado desde la última actualización, de nuevo, se envía el evento noupdate a la applicationCache, 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.
    3. -
  3. Si el manifiesto ha cambiado, todos los archivos en el manifiesto -- así como aquellos agregados al manifiesto mediante la llamada a applicationCache.add() -- son agregados al cache temporal, siguiendo las reglas apropiadas de HTTP. Para cada archivo agregado a la cache, se envía un evento progress al objeto applicationCache. Si ocurre algún error, se envía un evento error y se detiene la actualización.
    4. -
  4. Una vez que se han recuperado todos los archivos, son movidos al cache real y se envía un evento cached al objeto applicationCache.
    5. -
- -

Características aún sin implementar en Firefox

- -

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:

- -
    -
  1. 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.
    2. -
  2. 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.
    3. -
  3. Firefox no gestiona aún entradas de recuperación o de oportunidad.
    4. -
- -

Ver también

- - - -

 

- -

 

- -
 
- -

{{ 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" } ) }}

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

« Referencia de XUL «

- - - - - - - - - - - -
Todos los elementos XUL (ordenados alfabéticamente)
-

action
- arrowscrollbox
- assign
- bbox
- binding
- bindings
- box
- broadcaster
- broadcasterset
- button
- browser
- checkbox
- caption
- colorpicker
- column
- columns
- commandset
- command
- conditions
- content
- datepicker
- deck
- description
- dialog
- dialogheader
- dropmarker
- editor
- grid
- grippy
- groupbox
- hbox
- iframe
- image
- key
- keyset
- label
- listbox
- listcell
- listcol
- listcols
- listhead
- listheader
- listitem

- 		-

member
- menu
- menubar
- menuitem
- menulist
- menupopup
- menuseparator
- notification
- notificationbox
- observes
- overlay
- page
- panel
- param
- popupset
- preference
- preferences
- prefpane
- prefwindow
- progressmeter
- query
- queryset
- radio
- radiogroup
- resizer
- richlistbox
- richlistitem
- row
- rows
- rule
- scale
- script
- scrollbar
- scrollbox
- scrollcorner
- separator
- spacer
- spinbuttons
- splitter
- stack
- statusbar

- 		-

statusbarpanel
- stringbundle
- stringbundleset
- tab
- tabbrowser (Firefox-a partir de
- Firefox 3/Gecko 1.9)
- tabbox
- tabpanel
- tabpanels
- tabs
- template
- textnode
- textbox
- textbox (Firefox autocomplete)
- textbox (Mozilla autocomplete)
- timepicker
- titlebar
- toolbar
- toolbarbutton
- toolbargrippy
- toolbaritem
- toolbarpalette
- toolbarseparator
- toolbarset
- toolbarspacer
- toolbarspring
- toolbox
- tooltip
- tree
- treecell
- treechildren
- treecol
- treecols
- treeitem
- treerow
- treeseparator
- triple
- vbox
- where
- window
- wizard
- wizardpage

-
-

Referencia de XUL

-

« Referencia de XUL «

- - - - - - - - - - - -
Elementos XUL por categoría
-

VENTANAS

-

dialog
- overlay
- page
- window
- wizard
- wizardpage
- preference
- preferences
- prefpane
- prefwindow

-

ESTRUCTURA
- DE VENTANAS

-

browser
- tabbrowser
- editor
- iframe
- titlebar
- resizer
- statusbar
- statusbarpanel
- dialogheader
- notification
- notificationbox

-

MENUS Y VENTANAS
- EMERGENTES

-

menubar
- menu
- menuitem
- menuseparator
- menupopup
- panel
- tooltip
- popupset

-

BARRAS DE
- HERRAMIENTAS

-

toolbar
- toolbarbutton
- toolbargrippy
- toolbaritem
- toolbarpalette
- toolbarseparator
- toolbarset
- toolbarspacer
- toolbarspring
- toolbox

-

PESTAÑAS Y
- AGRUPAMIENTO

-

tabbox
- tabs
- tab
- tabpanels
- tabpanel
- groupbox
- caption
- separator
- spacer

- 		-

CONTROLES

-

button
- checkbox
- colorpicker
- datepicker
- menulist
- progressmeter
- radio
- radiogroup
- scale
- splitter
- textbox
- textbox (Firefox autocomplete)
- textbox (Mozilla autocomplete)
- timepicker

-

TEXTO E
- IMAGENES

-

description
- label
- image

-

LISTSS

-

listbox
- listitem
- listcell
- listcol
- listcols
- listhead
- listheader
- richlistbox
- richlistitem

-

ARBOLES

-

tree
- treecell
- treechildren
- treecol
- treecols
- treeitem
- treerow
- treeseparator

-

 

- 		-

DISPOSICION

-

box
- hbox
- vbox
- bbox
- deck
- stack
- grid
- columns
- column
- rows
- row
- scrollbox

-

PLANTILLAS

-

action
- assign
- binding
- bindings
- conditions
- content
- member
- param
- query
- queryset
- rule
- template
- textnode
- triple
- where

-

SCRIPTING

-

script
- commandset
- command
- broadcaster
- broadcasterset
- observes
- key
- keyset
- stringbundle
- stringbundleset

-

ELEMENTOS DE AYUDA

-

arrowscrollbox
- dropmarker
- grippy
- scrollbar
- scrollcorner
- spinbuttons

-
-

Otras listas XUL

- diff --git "a/files/es/orphaned/selecci\303\263n_de_modo_en_mozilla/index.html" "b/files/es/orphaned/selecci\303\263n_de_modo_en_mozilla/index.html" deleted file mode 100644 index 65fbb9cebc..0000000000 --- "a/files/es/orphaned/selecci\303\263n_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 ---- -

 

-

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 DetermineParseMode() in nsParser.cpp. Vea los error 1312 y error 55264 para saber más sobre la historia de la selección del modo. Vea el error 153032 sobre la creación del modo Casi-Estándar en Mozilla 1.0.

-

Las metas que indujeron a elegir este comportamiento fueron las siguientes::

- -

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.

-

Modo Estándar Completo

-

Lo siguiente activa el modo estándar completo:

- -

Modo casi estándar

-

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.

- -

Modo Quirks

-

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):

-

En la elaboración de esta lista han sido utilizados los siguientes sitios: W3C HTML Validator, HTMLHelp HTML Validator.

- -

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.

-

Ver más

- -
-

Información sobre el Documento Original

- -
-

 

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

Storage es una API para la  base de datos SQLite. 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 mozIStorageConnection.

-

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.

-

 

-
Nota: Storage no es lo mismo que la característica DOM:Storage que puede ser usada por páginas web para almacenar datos persistentes o la Session store API (una utilidad XPCOM de almacenaje para usar con las extensiones).
-

 

-

Empezando

-

Este documento cubre el API mozStorage y algunas peculiaridades de sqlite. No cubre SQL o el sqlite. Sin embargo, puedes encontrar varios enlaces útiles en la sección Ver también. 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 Bugzilla (producto "Toolkit", componente "Storage").

-

Bueno, aquí vamos. mozStorage fue diseñado igual que muchos otros sistemas de base de datos. El procedimiento general de su uso es:

- -

Abrir una conexión

-

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.

-

Ejemplo de apertura de una conexión a "asdf.sqlite" en el directorio del perfil del usuario, en C++:

-
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);
-
-

MOZ_STORAGE_SERVICE_CONTRACTID está definido en {{ Source("storage/build/mozStorageCID.h") }}. Su valor es "@mozilla.org/storage/service;1"

-

Ejemplo en JavaScript:

-
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);
-
-
Nota: La función OpenDatabase está sujeta a cambios. Seguramente será simplificada y ampliada para que sea más difícil meterse en problemas.
-
-

Sería tentador nombrar a tu base de datos con un nombre terminado en ".sdb" por sqlite database, pero esto no es recomendable. 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.

-

Sentencias

-

Sigue los pasos para crear y ejecutar sentencias SQL en tu base de datos SQLite. Para una completa referencia, lee mozIStorageStatement.

-

Creando una sentencia

-

Hay dos maneras de crear una sentencia. Si no tienes parámetros y la sentencia no devuelve ningún dato, usa mozIStorageConnection.executeSimpleSQL.

-
C++:
-rv = mDBConn->ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)"));
-
-JS:
-mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)");
-
-

De otra forma, deberías preparar la sentencia usando mozIStorageConnection.createStatement:

-
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");
-
-

Este ejemplo usa el comodín "?1" para recoger un parámetro devuelto más adelante (lee la próxima sección).

-

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.

-

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.

-

Agregar los parámetros

-

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.

-

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.

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

Tambien puedes usar parámetros con nombre como: ":ejemplo" en lugar de "?xx".

-

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 NULL

-

Los ejemplos a continuación, usan bindUTF8StringParameter() y bindInt32Parameter(). Para una lista de todas las demás funciones, lee mozIStorageStatement.

-

Ejemplo en C++:

-
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);
-
-

Ejemplo en JavaScript:

-
var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b > ?2");
-statement.bindUTF8StringParameter(0, "hello");
-statement.bindInt32Parameter(1, 1234);
-
-

Si usas parámetros con nombre, deberías usar el método getParameterIndex para obtener el índice del parámetro con nombre. Aquí hay un ejemplo en JavaScript:

-
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);
-
-

Por supuesto, puedes mezclar parámetros con nombre y con índice en la misma consulta:

-
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);
-
-

Si quieres usar la clausula WHERE con una expresión IN ( value-list ), 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:

-
var ids = "3,21,72,89";
-var sql = "DELETE FROM table WHERE id IN ( "+ ids +" )";
-
-

Ejecutar una sentencia

-

La manera principal de ejecutar una sentencia es con mozIStorageStatement.executeStep. Esta función te permite enumerar todos los resultados (filas / registros) que produzca tu sentencia y te notificará cuando no hay más resultados.

-

Después de una llamada a executeStep, debes usar la función de recogida apropiada en mozIStorageValueArray para recoger el valor en una fila (mozIStorageStatement implementa mozIStorageValueArray). El ejemplo de abajo sólo usa getInt32().

-

Puedes obtener el tipo de un valor desde mozIStorageValueArray.getTypeOfIndex, 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.

-

En código C++ se puede también usar las funciones AsInt32, AsDouble, 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.

-

Ejemplo C++:

-
PRBool hasMoreData;
-while (NS_SUCCEEDED(statement->ExecuteStep(&hasMoreData)) && hasMoreData) {
-  PRInt32 value = statement->AsInt32(0);
-  // use the value...
-}
-
-

Ejemplo Javascript:

-
while (statement.executeStep()) {
-  var value = statement.getInt32(0); // ¡usa la función correcta!
-  // usa el valor...
-}
-
-

La función mozIStorageStatement.execute() 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:

-
var statement = mDBConn.createStatement("INSERT INTO my_table VALUES (?1)");
-statement.bindInt32Parameter(52);
-statement.execute();
-
-

Este es un ejemplo simple pero completo en JavaScript y XUL, de cómo ejecutar sentencias SQL en una base de datos: Image:TTRW2.zip.

-

Re crear una sentencia (reset)

-

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.

-

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 mozIStorageStatement.execute(), tampoco necesitas re crear explicitamente las sentencias, esta función lo hará por ti. En otro caso, llama a mozIStorageStatement.reset().

-

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.

-
var statement = connection.createStatement(...);
-try {
-  // usa la sentencia...
-} finally {
-  statement.reset();
-}
-
-

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.

-
void someClass::someFunction()
-{
-  mozStorageStatementScoper scoper(mStatement)
-  // use the statement
-}
-
-

id de la última inserción

-

Usa la propiedad lastInsertRowID en la conexión para obtener el id (id de la fila) de la última operación INSERT operation en la base de datos.
-Esto es útil si tienes una columna en tu tabla que sea la clave primaria (como INTEGER PRIMARY KEY o INTEGER PRIMARY KEY AUTOINCREMENT) en cuyo caso SQLite asigna automáticamente un valor a cada fila insertada, si tu no proporcionas alguno. El valor devuelto es del tipo number en JS y long long en C++.

-

lastInsertRowID JS example:

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

Transacciones

-

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 Storage:Performance para más detalles.

-

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 mozIStorageConnection.transactionInProgress para ver si la transacción está en progreso.

-

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 mozIStorageConnection.beginTransaction y las funciones relacionadas, está fuertemente recomendado, ya que guarda el estado de la transacción en la conexión. De otra forma, el atributo transactionInProgress tendrá el valor erróneo.

-

sqlite tiene vario tipos de transacción:

- - - -

Puedes pasar este tipo de transacción a mozIStorageConnection.beginTransactionAs 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: BEGIN TRANSACTION y locking.

-
var ourTransaction = false;
-if (!mDBConn.transactionInProgress) {
-  ourTransaction = true;
-  mDBConn.beginTransactionAs(mDBConn.TRANSACTION_DEFERRED);
-}
-
-// ... usa la conexión ...
-
-if (ourTransaction)
-  mDBConn.commitTransaction();
-
-

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.

-

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:

-
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();
-}
-
-

Cómo corromper tu base de datos

- - - - - - -

Bloqueo en SQLite

-

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().

-

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 en la misma tabla -- aún cuando deriven de la misma conexión.

-

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).

-

Bloqueo a nivel de tabla

-

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).

-

La regla general es esta: una sentencia de manejo puede not 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. Intentar hacer eso, también bloqueará (o devolverá SQLITE_BUSY).

-

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.

-

Trabajando con los problemas de bloqueo

-

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).

-

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.

-

Seguridad de los hilos

-

El servicio mozStorage y sqlite son hilos seguros. Sin embargo, ningún otro mozStorage u objeto sqlite son hilos seguros.

- - - -

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.

-

Ver también

- - -

 

-

{{ languages( { "es": "es/Almacenamiento", "fr": "fr/Storage", "ja": "ja/Storage", "pl": "pl/Storage", "en": "en/Storage" } ) }}

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

-

El DOM Inspector (conocido como DOMi) es una herramienta de Mozilla utilizada para inspeccionar, navegar y editar el Modelo de Objetos del Documento(Document Object Model en inglés) de los documentos - normalmente páginas web o ventanas XUL . -

Para más información sobre el DOMi, consulta la página del DOM Inspector en MozillaZine. -

Categorías -

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

Developer tools that are not built into Firefox, but ship as separate add-ons.

- -
-
WebSocket Monitor
-
Examine the data exchanged in a WebSocket connection.
-
 
-
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 ---- -

 

-

Localizing in Gecko 1.9

-

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 install.rdf utilizando las propedades em:localized. Cada una contiene al menos una propiedad em:locale 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):

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

Todos los metadatos mencionados más abajo pueden localizarse mediante este procedimiento. La información de localización "por defecto" proporcionada por la propiedad em:localized, puede ser pasada por alto utilizando un conjunto de preferencias de localización, según se detalla a continuación.

-

El proceso para seleccionar la propiedad em:localized a utilizar para una determinada localización (locale) es el siguiente:

-
    -
  1. Si existe una propiedad con un identificador em:locale que se corresponde exactamente con la localización (locale) entonces se usará esa propiedad.
    2. -
  2. 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).
    3. -
  3. 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").
    4. -
-

En primer lugar se mostrará la localización actual "en-GB" y posteriormente se mostrará la segunda localización correspondiente a "en-US".

-

Si no se ha establecido ninguna preferencia y no se encuentra una coindidencia em:localized property 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.

-

Localizar antes de Gecko 1.9

-

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).

- -

Cadenas Localizables

-

Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden ser localizados utilizando este proceso:

- -

Listas Localizables

-

En los casos en que puedan existir múltiples valores, se añade un índice numérico al final del nombre de cada preferencia:

-
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");
-
-

Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden localizarse utilizando este proceso:

- diff --git "a/files/es/orphaned/traducir_una_extensi\303\263n/index.html" "b/files/es/orphaned/traducir_una_extensi\303\263n/index.html" deleted file mode 100644 index 5691f27418..0000000000 --- "a/files/es/orphaned/traducir_una_extensi\303\263n/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 ---- -

{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}

- -

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.

- -

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:

- - - -

Descargar el ejemplo

- -

Puedes descargar el código de ejemplo de este artículo para poder compararlo o para usarlo como base para tu propia extensión.

- -

http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip

- -

Traducir cadenas en los ficheros XUL

- -

Crear los ficheros de configuración regional necesarios

- -

Cada fichero XUL que comprende la interfaz de usuario de tu extensión debería tener un fichero local en su directorio locale.

- -

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 options.xul, tiene un fichero options.dtd correspondiente con este aspecto:

- -
 <!ENTITY options_window_title "StockWatcher 2 Preferences">
- <!ENTITY options_symbol.label "Stock to watch: ">
-
- -

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.

- -

El fichero stockwatcher2.dtd contiene el mapa para el fichero stockwatcher2.xul:

- -
 <!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)">
-
- -

Actualizar los ficheros XUL

- -

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.

- -

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 options.xul añadimos esta línea:

- -
 <!DOCTYPE window SYSTEM "chrome://stockwatcher2/locale/options.dtd">
-
- -

Añadimos una línea similar al fichero stockwatcher.xul:

- -
 <!DOCTYPE overlay SYSTEM "chrome://stockwatcher2/locale/stockwatcher2.dtd">
-
- -

En aplicaciones mayores podrías necesitar utilizar entidades de diversos ficheros de configuración regional en un único fichero XUL. Utilizar múltiples DTDs explica cómo hacer esto.

- -

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 manifiesto chrome.

- -

Luego simplemente reemplazaremos cada cadena de texto en nuestros ficheros XUL con la correspondiente entidad. Por ejemplo, en stockwatcher2.xul cambiamos la línea:

- -
 <menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/>
-
- -

por

- -
 <menuitem label="&menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/>
-
- -

Haremos esto para cada cadena utilizada en cada fichero XUL.

- -

Actualizar el manifiesto chrome

- -

Para que Firefox conozca los ficheros de configuración regional necesitamos revisar nuestro fichero |chrome.manifest, añadiendo una línea por cada idioma.

- -
 locale stockwatcher2 en-US chrome/locale/en-US/
-
- -

Esto le dice a Firefox que el idioma en-US está ubicado en el directorio chrome/locale/en-US.

- -

Traducir cadenas en el código JavaScript

- -

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 Tutorial XUL:Ficheros de propiedades.

- -

Crear un fichero de propiedades

- -

Lo primero que hacemos es crear un fichero de propiedades para los literales usados por el código JavaScript en stockwatcher2.js:

- -
changeString=Chg:
-openString=Open:
-lowString=Low:
-highString=High:
-volumeString=Vol:
-
- -

El fichero stockwatcher2.properties mostrado anteriormente mapea cinco claves (changeString, openString, lowString, highString, y volumeString) a su correspondiente texto en inglés.

- -

Crear un conjunto de cadenas

- -

El siguiente paso es modificar el fichero stockwatcher2.xul para referenciar este fichero de propiedades. Haremos esto creando un conjunto de cadenas utilizando el siguiente código:

- -
 <stringbundleset id="stringbundleset">
-   <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockw...er2.properties"/>
- </stringbundleset>
-
- -

Esto establece un nuevo conjunto de cadenas, referenciados por el ID "string-bundle", cuyas claves y valores han de ser cargados desde el fichero stockwatcher2.properties que ya habíamos creado.

- -

Actualizando el código JavaScript

- -

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 refreshInformation() para cargar las cadenas y su función interna infoReceived() para utilizar las cadenas cargadas y traducidas en lugar de literales.

- -

Añadimos a refreshInformation() el siguiente código:

- -
 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') + " ";
-
- -

Este código obtiene una referencia al elemento conjunto de cadenas que hemos añadido a stockwatcher2.xul llamando a document.getElementById(), 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 getString(), pasando la clave apropiada para cada cadena.

- -

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.

- -

Luego reemplazamos toda ocurrencia de las cadenas literales con las variables apropiadas:

- -
 samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
-     openString + fieldArray[5] + " | " +
-     lowString + fieldArray[6] + " | " +
-     highString + fieldArray[7] + " | " +
-     volumeString + fieldArray[8];
-
- -

Traducir la descripción en install.rdf

- -

Mira Traducir descripciones de extensiones.

- -

Añadir más traducciones

- -

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:

- -
 locale stockwatcher2 es-ES chrome/locale/es-ES/
-
- -

Luego sólo hay que crear un subdirectorio chrome/locale/es-ES y añadir los ficheros DTD necesarios; en este caso options.dtd y stockwatcher2.dtd. Dichos ficheros deberían mapear las mismas etiquetas para la traducción al español de las cadenas utilizadas por la extensión.

- -

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 chrome/locale/es-ES. Sólo las cadenas deberían ser traducidas; las claves deberían ser las mismas para cada traducción.

- -

{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}

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

{{ gecko_minversion_header("1.9.2") }}

- -

 

- -

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 input de HTML o arrastrando y soltando el archivo.

- -

 Seleccionar archivos usando HTML

- -

 Seleccionar un solo archivo para usar con la API de archivo es simple:

- -
<input type="file" id="input" onchange="handleFiles(this.files)">
-
- -

Cuando el usuario selecciona un archivo, se  llama a la función handleFiles()  con un objeto FileList que contiene el objeto File representando el archivo seleccionado por el usuario.

- -

Si desea permitir al usuario seleccionar varios archivos, simplemente use el atributo multiple en el elemento input:

- -
<input type="file" id="input" multiple="true" onchange="handleFiles(this.files)">
-
- -

En este caso, la lista de archivos se pasa a la función handleFiles()contiene un objeto File por cada archivo que el usuario ha seleccionado.

- -

{{ h2_gecko_minversion("Uso de elementos ocultos del archivo de entrada usando el método click() ", "2.0") }}

- -

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 click() en el elemento {{ HTMLElement("input") }}.

- -

Considere este código HTML:

- -
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
-<a href="#" id="fileSelect">Select some files</a>
-
- -

Tu método doClick() puede verse como esto:

- -
var fileSelect = document.getElementById("fileSelect"),
-  fileElem = document.getElementById("fileElem");
-
-fileSelect.addEventListener("click", function (e) {
-  if (fileElem) {
-    fileElem.click();
-  }
-  e.preventDefault(); // prevent navigation to "#"
-}, false);
-
- -

Obiamente puedes darle estilo al nuevo botón para abrir el selector de archivos como desees.

- -

Dinámica de la adición de un detector de cambio

- -

 Si tu campo de entrada fue creado con una librería de JavaScript como jQuery, necesitarás usar {{ domxref("element.addEventListener()") }} para agregar un manejador de eventos de cambio, como este:

- -
var inputElement = document.getElementById("inputField");
-inputElement.addEventListener("change", handleFiles, false);
-
-function handleFiles() {
-  var fileList = this.files;
-
-  /* now you can work with the file list */
-}
-
- -

 Nota que en este caso, la función handleFiles() 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.

- -

 

- -

{{ h1_gecko_minversion("Usando Objetos URL", "2.0") }}

- -

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 File, incluyendo archivos locales en el computador del usuario.

- -

Cuando tienes un objeto File te gustaría hacer referencia por URL desde HTML, puedes crear un objeto URL para que quede así :

- -
var objectURL = window.URL.createObjectURL(fileObj);
-
- -

El objeto URL es una cadena de caracteres que identifica el objeto File . Cada vez que invocas {{ domxref("window.URL.createObjectURL()") }}, un único objeto URL es creado, incluso, si usted ya ha creado un objeto URL de ese archivo. 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()") }}:

- -
window.URL.revokeObjectURL(objectURL);
-
- -

Selección de archivos usando arrastrar y soltar

- -

 También puedes dejar que el usuario arrastre y suelte los archivos en la aplicación Web.

- -

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:

- -
var dropbox;
-
-dropbox = document.getElementById("dropbox");
-dropbox.addEventListener("dragenter", dragenter, false);
-dropbox.addEventListener("dragover", dragover, false);
-dropbox.addEventListener("drop", drop, false);
-
- -

 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 dragenter, dragover, y drop.

- -

En realidad no necesitamos hacer nada con los eventos dragenter and dragover 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:

- -
function dragenter(e) {
-  e.stopPropagation();
-  e.preventDefault();
-}
-
-function dragover(e) {
-  e.stopPropagation();
-  e.preventDefault();
-}
-
- -

La verdadera magia pasa en la función drop():

- -
function drop(e) {
-  e.stopPropagation();
-  e.preventDefault();
-
-  var dt = e.dataTransfer;
-  var files = dt.files;
-
-  handleFiles(files);
-}
-
- -

Aquí, recuperamos  el campo dataTransfer del evento, a continuación tomamos la lista de archivos fuera de él, que pasa para handleFiles(). 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.

- -

El objeto  FileList proporcionado por el DOM de las listas de todos los archivos seleccionados por el usuario, cada una se especifica como un objeto File. Tu puedes determinar cuantos archivos el usuario selecciona, al verificar el valor del atributo length:

- -
var numFiles = files.length;
-
- -

Individualmente los objetos File pueden ser recuperados simplemente accediendo a la lista como una matriz:

- -
for (var i = 0; i < files.length; i++) {
-  var file = files[i];
-  ..
-}
-
- -

 Este bucle se repite en todos los archivos de la lista de archivos.

- -

Hay tres atributos proporcionados por el objeto File que contienen información útil sobre el archivo.

- -
-
name
-
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.
-
size
-
El tamaño del  archivo en bytes como de solo lectura entero de 64 bits.
-
type
-
El tipo MIME de el archivo como una cadena de sólo lectura, o "" si el tipo no puede ser determinado.
-
- -

Ejemplo: Mostrando miniaturas de las imágenes seleccionadas por el usuario

- -

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 handleFiles() de abajo.

- -
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);
-  }
-}
-
- -

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í.

- -

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.

- -

A continuación, se establece  FileReader 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 FileReader, hemos creado la función load, a continuación llamamos readAsDataURL() para empezar la operación de lectura de fondo. cuando todo el contenido del archivo de imagen se carga, se convierten en una  data: URL, cada uno se pasa por  onload 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.

- -

{{ h1_gecko_minversion("Ejemplo: Usar URL objeto para mostrar imágenes", "2.0") }}

- -

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 ver el ejemplo vivo (nota se requiere  versión nocturna (nightly build) de Firefox del 22 de noviembre o posterior, o Firefox 4.0 beta 8).

- -
Nota: 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!
- -

Escuchar
- traducción del inglés al español
- El código HTML que presenta la interfaz se parece a esto:

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

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 doClick() que invoca el selector de archivos.

- -

El método siguiente handleFiles():

- -
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);
-  }
-}
-
- -

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.

- -

Si el  objeto {{ domxref("FileList") }} handleFiles() es null, 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:

- -

Una nueva lista desordenada elemento ({{ HTMLElement("ul") }} es creada.

- -
    -
  1. La nueva lista de elementos se inserta en el bloque  {{ HTMLElement("div") }} llamando a este método {{ domxref("element.appendChild()") }}.
    2. -
  2. Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado por files: -
      -
    1. Crear un nuevo elemento de la lista ({{ HTMLElement("li") }}) y se inserta en la lista.
      2. -
    2. Crear un nuevo elemento imagen ({{ HTMLElement("img") }}).
      3. -
    3. Ajuste de la imagen de origen a un nuevo objeto URL representando el archivo, usando {{ domxref("window.URL.createObjectURL()") }} para crear la blob URL.
      4. -
    4. Ajuste la altura de la imagen a 60 píxeles.
      5. -
    5. 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 img.src.
      6. -
    6. Anexar el nuevo elemento lista a la lista.
      7. -
    -
    3. -
- -

Ejemplo: Cargando archivos seleccionado por el usuario (user-selected file)

- -

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.

- -

Creando las tareas de carga

- -

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 File 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í:

- -
function sendFiles() {
-  var imgs = document.querySelectorAll(".obj");
-
-  for (var i = 0; i < imgs.length; i++) {
-    new FileUpload(imgs[i], imgs[i].file);
-  }
-}
-
- -

En la linea 2 se crea una matriz, llamada imgs, 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 FileUpload para cada uno. Cada uno de estos manejadores de carga el archivo correspondiente.

- -

Manejadores de procesos de carga de un archivo

- -

La función FileUpload acepta dos entradas: un elemento imagen y un archivo desde donde se leerán  los datos de la imagen

- -
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());
-}
-
- -

La función FileUpload() muestra arriba crear un throbber, cada uno es usado para mostrar la información de progreso, a continuación se crea un XMLHttpRequest para manejar la carga de los datos.

- -

Antes de transferir los datos actualmente, varios pasos preparatorios se tienen:

- -
    -
  1. El XMLHttpRequest'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.
    2. -
  2. El XMLHttpRequest'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.
    3. -
  3. La solicitud de carga de imagen se abre llamando el método XMLHttpRequest's open() para empezar a generar la POST solicitud.
    4. -
  4. El tipo MIME para la carga esta configurada para llamar la función XMLHttpRequest function overrideMimeType(). 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.
    5. -
  5. Finalmente la función XMLHttpRequest sendAsBinary() es llamada para cargar el contenido de el archivo. Esto necesita ser revisado; en la actualidad esta obsoleto la rutina para extraer datos desde archivos getAsBinary() síncrona.
    6. -
- -

Manejando el proceso de carga para un archivo, asíncronicamente

- -
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;
-}
-
- -

Esto también necesita ser modificado para trabajar con datos binarios.

- -

Vea también

- - diff --git "a/files/es/orphaned/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" "b/files/es/orphaned/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" deleted file mode 100644 index f5ac459e31..0000000000 --- "a/files/es/orphaned/usar_c\303\263digo_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 ---- -

Hay varias maneras en las que puede usar código de Mozilla en su propio proyecto.

- - -

Construyendo aplicaciones XUL

La alegria XUL
La introducción a XUL; una lectura necesaria para los nuevos desarrolladores.
XUL Referencia
La referencia completa a XUL.
XULRunner
Un paquete runtime que puede ser utilizado para arrancar aplicaciones XUL y XPCOM con facilidad.
Mozilla Toolkit
Información acerca de la API Mozilla Toolkit.

Usando componentes Mozilla

SpiderMonkey
SpiderMonkey es el motor JavaScript runtime utilizado por proyectos de Mozilla.
NSPR
El Netscape Portable Runtime proporciona una API de plataforma-neutal para nivel de sistema y funciones libc-type.
Necko
La librería de red Mozilla proporciona la funcionalidad multi-plataforma de redes.
-

Embeber Mozilla

-

Para información sobre embeber un buscador web en su propio proyecto vea Embeber Mozilla.

-

{{ languages( { "ja": "ja/Using_Mozilla_code_in_other_projects", "zh-cn": "cn/Using_Mozilla_code_in_other_projects"} ) }}

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

{{ gecko_minversion_header ("1.9.2") }}

-

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.

-

El subproceso del worker puede realizar tareas sin interferir con la interfaz de usuario.  Además, pueden realizar E / S utilizando XMLHttpRequest (aunque los atributos responseXML y channel siempre son nulos).

-
- Nota: 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.
-

Consulta el documento de referencia Worker , al que este artículo complementa ofreciendo ejemplos y añadiendo detalles. Para obtener una lista de funciones disponibles para workers, consulta Funciones disponibles para workers .

-

Acerca de la seguridad en los subprocesos

-

La interfaz Worker 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.

-

Generar un worker

-

Crear un nuevo worker es simple.  Lo único que tienes que hacer es llamar al constructor Worker(), 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 onmessage del worker a una función de manejador de evento adecuada.

-
var myWorker = new Worker('my_worker.js');
-myWorker.onmessage = function(event) {
-  print("Llamado de nuevo por el worker\n");
-};
-

De forma alternativa, podemos usar addEventListener():

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

La línea 1 de este ejemplo crea e inicia el subproceso del worker. La línea 2 establece el controlador onmessage para el worker a una función que se llama cuando éste pide su propia función postMessage().

-
- Nota: La URI pasada como parámetro del constructor del Worker debe obedecer la política del mismo origen o same-origin policy. 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.
-

Generar subworkers

-

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.

-

Tiempos de espera e intervalos

-

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.

-

Consulta setTimeout(), clearTimeout(), setInterval() y clearInterval() si deseas tener más detalles.

-

Terminar un worker

-

Si tienes que cancelar inmediatamente un worker que se está ejecutando, puedes hacerlo llamando al método terminate() del worker:

-
myWorker.terminate();
-
-

El subproceso del worker se interrumpe inmediatamente y sin tener la posibilidad de terminar sus operaciones o limpiar por sí mismo.

-

Los workers pueden cerrarse llamando a su propio método {{ ifmethod("nsIWorkerScope", "close") }}.

-

Gestión de errores

-

Cuando se produce un error de ejecución en el worker, es llamado su controlador de enventos onerror.  Recibe un evento denominado error que implementa la interfaz ErrorEvent.  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 preventDefault() del evento de error.

-

El evento de error tiene los siguientes tres campos que son de interés:

-
-
- message
-
- Un mensaje de error legible para el ojo humano.
-
- filename
-
- El nombre del archivo de script en el que se produjo el error.
-
- lineno
-
- El número de línea del archivo de script en el que se produjo el error.
-
-

Acceder al objeto navegador

-

Los workers pueden acceder al objeto navigator, 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:

- -

Importar de secuencias de comandos y bibliotecas

-

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:

-
importScripts();                        /* no importa nada */
-importScripts('foo.js');                /* importa solo "foo.js" */
-importScripts('foo.js', 'bar.js');      /* importa dos scripts */
-
-

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.

-
- Nota: los scripts pueden ser descargados en cualquier orden, pero no se ejecutarán en el orden en que pasas los nombres de archivo a importScripts() .  Esto se realiza de forma sincrónica; importScripts() no retorna hasta que todas las secuencias de comandos se han cargado y ejecutado.
-

 

-

Ejemplos

-

Esta sección incluye varios ejemplos de cómo utilizar los DOM workers.

-

Realizar cálculos en segundo plano

-

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.

-

El código JavaScript

-
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);
-  }
- };
-

La función onmessage es llamada cuando el código HTML llamada al postMessage() en el worker.  Esto inicia la recursividad, generando copias nuevas de sí mismo para controlar cada iteración del cálculo.

-

El código 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>
-
-

La página web crea un elemento div con el id. de cliente result , que se utiliza para mostrar el resultado, a continuación, genera el worker.  Tras generar el worker, el manejadoronmessage está configurado para mostrar los resultados mediante el ajuste de los contenidos del elemento div, y el manejador onerror se establece para volcar el mensaje de error.

-

Por último, se envía un mensaje al worker para iniciarlo.

-

Prueba este ejemplo .

-

Realizar E / S de web en segundo plano

-

Puedes encontrar un ejemplo de esto en el artículo Usar  workers en las extensiones .

-

Dividir tareas entre varios workers

-

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.

-

el ejemplo se incluirá muy pronto

-

Crear workers desde dentro de los workers

-

El ejemplo de Fibonacci mostrado anteriormente demuestra que los workers pueden, de hecho, generar más workers.  Esto facilita crear rutinas repetitivas.

-

Enviar objetos a los workers

-

Puede pasar con seguridad los objetos dentro y fuera de los workers que utilizan el método postMessage(), los objetos se convierten automáticamente en JSON de manera interna.

-
var onmessage = function(e) {
-  postMessage(e.data);
-};
-
- Nota: los 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.
-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Workers dedicados33.5 (1.9.1)1010.604
Workers compartidos5------10.605
Pasar datos usando clonación estructurada. 1381011.505.1
Pasar datos usando objetos transferibles17 {{ property_prefix("webkit") }}------------
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Workers dedicados---0.16------115
Workers compartidos---{{ CompatNo() }}------------
Pasar datos usando clonación estructurada. ---0.16------------
-
-

Consulta también

- -

{{ HTML5ArticleTOC() }}

-

{{ languages ( {"en": "En/Using_web_workers"} ) }}

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

-

XPInstall es una tecnología de instalación basada en JavaScript que funciona en todas las plataformas en las que pueden instalarse los navegadores de Mozilla 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 XPInstall. -

-

Definición de términos

-

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

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, contienen otros ficheros, normalmente: -

- -

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

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, cómo las pieles y los temas son instalados en los navegadores de Mozilla, cambiando su aspecto y apariencia. Este artículo se centra en cómo instalar plugins. -

-

¿Qué navegadores soportan XPInstall?

-

Actualmente, todos los navegadores de Mozilla liberados por mozilla.org y la familia de navegadores basados en el código de Mozilla soportan XPInstall. Concretamente, están incluidos: -

- - -

Advertencias: -

- - -

¿En qué consiste un plugin?

-

Los plugins pueden estar compuestos de los siguientes tipos de fichero, pudiendo ser todos ellos instalados desde un paquete XPI: -

- - - -

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

-

Breve historia de las tecnologías de instalación de Netscape

-

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 no está soportado 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 pluginurl de la etiqueta <embed>. -

-
<embed type="application/x-randomtype" src="myfile.typ" width="50" height="50"
-pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed>
-
-

En el ejemplo anterior, el atributo pluginurl 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) si el plugin no estuviera instalado en la máquina del usuario. SmartUpdate difiere de XPInstall en esto: -

- -

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 nueva API de XPInstall. -

-

Proceso de instalación recomendado

-

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

-
  1. 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 initInstall para inicializarlo todo y además la llamada getFolder que ayuda a encontrar el directorio de plugins del navegador actual. -
  2. 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 getFolder para localizar un directorio "bien conocido" y usarlo como localización secundaria. -
  3. 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 #Problemas con la primera instalación. Para crear y escribir realmente claves en el registro de sistema de Windows se debe usar las funciones del objeto WinReg. -
  4. Asegurar que el plugin recién instalado es actualizado correctamente llamando a la API refreshPlugins. 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. -
-

El problema de la primera instalación

-

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

- -

Disección de las APIs utilizadas

-

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 escribir una clave en el registro del sistema de Windows que permita recuperar esta última ubicación. 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 reconoce a los navegadores Netscape Gecko 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 documentación API de XPInstall. -

-

Inicializar la instalación con el identificador del plugin

-

Toda instalación XPInstall es inicializada con el método initInstall del objeto Install. 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 initInstall será suficiente). El método initInstall es polimórfico aunque a continuación se muestra el mecanismo de invocación recomendado: -

-
initInstall("My Plugin Software", "@myplugin.com/MyPlugin,version=2.5", "2.5.0.0");
-
-

En el trozo de código anterior, el método initInstall es invocado con tres parámetros: -

- -

Advertencia: 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: -

-
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);
-}
-
-

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

-

Usar XPInstall junto con un instalador ejecutable (código nativo)

-

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 método execute del objeto Install del XPInstall para ejecutar el binario. Además puedes llamar al método execute del objeto File 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: -

-
// 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);
-
-

Instalar los ficheros del plugin en el navegador actual

-

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

-
// 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;
-    }
-
-

Instalación en una ubicación secundaria

-

Para solventar el problema de la primera instalación 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. Advertencia: Debido a posibles problemas de permisos se aconseja manejar los errores con sumo cuidado. -

-
// 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;
-    }
-
-

Una vez decidida la ubicación secundaria, el registro de windows ha de ser actualizado con la ruta de dicha ubicación para que futuros navegadores puedan recuperarla. Esto es realizado con el objeto WinReg proporcionado por XPInstall. Todas las piezas quedan ensambladas en la plantilla mostrada a continuación. -

-

Plantilla XPInstall

-

Se ha mostrado una plantilla para un script de instalación que quizá te gustaría abrir en otra pestaña o ventana. Dicho script de instalación hace lo siguiente: -

- -

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 API getFolder 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. -

-

Algunas notas sobre la instalación

-

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

-

Ejecutar una descarga XPInstall con un script autoejecutable

-

Un script autoejecutable 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 scripts autodisparados 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: -

- -

Los scripts autoejecutables son la forma recomendada de iniciar las descargas XPInstall. -

-

Ejecutar una descarga XPInstall desde HTML

-

De manera análoga a como son inicializadas las descargas SmartUpdate por el atributo pluginurl de la etiqueta <embed>, las descargas XPInstall pueden ser también iniciadas por las etiquetas HTML que invocan a plugins, sobre todo a través del atributo codebase de la etiqueta <object>. Esto es análogo a cómo Internet Explorer descarga ficheros CAB referenciados por el atributo codebase de la etiqueta <object>. A continuación se muestra un ejemplo de una hipotética etiqueta <object> usada para invocar a MyPlugin (una aplicación imaginaria): -

-
	<object id="thePlugin" type="application/x-myplugin" width="100"
-	height="100" codebase="http://location/XPI/myplugin.xpi">
-
-<param .... >
-
-

En el caso anterior, el atributo codebase 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. -

Nota: 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. -

-

El problema de la desinstalación

-

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

-
-

Información original del documento

- -
diff --git "a/files/es/orphaned/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" "b/files/es/orphaned/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" deleted file mode 100644 index a1f476dfb1..0000000000 --- "a/files/es/orphaned/uso_del_n\303\272cleo_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 ---- -

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.

- -

¿Qué es un árbol de contenidos?

- -

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 espacios en blanco en DOM):

- -
<html>
-<head>
-  <title>Mi documento</title>
-</head>
-<body>
-  <h1>Cabecera</h1>
-  <p>Párrafo</p>
-</body>
-</html>
-
- - - -

Cuando analiza un documento, Mozilla construye un árbol de contenidos y luego lo utiliza para mostrar el documento.

- -

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).

- -

¿Qué me permite hacer el Nivel 1 del DOM?

- -

El nivel 1 del DOM del W3C te permite cambiar el árbol de contenidoscomo te de la gana . 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 document. El objeto document implementa el interfaz de documento del nivel 1 de la especificación para el DOM del W3C.

- -

Un ejemplo simple

- -

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: palabras reservadas Javascript, métodos y propiedades DOM predefinidos y comentarios en Javascript):

- -

-// document.getElementsByTagName("H1") devuelve un NodeList de los
-// elementos H1 del documento; el primer elemento tiene índice 0:
-
-var header = document.getElementsByTagName("H1").item(0);
-
-// La propiedad firstChild de la cabecera contiene un nodo de texto y su propiedad
-// data contiene el texto del nodo:
-
-header.firstChild.data = "Un documento dinámico";
-
-// Ahora la cabecera es "Un documento dinámico".
-// Obtenemos el primer elemento P del documento de la misma forma:
-
-var para = document.getElementsByTagName("P").item(0);
-
-// y cambiamos su texto:
-
-para.firstChild.data = "Este es el primer párrafo.";
-
-// creamos un nodo de texto para el segundo párrafo
-
-var newText = document.createTextNode("This is the second paragraph.");
-
-// creamos un nuevo elemento que sea el segundo párrafo
-
-var newElement = document.createElement("P");
-
-// ponemos el texto en el párrafo
-
-newElement.appendChild(newText);
-
-// y ponemos el párrafo al final del documento anexándolo
-// a la etiqueta BODY (que es el padre del párrafo
-
-para.parentNode.appendChild(newElement);
-
- -

Puedes ver este script en acción en el ejemplo completo.

- -

¿Cómo puedo aprender más?

- -

Una vez familiarizado con los conceptos básicos del DOM, puedes leer el documento que explica los métodos fundamentales del DOM nivel 1. Es lo que sigue a este documento.

- -

Véase también la especificación del núcleo de DOM nivel 1 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 otra documentación del DOM.

- -
-

Original Document Information

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

Resumen

-

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 observer service a cualquiera que reciba la notificación. Este artículo cuenta cómo los desarrolladores pueden hacer uso de esta facilidad. -


-

-

Datos del Runtime

-

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

-

Uso

-

Para hacer uso del nuevo componente, debes registrarte para recibir las notificaciones del runtime usando el observer service. El tópico de la notificación es experimental-notify-plugin-call. 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 aquí y aquí. -

Debajo hay un número de conversaciones sobre JavaScript que podrían ser útiles para desarrolladores que quieran usar esta facilidad: -

-

Registro

-

Para registrase en el servicio de notificaciones con el observador debes crear una clase con un método observe que recibe tres parámetros (subject, topic y data) así como un método register que contiene el siguiente código: -


- -

-
var observerService = Components.classes["@mozilla.org/observer-service;1"]
-                        .getService (Components.interfaces.nsIObserverService);
-observerService.addObserver(this, "experimental-notify-plugin-call", false);
-
-

-


-

-

Observando

-

Como hemos dicho arriba, para especificar lo que quieres que se haga cuando llega una notificación, tu clase debe tener un método observe, que recibe tres parámetros (subject, topic y data). El topic contiene el tópico de la notificación - experimental-notify-plugin-call en este caso, data es el runtime en mili segundos y subject es siempre null y no debería usarse. -

Aquí hay un ejemplo que muestra el runtime en una caja de alerta al usuario si el runtime excede medio segundo de longitud: -

-

-
 observe: function(subject, topic, data) {
-   if (topic == "experimental-notify-plugin-call" ) {
-     if (data > 0.500) {
-       alert("Runtime is: " + data);
-     }
-   }
- }
-
-

-

NOTA: Esto es un ejemplo simplificado y se desaconseja el uso de alert() 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. -

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

-

Limpieza

-

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 unregister que contenga el siguiente código: -

-

-
var observerService = Components.classes["@mozilla.org/observer-service;1"]
-                       .getService(Components.interfaces.nsIObserverService);
-observerService.removeObserver(this, "experimental-notify-plugin-call");
-
-

-


-

-

Esquema de una clase para el observador

-

A continuación presentamos un esquema de una clase que puedes usar para escuchar el servicio de notificaciones: -

-

-
 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;
-     }
-   }
- }
-
-

-


-

-

Recursos adicionales

-

Más información sobre el servicio de observación: -

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

{{ APIRef("Web Workers API") }}

- -

La interfaz AbstractWorker de la API de Web Workers 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")}}.
- Al ser una clase abstracta, usted no interactúa directamente con el AbstractWorker.

- -

Propiedades

- -

La interfaz AbstractWorker no hereda ninguna propiedad.

- -

Gestor de eventos

- -
-
{{domxref("AbstractWorker.onerror")}}
-
Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo error se gatilla através del worker.
-
- -

Métodos

- -

La interfaz AbstractWorker no implementa o hereda ningún método.

- -

Ejemplo

- -

Note que usted no estará usando la interfaz AbstractWorker diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.

- -

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:

- -
var myWorker = new Worker("worker.js");
-
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Mensaje enviado al worker');
-}
- -

El código del worker se carga desde el archivo "worker.js". Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como first; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de first, un mensaje se enviará al worker haciendoselo saber.

- -

Para ejemplos completos, visitar:

- - - -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("HTML WHATWG")}}No existen cambios para {{SpecName("Web Workers")}}.
{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("Web Workers")}}Definición inicial.
- -

Compatibilidad en Navegadores

- -
{{CompatibilityTable()}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.1")}}1010.64
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("1.9.1")}}1.0.11011.55.1
-
- -

Vease también

- - 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 ---- -
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
- -

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.

- -

Eventos de luz

- -

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.

- -

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.

- -

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.

- -

Ejemplo

- -
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');
-}
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificacionesEstadoComentario
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}definición inicial
- -

Compatibilidad del Navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatGeckoDesktop("22.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("15.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[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)}}).

- -

See also

- - 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 ---- -
{{APIRef("Fetch")}}
- -

El método formData() de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.

- -
-

Nota: Esto es principalmente relevante en service workers. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a formData() para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).

-
- -

Sintaxis

- -
response.formData()
-.then(function(formdata) {
-  // hacer algo con tu formdata
-});
- -

Parámetros

- -

Ninguno.

- -

Valor de retorno

- -

Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.

- -

Ejemplo

- -

TBD.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
- -

Compatibilidad en navegadores

- - - -

{{Compat("api.Body.formData")}}

- -

Ver también

- - 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 ---- -
{{ APIRef("Fetch") }}
- -

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

- -

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

- -

Properties

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
A {{domxref("Boolean")}} that indicates whether the body has been read.
-
- -

Methods

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
-
{{domxref("Body.blob()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
-
{{domxref("Body.formData()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
-
{{domxref("Body.json()")}}
-
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")}}.
-
{{domxref("Body.text()")}}
-
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
-
- -

Examples

- -

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.

- -

HTML Content

- -
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
-
- -

JS Content

- -
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;
-});
- -

{{ EmbedLiveSample('Examples', '100%', '250px') }}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
- -

Browser compatibility

- - - -

{{Compat("api.Body")}}

- -

See also

- - - -

 

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 ---- -
{{APIRef("Fetch API")}}
- -

El método json() 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")}}.

- -

Sintáxis

- -
response.json().then(data => {
-  // do something with your data
-});
- -

Parámetros

- -

No.

- -

Valor devuelto

- -

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...).

- -

Example

- -

In our fetch json example (run fetch json live), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a .json file. When the fetch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.

- -
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);
-    }
-  });
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.Body.json")}}

- -

See also

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

{{APIRef("DOM")}} {{SeeCompatTable}}
- El método ChildNode.after() inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este ChildNode del padre, justo después de este ChildNode. Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.

- -

Sintaxis

- -
[Throws, Unscopable]
-void ChildNode.after((Node o DOMString)... nodes);
-
- -

Parámetros

- -
-
nodes
-
Un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} para insertar.
-
- -

Excepciones

- - - -

Ejemplos

- -

Insertando un elemento

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

Insertando texto

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

Insertando un elemento y texto

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

ChildNode.after() es unscopable

- -

El método after() no está incluido en la declaración with.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  after("foo");
-}
-// ReferenceError: after is not defined
- -

Polyfill

- -

Puedes usar un polyfill del método after() en Internet Explorer 9 y superiores con el siguente código:

- -
// 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]);
- -

Otro polyfill

- -
// 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));
-*/
-
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
- -

Compatibilidad con navegadores

- -

{{Compat("api.ChildNode.after")}}

- -

Ver también

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

- -
-
 
-
- -
-
 
-
- -
-
{{APIRef ( "DOM")}} {{SeeCompatTable}}
-
-El método ChildNode.before 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. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.
-
- -

Síntasix

- -
[Throws, Unscopable]
-void ChildNode.before((Node or DOMString)... nodes);
-
- -

Parámetros

- -
-
nodos
-
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.
-
- -

Excepciones

- - - -

Ejemplos

- -

Insertando un elemento

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

Insertando texto

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

Insertando un elemento y texto

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

ChildNode.before() es unscopable

- -

El método before () no está definido en la declaración with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  before("foo");
-}
-// ReferenceError: before is not defined
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte  Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
-
- -

Ver también

- - 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 ---- -
{{APIRef("DOM")}}
- -

The ChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.

- -

ChildNode 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.

- -

Properties

- -

There are neither inherited, nor specific properties.

- -

Methods

- -

There are no inherited methods.

- -
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
Removes this ChildNode from the children list of its parent.
-
{{domxref("ChildNode.before()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just before this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.after()")}} {{experimental_inline}}
-
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
-
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
-
Replaces this ChildNode 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.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ParentNode")}} and ChildNode. previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the remove(), before(), after() and replaceWith() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Polyfill

- -

External on github: childNode.js

- -

Browser compatibility

- -

{{ CompatibilityTable }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}}){{CompatChrome(1.0)}}{{CompatGeckoDesktop(23)}}9.010.04.0
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatChrome(23.0)}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}{{CompatChrome(29.0)}}{{CompatGeckoDesktop(23)}}Edge16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatOpera(39)}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
remove(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatOperaMobile(39)}}{{CompatNo}}{{CompatChrome(54.0)}}
-
- -

See also

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

{{APIRef ( "DOM")}}
- El método ChildNode.remove ( ) elimina el objeto del árbol al que pertenece.

- -

Sintaxis

- -
node.remove();
-
- -

Ejemplo

- -

Utilizando remove()

- -
<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>
-
- -
var el = document.getElementById('div-02');
-el.nextElementSibling.remove(); // Elimina el div con el id 'div-03'
-
- -

ChildNode.remove() es unscopable

- -

El método remove() no está definido en el contexto de las declaración with. Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  remove();
-}
-// ReferenceError: remove is not defined
- -

Polyfill

- -

El código a continuación es un polyfill del método remove() para Internet Explorer 9 y superiores:

- -
// 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]);
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Definición inicial.
- -

Compatibilidad en los navegadores

- -
-

{{Compat("api.ChildNode.remove")}}

-
- -

Ver también

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

{{APIRef ( "DOM")}} {{SeeCompatTable}}
-
- El método ChildNode.replaceWith () reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.

- -

 

- -

Síntasix

- -

 

- -
[Throws, Unscopable]
-void ChildNode.replaceWith((Node or DOMString)... nodes);
-
- -

Parámetros

- -
-
nodos
-
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.
-
- -

Excepciones

- - - -

Ejemplos

- -

Utilizando replaceWith()

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

ChildNode.replaceWith() es unscopable

- -

El método replaceWith () no está incluido en la declaracion with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

- -
with(node) {
-  replaceWith("foo");
-}
-// ReferenceError: replaceWith is not defined
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Mobile
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOperaMobile(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
-
- -

Ver También

- - 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 ---- -
{{SeeCompatTable}}
- -

Resumen

- -

Cada vez más, los dispositivos habilitados para la web son capaces de determinar su orientación; 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. 

- -

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.

- -

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.

- -

Trabajando con eventos de orientación

- -

Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:

- -
window.addEventListener("deviceorientation", handleOrientation, true);
-
- -

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.

- -

La información del evento contiene 4 valores:

- - - -

El manejador del evento puede ser similar a lo siguiente:

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

Explicación de los Valores de Orientación

- -

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 Orientacíon y datos del movimiento explicado que es resumido abajo. 

- - - -

Ejemplo de orientación

- -

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.

- -

Imaginemos una pelota en un jardin:

- -
<div class="garden">
-  <div class="ball"></div>
-</div>
-
-<pre class="output"></pre>
-
- -

Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:

- -
.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%;
-}
-
- -

Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:

- -
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);
-
- -

Aqui el resultado en vivo:

- -
{{ EmbedLiveSample('Orientation_example', '230', '260') }}
- -
-

Tener en cuenta: Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.

-
- -

Procesando eventos de movimiento

- -

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") }}

- -
window.addEventListener("devicemotion", handleMotion, true);
- -

Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función HandleMotion.

- -

El evento de movimiento tiene cuatro propiedades:

- - - -

Valores de movimiento explicados

- -

{{ 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 Datos de orientación y movimiento explicados por más detalles).

- -

Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:

- - - -

Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:

- - - -

Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Especificación inicial.
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
- 6		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
- 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
-

Note: gyronorm.js es un polyfill 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..

-
- -

Gecko implementation notes

- -
    -
  1. Firefox 3.6, 4, and 5 supported mozOrientation versus the standard {{domxref("DeviceOrientationEvent")}} event
    2. -
- -

Vea también

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

Introducción

- -

Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz Event, así como las interfaces para el registro de eventos en los nodos del DOM, y los oyentes de eventos, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.

- -

Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador DOM Level 3 Events.

- -

Vea también el Ejemplo 5: Propagación de eventos en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.

- -

Registrando oyentes de eventos

- -

Hay 3 formas de registrar gestores de eventos para un elemento DOM.

- -

EventTarget.addEventListener

- -
// Se supone que myButton es un elemento de botón
-myButton.addEventListener('click', function(){alert('Hello world');}, false);
-
- -

Este es el método que debe usar en las páginas web modernas. 

- -

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.

- -

Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.

- -

Atributo HTML

- -
<button onclick="alert('Hello world!')">
-
- -

El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

- -

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.

- -

Propiedades del elemento DOM

- -
// Se supone que myButton es un elemento de botón
-myButton.onclick = function(event){alert('Hello world');};
-
- -

La función se puede defirnir para que tome un parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

- -

El problema con este método es que solo se puede establecer un gestor por elemento y por evento.

- -

Accediendo a las Interfaces de eventos

- -

Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al objeto window, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.

- -

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.

- -
function foo(evt) {
-  // al parámetro evt se le asigna automáticamente el objeto event
-  alert(evt);
-}
-table_el.onclick = foo;
-
- - - - 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 ---- -
{{APIRef("DOM")}}
- -

{{ Non-standard_header() }}

- -

Sumario

- -

Element.currentStyle es una propiedad que es una alternativa propietaria del método estandarizado {{domxref("window.getComputedStyle")}} . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

- -

Especificación

- -

No forma parte de ninguna especificación.

- -

Microsoft tiene una descripción MSDN.

- -

Compatibilidad en los Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
-
- -

Ver También

- - 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 ---- -
{{APIRef("DOM")}}
- -

{{ Non-standard_header() }}

- -

Sumario

- -

Element.runtimeStyle es una propiedad exclusiva similar a {{domxref ("HTMLElement.style")}}, excepto sus estilos, que tienen mayor precedencia y modificaciön.It no modifica el contenido del atributo  style . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

- -

especificación

- -

No forma parte de ninguna especificación.

- -

Microsoft tiene una descripción en MSDN.

- -

Compatibilidad de los Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
-
- -

Ver también

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

{{ ApiRef("HTML DOM") }}

- -

Resumen

- -

Devuelve un objeto que representa el atributo style del elemento.

- -

Ejemplo

- -
var div = document.getElementById("div1");
-div.style.marginTop = ".25in";
-
- -

Notas

- -

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

- -

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 in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

- -

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

- -

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

- -

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

- -

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

- -
elt.style.color = "blue";  // Asignación directa
-
-var st = elt.style;
-st.color = "blue";  // Asignación Indirecta
-
- -

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

- -
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";
-
- -

 

- -

Especificación

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

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 ---- -
{{ APIRef("HTML DOM") }}
- -

La propiedad dataset en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

- - - -

Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo Using data attributes.

- -

Conversion de nombres

- -

dash-style a camelCase: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas

- - - -

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

- - - -

La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.

- -

Por ejemplo, el atributo nombrado data-abc-def corresponde a la clave abcDef.

- - - -

Accediendo valores

- - - -

Definiendo valores

- - - -

Sintaxis

- - - -

Ejemplos

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
- -
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
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

Compatibilidad en navegadores

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Ver también

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

IndexedDB 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).

- -

Sobre este documento

- -

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 Definiciones.

- -

Para un tutorial sobre cómo usar la API, vea Usando IndexedDB. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB 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.

- -

Visión general de IndexedDB

- -

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 política de mismo origen, 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.

- -

La API incluye una variante asíncrona y una síncrona. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo WebWorkers, 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.

- -

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.

- -

Conceptos principales

- -

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:

- - - -

Definiciones

- -

Esta sección define y explica los términos utilizados en la API de IndexedDB.

- -

Base de Datos

- -
-
base de datos
-
Un repositorio de información, típicamente compuesto de uno o más  almacenes de objetos. Cada base de datos debe tener: -
    -
  • Nombre. 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).
    • -
  • -

    Versión actual. 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.

    -
    • -
-
-
almacén de objetos
-
-

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 llaves en orden ascendente.

- -

Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un generador de llaves y una ruta de llaves. Si el almacén tiene una ruta de llaves, éste utiliza llaves en línea; si no, utiliza llaves fuera de línea.

- -

Para documentación de referencia sobre los almacenes de objetos, vew IDBObjectStore o IDBObjectStoreSync.

-
-
versión
-
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 transacción versionchange y dispara el evento upgradeneeded. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.
-
Nota: Esta definición describe la especificación más actual, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método IDBDatabase.setVersion(), que ya ha sido marcado obsoleto y removido.
-
conexión a la base de datos
-
Una operación creada al abrir una base de datos. Una base de datos puede tener múltiples conexiónes al mismo tiempo.
-
transacción
-
-

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.

- -

Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan ámbitos 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 flyingMonkey, se puede iniciar una segunda que tenga como ámbito los almacenes unicornCentaur y unicornPegasus. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.

- -

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.

- -

Los tres modos de transacción son: readwrite, readonly, y versionchange. La única manera de crear y borrar almacenes es usar una transacción versionchange. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de IndexedDB.

- -

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 IDBTransaction, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea IDBTransactionSync.

-
-
solicitud
-
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.
-
índice
-
-

Un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado. 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.

- -

Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

- -

Para aprender más sobre el uso de los índices, vea Usando IndexedDB. Para documentación de referencia, vea IDBKeyRange.

-
-
- -

Llave y valor

- -
-
llave
-
-

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 generador de llaves, una ruta de llave, 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.

- - -

Una llave puede ser de uno de los siguientes tipos: String, Date, float, y Array. 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.

- -

Como alternativa, se pueden realizar búsquedas de objetos usando un índice.

-
-
generador de llaves
-
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.
-
llaves en línea
-
Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una  ruta de llave. 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.
-
llave fuera de línea
-
Una llave que se almacena separada del valor.
-
ruta de llave
-
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.
-
valor
-
-

Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: booleanos, números, cadenas, fechas, objetos, arreglos, expresiones regulares, undefined, y null.

- -

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.

- -

Se pueden almacenar Blobs y archivos. cf. especificación.

-
-
- -

Rango y ámbito

- -
-
ámbito
-
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.
-
cursor
-
Un mecanismo para iterar a través de múltiples registros con un rango de llaves. 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 IDBCursor o IDBCursorSync.
-
rango de llaves
-
-

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.

- -

Para documentación de referencia sobre los rangos de llaves, vea IDBKeyRange.

-
-
- -

Limitaciones

- -

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:

- - - -

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

- - - -

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.

- -
-

Advertencia: Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un Web App. Esto requiere mayor investigación para documentarlo.

-
- -

Próximo paso

- -

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 Usando IndexedDB.

- -

Vea también

- -

Especificación

- - - -

Referencia

- - - -

Tutoriales

- - - -

Artículo relacionado

- - 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 ---- -
{{APIRef("DOM")}}
- -

El método ParentNode.append() inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de ParentNode. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.

- -

Diferencias con {{domxref("Node.appendChild()")}}:

- - - -

Sintaxis

- -
[Throws, Unscopable]
-void ParentNode.append((Node or DOMString)... nodes);
-
- -

Parameters

- -
-
nodes
-
Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.
-
- -

Exceptions

- - - -

Examples

- -

Appending an element

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

Appending text

- -
var parent = document.createElement("div");
-parent.append("Some text");
-
-console.log(parent.textContent); // "Some text"
- -

Appending an element and text

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() is unscopable

- -

The append() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

You can polyfill the append() method in Internet Explorer 9 and higher with the following code:

- -
// 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]);
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.ParentNode.append")}}

- -

See also

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

{{ APIRef("DOM") }}

- -

Node.children es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un Node.

- -

Sintaxis

- -
var children = node.children;
- -

children es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos de node. Si no hay elementos hijos, entonces children no contendrá elementos y su longitud ( length )  será 0.

- -

Ejemplo

- -
var foo = document.getElementById('foo');
-for (var i = 0; i < foo.children.length; i++) {
-    console.log(foo.children[i].tagName);
-}
-
- -

Polyfill

- -
// 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);
-
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definición Inicial
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]38.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}16.0{{CompatNo}}
Soporte en {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.

- -

Ver también

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

{{ APIRef("DOM") }}

- -

La propiedad de sólo lectura ParentNode.firstElementChild retorna el primer hijo del objeto {{domxref("Element")}}, o bien null si no existen elementos hijos.

- -
-

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, firstElementChild fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.

-
- -

Sintaxis

- -
var childNode = elementNodeReference.firstElementChild;
-
- -

Ejemplo

- -
<p id="para-01">
-  <span>First span</span>
-</p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstElementChild.nodeName)
-</script>
- -

En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.

- -

Polyfill para Internet Explorer 8

- -

Esta propiedad no está soportada con anterioridad a  IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:

- -
// 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;
-        }
-    });
-}
- -

Especificación

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda definido ahora en el segundo.
- Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal y lo usa en {{domxref("Element")}}.
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

Ver también

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

{{ APIRef("DOM") }}

- -

The ParentNode interface contains methods that are particular to {{domxref("Node")}} objects that can have children.

- -

ParentNode 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.

- -

 

- -

Properties

- -
-
{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}
-
Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this ParentNode.
-
{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} that is the first child of this ParentNode, or null if there is none.
-
{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
-
Returns the {{domxref("Element")}} that is the last child of this ParentNode, or null if there is none.
-
{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
-
Returns an unsigned long giving the amount of children that the object has.
-
- -

Methods

- -

There is no inherited or specific and implemented methods.

- -

Specification

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
- The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
- Added the children property.
- Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.

- -

See also

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

{{ APIRef("DOM") }}

- -

La propiedad de sólo lectura ParentNode.lastElementChild retorna el último hijo del objeto {{domxref("Element")}} o bien null si no hay elementos hijos.

- -
-

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, lastElementChild fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.

-
- -

Sintaxis

- -
var childNode = elementNodeReference.lastElementChild;
- -

Ejemplo

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

En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").

- -

Polyfill para Internet Explorer 8

- -

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:

- -
// 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;
-        }
-    });
-}
- -

Especificación

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda ahora definido en el segundo.
- {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal  y lo usa en {{domxref("Element")}}.
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
-
- -

 

- -

Ver también

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

{{APIRef("Web Crypto API")}}{{draft}}

- -

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.

- -

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.

- -

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.

- -

Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use localforage.js 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.

- -

The data we want to access is of the form:

- -

 

- -

where data is the information to guarantee the integrity and signature the information used to verify it.

- -

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.

- -

We ask the user for a password, and we use it to generate the key:

- -
 
- -

With that key, we will be able to compute the mac of the data.

- -
 
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 ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La pseudo-clase CSS:-moz-ui-valid CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus  restricciones de validación.

- -

Se aplica siguiendo las siguientes reglas:

- - - -

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.

- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

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

 

-

Introducción

-

Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).

-

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.

- - -

Este tutorial se base en la especificación CSS 2.1

-

¿Quienes deberían usar este tutorial?

-

Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.

-

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.

-

Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.

-

Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.

-

¿Qué necesitas antes de empezar?

-

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.

-

Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.

-

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.

- -

Nota:  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.

-

Como usar este tutorial

-

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.

-

En cada página, usa la sección Información para entender como funciona CSS. Usa la sección Acción para tratar de usar CSS en tu computadora.

-

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.

-

Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas Más detalles. Usa los enlaces allí para encontrar información de referencia acerca de CSS.

-

Tutorial Parte I

-

Una guía de CSS paso a paso.

-
  1. Que es CSS
  2. Por qué usar CSS
  3. Como funciona CSS
  4. Cascada y herencia
  5. Selectores
  6. CSS legible
  7. Estilos de texto
  8. Color
  9. Contenido 
  10. Listas
  11. Cajas
  12. Estructura
  13. Tablas
  14. Media
    15. -
-

Tutorial Parte II

-

Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.

-
  1. JavaScript
  2. Gráficos SVG
  3. Data XML
  4. XBL bindings 
  5. Interfaces de usuario XUL
    6. -
-

{{ CSSTutorialTOC() }}

-

{{ 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" } ) }}

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() ---- -

{{ CSSRef() }}

- -

Resumen

- -

La función CSS linear-gradient() 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>")}}.

- -

{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}

- -

Cómo cualquier otro degradado, un degradado lineal no tiene dimensiones intrínsecas; 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.

- -

Los gradientes lineales están definidos por un eje, la línea gradiente, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la línea gradiente tienen un único color, para cada punto de la línea gradiente.

- -

linear-gradient.png

- -

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.

- -

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.

- -

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.

- -

Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda magic corners (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.

- -

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.

- -

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") }}.

- -

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.

- -
Gradients are defined as CSS <image> 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") }}.
-For this reason, linear-gradient won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.
- -

Syntax

- -
Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-                                  \---------------------------------/ \----------------------------/
-                                    Definition of the gradient line         List of color stops
-
-                      where <side-or-corner> = [left | right] || [top | bottom]
-                        and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -
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 */
-
- -

Values

- -
-
<side-or-corner>
-
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
- The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg 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 <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
-
<angle>
-
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
-
<color-stop>
-
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).
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
-
- -

History of the syntax

- -

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

- -
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
-
- -

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.

- -

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:

- -
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

- -

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.

- - - -

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):

- -
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

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.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

- -
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

This should be the final syntax.

- -

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 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg 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 (0deg = East). 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 to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

- -

Examples

- -

Gradient at a 45 degree angle

- -

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.

- -

lingradexample.png

- -

Gradient with multiple color stops

- -

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, 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.

- -

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.

- -
A rainbow made from a gradient
- -
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-
- -

Repeating a linear gradient

- -

The linear-gradient 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") }}.

- -

Using transparency

- -
Linear with transparency
- -
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
- -

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 background-size).

- -

Notes

- -

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}
- -

Browser compatibility

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
- {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword)1626.0 (537.27)1012.106.1
- -

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. 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 -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

- -

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to 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:

- -
linear-gradient(to top left, blue, red);
- -

is almost the same as:

- -
-moz-linear-gradient(bottom right, blue, red);
- -

The legacy syntax, without to, is planned to go away when the prefix is removed.

- -

Cross-browser gradients

- -

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

- -
.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 */
-}
-
- -

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'.

- -

See also

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

 

-

Introducción

-

Este tutorial es una introducción a las hojas de estilo en cascada (CSS).

-

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.

- - -

El tutorial está basado en la especificación 2.1 de CSS 2.1.

-

¿Quién debe usar este tutorial?

-

Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.

-

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.

-

Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.

-

Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.

-

¿Qué necesitas antes de empezar?

-

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.

-

Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.

-

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:

- -

Nota:  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.

-

Cómo usar este tutorial

-

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.

-

En cada página, usa la sección de Información para entender cómo funciona CSS. Usa la sección Acción para probar el uso de CSS en tu propio equipo.

-

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.

-

Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título Más detalles. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.

-

Primera parte del tutorial

-

Una guía básica paso a paso de CSS.

-
  1. What is CSS
  2. Why use CSS
  3. How CSS works
  4. Cascading and inheritance
  5. Selectors
  6. Readable CSS
  7. Text styles
  8. Color
  9. Content
  10. Lists
  11. Boxes
  12. Layout
  13. Tables
  14. Media
    15. -
-

Segunda parte del tutorial

-

Ejemplos que muestran el alcance del CSS en Mozilla.

-
  1. JavaScript
  2. XBL bindings
  3. XUL user interfaces
  4. SVG graphics
  5. XML data
    6. -
-

{{ 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" } ) }}

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() ---- -

{{CSSRef}}

- -

La función CSS radial-gradient() crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.

- -

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). 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 rayo de gradiente virtual 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 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

- -

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

- -

Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen sin dimensiones intrínsecas, 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.

- -

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.

- -

Sintaxis

- -
// 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( <extent-keyword>, … )      /* Dibuja un círculo */
-radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
-radial-gradient( ellipse x-axis y-axis, … ) /* 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> )
- -

Valores

- -
-
<position>
-
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 center.
-
<shape>
-
La figura del gradiente. Puede ser un valor circle (que indica que la figura del gradiente es un círculo con radio constante) o ellipse (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es ellipse.
-
<color-stop>
-
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 0%, o una longitud de 0, representan el centro del gradiente, mientras que el valor de 100% 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.
-
<extent-keyword>
-
Valores clave que describen la longitud de la figura resultante. Los valores posibles son:
-
- - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescripción
closest-sideLa 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).
closest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.
farthest-sideSimilar 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).
farthest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.
- Los borradores anteriores del estándar incluyeron otras palabras clave (cover y contain) como sinónimos de los estándares farthest-corner y closest-side respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.
-
- -

Sintaxis formal

- -
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 <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -

Ejemplo 1

- -

Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de turquesa (#00FFFF), a blanco, a azul (#0000FF):

- -
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%);
-}
- -

{{ EmbedLiveSample('Example_1') }}

- -

Ejemplo 2

- -

Este código generará un fondo de elipse in la esquina más lejana (farthest-corner) a 470px 45px, cambiando el color de amarillo (#FFFF80), a marrón pálido, a azul pálido (#E6E6FF):

- -
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%);
-}
- -

{{ EmbedLiveSample('Example_2') }}

- -

Ejemplo 3

- -

Este código generará un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de rojo (#FF0000) a azul (#0000FF):

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
-}
- -

{{ EmbedLiveSample('Example_3') }}

- -

Ejemplo 4

- -

Este código producirá un círculo difuso con radio de 16px:

- -
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);
-}
- -

{{ EmbedLiveSample('Example_4') }}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Definición inicial
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
En {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Sintaxis de at (sintaxis estándar final){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
- 2.12		{{CompatNo}}
Consejos de interpolación (un porcentaje sin color){{CompatGeckoDesktop("36")}}40 27 
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxis de at (sintaxis estándar final){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
-
- -

[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 layout.css.prefixes.gradients en false.

- -

[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior -webkit-gradient(radial,…). Véase también su soporte actual para gradientes radiales.

- -

[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo -webkit de la función, por razones de compatibilidad, dentro de la opción layout.css.prefixes.webkit, con valor false de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es true.

- -

Véase también

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

Sumario

-

El valor rtl 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. -


-

-

Ejemplos

-
div {
-   position: absolute;
-   right: 20px;
-   height: 200px;
-   border: 1px solid #000;
-   direction: rtl;
-}
-
-


-

-

Ver también

-

{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} -

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

{{draft}}

- -

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á!

- -

{{EmbedLiveSample("Tool", 1000, 2000)}}

-
- -

 

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

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.

- -

Crear eventos personalizados

- -

    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:

- -
var event = new Event('build');
-
-// Escucha para el evento.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Disparar event.
-elem.dispatchEvent(event);
- -

El codigo de ejemplo de arriba usa el metodo EventTarget.dispatchEvent().   

- -

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.

- -

Adición de datos personalizados con CustomEvent ()

- -

    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.
- Por Ejemplo, el evento se puede crear de la siguiente manera:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (event listener):

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

La Forma Antigua

- -

    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:

- -
// 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);
-
-
- -

El disparo incorporado eventos

- -

    Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: 

- -
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");
-  }
-}
- -

Compatibilidad con los Navegadores

- -

 

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Event() constructor1511{{ CompatNo() }}11.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

See also

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

La plataforma Web provee varias formas de recibir notificaciones de los eventos del DOM.  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. Esta página se enfoca en los detalles de cómo funcionan estos.

- -

Registering on-event handlers

- -

Los controladores on-event 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 onclick, onkeypress, onfocus, etc.

- -

Pueden especificar un controlador de evento on<...> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:

- - - -

Un controlador onevent

- -

Notese que cada objeto puede tener sólo un controlador on-event 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.

- -

Also note that on-event handlers are called automatically, not at the programmer's will (although you can, like  mybutton.onclick(myevent); ) since they serve more as placeholders to which a real handler function can be assigned.

- -

Non-element objects

- -

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:

- -
xhr.onprogress = function() { ... }
- -

Details

- -

The value of HTML on<...> attributes and corresponding  JavaScript properties

- -

A handler registered via an on<...> attribute will be available via the corresponding on<...> property, but not the other way around:

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

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: onblur, onerror, onfocus, onload, onscroll.)

- -

Event handler's parameters, this binding, and the return value

- -

When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

- - - -

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details see the this keyword documentation.

- -

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 "The event handler processing algorithm" in the HTML specification.

- -

When the event handler is invoked

- -

TBD (non-capturing listener)

- -

Terminology

- -

The term event handler may be used to refer to:

- - - -

When discussing the various methods of listening to events,

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
- -

Browser compatibility

- -

Event handler changes in Firefox 9

- -

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") }}.

- -

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.

- -

Detecting the presence of event handler properties

- -

You can now detect the presence of an event handler property (that is, for example, onload), using the JavaScript in operator. For example:

- -
if ("onsomenewfeature" in window) {
-  /* do something amazing */
-}
-
- -

Event handlers and prototypes

- -

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 Window.prototype.onload anymore. In the past, event handlers (onload, 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.

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

{{draft()}}

-

Everything you need to know about events will go under here. We're working on cleanup here now.

-

Docs

-

{{LandingPageListSubpages}}

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

{{ Draft() }}

-

Sumario

-

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.

-
-

Atención: 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.

-
-

Acerca de los marcos de coordenadas

-

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:

-

Marco de coordenadas terrestres

-

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.

- -

 

-

-

 

-

Marco de coordenadas del dispositivo

-

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

-

axes.png

- -
- Nota: 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.
-

Sobre la rotación

-

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.

-

Alpha

-

Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:

-

alpha.png

-

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.

-

Beta

-

Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:

-

beta.png

-

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.

-

Gamma

-

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:

-

gamma.png

-

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.

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

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. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones 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 API de Validación de Restricciones de HTML.

- -
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. 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.
- -

Restricciones intrínsecas y básicas

- -

En HTML5, las restricciones básicas son declaradas de dos formas:

- - - -

Tipos de captura semánticos

- -

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

- - - - - - - - - - - - - - - - - - - - - -
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: -
    -
  • una URI válida (como se define en RFC 3986)
    • -
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • -
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • -
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • -
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: -
    -
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • -
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • -
- -
Nota: 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 tipo no coincidente.
- 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
- -

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. 

- -

Atributos relacionados con validaciones

- -

Los siguientes atributos son usados para describir restricciones básicas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}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") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
- -

Proceso de validación de restricciones

- -

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:

- - - -
Nota: - - -
- -

Restricciones complejas usando la API de Restricciones de HTML5

- -

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.

- -

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() 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.

- -

Restricciones que combinan varios campos: Validación de código postal

- -

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 D- en Alemania, F- 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.

- -
-

Nota: 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.

-
- -

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

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

Esto mostrará el siguiente formulario: 

- -

- -

Primero, escribimos una función que revisará las restricciones en sí:

- -
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]);
-  }
-}
-
- -

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

- -
window.onload = function () {
-    document.getElementById("Country").onchange = checkZIP;
-    document.getElementById("ZIP").oninput = checkZIP;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

- -

Limitando el tamaño de un archivo antes de ser subido

- -

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.

- -

Aquí está la parte de HTML:

- -
<label for="FS">Selecciona un archivo menor a 75KB : </label>
-<input type="file" id="FS">
- -

Esto muestra lo siguiente:

- -

- - - -

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:

- -
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("");
-}
- - - -

Finalmente, anclamos el método al evento requerido:

- -
window.onload = function () {
-  document.getElementById("FS").onchange = checkFileSize;
-}
- -

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

- -

Estilos visuales de validación de restricciones

- -

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

- -

Controlando el aspecto de los elementos

- -

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

- -

Pseudo-clases :required y :optional

- -

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

- -

Pseudo-clase :-moz-placeholder

- -

Véase ::placeholder (experimental).

- -

Pseudo-clases :valid :invalid

- -

Las pseudo-clases :valid e :invalid 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.

- -

Estilos predeterminados

- -

Controlando el texto de incumplimiento de restricciones

- -

El atributo x-moz-errormessage

- -

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.

- -
-

Nota: Esta extensión no es estándar.

-
- -

element.setCustomValidity() de la API de Validación de Restricciones

- -

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.

- -

Objeto ValidityState de la API de Validación de Restricciones

- -

La interfaz de DOM ValidityState representa los estados de validez 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.

- -

Examples of personalized styling

- -

HTML4 fallback

- -

Trivial fallback

- -

JS fallback

- -

Conclusión

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

{{ gecko_minversion_header("2") }}{{ draft() }}

-

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. 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. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

-

El nuevo analizador presenta estas mejoras importantes:

- -

La especificación de HTML 5 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. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

-

Conductas del analizador modificadas

-

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.

-

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

-

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. 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.

-

Llamar a document.write () durante el análisis

-

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

-

Algunos contextos en los que no debes llamar a document.write() incluyen:

- -

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. 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. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

-

Falta de repetición del análisis

-

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. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

-

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

- -

Mejora del rendimiento con el análisis especulativo

-

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. 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.

-

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 document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. 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. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

-

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') }}. (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.)

-

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

-
<script>
-  document.write ("<div>");
-  document.write ("<p> Aquí va el contenido. </ p>");
-  document.write ("</ div>");
-</ script>
-<!-- Aquí va el HTML sin script. -->
-
-
-

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.

-
<script>document.write("<div>");</script>
-<p>El contenido va aquí.</p>
-<script>document.write("</div>");</script>
-
-
-

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

-

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

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

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

- - - -

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.

- - - -
-
-

SEMÁNTICA

- -
-
Secciones y contenidos en HTML5
-
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
-
Uso de audio y video en HTML5
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
-
- -
-
Formularios en HTML5
-
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 {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
-
Nuevos elementos semánticos
-
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 elementos de HTML5 validos. -
-
-
Mejora en {{HTMLElement("iframe")}}
-
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")}}.
-
MathML
-
Permite integrar directamente fórmulas matemáticas.
-
-
Introducción a HTML5
-
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño web o aplicación web.
-
Analizador de HTML5 compatible
-
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.
-
- -

CONECTIVIDAD

- -
-
Web Sockets
-
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
-
Eventos de servidor enviados
-
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.
-
WebRTC
-
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.
-
- -

Sin Conexión Y ALMACENAMIENTO

- -
-
Recursos sin conexión: el caché de la aplicación
-
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.
-
Eventos  con y sin conexión
-
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.
-
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
-
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.
-
IndexedDB
-
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.
-
Uso de archivos desde aplicaciones web
-
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 {{HTMLElement("input")}} de tipo file del elemento HTML múltiples atributos. También esta FileReader.
-
- -

MULTIMEDIA

- -
-
Usando HTML5 de audio y video
-
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. -
-
-
WebRTC
-
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.
-
Usando la API de la cámara
-
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
-
Track and WebVTT
-
El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. WebVTT es un formato de pista de texto.
-
- -

3D, GRAFICOS & EFECTOS

- -
-
Canvas Tutorial
-
Conozca el nuevo elemento {{HTMLElement("canvas")}}  y cómo dibujar gráficos y otros objetos en Firefox
-
API de texto para elementos <canvas> 
-
El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .
-
WebGL
-
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 <canvas> HTML5  .
-
SVG
-
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
-
-
-
-
-
-
-
- -
-

RESULTADOS e INTEGRACIÓN

- -
-
Web Workers
-
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
-
XMLHttpRequest Nivel 2
-
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 Ajax.
-
- -
-
Motores JIT compilación de JavaScript
-
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
-
History API
-
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
-
El atributo contentEditable: transformar su sitio web en una wiki!
-
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
-
Arrastrar y soltar
-
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.
-
Gestión del foco en HTML
-
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
-
Manejadores de protocolo basados ​​en web
-
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
-
requestAnimationFrame
-
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
-
Fullscreen API
-
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
-
API Pointer Lock
-
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.
-
Eventos en línea y fuera de línea
-
-
-
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.
-
-
-
- -

ACCESO al dispositivo

- -
-
Usando la API de la cámara
-
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
-
Eventos táctiles
-
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.
-
El uso de geolocalización
-
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
-
Detección de la orientación del dispositivo
-
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).
-
API Pointer Lock
-
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.
-
- -

CSS3 STYLING

- -

CSS  se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  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.

- -
-
Nuevas características de diseño de fondo
-
Ahora es posible poner una sombra a un cuadro, con box-shadow y varios fondos se pueden ajustar.
-
- -
-
Bordes mas "lujosos"
-
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 longhand, aunque los bordes redondeados son apoyados a través de propiedades {{cssxref("border-radius")}} .
-
Animación de su estilo
-
Utilizando Transiciones CSS para animar entre los diferentes estados o utilizando animaciones CSS para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.
-
Tipografía mejorada
-
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
-
Nuevos diseños de presentación
-
Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el CSS diseño de varias columnas , y el cuadro de distribución flexible de CSS .
-
-
-
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 ---- -


- HTML5, 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. 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.

-

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. 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. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

-

El tipo de documento HTML5

-

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

-
<!DOCTYPE html>
-

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.

-

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

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

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.

- -

Varias tecnologías (como CSS, JavaScript, Flash, AJAX, JSON) 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 HTML (HyperText Markup Language). Sin HTML, no habría páginas web.

- -

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.

- -

Una breve historia del HTML

- -

A finales de la década de los 80s, Tim Berners-Lee estuvo trabajando como físico en CERN (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, FTP (File Transfer Protocol), y Usenet- 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).

- -

¿Qué es el HTML?

- -

HTML es un lenguaje de etiquetas. 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 /.

- -

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>Mi perro odia el pescado.</p>
-
- -

Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:

- -

{{ EmbedLiveSample("Spl1", 400, 50) }}

- -

El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.

- -

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>Mi perro <em>odia</em> el pescado.</p>
-
- -

Cuando se muestre se verá del siguiente modo:

- -

{{ EmbedLiveSample("Spl2", 400, 50) }}

- -

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:

- -
<img src="smileyface.jpg">
- -

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 XHTML es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).

- -

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 Mozilla Thimble, que es un editor online  interactivo que enseña cómo escribir HTML. Además, en el HTML Elements 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.

- -

Elementos — los bloques básicos de construcción

- -

El HTML consiste en una serie de elementos. Los Elementos definen el significado semántico 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 HTML Elements para ver una lista completa de todos los elementos.

- -

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.

- -

Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:

- -
<html>
-  <body>
-
-    <p>Mi perro <em>odia</em> el pescado.</p>
-
-  </body>
-</html>
- -

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 DOM: siglas inglesas del Documento Objeto Modelo (Document Object Model).

- -

Etiquetas

- -

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 W3C (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el XHTML requiere de las minúsculas).

- -

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>Esto es texto dentro de un párrafo.</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 código válido.

- -

Esto es un ejemplo de código válido:

- -
<em>Me <strong>refiero</strong> a eso</em>.
-
- -

Esto es un ejemplo de código inválido:

- -
Invalido: <em>Me <strong>refiero</em> a eso</strong>.
- -

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.

- -
-

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 en todos los navegadores modernos.

-
- -

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:

- -
<img src="smileyface.jpg">
- -

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).

- -
<img src="smileyface.jpg" />
- -

En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.

- -

Atributos

- -

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 atributos. Los atributos suelen consistir en dor partes:

- - - -

Algunos atributos sólo pueden tener un único valor. Son atributos Booleanos 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:

- -
<input required="required">
-
-<input required="">
-
-<input required>
-
- -

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 class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)
- -

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 class="foo" bar="">
- -

Nombre de caracteres referenciados

- -

Los Caraceteres Referenciados  (a veces llamados entidades) 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:

- - - -

Hay muchas más entidades, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.

- -

Tipo de documento y comentarios

- -

Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración doctype en la primera línea. En el HTML actual esto se escribe del siguiente modo:

- -
<!DOCTYPE html>
- -

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 W3C y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar peculiaridades.)

- -

HTML tiene un mecanismo para poder introducir comentarios 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:

- -
<!-- Esto es un comentario de texto -->
- -

Un pequeño documento pero completo

- -

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 myfirstdoc.html 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.

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

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.

- -
-

A lo largo de este documento se empleará la palabra esquema 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 algoritmo de esquematizado al proceso de construir el esquema infiriéndolo del contenido.

-
- -

Estructura de un documento HTML 4

- -

La estructura de un documento, por ejemplo la estructura semántica de lo que está entre <body> y </body> 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.

- -

Entonces el siguiente marcado:

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

genera el siguiente esquema:

- -
1. El zorro
-   1.1 Hábitat
-
- -

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,

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

genera el siguiente esquema:

- -
1. El zorro
-   1.1 Hábitat
-   1.2 Costumbres
-2. El oso
-
- -

Problemas resueltos por HTML5

- -

La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:

- -
    -
  1. El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos class 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 tecnologías de apoyo, 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.
    2. -
  2. 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.
    3. -
  3. 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, <h1>Mozart</h1><h2>El genio salzburgués</h2> crea el esquema 1. Mozart 1.1 El genio salzburgués). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup> crea el esquema 1. Mozart).
    4. -
  4. 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.
    5. -
  5. 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.
    6. -
- -

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.

- -

El algoritmo de esquematizado de HTML5

- -

Definiendo secciones en HTML5

- -

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")}}.

- -
Nota: 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 Definiendo cabeceras en HTML5.
- -

Ejemplo:

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

El bloque de HTML define dos secciones de alto nivel:

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

La primera sección tiene tres subsecciones:

- -
<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 lobo
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company
-</footer>
- -

Esto genera la siguiente estructura:

- -
1. El pato
-   1.1 Introducción
-   1.2 Hábitat
-   1.3 Section (aside)
-
- -

Definiendo cabeceras en HTML5

- -

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.

- -

Los elementos de cabecera tienen un rango dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango más alto, y {{HTMLElement("h6")}} tiene el rango más bajo. 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:

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

Genera el siguiente esquema:

- -
1. La mosca
-   1.1 Hábitat
-2. El mosquito
- -

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).

- -

Seccionado implícito

- -

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 seccionado implícito.

- -

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:

- -
<section>
-  <h1>El águila</h1>
-  <p> ....
-
-  <h3 class="subsec-implicita">Hábitat</h3>
-  <p> ...
-</section>
- -

Genera el siguiente esquema:

- -
1. El águila
-   1.1 Hábitat (impícitamente definido mediante <h3>)
-
- -

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: 

- -
<section>
-  <h1>El águila</h1>
-  <p>...
-  <h1 class="secc-implicita">El buitre</h1>
-  <p>...
-</section>
- -

genera el siguiente esquema: 

- -
1. El águila
-2. El buitre (implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)
-
- -

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:

- -
<body>
-  <h1>Colores</h1>
-  <h2>Rojo</h2>
-  <p> ...
-  <section>
-    <h3>Amarillo</h3>
-    <p> ...
-    <h3>Verde</h3>
-      <p> ...
-    <h2>Sabores</h2>
-      <p>...
-  </section>
-</body>
- -

generando el siguiente esquema:

- -
1. Colores
-   1.1 Rojo (implícitamente con <h2> )
-   1.2 Amarillo(explícitamente con <section> )
-   1.3 Verde (impícitamente con <h3>, cerrando el <h3> previo)
-2. Sabores (implícitamente con <h2>, cerrando el <section> previo)
-
- -

É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

- - - -

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.

- -

Una excepción 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 reutilizadas 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.

- -

Sobreescribiendo seccionamiento implícito

- -

A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:

- - - -

Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{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:

- -
<section>
-  <hgroup>
-    <h1>La flauta mágica</h1>
-    <h2>Ópera en dos actos del genio salzburgués</h2>
-  </hgroup>
-  ... algún contenido ...
-</section>
-
- -

genera el siguiente esquema, que es el que se desea:

- -
1. La flauta mágica
- -

Secciones desacopladas

- -

Piensa por un momento en una sección A que contiene una subsección B. A veces es conveniente que B mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de A, dando lugar a esquemas más claros.

- -

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")}}.
-  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.

- -

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.

- -

Ejemplo:

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

Este ejemplo resulta en el siguiente esquema:

- -
1. Bach
-   1.1 Introducción
-   1.2 La Pasión según s. Mateo
- -

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.

- -

Secciones fuera del esquema

- -

HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:

- -
    -
  1. 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.
    2. -
  2. 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.
    3. -
  3. 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.
    4. -
  4. 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.
    5. -
- -

Direcciones y tiempo de publicación en elementos de seccionado

- -

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.

- -

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")}}.

- -

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")}}.

- -

Usando elementos HTML5 en navegadores no HTML5

- -

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 display:inline por defecto:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

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.
-
- 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:

- -
<!--[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]-->
- -

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.

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

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:

- -
<!--[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]-->
- -

Conclusión

- -

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.

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: -slug: orphaned/Web/HTML/Element/command -tags: - - HTML - - Obsoleto -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Elemento/command ---- -
{{obsolete_header()}}
- -
-

Nota: El elemento command ha sido removido de {{Gecko("24.0")}}  en favor del elemento {{HTMLElement("menuitem")}}  . Firefox nunca ha soportado este elemento command , y la implementación existente de la interface DOM  {{domxref("HTMLCommandElement")}} ha sido removida de  Firefox 24.

-
- - - -
<command function="About live stream">
- -

- -

El elemento command representa un comando que el usuario puede invocar .

- - - - - - - - - - - - - - - - - - - - - - - - -
Categorías de contenidoContenido dinámico , contenido estático de texto, contenido de metadata .
Contenido permitidoNinguno , es un {{Glossary("empty element")}}.
Omisión de etiquetasLa etiqueta de inicio es obligatoria , pero como es un elemento vacío , el uso de una etiqueta de cierre está prohibido . 
Elementos padre permitidos 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 .
Interface DOM {{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}
- -

Atributos

- -

Este elemento incluye los atributos globales .

- - - -
-
{{htmlattrdef("checked")}}
-
Indica si el comando es seleccionado . Debe de ser omitido al menos que el atributo type sea checkbox o radio.
-
{{htmlattrdef("disabled")}}
-
Indica que el comando no está disponible .
-
{{htmlattrdef("icon")}}
-
Proporciona una imagen que representa el comando.
-
{{htmlattrdef("label")}}
-
El nombre del comando como se muestra al usuario .
-
{{htmlattrdef("radiogroup")}}
-
Este atributo proporciona el nombre del grupo de comandos , con un atributo  type de tipo radio ,que será alternado cuando el comando en sí mismo sea alternado . Este atributo debe de ser omitido al menos que el atributo type sea del tipo radio .
-
{{htmlattrdef("type")}}
-
Este atributo indica el tipo de comando . Este puede ser uno de los siguientes tres valores :
-
- -

Ejemplos

- -
<command type="command" label="Save" icon="icons/save.png" onclick="save()">
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilidad en exploradores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico {{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

{{ HTMLRef }}

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: -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Elemento/element ---- -
-

Nota: Este elemento ha sido borrado de la especificación. Mira esto para obtener más información desde el editor de la espeficicación.

-
- -

Resumen

- -

El elemento HTML <element> es utilizado para personalizar los elementos DOM.

- - - - - - - - - - - - - - - - - - - - - - - - -
Categorias de contenidoContenido transparente.
Contenido Permitido???
Etiquetas omitidas{{no_tag_omission}}
Elementos padre permitidos???
Interfaz DOM{{domxref("HTMLElement")}}
- -

Atributos

- -

Este elemento incluye los atributos globales.

- -

Ejemplos

- -

El texto va aquí

- -
Más texto va aquí.
-
- -

Especificaciones

- -

El elemento <element> fue formulado en un borrador de la especificación de elementos personalizados, que se ha eliminado.

- -

Compatibilidad dee navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Ver También

- -
    -
  • Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}
    • -
- -
{{HTMLRef}}
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: -slug: orphaned/Web/HTML/Element/isindex -tags: - - Deprecado - - Elemento - - HTML - - Referencia - - Web -translation_of: Web/HTML/Element/isindex -original_slug: Web/HTML/Element/isindex ---- -
{{Deprecated_header}}
- -

Resumen

- -

<isindex> es un elemento HTML  obsoleto que posiciona un campo de texto en una página para buscar en el documento . <isindex> fue pensado por el W3C  para ser usado dentro del elemento {{HTMLElement("head")}} , pero los exploradores lo soportaban sin importar donde se usaba .

- -

<isindex> fue deprecado en HTML 4.01 , debido a que el mismo comportamiento puede ser logrado con un form de HTML. 

- -

Atributos 

- -

Como todos los otros elementos HTML , este elemento acepta los atributos globales .

- -
-
{{htmlattrdef("prompt")}}
-
Este atributo añade su valor como una ventana para un campo de texto.
-
{{htmlattrdef("action")}}
-
Este atributo puede ser usado para mandar una busqueda a una URL diferente . La acción no está definida por el W3C .
-
- -

Ejemplo

- -
<head>
-  <isindex prompt="Search Document... " />
-</head>
- -

Ver también

- -
    -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("form")}}
    • -
- -

{{HTMLRef}}

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: -slug: orphaned/Web/HTML/Element/multicol -tags: - - HTML -translation_of: Web/HTML/Element/multicol -original_slug: Web/HTML/Element/multicol ---- -
{{non-standard_header}}
- -

Resumen

- -

El elemento HTML <multicol> 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 .

- -
-

No usar esto ! 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 Column ,

-
- -

Notar que hasta Firefox 22 , aunque no se soportaba , un elemento <multicol> 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 .

- -

 

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

Una etiqueta personalizada sencilla, es crear una plantilla de elementos.

- -

Un sencillo ejemplo donde con poner la etiqueta <corazon> nos muetra un corazon en el documento:

- -

corazon.js

- -

Contenido JavaScript

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

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.

- -

index.html

- -

Contenido HTML

- -

<!DOCTYPE html>
- <html>
-   <head>
-     <meta charset="utf-8">
-     <title>Mi Etiqueta</title>
-     <script src="corazon.js"  type="text/javascript"></script>
-   </head>
-   <body>
-     <corazon></corazon>
-   </body>
- </html>

- -

 

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

Los elementos se pueden agrupan de varias manera, aquí ofrecenos las siguientes: formal, estructural y funcional.

- -

Según el doctype

- -

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.

- -

Los doctypes válidos en HTML 4.01 son tres:

- -

Para marcos

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
-       "http://www.w3.org/TR/html4/frameset.dtd">
-
- -

Con este doctype pueden usarse todos los elementos del html.

- -

De transición

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-       "http://www.w3.org/TR/html4/loose.dtd">
-
- -

Pueden usarse todos los elementos menos los especificos de marcos que son: frame frameset

- -

Estrictos

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-       "http://www.w3.org/TR/html4/strict.dtd">
-
- -

Con este doctype pueden usarse todos los elementos menos los específicos de los marcos: frame frameset y los desaprobados: applet basefont center dir font isindex menu s strike u

- -

Según su estructura

- -

Se dividen en tres grupos: básicos, de cabecera y de cuerpo.

- -

Los elementos básicos

- -

Son los elemento que conforman la columna vertebral de un documento html:

- -
-
Para un documento normal
-
html head body
-
- -
-
para uno de marcos
-
html head frameset frame
-
- -

De cabecera

- -

Los de cabecera contienen la información necesaria para el correcto funcionamiento del documento.

- -
-
Elementos de cabecera son
-
 
-
El obligatorio: title
-
Los opcionales: base meta link
-
Los mixtos: style script object y el transicional: isindex. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.
-
- -

De cuerpo

- -

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.

- -

En bloque

- -
-
Elementos en bloque son
-
 
-
p dl div address hr blockquote form table fieldset pre noscript noframes Y los transicionales: center isindex
-
Los elementos de encabezados: h1 h2 h3 h4 h5 h6
-
los elementos para listas: ul y ol. Y los transicionales: dir menu
-
- -

En línea

- -
-
Elementos en línea son
-
 
-
Los elementos de frase: abbr acronym cite code em strong dfn kbd samp var
-
Los elementos de estilo de fuente: b big i small tt y los desaprobados: u s strike
-
Los elementos especiales: a bdo br img map object q script span sub sup y los desaprobados: applet font basefont iframe
-
Los elementos de controles de formulario: button input label select textarea
-
- -

Ni en bloque ni en línea

- -

Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.

- -
-
Elementos subordinados son
-
 
-
Subordinados a table: caption tr th td thead tbody tfoot col colgroup
-
Subordinados de listas: li dd dl Subordinados a select son: optgroup option
-
Por último, area subordinado a map. param subordinado a object. y legend subordinado a fieldset.
-
- -

En bloque y en línea

- -

Los elementos ins y del pueden ser elementos en línea o en bloque según convenga.

- -

Según su función

- - -
-

Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.

- -

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta Cómo ayudar.

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

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global dropzone es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la API Drag and Drop . Pueden tener los siguientes valores :

- -
    -
  • copy , indica que el soltado creará una copia del elemento que fue arrastrado .
    • -
  • move , indica que el elemento que fue arrastrado será movido a su nueva localización .
    • -
  • link, indica que creara un link para el dato arrastrado.
    • -
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Snapshot de  {{SpecName('HTML WHATWG')}}, definición inicial .
- -

Compatibilidad en exploradores 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico {{ CompatUnknown() }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CataracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown}}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Ver también 

- -
    -
  • Tos los atributos globales 
    • -
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 ---- -
{{JSRef}}
- -

La propiedad Array.prototype representa el prototipo del constructor {{jsxref("Array")}} y le permite agregar nuevas propiedades y métodos a todos los objetos Array.

- -
// 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];
-  }
-}
-
- -

Descripción

- -

Las instancias {{jsxref("Array")}} heredan de Array.prototype. 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 Array. Esto se usa para {{Glossary("Polyfill", "polyfilling")}}, por ejemplo.

- -

Un hecho poco conocido: Array.prototype en sí es un {{jsxref("Array")}}:

- -
Array.isArray(Array.prototype); // true
- -

{{js_property_attributes(0, 0, 0)}}

- -

Propiedades

- -
-
Array.prototype.constructor
-
Especifica la función que crea el prototipo de un objeto.
-
{{jsxref("Array.prototype.length")}}
-
Refleja el número de elementos en un array.
-
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
-
Un símbolo que contiene nombres de propiedades para excluir de un ámbito vinculante with.
-
- -

Métodos

- -

Métodos de mutación

- -

Estos métodos modifican el array:

- -
-
{{jsxref("Array.prototype.copyWithin()")}}
-
Copia una secuencia de elementos dentro del array.
-
{{jsxref("Array.prototype.fill()")}}
-
Rellena todos los elementos de un array desde un índice de inicio hasta un índice de fin con un valor determinado.
-
{{jsxref("Array.prototype.pop()")}}
-
Elimina el último elemento de un array y devuelve dicho elemento.
-
{{jsxref("Array.prototype.push()")}}
-
Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.
-
{{jsxref("Array.prototype.reverse()")}}
-
Invierte el orden de los elementos de un array — el primero será el último y el último será el primero.
-
{{jsxref("Array.prototype.shift()")}}
-
Elimina el primer elemento de un array y devuelve dicho elemento.
-
{{jsxref("Array.prototype.sort()")}}
-
Ordena los elementos de un array y devuelve el array.
-
{{jsxref("Array.prototype.splice()")}}
-
Añade o elimina elementos de un array.
-
{{jsxref("Array.prototype.unshift()")}}
-
Añade uno o más elementos al principio del array y devuelve la nueva longitud del array.
-
- -

Métodos de consulta

- -

Estos métodos no modifican el array y devuelven alguna representación del array.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Devuelve un nuevo array compuesto por este array unido con otro(s) array(s) y/o valor(es).
-
{{jsxref("Array.prototype.includes()")}}
-
Determina si un array contiene cierto elemento, devolviendo true o false apropiadamente.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Devuelve el primer (menor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.
-
{{jsxref("Array.prototype.join()")}}
-
Une todos los elementos de un array en una cadena de texto.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Devuelve el último (mayor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.
-
{{jsxref("Array.prototype.slice()")}}
-
Extrae una sección de un array y devuelve un nuevo array.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
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()")}}.
-
{{jsxref("Array.prototype.toString()")}}
-
Devuelve una cadena de texto que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Devuelve una cadena de texto localizada que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toLocaleString()")}}.
-
- -

Métodos de iteración

- -

Muchos métodos toman como argumentos funciones que son llamadas mientras se procesa el array. Cuando estos métodos son llamados, la longitud (length) del array es muestreado, y cualquier elemento añadido por encima de esta longitud dentro de la función (callback) 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.

- -
-
{{jsxref("Array.prototype.entries()")}}
-
Devuelve un nuevo objeto Array Iterator que contiene los pares clave/valor para cada índice en el array.
-
{{jsxref("Array.prototype.every()")}}
-
Devuelve true si cada elemento en este array satisface la función de testeo proporcionada.
-
{{jsxref("Array.prototype.filter()")}}
-
Crea un nuevo array con todos los elementos de este array para los cuales la función de filtrado proporcionada devuelve true.
-
{{jsxref("Array.prototype.find()")}}
-
Devuelve el elemento hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o undefined si no se halla ninguno.
-
{{jsxref("Array.prototype.findIndex()")}}
-
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.
-
- -
-
{{jsxref("Array.prototype.forEach()")}}
-
Llama a una función para cada elemento del array.
-
{{jsxref("Array.prototype.keys()")}}
-
Devuelve un nuevo Array Iterator que contiene las claves para cada índice en el array.
-
{{jsxref("Array.prototype.map()")}}
-
Crea un nuevo array con el resultado de llamar a la función proporcionada sobre cada elemento de este array.
-
{{jsxref("Array.prototype.reduce()")}}
-
Aplica una función que recibe un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un único valor.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Aplica una función que recibe un acumulador y cada valor del array (de derecha a izquierda) para reducirlo a un único valor.
-
{{jsxref("Array.prototype.some()")}}
-
Devuelve true si al menos un elemento en este array satisface la función de testeo proporcionada.
-
{{jsxref("Array.prototype.values()")}}
-
Devuelve un nuevo objeto Array Iterator que contiene los valores para cada índice en el array.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
-
Devuelve un nuevo objeto Array Iterator que contiene los valores para cada índice en el array.
-
- -

Métodos genéricos (no estándar)

- -

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 (length), y puedan ser accedidos usando nombres de propiedades numéricos (como con la indexación array[5]). Algunos métodos, tales como {{jsxref("Array.join", "join")}}, sólo leen la longitud 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 longitud 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.

- -

Especificaciones

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES1')}}{{Spec2('ES1')}}Definición inicial.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}} -

Se agregaron los métodos copyWithin(), fill(), entries(), keys(), values(), find(), findIndex().

-
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}Se agregó el método includes().
- -

 

- -

Compatibilidad con navegadores

- -
{{Compat("javascript.builtins.Array.prototype")}}
- -
 
- -

Ver también

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
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 ---- -
{{JSRef}}
- -

El método clear() elimina todos los elementos de un objeto Map.

- -

Sintaxis

- -
myMap.clear();
- -

Ejemplos

- -

Usando el método clear

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

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico.38{{CompatGeckoDesktop("19.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico.{{CompatNo}}38{{CompatGeckoMobile("19.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
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 ---- -
{{JSRef}}
- -

El método delete() elimina el elemento especificado de un objeto Map.

- -

Sintaxis

- -
myMap.delete(clave);
- -

Parámetros

- -
-
clave
-
Requerido. La clave del elemento a eliminar del objeto Map.
-
- -

Valor de retorno

- -

Retorna true si el elemento existe en el objeto Map objecty fue eliminado, o false si el elemento no existe.

- -

Ejemplo

- -

Usando el método delete

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

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES6')}}Definición inicial
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}}
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
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 ---- -
{{JSRef}}
- -

El método entries() retorna un nuevo objeto Iterator que contiene los pares [clave, valor] para cada elemento en el objeto Map en orden de inserción.

- -

Sintaxis

- -
myMap.entries()
- -

Ejemplos

- -

Usando entries()

- -
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"]
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES6')}}Definición
{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{ CompatGeckoDesktop("20") }}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
PrestaciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico.{{CompatNo}}38{{CompatGeckoMobile("20")}}{{CompatNo}}{{CompatNo}}8
-
- -

Ver también

- -
    -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
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 ---- -
{{JSRef}}
- -

El método forEach() ejecuta una función por cada par clave / valor en el objeto Map, en orden de inserción.

- -

Sintaxis

- -
myMap.forEach(callback[, thisArg])
- -

Parámetros

- -
-
callback
-
Función ejecutada en cada elemento.
-
thisArg
-
Valor a usar por la funcion callback.
-
- -

Valor de Retorno

- -

{{jsxref("undefined")}}.

- -

Descripción

- -

El método forEach ejecuta la devolución de llamada (callback) 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 (undefined).

- -

La función (callback) es invocada con 3 argumentos:

- -
    -
  • valor del elemento
    • -
  • clave del elemento
    • -
  • El objeto utilizado
    • -
- -

Si se provee un parámetro thisArg al método forEach, pasará al callback cuando sea invocado, para ser utilizado como su valor this. De otra manera, el valor undefined pasará para ser usado como su valor this. El valor this finalmente observable por el callback se determina de acuerdo a las reglas usuales para determinar la visibilidad de this por una función.

- -

Cada valor es usado una vez, excepto en este caso cuando es eliminado y agregado de nuevo antes de que el forEach haya terminado. callback no es invocado para valores eliminados antes de que sean usados. 

- -

El método forEach ejecuta la función callback una vez para cada elemento en el objeto Map; No se retornan valores.

- -

Ejemplos

- -

Imprimiendo el contenido de un objeto Map

- -

El siguiente código imprime una línea por cada elemento en el objeto Map:

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

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES2015')}}Definición Inicial.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}}
- -

Compatibilidad con navegadores

- - - -

{{Compat("javascript.builtins.Map.forEach")}}

- -

Véase también

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Set.prototype.forEach()")}}
    • -
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 ---- -
{{JSRef}}
- -

El método get() devuelve un elemento específico de un objeto Map.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}
- - - -

Sintaxis

- -
miMapa.get(clave);
- -

Parametros

- -
-
clave
-
Requerido. La clave del elemento del objeto Map que queremos obtener.
-
- -

Valor devuelto

- -

Devuelve el elemento asociado a la clave indicada o undefined si la clave no ha sido encontrada en el objeto Map.

- -

Ejemplos

- -

Usando el método get

- -
var miMapa = new Map();
-miMapa.set('bar', 'foo');
-
-miMapa.get('bar');  // Devuelve "foo".
-miMapa.get('baz');  // Devuelve undefined.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES2015')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}} 
- -

Compatiblidad con navegadores

- - - -

{{Compat("javascript.builtins.Map.get")}}

- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
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 ---- -
{{JSRef}}
- -

El método has() devuelve un booleano indicando si el elemento con la llave especificada existe o no.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
- - - -

Sintaxis

- -
myMap.has(key)
- -

Parameteros

- -
-
key
-
La llave del elemento a probar si esta presente en el objeto Map.
-
- -

Valor devuelto

- -

true si el elemento con la llave especificada existe en el objeto Map; de lo contrario false.

- -

Ejemplos

- -

Usando has()

- -
let myMap = new Map()
-myMap.set('bar', "foo")
-
-myMap.has('bar')   // returns true
-myMap.has('baz')   // returns false
-
- -

Especificaciones

- - - - - - - - - - -
Especificación
{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.builtins.Map.has")}}

- -

See also

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
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 ---- -
{{JSRef("Global_Objects", "Map")}}
- -

Resumen

- -

El objeto Map almacena pares clave/valor. Cualquier valor (tanto objetos como {{Glossary("Primitive", "valores primitivos")}}) pueden ser usados como clave o valor.

- -

Sintaxis

- -
new Map([iterable])
-
- -

Parámetros

- -
-
iterable
-
Iterable es un array o cualquier otro objeto iterable cuyos elementos son pares clave-valor (arrays de 2 elementos). Cada par clave-valor será agregado al nuevo Map.
-
- -

Descripción

- -

Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle for..of devolverá un array de [clave, valor] en cada iteración.

- -

Cabe destacar que un Map 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.

- -

Igualdad de claves

- -

La igualdad de claves esta basada en el algoritmo "SameValueZero": NaN es considerado lo mismo que NaN (sin importar que NaN !== NaN) y todos los otros operadores son considerados iguales de acuerdo a la semantica del operador ===. En las primeras versiones de ECMAScript 6 -0 y +0 eran considarados distintos (even though -0 === +0), esto fue cambiado en posteriores versiones y ha sido implementado en Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a recent nightly Chrome.

- -

Objetos y mapas comparados

- -

Los {{jsxref("Object", "Objetos")}} son similares a los Maps 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 Objects han sido usados históricamente como Maps; no obstante, hay diferencias importantes entre  Objects y Maps que hacen mejor usar un  Map  en la mayoría de casos.

- -
    -
  • Las claves de un Object son {{jsxref("String", "Strings")}} y {{jsxref("Symbol", "Symbols")}}, mientras que para un Map pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.
    • -
  • Puedes saber facilmente el tamaño de un Map usando la propiedad size, mientras que le número de propiedades en un Object tiene que ser deternminado manualmente.
    • -
  • Un Map es un iterable lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un Object necesitamos obtener primero las claves de alguna forma para después iterar sobre el.
    • -
  • Un Object 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 mapa = Object.create(null), pero esto raramente se hace.
    • -
- -

Propiedades

- -
-
Map.length
-
El valor de la propiedad de longitud es 0
-
{{jsxref("Map.@@species", "get Map[@@species]")}}
-
La función constructor que se usa para crear objetos derivados.
-
{{jsxref("Map.prototype")}}
-
Representa el prototipo para el constructor de Map. Permite añadir propiedades a todos los objetos Map.
-
- -

Instancias de Map

- -

Todas las instancias de Map heredan de {{jsxref("Map.prototype")}}.

- -

Propiedades

- -

{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Propiedades')}}

- -

Métodos

- -

{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Métodos')}}

- -

Ejemplos

- -

Ejemplo: Usando el objeto Map

- -
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 () {}
-
- -

Ejemplo: Usando NaN como claves de Map

- -

NaN también puede ser usado como una clave. Aún cuando cada clave NaN no es igual a sí misma (NaN !== NaN es verdadera), el siguiente ejemplo funciona, porque las claves NaNs NaNs no son distinguibles unas de otras:

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

Ejemplo: Iterando Map con for..of

- -

Los Map pueden ser iterados usando un bucle for..of:

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

Iterando Maps usando forEach()

- -

Los Map pueden ser iterados usando el método forEach():

- -
miMapa.forEach(function(valor, clave) {
-  console.log(clave + ' = ' + valor);
-});
-// Mostrará 2 logs; el primero con "0 = cero" y el segundo con "1 = uno"
- -

Ejemplo: Relación con los objetos Array

- -
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"]
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES6', '#sec-map-objects', 'Map')}}{{Spec2('ES2015')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con Navegadores

- -

 

- - - -

{{Compat("javascript.builtins.Map")}}

- -

 

- -

Ver también

- - 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 ---- -
{{JSRef}}
- -

El metodo keys() returna un nuevo objeto Iterator que contiene las llaves/keys por cada elemento en el objeto en orden de insercion.

- -

Syntax

- -
myMap.keys()
- -

Ejemplos

- -

Usando keys()

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

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support38{{CompatGeckoDesktop("20")}}{{CompatNo}}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}38{{CompatGeckoMobile("20") }}{{CompatNo}}{{CompatNo}}8
-
- -

See also

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
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 ---- -
{{JSRef}}
- -

El método set() agrega un nuevo elemento al objeto Map con la llave y el valor especificado.

- -

Syntax

- -
myMap.set(llave, valor);
- -

Parámetros

- -
-
llave
-
Requerido. La llave del elemento a agregar al objeto Map.
-
valor
-
Requerido. El valor del elemento a agregar al objeto Map.
-
- -

Valor de retorno

- -

El objeto Map.

- -

Ejemplos

- -

Usando el método set

- -
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");
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad con Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracteríticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico38{{CompatGeckoDesktop("13.0")}}11257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracteríticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}38{{CompatGeckoMobile("13.0")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notas de compatibilidad

- -
    -
  • En versiones inferiores a Firefox 33 {{geckoRelease("33")}}, Map.prototype.set retorna undefined y no es encadenable. Esto se ha reparado ({{bug(1031632)}}). Este comportamiento también se encontró en Chrome/v8 (issue).
    • -
- -

Véase también

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
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 ---- -
{{JSRef}}
- -

La propiedad evaluada size retorna el número de elementos en un objeto  {{jsxref("Map")}}.

- -

Descripción

- -

El valor de size es un entero representando cuántas entradas tiene el objeto Map. No hay definida una función de evalador set  para size; uted no puede cambiar esta propiedad.

- -

Ejemplos

- -

Usando size

- -
var myMap = new Map();
-myMap.set("a", "alpha");
-myMap.set("b", "beta");
-myMap.set("g", "gamma");
-
-myMap.size // 3
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES6')}}Definición inicial.
{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ESDraft')}} 
- -

Compatibildad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico38{{ CompatGeckoDesktop("19") }}{{ CompatIE("11") }}257.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}38{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}8
-
- -

Notas específicas para Gecko

- -
    -
  • Desde Gecko 13 {{geckoRelease("13")}} a Gecko 18 {{geckoRelease("18")}} la propiedad size era implementada como un método Map.prototype.size(), esto ha sido modificado a propiedad en versiones posteriores de acuerdo a la especficiación ECMAScript 6 ({{bug("807001")}}).
    • -
- -

Ver también

- -
    -
  • {{jsxref("Map")}}
    • -
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 ---- -
{{JSRef}}
- -

El método values() devuelve un nuevo objeto Iterador que contiene los valores para cada elemento en el objeto Map en el mismo orden de inserción.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
- - - -

Sintaxis

- -
myMap.values()
- -

Valor devuelto

- -

Un nuevo objeto iterador {{jsxref("Map")}}.

- -

Ejemplos

- -

Utilizando values()

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

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES2015')}}Definición inicial.
{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ESDraft')}} 
- -

Compatibilidad en navegadores

- - - -

{{Compat("javascript.builtins.Map.values")}}

- -

Ver también

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.keys()")}}
    • -
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 ---- -
{{jsSidebar("Operators")}} {{SeeCompatTable}}
- -

El operador experimental pipeline |> (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:

- -
let url = "%21" |> decodeURI;
- -

La llamada equivalente en sintaxis tradicional tiene este aspecto:

- -
let url = decodeURI("%21");
-
- -

Sintaxis

- -
expression |> function
-
- -

El valor especificado en la expression se pasa dentro de la  function como su único parámetro.

- -

Ejemplos

- -

Encadenando llamadas  a funciones

- -

El operador pipeline puede mejorar la legibilidad cuando se encadenan varias funciones entre si.

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

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
Borrador del operador PipelineFase 1Todavía no forma parte de la especificación ECMAScript
- -

Compatibilidad con navegadores

- -
- - -

{{Compat("javascript.operators.pipeline")}}

-
- -

Ver también

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

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 WebGL y Web Audio.

- -

Cada interfaz individual a lo largo de todas las APIs se encuentra listada en el índice.

- -

También hay un listado de todos los eventos disponibles en la referencia de eventos.

- -
-
-
-
Modelo de Objetos del Documento (DOM)
-
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.
-
API de Dispositivos
-
Este conjunto de APIs permiten acceder a varias funciones de hardware disponibles para páginas Web y aplicaciones. Por ejemplo, API de Sensor Luz Ambiental, API de Estado de Batería, API de Geolocalización, API de Bloqueo de Puntero, API de Proximidad, API de Orientación de Dispositivo, API de Orientación de Pantalla, API de Vibración.
-
API de Comunicación
-
Estas APIs le permiten a páginas Web y aplicaciones comunicarse con otras páginas o dispositivos. Por ejemplo, API de Información de Red, Notificaciones Web, API de Push Simple.
-
API de gestión de datos
-
Los datos de los usuarios pueden ser almacenados y gestionados usando este conjunto de APIs. Por ejemplo, FileHandle API, IndexedDB.
-
- -

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.

- -
-
API Privilegiadas
-
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: TCP Socket API, API de Contactos, API de Almacenamiento de Dispositivos, API de Navegador,
-
API Certificadas
-
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 Actividades Web.  Entre las APIs Certificadas se incluyen: API Bluetooth, API de Conexión Móvil, API de Estadísticas de Red, Telefonía, WebSMS, API de Información WíFi, API de Cámara, API de Administración de Energía, API de Ajustes, API de Inactividad, API de Permisos, API de Hora/Reloj.
-
-
- -
-

Comunidad

- -

Únete a la comunidad de API Web en nuestra lista de correos o grupo de noticias:

- - - -

También, asegúrate de unirte a la discusión en vivo en el canal #webapi de IRC.

- - - -

Los siguientes temas podrían ser de interés:

- - -
-
- -

 

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

La Web abierta (open Web) se construye usando diversas tecnologías. A continuación encontrará enlaces a nuestro material de referencia para cada una de ellas.

- -
-
-

Tecnologias Web Fundamentales

- -

Basicas

- -
-
HTML
-
El Lenguaje de Marcado para Hipertextos (HyperText Markup Language) es usado para describir y definir el contenido de una página Web en un formato bien estructurado.
-
CSS
-
Las Hojas de Estilo en Cascada (Cascading Style Sheets) se usan para describir la apariencia del contenido Web.
-
- -

Código

- -
-
JavaScript
-
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.
-
Web APIs
-
Material de referencia para cada una de las APIs que constituyen las poderosas posiblidades de programación del Web, incluyendo el DOM y todas las APIs e interfaces que puedes usar para desarrollar contenidos Web y aplicaciones. - -
-
- -

Gráficos

- -
-
SVG
-
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.
-
WebGL
-
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 <canvas> de HTML.
-
- -

Otras

- -
-
MathML
-
El Lenguaje de Marcado Matemático (Mathematical Markup Language) hace posible presentar ecuaciones complejas.
-
-
-
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 ---- -

-Firefox 1.5 marca la publicación del primer navegador de Mozilla que soporta el formato de gráficos vectoriales escalables (SVG). 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.

Firefox SVG es un subconjunto de SVG 1.1, 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. -

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

Mientras lee esto, usted puede preguntarse cuandos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia el mapa de ruta actual 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 nightly builds las últimas evoluciones, y si lo desea puede consultar la tabla actualizada sobre la implementación de SVG en la versión de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo ☺. -


-

-

Performance

-

Firefox usa el mismo motor de renderizado, cairo, 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. -

En Windows el renderizado de SVG es bastante más rápido que en otras plataformas. -

-

Coordinate range

-

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

-

Texto en Windows 98

-

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á. -

-

Selección de fuente

-

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

-

Impresión

-

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

Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG. -

-

Opacidad de grupo

-

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

Actualmente la opacidad de grupo está implementado solo para <g> pero no para <text> o <svg> -

-

Stroking fonts

-

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


-Imagen:Text-fill-stroke.png -

-

<image>

-

<image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja. -

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

De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar de sobremanera el rendimiento en Firefox 1.5. -

-

Eventos

-

Soportamos los atributos de SVG para eventos, a excepción de "onfocusin", "onfocusout", y "onactivate". -

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

No damos soporte a los eventos para el teclado específicos de Adobe ("onkeydown", "onkeyup"). -

-

Interoperabilidad

-

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 SVG Authoring Guidelines Jonathan Watt's explica los problemas comunes. -

-

Situaciones del uso

-

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

-

Animación

-

Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear SmilScript, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG. -

-

Elementos, estado de la implementación

Elemento Notas
Módulo Estructura
svg
  • Implementado.
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
  • SVGSVGElement
    • Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
    • Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
g
  • Implementado.
defs
  • Implementado.
desc
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
title
  • Implementado.
metadata
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
symbol
  • Implementado.
use
  • Implementado.
  • Only works for internal document references (bug 269482).
  • Doesn't completely follow <svg:use> cascading rules (bug 265894).
  • Doesn't deliver events to a SVGElementInstance tree (bug 265895).
Conditional Processing Module
switch
  • Implementado.
Image Module
image
  • Implementado.
  • Only works for raster images (bug 272288).
Style Module
style
  • Implementado.
Shape Module
path
  • Implementado.
  • SVGPathElement Interfaz
    • Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
    • Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength
  • SVGPathSegList Interface
    • Bindings no implementados: replaceItem()
rect
  • Implementado.
circle
  • Implementado.
line
  • Implementado.
ellipse
  • Implementado.
polyline
  • SImplementado.
polygon
  • Implementado.
Módulo Texto
text
  • Implementado.
  • SVGTextElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
    • Bindings not functional at onload time: getExtentOfChar
tspan
  • Implementado.
  • SVGTSpanElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
tref
  • No implementado.
textPath
  • No implementado.
altGlyph
  • No implementado.
altGlyphDef
  • No implementado.
altGlyphItem
  • No implementado.
glyphRef
  • No implementado.
Módulo Marker
marker
  • Implementado.
Módulo Color-Profile
color-profile
  • No implementado.
Módulo Gradientes
linearGradient
  • Implementado.
radialGradient
  • Implementado.
stop
  • Implementado.
Módulo Pattern
pattern
  • No implementado.
Módulo Clip
clipPath
  • Implementado.
  • Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (bug 267224).
Módulo Mask
mask
  • No implementado.
Módulo Filtro
filter
  • No implementado.
feBlend
  • No implementado.
feColorMatrix
  • No implementado.
feComponentTransfer
  • No implementado.
feComposite
  • No implementado.
feConvolveMatrix
  • No implementado.
feDiffuseLighting
  • No implementado.
feDisplacementMap
  • No implementado.
feFlood
  • No implementado.
feGaussianBlur
  • No implementado.
feImage
  • No implementado.
feMerge
  • No implementado.
feMergeNode
  • No implementado.
feMorphology
  • No implementado.
feOffset
  • No implementado.
feSpecularLighting
  • No implementado.
feTile
  • No implementado.
feTurbulence
  • No implementado.
feDistantLight
  • No implementado.
fePointLight
  • No implementado.
feSpotLight
  • No implementado.
feFuncR
  • No implementado.
feFuncG
  • No implementado.
feFuncB
  • No implementado.
feFuncA
  • No implementado.
Módulo Cursor
cursor
  • No implementado.
Módulo hiperenlace
a
  • Implementado en un binding XBL - object no es del tipo SVGAElement.
  • Solo están implementados los atributos xlink:href y xlink:show
  • Sobre el atributo target vea bug 300868
Módulo visión
view
  • No implementado.
Módulo Script
script
  • Implementado.
Módulo Animación
animate
  • No implementado.
set
  • No implementado.
animateMotion
  • No implementado.
animateTransform
  • No implementado.
animateColor
  • No implementado.
mpath
  • No implementado.
Módulo Fuentes
font
  • No implementado.
font-face
  • No implementado.
glyph
  • No implementado.
missing-glyph
  • No implementado.
hkern
  • No implementado.
vkern
  • No implementado.
font-face-src
  • No implementado.
font-face-uri
  • No implementado.
font-face-format
  • No implementado.
font-face-name
  • No implementado.
definition-src
  • No implementado.
Módulo Extensibilidad
foreignObject
  • Implementado, but not built.
-{{ 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 ---- -

@namespace url(http://www.mozilla.org/keymaster/gat...re.is.only.xul); -

/* ----------Make toolbars Look ok on Classic---------- */ -

-
  1. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox { -
-
 -moz-appearance: toolbox !important;
- background-color: -moz-Dialog !important;
- border-top: 2px solid !important;
- -moz-border-top-colors: ThreeDShadow ThreeDHighlight !important;
-
-

} -

-
  1. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox toolbar { -
-
 -moz-appearance: toolbar !important;
- border-top: 2px solid !important;
- -moz-border-top-colors: ThreeDShadow ThreeDHighlight !important;
-
-

} -

-
  1. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar { -
-
 border: none !important;
-
-

} -

-
  1. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar, -
  2. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #PersonalToolbar { -
-
 -moz-opacity: 1 !important;
-
-

} -

-
  1. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar, -
  2. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar menubar, -
  3. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #nav-bar { -
-
 -moz-appearance: toolbar !important;
-
-

} -

-
  1. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox #toolbar-menubar { -
-
  background: none !important;
-
-

} -

-
  1. main-window:not(:-moz-system-metric(windows-default-theme)) #navigator-toolbox { -
-
  background-color: -moz-Dialog !important;
-
-

} -

/* ----------Fix Address Bar---------- */ -

-
  1. urlbar { -
-
 padding-left: 1px !important;
-
-

} -

/* code from kliu0x52 */ -

-
  1. urlbar:not(:-moz-system-metric(windows-default-theme)) { -
-
  -moz-appearance: TextField ! important;
-
-

} -

-
  1. urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) { -
-
  -moz-margin-start: 4px ! important;
-
-

} -

-
  1. urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) > #identity-box { -
-
  -moz-margin-start: 0px ! important;
-
-

} -

-
  1. urlbar{{ mediawiki.external('chromedir=\"ltr\"') }}:not(:-moz-system-metric(windows-default-theme)) > #identity-box > hbox { -
-
  border-left-style: none ! important;
-  padding-left: 2px ! important;
-  -moz-border-radius: 0px ! important;
-
-

} -

.searchbar-textbox:not(:-moz-system-metric(windows-default-theme)) { -

-
  -moz-appearance: TextField ! important;
-
-

} -/* end of code from kliu0x52 */ -

/* ----------Remove withe background from menubar---------- */ -

-
  1. toolbar-menubar { -
-
 background: none !important;
-
-

} -

-
  1. main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #file-menu, -
  2. main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #edit-menu, -
  3. main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #view-menu, -
  4. main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #history-menu, -
  5. main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #bookmarksMenu, -
  6. main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #tools-menu, -
  7. main-window{{ mediawiki.external('sizemode=\"maximized\"') }} #helpMenu { -
-
 color: #ffffff !important;
-
-

} -

/* ----------Make bookmarks toolbar blue---------- */ -

-
  1. PersonalToolbar:-moz-system-metric(windows-default-theme) { -
-
 -moz-appearance: communications-toolbox !important;
- padding: 2px 2px 3px 2px !important;
-
-

} -

-
  1. PersonalToolbar .toolbarbutton-text:-moz-system-metric(windows-default-theme) { -
-

color: #fff !important; -margin-bottom: 1px !important; -} -

toolbarbutton.bookmark-item:-moz-system-metric(windows-default-theme) { -padding: 2px 6px !important; -

-- cgit v1.2.3-54-g00ecf